sevago-library 1.2.4 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sevago-library
 
+## 1.3.0
+
+### Minor Changes
+
+- feat: add ColumnSettingsPopover component and update exports
+
 ## 1.2.4
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -74618,6 +74618,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__ */ jsxRuntime.jsx(
+    material.Popover,
+    {
+      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__ */ jsxRuntime.jsxs(material.Box, { sx: { backgroundColor: WHITE[50] }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          StackRowAlignCenter,
+          {
+            sx: {
+              justifyContent: "space-between",
+              padding: "12px 12px 10px 12px",
+              borderBottom: `1px solid ${NEUTRAL[200]}`
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textMd.semiBold }, children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: { padding: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StackAlignCenter,
+          {
+            sx: {
+              alignItems: "stretch",
+              gap: 0.5,
+              padding: "10px 8px",
+              maxHeight: 460,
+              overflowY: "auto"
+            },
+            children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              StackRowAlignCenter,
+              {
+                sx: {
+                  justifyContent: "space-between",
+                  gap: 1,
+                  padding: "8px 8px",
+                  borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+                  opacity: item.disabled ? 0.6 : 1
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenter, { sx: { gap: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "drag_indicator", sx: { color: NEUTRAL[400] } }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        sx: {
+                          ...TYPOGRAPHY.textSm.regular,
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        },
+                        children: item.label
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Checkbox,
+                    {
+                      checked: item.checked,
+                      disabled: item.disabled,
+                      onChange: (event) => onToggle(item.key, event.target.checked),
+                      sx: { padding: 0 }
+                    }
+                  )
+                ]
+              },
+              item.key
+            ))
+          }
+        )
+      ] })
+    }
+  );
+};
 const CollapsibleSection = React.forwardRef(
   ({ title, children, defaultExpanded = true, sx, titleSx, headerAction }, ref) => {
     const [expanded, setExpanded] = React.useState(defaultExpanded);
@@ -78680,6 +78780,7 @@ exports.COLOR = color_const;
 exports.CardStatisticsComponent = CardStatisticsComponent;
 exports.CheckboxElement = CheckboxElement;
 exports.CollapsibleSection = CollapsibleSection;
+exports.ColumnSettingsPopover = ColumnSettingsPopover;
 exports.DATE_OPERATOR_OPTIONS = DATE_OPERATOR_OPTIONS;
 exports.DATE_OPTIONS = DATE_OPTIONS;
 exports.DISABLED_DEFAULT = DISABLED_DEFAULT;