@xanui/ui 1.1.27 → 1.1.29

package/DataFilter/options/NumberRangeFilter.js

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.js');
+var index = require('../../Stack/index.js');
+var index$1 = require('../../Text/index.js');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../InputNumber/index.js');
+
+const NumberRangeFilter = ({ option, onChange, value }) => {
+    var _a, _b;
+    const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+                                    onChange([0, 0]);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, flex: 1, children: [jsxRuntime.jsx(index$3, { flex: 1, variant: "outline", size: "small", placeholder: "Min", value: (_a = value[0]) !== null && _a !== void 0 ? _a : '', onChange: (e) => {
+                                const val = e.target.value === '' ? 0 : Number(e.target.value);
+                                onChange([val, value ? value[1] : 0]);
+                            } }), jsxRuntime.jsx(index$3, { variant: "outline", flex: 1, size: "small", placeholder: "Max", value: (_b = value[1]) !== null && _b !== void 0 ? _b : undefined, onChange: (e) => {
+                                const val = e.target.value === '' ? 0 : Number(e.target.value);
+                                onChange([value ? value[0] : 0, val]);
+                            } })] }) })] }));
+};
+
+module.exports = NumberRangeFilter;
+//# sourceMappingURL=NumberRangeFilter.js.map

package/DataFilter/options/NumberRangeFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRangeFilter.js","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}

package/DataFilter/options/NumberRangeFilter.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import IconButton from '../../IconButton/index.mjs';
+import Stack from '../../Stack/index.mjs';
+import Text from '../../Text/index.mjs';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import InputNumber from '../../InputNumber/index.mjs';
+
+const NumberRangeFilter = ({ option, onChange, value }) => {
+    var _a, _b;
+    const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;
+    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: () => {
+                                    onChange([0, 0]);
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxs(Stack, { direction: "row", gap: 0.5, flex: 1, children: [jsx(InputNumber, { flex: 1, variant: "outline", size: "small", placeholder: "Min", value: (_a = value[0]) !== null && _a !== void 0 ? _a : '', onChange: (e) => {
+                                const val = e.target.value === '' ? 0 : Number(e.target.value);
+                                onChange([val, value ? value[1] : 0]);
+                            } }), jsx(InputNumber, { variant: "outline", flex: 1, size: "small", placeholder: "Max", value: (_b = value[1]) !== null && _b !== void 0 ? _b : undefined, onChange: (e) => {
+                                const val = e.target.value === '' ? 0 : Number(e.target.value);
+                                onChange([value ? value[0] : 0, val]);
+                            } })] }) })] }));
+};
+
+export { NumberRangeFilter as default };
+//# sourceMappingURL=NumberRangeFilter.mjs.map

package/DataFilter/options/NumberRangeFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRangeFilter.mjs","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}

package/DataFilter/options/SelectFilter.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataFilterSelect } from '../types.js';
+
+type Props = {
+    option: DataFilterSelect;
+    value: string | null;
+    onChange: (value: string | null) => void;
+};
+declare const SelectFilter: ({ option, onChange, value }: Props) => react_jsx_runtime.JSX.Element;
+
+export { SelectFilter as default };

package/DataFilter/options/SelectFilter.js

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$4 = require('../../Menu/index.js');
+var index$5 = require('../../List/index.js');
+var index$6 = require('../../ListItem/index.js');
+var index$7 = require('../../Checkbox/index.js');
+var index$2 = require('../../IconButton/index.js');
+var index = require('../../Stack/index.js');
+var index$1 = require('../../Text/index.js');
+var Close = require('@xanui/icons/Close');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Chip/index.js');
+
+const SelectFilter = ({ option, onChange, value }) => {
+    var _a;
+    const ref = React.useRef(null);
+    const [target, setTarget] = React.useState();
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsxRuntime.jsx(Add, {}) }), !!value && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsxRuntime.jsx(index$3, { size: "small", color: "default", label: value, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
+                            onChange(null);
+                        }, children: jsxRuntime.jsx(Close, {}) }) }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsxRuntime.jsx(index$6, { startIcon: jsxRuntime.jsx(index$7, { checked: value === opt.value }), onClick: () => {
+                            onChange(opt.value);
+                        }, children: opt.label }, index))) }) })] }));
+};
+
+module.exports = SelectFilter;
+//# sourceMappingURL=SelectFilter.js.map

