sevago-library 1.2.4 → 1.3.0

package/dist/index.esm.js

@@ -74600,6 +74600,106 @@ const CheckboxElement = ({ label, name, size = "small", sx, ...rest }) => {
     }
   );
 };
+const ColumnSettingsPopover = ({
+  open: open2,
+  anchorEl,
+  title = "Tùy chỉnh trường",
+  items,
+  onClose,
+  onToggle
+}) => {
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      open: open2,
+      anchorEl,
+      onClose,
+      disableScrollLock: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      slotProps: {
+        paper: {
+          sx: {
+            mt: "8px",
+            minWidth: 320,
+            maxHeight: 520,
+            borderRadius: BORDER_RADIUS_ELEMENT_MIDDLE,
+            border: `1px solid ${NEUTRAL[200]}`,
+            boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.1)",
+            overflow: "hidden"
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsxs(Box, { sx: { backgroundColor: WHITE[50] }, children: [
+        /* @__PURE__ */ jsxs(
+          StackRowAlignCenter,
+          {
+            sx: {
+              justifyContent: "space-between",
+              padding: "12px 12px 10px 12px",
+              borderBottom: `1px solid ${NEUTRAL[200]}`
+            },
+            children: [
+              /* @__PURE__ */ jsx(Typography$1, { sx: { ...TYPOGRAPHY.textMd.semiBold }, children: title }),
+              /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, sx: { padding: 0.5 }, children: /* @__PURE__ */ jsx(IconElement, { icon: "close" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StackAlignCenter,
+          {
+            sx: {
+              alignItems: "stretch",
+              gap: 0.5,
+              padding: "10px 8px",
+              maxHeight: 460,
+              overflowY: "auto"
+            },
+            children: items.map((item) => /* @__PURE__ */ jsxs(
+              StackRowAlignCenter,
+              {
+                sx: {
+                  justifyContent: "space-between",
+                  gap: 1,
+                  padding: "8px 8px",
+                  borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+                  opacity: item.disabled ? 0.6 : 1
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(StackRowAlignCenter, { sx: { gap: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsx(IconElement, { icon: "drag_indicator", sx: { color: NEUTRAL[400] } }),
+                    /* @__PURE__ */ jsx(
+                      Typography$1,
+                      {
+                        sx: {
+                          ...TYPOGRAPHY.textSm.regular,
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        },
+                        children: item.label
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: item.checked,
+                      disabled: item.disabled,
+                      onChange: (event) => onToggle(item.key, event.target.checked),
+                      sx: { padding: 0 }
+                    }
+                  )
+                ]
+              },
+              item.key
+            ))
+          }
+        )
+      ] })
+    }
+  );
+};
 const CollapsibleSection = forwardRef(
   ({ title, children, defaultExpanded = true, sx, titleSx, headerAction }, ref) => {
     const [expanded, setExpanded] = useState(defaultExpanded);
@@ -78663,6 +78763,7 @@ export {
   CardStatisticsComponent,
   CheckboxElement,
   CollapsibleSection,
+  ColumnSettingsPopover,
   DATE_OPERATOR_OPTIONS,
   DATE_OPTIONS,
   DISABLED_DEFAULT,