improve HiddenFields state ui

src/components/IconSlash.tsx

@@ -0,0 +1,41 @@
+import { styled } from "@mui/material";
+
+export const ICON_SLASH_STROKE_DASHOFFSET = 27.9;
+
+const StyledSvg = styled("svg")(({ theme }) => ({
+  stroke: "currentColor",
+  strokeWidth: 2,
+  position: "absolute",
+  inset: 0,
+
+  transition: theme.transitions.create("stroke-dashoffset", {
+    duration: theme.transitions.duration.short,
+  }),
+  strokeDasharray: ICON_SLASH_STROKE_DASHOFFSET,
+  strokeDashoffset: ICON_SLASH_STROKE_DASHOFFSET,
+
+  "& .icon-slash-mask": { stroke: theme.palette.background.default },
+}));
+
+export default function IconSlash(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <StyledSvg viewBox="0 0 24 24" className="icon-slash" {...props}>
+      <line
+        className="icon-slash-mask"
+        x1="3.08"
+        y1="1.04"
+        x2="22.8633788"
+        y2="20.7130253"
+      />
+      <line
+        className="icon-slash-mask"
+        x1="1.75"
+        y1="2.365"
+        x2="21.475"
+        y2="22.095"
+      />
+
+      <line x1="1.75" y1="2.365" x2="21.475" y2="22.095" />
+    </StyledSvg>
+  );
+}

src/components/Table/Column.tsx