package/DataFilter/options/SelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFilter.js","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}

package/DataFilter/options/SelectFilter.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Menu from '../../Menu/index.mjs';
+import List from '../../List/index.mjs';
+import ListItem from '../../ListItem/index.mjs';
+import Checkbox from '../../Checkbox/index.mjs';
+import IconButton from '../../IconButton/index.mjs';
+import Stack from '../../Stack/index.mjs';
+import Text from '../../Text/index.mjs';
+import Close from '@xanui/icons/Close';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import Chip from '../../Chip/index.mjs';
+
+const SelectFilter = ({ option, onChange, value }) => {
+    var _a;
+    const ref = React.useRef(null);
+    const [target, setTarget] = React.useState();
+    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsx(Add, {}) }), !!value && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsx(Chip, { size: "small", color: "default", label: value, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "default", onClick: () => {
+                            onChange(null);
+                        }, children: jsx(Close, {}) }) }) }), jsx(Menu, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsx(List, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsx(ListItem, { startIcon: jsx(Checkbox, { checked: value === opt.value }), onClick: () => {
+                            onChange(opt.value);
+                        }, children: opt.label }, index))) }) })] }));
+};
+
+export { SelectFilter as default };
+//# sourceMappingURL=SelectFilter.mjs.map

package/DataFilter/options/SelectFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFilter.mjs","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}

package/DataFilter/options/TextFilter.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataFilterSelect } from '../types.js';
+
+type Props = {
+    option: DataFilterSelect;
+    value: string | null;
+    onChange: (value: string | null) => void;
+};
+declare const TextFilter: ({ option, onChange, value }: Props) => react_jsx_runtime.JSX.Element;
+
+export { TextFilter as default };

package/DataFilter/options/TextFilter.js

@@ -0,0 +1,24 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.js');
+var index = require('../../Stack/index.js');
+var index$1 = require('../../Text/index.js');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Input/index.js');
+
+const TextFilter = ({ option, onChange, value }) => {
+    const isValue = value !== null && value !== undefined;
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+                                    onChange('');
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { variant: "outline", value: value.toString(), onChange: (e) => {
+                        onChange(e.target.value);
+                    }, fullWidth: true }) })] }));
+};
+
+module.exports = TextFilter;
+//# sourceMappingURL=TextFilter.js.map

package/DataFilter/options/TextFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFilter.js","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/TextFilter.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import IconButton from '../../IconButton/index.mjs';
+import Stack from '../../Stack/index.mjs';
+import Text from '../../Text/index.mjs';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import Input from '../../Input/index.mjs';
+
+const TextFilter = ({ option, onChange, value }) => {
+    const isValue = value !== null && value !== undefined;
+    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: () => {
+                                    onChange('');
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(Input, { variant: "outline", value: value.toString(), onChange: (e) => {
+                        onChange(e.target.value);
+                    }, fullWidth: true }) })] }));
+};
+
+export { TextFilter as default };
+//# sourceMappingURL=TextFilter.mjs.map

package/DataFilter/options/TextFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFilter.mjs","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/types.d.ts

@@ -0,0 +1,58 @@
+import { TagProps } from '@xanui/core';
+
+type DataFilterText = {
+    type: "text";
+    key: string;
+    label: string;
+};
+type DataFilterNumber = {
+    type: "number";
+    key: string;
+    label: string;
+};
+type DataFilterNumberRange = {
+    type: "number-range";
+    key: string;
+    label: string;
+};
+type DataFilterSelect = {
+    type: "select";
+    key: string;
+    label: string;
+    options: ({
+        label: string;
+        value: string;
+    })[];
+};
+type DataFilterMultiSelect = {
+    type: "multi-select";
+    key: string;
+    label: string;
+    options: ({
+        label: string;
+        value: string;
+    })[];
+};
+type DataFilterDate = {
+    type: "date";
+    key: string;
+    label: string;
+};
+type DataFilterDateRange = {
+    type: "date-range";
+    key: string;
+    label: string;
+};
+type DataFilterOption = DataFilterText | DataFilterNumber | DataFilterNumberRange | DataFilterSelect | DataFilterMultiSelect | DataFilterDate | DataFilterDateRange;
+type DataFilterProps = Omit<TagProps, "children" | "value"> & {
+    options: DataFilterOption[];
+    value?: {
+        [key: string]: any;
+    };
+    onChange?: (state: {
+        [key: string]: any;
+    }) => void;
+    inline?: boolean;
+};
+
+export type { DataFilterDate, DataFilterDateRange, DataFilterMultiSelect, DataFilterNumber, DataFilterNumberRange, DataFilterOption, DataFilterProps, DataFilterSelect, DataFilterText };

package/Datatable/FilterBox.js

@@ -5,26 +5,34 @@ var jsxRuntime = require('react/jsx-runtime');
 var index = require('../Stack/index.js');
 var index$1 = require('../Tabs/index.js');
 var index$2 = require('../Tab/index.js');
-var index$3 = require('../Select/index.js');
-var index$4 = require('../Option/index.js');
-var index$5 = require('../Input/index.js');
+var index$3 = require('../Input/index.js');
 var IconSearch = require('@xanui/icons/Search');
+var index$4 = require('../IconButton/index.js');
+var FilterListOutlined = require('@xanui/icons/FilterListOutlined');
+var index$5 = require('../Drawer/index.js');
+var index$8 = require('../Text/index.js');
+var React = require('react');
+var CloseOutlined = require('@xanui/icons/CloseOutlined');
+var index$6 = require('../ViewBox/index.js');
+var index$7 = require('../DataFilter/index.js');
 
 const FilterBox = (props) => {
-    let { tabs, filters, hideSearch, slotProps, state, update, } = props;
+    let { tabs, filters, hideSearch, slotProps, skeleton, state, update, } = props;
+    const [openFilter, setOpenFilter] = React.useState(false);
     let checked = state.selectAll || !!state.selected.length;
     if (checked)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", children: [jsxRuntime.jsx(index, { gap: 2.4, flexRow: true, children: tabs && jsxRuntime.jsx(index$1, { onChange: (value) => {
+    return (jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", children: [jsxRuntime.jsx(index, { gap: 2.4, flexRow: true, children: tabs && jsxRuntime.jsx(index$1, { disabled: skeleton ? true : false, onChange: (value) => {
                         update({ tab: value });
-                    }, value: state.tab, children: tabs.map(t => jsxRuntime.jsx(index$2, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxRuntime.jsx(index, { className: 'datatable-header-filter-area', flex: 1, flexRow: true, children: filters && jsxRuntime.jsx(index, { flexRow: true, gap: 2, px: 2, children: Object.keys(filters).map(name => {
-                        const items = filters[name];
-                        return (jsxRuntime.jsx(index$3, { placeholder: name.charAt(0).toUpperCase() + name.slice(1), value: state[name] || "", onChange: (value) => {
-                                update({ [name]: value });
-                            }, children: items.map((item) => jsxRuntime.jsx(index$4, { value: item.value, children: item.label }, name + item.value)) }, name));
-                    }) }) }), jsxRuntime.jsx(index, { flexRow: true, gap: 2, className: 'datatable-header-right-area', children: !hideSearch && jsxRuntime.jsx(index$5, Object.assign({ endIcon: jsxRuntime.jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
-                        update({ search: e.target.value });
-                    } })) })] }));
+                    }, value: state.tab, children: tabs.map(t => jsxRuntime.jsx(index$2, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxRuntime.jsxs(index, { flexRow: true, gap: 2, className: 'datatable-header-right-area', alignItems: "center", children: [!hideSearch && jsxRuntime.jsx(index$3, Object.assign({ disabled: skeleton ? true : false, endIcon: jsxRuntime.jsx(IconSearch, {}), placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
+                            update({ search: e.target.value });
+                        } })), filters && jsxRuntime.jsxs(index, { children: [jsxRuntime.jsx(index$4, { color: "default", variant: "text", onClick: () => {
+                                    setOpenFilter(true);
+                                }, children: jsxRuntime.jsx(FilterListOutlined, {}) }), jsxRuntime.jsx(index$5, { open: openFilter, onClickOutside: () => { }, placement: "right", children: jsxRuntime.jsx(index$6, { height: "100%", p: 1, startContent: jsxRuntime.jsxs(index, { mb: 2, px: 2, flexRow: true, justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsx(index$8, { fontWeight: 600, fontSize: "h6", children: "Filters" }), jsxRuntime.jsx(index$4, { size: "small", color: "default", variant: "text", onClick: () => {
+                                                    setOpenFilter(false);
+                                                }, children: jsxRuntime.jsx(CloseOutlined, {}) })] }), children: jsxRuntime.jsx(index, { gap: 2, children: jsxRuntime.jsx(index$7.default, { options: filters, value: state.filters, onChange: (s) => {
+                                                update({ filters: s });
+                                            } }) }) }) })] })] })] }));
 };
 
 module.exports = FilterBox;