@@ -100,7 +100,7 @@ export default function Column({
       </Grid>
 
       {secondaryItem && (
-        <Grid item sx={{ ml: 1 }}>
+        <Grid item sx={{ ml: 1, position: "relative" }}>
           {secondaryItem}
         </Grid>
       )}

src/components/Table/ColumnHeader/ColumnHeaderSort.tsx

@@ -2,6 +2,9 @@ import { useAtom } from "jotai";
 
 import { Tooltip, IconButton } from "@mui/material";
 import SortDescIcon from "@mui/icons-material/ArrowDownward";
+import IconSlash, {
+  ICON_SLASH_STROKE_DASHOFFSET,
+} from "@src/components/IconSlash";
 
 import { tableScope, tableOrdersAtom } from "@src/atoms/tableScope";
 import { FieldType } from "@src/constants/fields";
@@ -50,9 +53,6 @@ export default function ColumnHeaderSort({ column }: IColumnHeaderSortProps) {
         color="inherit"
         sx={{
           bgcolor: "background.default",
-          "& .slash-mask": {
-            stroke: (theme) => theme.palette.background.default,
-          },
           "&:hover": {
             backgroundColor: (theme) =>
               colord(theme.palette.background.default)
@@ -63,7 +63,7 @@ export default function ColumnHeaderSort({ column }: IColumnHeaderSortProps) {
                 .alpha(1)
                 .toHslString(),
 
-            "& .slash-mask": {
+            "& .icon-slash-mask": {
               stroke: (theme) =>
                 colord(theme.palette.background.default)
                   .mix(
@@ -99,41 +99,18 @@ export default function ColumnHeaderSort({ column }: IColumnHeaderSortProps) {
                 : "none",
           },
 
-          "& .slash": {
-            transition: (theme) =>
-              theme.transitions.create("stroke-dashoffset", {
-                duration: theme.transitions.duration.short,
-              }),
-            strokeDasharray: 27.9,
-            strokeDashoffset: currentSort === "none" ? 0 : 27.9,
+          "& .icon-slash": {
+            strokeDashoffset:
+              currentSort === "none" ? 0 : ICON_SLASH_STROKE_DASHOFFSET,
           },
-          "&:hover .slash": {
-            strokeDashoffset: nextSort === "none" ? 0 : 27.9,
+          "&:hover .icon-slash": {
+            strokeDashoffset:
+              nextSort === "none" ? 0 : ICON_SLASH_STROKE_DASHOFFSET,
           },
         }}
       >
         <SortDescIcon className="arrow" />
-
-        <svg
-          viewBox="0 0 24 24"
-          style={{
-            stroke: "currentColor",
-            strokeWidth: 2,
-            position: "absolute",
-            inset: (32 - 24) / 2,
-          }}
-          className="slash"
-        >
-          <line
-            className="slash-mask"
-            x1="3.08"
-            y1="1.04"
-            x2="22.8633788"
-            y2="20.7130253"
-          />
-
-          <line x1="1.75" y1="2.365" x2="21.475" y2="22.095" />
-        </svg>
+        <IconSlash />
       </IconButton>
     </Tooltip>
   );

src/components/TableToolbar/HiddenFields.tsx

@@ -3,7 +3,11 @@ import { useAtom } from "jotai";
 import { isEqual } from "lodash-es";
 
 import { AutocompleteProps } from "@mui/material";
+import VisibilityIcon from "@mui/icons-material/VisibilityOutlined";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
+import IconSlash, {
+  ICON_SLASH_STROKE_DASHOFFSET,
+} from "@src/components/IconSlash";
 
 import MultiSelect from "@rowy/multiselect";
 import ButtonWithStatus from "@src/components/ButtonWithStatus";
@@ -72,8 +76,16 @@ export default function HiddenFields() {
       <Column
         label={option.label}
         type={tableSchema.columns?.[option.value]?.type}
-        secondaryItem={<VisibilityOffIcon className="hiddenIcon" />}
-        active={selected}
+        secondaryItem={
+          <div
+            className="icon-container"
+            style={selected ? { opacity: 1 } : {}}
+          >
+            <VisibilityIcon />
+            <IconSlash style={selected ? { strokeDashoffset: 0 } : {}} />
+          </div>
+        }
+        // active={selected}
       />
     </li>
   );
@@ -106,10 +118,9 @@ export default function HiddenFields() {
                   marginBottom: "-1px",
 
                   "&::after": { content: "none" },
+                  "& .icon-container": { opacity: 0 },
 
                   "&:hover, &.Mui-focused, &.Mui-focusVisible": {
-                    backgroundColor: "transparent",
-
                     position: "relative",
                     zIndex: 2,
 
@@ -119,18 +130,16 @@ export default function HiddenFields() {
                       boxShadow: (theme: any) =>
                         `0 0 0 1px ${theme.palette.text.primary} inset`,
                     },
-                    "& .hiddenIcon": { opacity: 0.5 },
+                    "& .icon-container": { opacity: 0.5 },
                   },
 
-                  '&[aria-selected="true"], &[aria-selected="true"].Mui-focused, &[aria-selected="true"].Mui-focusVisible':
-                    {
-                      backgroundColor: "transparent",
-
-                      position: "relative",
-                      zIndex: 1,
-
-                      "& .hiddenIcon": { opacity: 1 },
+                  "&:hover .icon-slash": { strokeDashoffset: 0 },
+                  '&[aria-selected="true"]:hover': {
+                    "& .icon-slash": {
+                      strokeDashoffset:
+                        ICON_SLASH_STROKE_DASHOFFSET + " !important",
                     },
+                  },
                 },
               },
             },

src/components/TableToolbar/LoadedRowsStatus.tsx

@@ -7,7 +7,6 @@ import {
   tableScope,
   tableRowsAtom,
   tableNextPageAtom,
-  tablePageAtom,
 } from "@src/atoms/tableScope";
 
 const StatusText = forwardRef(function StatusText(
@@ -29,7 +28,6 @@ const StatusText = forwardRef(function StatusText(
 function LoadedRowsStatus() {
   const [tableRows] = useAtom(tableRowsAtom, tableScope);
   const [tableNextPage] = useAtom(tableNextPageAtom, tableScope);
-  const [tablePage] = useAtom(tablePageAtom, tableScope);
 
   if (tableNextPage.loading) return <StatusText>Loading more…</StatusText>;
 
@@ -40,6 +38,7 @@ function LoadedRowsStatus() {
           ? "Scroll to the bottom to load more rows"
           : "All rows have been loaded in this table"
       }
+      describeChild
     >
       <StatusText>
         Loaded {!tableNextPage.available && "all "}