package/Datatable/FilterBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Select from '../Select'\nimport Option from '../Option'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatableFilter, DatatablePropsWithState } from './types';\n\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      state,\n      update,\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack className='datatable-header-filter-area' flex={1} flexRow>\n            {\n               filters && <Stack flexRow gap={2} px={2}>\n                  {\n                     Object.keys(filters).map(name => {\n                        const items: DatatableFilter[] = (filters as any)[name]\n                        return (\n                           <Select\n                              key={name}\n                              placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\n                              value={(state as any)[name] || \"\"}\n                              onChange={(value) => {\n                                 update({ [name]: value } as any)\n                              }}\n                           >\n                              {\n                                 items.map((item) => <Option key={name + item.value} value={item.value}>\n                                    {item.label}\n                                 </Option>)\n                              }\n                           </Select>\n                        )\n                     })\n                  }\n               </Stack>\n            }\n         </Stack>\n         <Stack flexRow gap={2} className='datatable-header-right-area'>\n            {!hideSearch && <Input\n               endIcon={<IconSearch />}\n               p={1}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;AAWA;AACG;AASA;AAEA;AAAa;;AAiBK;AACH;AAcM;AACA;;AAOM;;;AAuBf;AAKf;;"}
+{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatablePropsWithState } from './types';\nimport IconButton from '../IconButton';\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\nimport Drawer from '../Drawer';\nimport Text from '../Text';\nimport React from 'react';\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\nimport ViewBox from '../ViewBox';\nimport DataFilter from '../DataFilter';\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      skeleton,\n      state,\n      update,\n   } = props\n   const [openFilter, setOpenFilter] = React.useState(false)\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  disabled={skeleton ? true : false}\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack\n            flexRow\n            gap={2}\n            className='datatable-header-right-area'\n            alignItems={\"center\"}\n         >\n            {!hideSearch && <Input\n               disabled={skeleton ? true : false}\n               endIcon={<IconSearch />}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n            {\n               filters && <Stack>\n                  <IconButton\n                     color=\"default\"\n                     variant={\"text\"}\n                     onClick={() => {\n                        setOpenFilter(true)\n                     }}\n                  >\n                     <FilterListOutlined />\n                  </IconButton>\n                  <Drawer\n                     open={openFilter}\n                     onClickOutside={() => { }}\n                     placement={\"right\"}\n                  >\n                     <ViewBox\n                        height=\"100%\"\n                        p={1}\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\n                           <IconButton\n                              size=\"small\"\n                              color=\"default\"\n                              variant=\"text\"\n                              onClick={() => {\n                                 setOpenFilter(false)\n                              }}\n                           >\n                              <CloseOutlined />\n                           </IconButton>\n                        </Stack>}\n                     >\n                        <Stack\n                           gap={2}\n                        >\n                           <DataFilter\n                              options={filters}\n                              value={state.filters}\n                              onChange={(s) => {\n                                 update({ filters: s })\n                              }}\n                           />\n                        </Stack>\n                     </ViewBox>\n                  </Drawer>\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}

package/Datatable/FilterBox.mjs

@@ -3,26 +3,34 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Stack from '../Stack/index.mjs';
 import Tabs from '../Tabs/index.mjs';
 import Tab from '../Tab/index.mjs';
-import Select from '../Select/index.mjs';
-import Option from '../Option/index.mjs';
 import Input from '../Input/index.mjs';
 import IconSearch from '@xanui/icons/Search';
+import IconButton from '../IconButton/index.mjs';
+import FilterListOutlined from '@xanui/icons/FilterListOutlined';
+import Drawer from '../Drawer/index.mjs';
+import Text from '../Text/index.mjs';
+import React from 'react';
+import CloseOutlined from '@xanui/icons/CloseOutlined';
+import ViewBox from '../ViewBox/index.mjs';
+import DataFilter from '../DataFilter/index.mjs';
 
 const FilterBox = (props) => {
-    let { tabs, filters, hideSearch, slotProps, state, update, } = props;
+    let { tabs, filters, hideSearch, slotProps, skeleton, state, update, } = props;
+    const [openFilter, setOpenFilter] = React.useState(false);
     let checked = state.selectAll || !!state.selected.length;
     if (checked)
         return jsx(Fragment, {});
-    return (jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", children: [jsx(Stack, { gap: 2.4, flexRow: true, children: tabs && jsx(Tabs, { onChange: (value) => {
+    return (jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", children: [jsx(Stack, { gap: 2.4, flexRow: true, children: tabs && jsx(Tabs, { disabled: skeleton ? true : false, onChange: (value) => {
                         update({ tab: value });
-                    }, value: state.tab, children: tabs.map(t => jsx(Tab, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsx(Stack, { className: 'datatable-header-filter-area', flex: 1, flexRow: true, children: filters && jsx(Stack, { flexRow: true, gap: 2, px: 2, children: Object.keys(filters).map(name => {
-                        const items = filters[name];
-                        return (jsx(Select, { placeholder: name.charAt(0).toUpperCase() + name.slice(1), value: state[name] || "", onChange: (value) => {
-                                update({ [name]: value });
-                            }, children: items.map((item) => jsx(Option, { value: item.value, children: item.label }, name + item.value)) }, name));
-                    }) }) }), jsx(Stack, { flexRow: true, gap: 2, className: 'datatable-header-right-area', children: !hideSearch && jsx(Input, Object.assign({ endIcon: jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
-                        update({ search: e.target.value });
-                    } })) })] }));
+                    }, value: state.tab, children: tabs.map(t => jsx(Tab, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxs(Stack, { flexRow: true, gap: 2, className: 'datatable-header-right-area', alignItems: "center", children: [!hideSearch && jsx(Input, Object.assign({ disabled: skeleton ? true : false, endIcon: jsx(IconSearch, {}), placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
+                            update({ search: e.target.value });
+                        } })), filters && jsxs(Stack, { children: [jsx(IconButton, { color: "default", variant: "text", onClick: () => {
+                                    setOpenFilter(true);
+                                }, children: jsx(FilterListOutlined, {}) }), jsx(Drawer, { open: openFilter, onClickOutside: () => { }, placement: "right", children: jsx(ViewBox, { height: "100%", p: 1, startContent: jsxs(Stack, { mb: 2, px: 2, flexRow: true, justifyContent: "space-between", alignItems: "center", children: [jsx(Text, { fontWeight: 600, fontSize: "h6", children: "Filters" }), jsx(IconButton, { size: "small", color: "default", variant: "text", onClick: () => {
+                                                    setOpenFilter(false);
+                                                }, children: jsx(CloseOutlined, {}) })] }), children: jsx(Stack, { gap: 2, children: jsx(DataFilter, { options: filters, value: state.filters, onChange: (s) => {
+                                                update({ filters: s });
+                                            } }) }) }) })] })] })] }));
 };
 
 export { FilterBox as default };

package/Datatable/FilterBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBox.mjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Select from '../Select'\nimport Option from '../Option'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatableFilter, DatatablePropsWithState } from './types';\n\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      state,\n      update,\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack className='datatable-header-filter-area' flex={1} flexRow>\n            {\n               filters && <Stack flexRow gap={2} px={2}>\n                  {\n                     Object.keys(filters).map(name => {\n                        const items: DatatableFilter[] = (filters as any)[name]\n                        return (\n                           <Select\n                              key={name}\n                              placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\n                              value={(state as any)[name] || \"\"}\n                              onChange={(value) => {\n                                 update({ [name]: value } as any)\n                              }}\n                           >\n                              {\n                                 items.map((item) => <Option key={name + item.value} value={item.value}>\n                                    {item.label}\n                                 </Option>)\n                              }\n                           </Select>\n                        )\n                     })\n                  }\n               </Stack>\n            }\n         </Stack>\n         <Stack flexRow gap={2} className='datatable-header-right-area'>\n            {!hideSearch && <Input\n               endIcon={<IconSearch />}\n               p={1}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;AAWA;AACG;AASA;AAEA;AAAa;;AAiBK;AACH;AAcM;AACA;;AAOM;;;AAuBf;AAKf;;"}
+{"version":3,"file":"FilterBox.mjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatablePropsWithState } from './types';\nimport IconButton from '../IconButton';\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\nimport Drawer from '../Drawer';\nimport Text from '../Text';\nimport React from 'react';\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\nimport ViewBox from '../ViewBox';\nimport DataFilter from '../DataFilter';\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      skeleton,\n      state,\n      update,\n   } = props\n   const [openFilter, setOpenFilter] = React.useState(false)\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  disabled={skeleton ? true : false}\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack\n            flexRow\n            gap={2}\n            className='datatable-header-right-area'\n            alignItems={\"center\"}\n         >\n            {!hideSearch && <Input\n               disabled={skeleton ? true : false}\n               endIcon={<IconSearch />}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n            {\n               filters && <Stack>\n                  <IconButton\n                     color=\"default\"\n                     variant={\"text\"}\n                     onClick={() => {\n                        setOpenFilter(true)\n                     }}\n                  >\n                     <FilterListOutlined />\n                  </IconButton>\n                  <Drawer\n                     open={openFilter}\n                     onClickOutside={() => { }}\n                     placement={\"right\"}\n                  >\n                     <ViewBox\n                        height=\"100%\"\n                        p={1}\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\n                           <IconButton\n                              size=\"small\"\n                              color=\"default\"\n                              variant=\"text\"\n                              onClick={() => {\n                                 setOpenFilter(false)\n                              }}\n                           >\n                              <CloseOutlined />\n                           </IconButton>\n                        </Stack>}\n                     >\n                        <Stack\n                           gap={2}\n                        >\n                           <DataFilter\n                              options={filters}\n                              value={state.filters}\n                              onChange={(s) => {\n                                 update({ filters: s })\n                              }}\n                           />\n                        </Stack>\n                     </ViewBox>\n                  </Drawer>\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}

package/Datatable/Row.js

@@ -13,12 +13,13 @@ var index$6 = require('../ListItem/index.js');
 var ActionIcon = require('@xanui/icons/MoreVert');
 var index$4 = require('../Menu/index.js');
 
-const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, state, update }) => {
+const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }) => {
+    var _a;
     const selected = row.id ? state.selected.includes(row === null || row === void 0 ? void 0 : row.id) : false;
     let selectedColor = selected ? "primary.soft" : "transparent";
     const [target, setTarget] = React.useState();
     const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false;
-    return (jsxRuntime.jsxs(index, { disabled: isDisable, children: [!hideCheckbox && jsxRuntime.jsx(index$1, { width: 40, bgcolor: selectedColor, children: !!row.id && jsxRuntime.jsx(index$2, { checked: selected, onChange: () => {
+    return (jsxRuntime.jsxs(index, { children: [!hideCheckbox && jsxRuntime.jsx(index$1, { width: 40, bgcolor: selectedColor, children: !!row.id && jsxRuntime.jsx(index$2, { size: compact ? "small" : "medium", checked: selected, onChange: () => {
                         if (isDisable || !row.id)
                             return;
                         let ids = [...state.selected];
@@ -39,19 +40,19 @@ const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns,
                 if (!row[field])
                     return jsxRuntime.jsx(index$1, {}, idx);
                 return (jsxRuntime.jsx(index$1, Object.assign({ textAlign: "left" }, rest, { bgcolor: selectedColor, children: row[field] }), idx));
-            }), jsxRuntime.jsx(index$1, { width: 30, bgcolor: selectedColor, borderColor: "divider", children: rowAction && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$3, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default", children: jsxRuntime.jsx(ActionIcon, {}) }), jsxRuntime.jsx(index$4, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, { bgcolor: "background.primary", minWidth: 160, sx: {
-                                    '& > li': {
-                                        borderBottom: 1,
-                                        '&:last-child': {
-                                            borderBottom: 0
-                                        }
+            }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxRuntime.jsxs(index$1, { width: 30, bgcolor: selectedColor, borderColor: "divider", children: [jsxRuntime.jsx(index$3, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default", children: jsxRuntime.jsx(ActionIcon, {}) }), jsxRuntime.jsx(index$4, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, { bgcolor: "background.primary", minWidth: 160, sx: {
+                                '& > li': {
+                                    borderBottom: 1,
+                                    '&:last-child': {
+                                        borderBottom: 0
                                     }
-                                }, children: rowAction({ row, state }).map(({ label, icon, onClick }) => {
-                                    return (jsxRuntime.jsx(index$6, { startIcon: icon, onClick: (e) => {
-                                            onClick && onClick(e);
-                                            setTarget(null);
-                                        }, children: label }, label));
-                                }) }) })] }) })] }));
+                                }
+                            }, children: rowAction({ row, state }).map(({ label, icon, onClick }) => {
+                                return (jsxRuntime.jsx(index$6, { startIcon: icon, onClick: (e) => {
+                                        onClick && onClick(e);
+                                        setTarget(null);
+                                    }, children: label }, label));
+                            }) }) })] })] }));
 };
 
 module.exports = Row;

package/Datatable/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from 'react'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IconButton from '../IconButton'\nimport List from '../List'\nimport ListItem from '../ListItem'\nimport ActionIcon from '@xanui/icons/MoreVert'\nimport Menu from '../Menu'\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\n\n\ntype Props = DatatablePropsWithState & {\n    rawRow: DataTableDefaultRow;\n    row: DataTableDefaultRow;\n}\n\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, state, update }: Props) => {\n    const selected = row.id ? state.selected.includes(row?.id) : false\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\n    const [target, setTarget] = useState<any>()\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\n\n    return (\n        <TableRow disabled={isDisable}>\n            {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\n                {\n                    !!row.id && <Checkbox\n                        checked={selected}\n                        onChange={() => {\n                            if (isDisable || !row.id) return\n                            let ids = [...state.selected]\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\n                            let selectedLength = 0\n                            rows.forEach(r => {\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\n                                if (!isDisable) selectedLength++\n                            })\n\n                            update({\n                                selectAll: selectedLength === ids.length,\n                                selected: ids\n                            })\n                        }}\n                    />\n                }\n\n            </TableCell>}\n            {\n                columns.map(({ label, field, sortable, ...rest }, idx) => {\n                    field = field || label\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\n                    return (\n                        <TableCell\n                            key={idx}\n                            textAlign=\"left\"\n                            {...rest}\n                            bgcolor={selectedColor}\n                        >\n                            {row[field]}\n                        </TableCell>\n                    )\n                })\n            }\n            <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\n                {rowAction && <>\n                    <IconButton\n                        disabled={isDisable || selected}\n                        onClick={(e: any) => setTarget(e.currentTarget)}\n                        variant=\"text\"\n                        color=\"default\"\n                    >\n                        <ActionIcon />\n                    </IconButton>\n                    <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\n                        <List\n                            bgcolor=\"background.primary\"\n                            minWidth={160}\n                            sx={{\n                                '& > li': {\n                                    borderBottom: 1,\n                                    '&:last-child': {\n                                        borderBottom: 0\n                                    }\n                                }\n                            }}\n                        >\n                            {rowAction({ row, state }).map(({ label, icon, onClick }) => {\n                                return (\n                                    <ListItem\n                                        key={label}\n                                        startIcon={icon}\n                                        onClick={(e: any) => {\n                                            onClick && onClick(e)\n                                            setTarget(null)\n                                        }}\n                                    >{label}</ListItem>\n                                )\n                            })}\n                        </List>\n                    </Menu>\n                </>}\n            </TableCell>\n        </TableRow>\n    )\n}\n\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA;;;;;AAMI;AAOwB;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;AAWrB;AAiBgB;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAO5B;;"}
+{"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from 'react'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IconButton from '../IconButton'\nimport List from '../List'\nimport ListItem from '../ListItem'\nimport ActionIcon from '@xanui/icons/MoreVert'\nimport Menu from '../Menu'\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\n\n\ntype Props = DatatablePropsWithState & {\n    rawRow: DataTableDefaultRow;\n    row: DataTableDefaultRow;\n}\n\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\n    const selected = row.id ? state.selected.includes(row?.id) : false\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\n    const [target, setTarget] = useState<any>()\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\n\n    return (\n        <TableRow >\n            {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\n                {\n                    !!row.id && <Checkbox\n                        size={compact ? \"small\" : \"medium\"}\n                        checked={selected}\n                        onChange={() => {\n                            if (isDisable || !row.id) return\n                            let ids = [...state.selected]\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\n                            let selectedLength = 0\n                            rows.forEach(r => {\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\n                                if (!isDisable) selectedLength++\n                            })\n\n                            update({\n                                selectAll: selectedLength === ids.length,\n                                selected: ids\n                            })\n                        }}\n                    />\n                }\n\n            </TableCell>}\n            {\n                columns.map(({ label, field, sortable, ...rest }, idx) => {\n                    field = field || label\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\n                    return (\n                        <TableCell\n                            key={idx}\n                            textAlign=\"left\"\n                            {...rest}\n                            bgcolor={selectedColor}\n                        >\n                            {row[field]}\n                        </TableCell>\n                    )\n                })\n            }\n            {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\n                <IconButton\n                    disabled={isDisable || selected}\n                    onClick={(e: any) => setTarget(e.currentTarget)}\n                    variant=\"text\"\n                    color=\"default\"\n                >\n                    <ActionIcon />\n                </IconButton>\n                <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\n                    <List\n                        bgcolor=\"background.primary\"\n                        minWidth={160}\n                        sx={{\n                            '& > li': {\n                                borderBottom: 1,\n                                '&:last-child': {\n                                    borderBottom: 0\n                                }\n                            }\n                        }}\n                    >\n                        {rowAction({ row, state }).map(({ label, icon, onClick }) => {\n                            return (\n                                <ListItem\n                                    key={label}\n                                    startIcon={icon}\n                                    onClick={(e: any) => {\n                                        onClick && onClick(e)\n                                        setTarget(null)\n                                    }}\n                                >{label}</ListItem>\n                            )\n                        })}\n                    </List>\n                </Menu>\n            </TableCell>\n            }\n        </TableRow>\n    )\n}\n\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}