shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/select/select-content.mjs

@@ -0,0 +1,165 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useDevice } from '@/hooks/useDevice';
+import { cn } from '@/lib/utils';
+import { ChevronLeft } from 'lucide-react';
+import * as React from 'react';
+import { SheetContent, SheetHeader, SheetTitle, SheetFooter } from '../../../components/sheet';
+import { useSelectContext } from './context';
+import { SelectFooter } from './select-footer';
+import { SelectLoading } from './select-states';
+
+const SelectContent = React.forwardRef(
+  ({
+    children,
+    searchElm,
+    additionalContent,
+    hasFooter,
+    className,
+    title: titleProp,
+    loading,
+    footerClassName,
+    backIcon,
+    onBack,
+    cancelTracking,
+    applyTracking,
+    closeAfterClear,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice();
+    const { label: selectLabel } = useSelectContext();
+    const CompHeader = !isDesktop ? SheetHeader : "div";
+    const CompTitle = !isDesktop ? SheetTitle : "span";
+    const CompFooter = !isDesktop ? SheetFooter : "div";
+    const title = React.useMemo(() => {
+      if (titleProp) return titleProp;
+      if (!isDesktop) return selectLabel || "Ch\u1ECDn m\u1EE5c";
+      return "";
+    }, [selectLabel, titleProp]);
+    const contentElm = isDesktop ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-y-auto [&>*>*:first-child]:rounded-t [&>*>*:last-child]:rounded-b [&>*>*:only-child]:rounded",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) : /* @__PURE__ */ jsxs(SheetContent, { ref, ...props, className: cn("overflow-y-auto", className), side: "bottom", children: [
+      title && /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-center", children: title }) }),
+      searchElm,
+      additionalContent,
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children }),
+      hasFooter && /* @__PURE__ */ jsx(
+        SheetFooter,
+        {
+          className: cn(
+            "shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start",
+            footerClassName
+          ),
+          children: /* @__PURE__ */ jsx(SelectFooter, { cancelTracking, applyTracking })
+        }
+      )
+    ] });
+    const headerElm = /* @__PURE__ */ jsxs(
+      CompHeader,
+      {
+        className: cn(
+          "lg:flex lg:space-x-1 lg:px-2 lg:pb-1 lg:pt-3 lg:text-lg lg:font-medium lg:leading-[26px]",
+          {
+            "lg:hidden": !title
+          }
+        ),
+        children: [
+          backIcon && /* @__PURE__ */ jsx(
+            ChevronLeft,
+            {
+              className: "absolute left-2 cursor-pointer lg:relative lg:left-auto",
+              onClick: onBack
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CompTitle,
+            {
+              className: cn({
+                "lg:hidden": !title
+                // Chỉ ẩn trên desktop khi không có title
+              }),
+              children: title
+            }
+          )
+        ]
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        isDesktop && headerElm,
+        isDesktop && searchElm,
+        isDesktop && additionalContent,
+        isDesktop ? /* @__PURE__ */ jsx(SelectLoading, {}) : /* @__PURE__ */ jsxs(SheetContent, { side: "bottom", children: [
+          title && /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-center", children: title }) }),
+          searchElm,
+          additionalContent,
+          /* @__PURE__ */ jsx(SelectLoading, {}),
+          hasFooter && /* @__PURE__ */ jsx(
+            SheetFooter,
+            {
+              className: cn(
+                "shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start",
+                footerClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                SelectFooter,
+                {
+                  cancelTracking,
+                  applyTracking,
+                  closeAfterClear
+                }
+              )
+            }
+          )
+        ] }),
+        hasFooter && isDesktop && /* @__PURE__ */ jsx(
+          CompFooter,
+          {
+            className: cn("shadow-up-shadow-8 relative !mt-0 border-t p-3", footerClassName),
+            children: /* @__PURE__ */ jsx(
+              SelectFooter,
+              {
+                cancelTracking,
+                applyTracking,
+                closeAfterClear
+              }
+            )
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      isDesktop && headerElm,
+      isDesktop && searchElm,
+      isDesktop && additionalContent,
+      contentElm,
+      hasFooter && isDesktop && /* @__PURE__ */ jsx(
+        CompFooter,
+        {
+          className: cn("shadow-up-shadow-8 relative !mt-0 border-t p-3", footerClassName),
+          children: /* @__PURE__ */ jsx(
+            SelectFooter,
+            {
+              cancelTracking,
+              applyTracking,
+              closeAfterClear
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+SelectContent.displayName = "SelectContent";
+
+export { SelectContent };
+//# sourceMappingURL=select-content.mjs.map
+//# sourceMappingURL=select-content.mjs.map

package/dist/common/interactive/select/select-content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-content.tsx"],"names":[],"mappings":"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","file":"select-content.mjs","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport { ChevronLeft } from 'lucide-react';\nimport * as React from 'react';\nimport { SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../components/sheet';\nimport { useSelectContext } from './context';\nimport { SelectContentProps } from './types';\nimport { SelectFooter } from './select-footer';\nimport { SelectLoading } from './select-states';\n\nconst SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      searchElm,\n      additionalContent,\n      hasFooter,\n      className,\n      title: titleProp,\n      loading,\n      footerClassName,\n      backIcon,\n      onBack,\n      cancelTracking,\n      applyTracking,\n      closeAfterClear,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n    const { label: selectLabel } = useSelectContext();\n\n    const CompHeader = !isDesktop ? SheetHeader : 'div';\n\n    const CompTitle = !isDesktop ? SheetTitle : 'span';\n\n    const CompFooter = !isDesktop ? SheetFooter : 'div';\n\n    const title = React.useMemo(() => {\n      if (titleProp) return titleProp;\n      if (!isDesktop) return selectLabel || 'Chọn mục';\n      return '';\n    }, [selectLabel, titleProp]);\n\n    const contentElm = isDesktop ? (\n      <div\n        ref={ref}\n        className={cn(\n          'overflow-y-auto [&>*>*:first-child]:rounded-t [&>*>*:last-child]:rounded-b [&>*>*:only-child]:rounded',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    ) : (\n      <SheetContent ref={ref} {...props} className={cn('overflow-y-auto', className)} side=\"bottom\">\n        {title && (\n          <SheetHeader>\n            <SheetTitle className=\"text-center\">{title}</SheetTitle>\n          </SheetHeader>\n        )}\n        {/* Render search and additional content inside SheetContent on mobile */}\n        {searchElm}\n        {additionalContent}\n        <div className=\"flex-1 overflow-y-auto\">{children}</div>\n        {hasFooter && (\n          <SheetFooter\n            className={cn(\n              'shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start',\n              footerClassName,\n            )}\n          >\n            <SelectFooter cancelTracking={cancelTracking} applyTracking={applyTracking} />\n          </SheetFooter>\n        )}\n      </SheetContent>\n    );\n    const headerElm = (\n      <CompHeader\n        className={cn(\n          'lg:flex lg:space-x-1 lg:px-2 lg:pb-1 lg:pt-3 lg:text-lg lg:font-medium lg:leading-[26px]',\n          {\n            'lg:hidden': !title,\n          },\n        )}\n      >\n        {backIcon && (\n          <ChevronLeft\n            className=\"absolute left-2 cursor-pointer lg:relative lg:left-auto\"\n            onClick={onBack}\n          />\n        )}\n        <CompTitle\n          className={cn({\n            'lg:hidden': !title, // Chỉ ẩn trên desktop khi không có title\n          })}\n        >\n          {title}\n        </CompTitle>\n      </CompHeader>\n    );\n\n    if (loading) {\n      return (\n        <>\n          {isDesktop && headerElm}\n          {/* Only render search and additional content outside on desktop */}\n          {isDesktop && searchElm}\n          {isDesktop && additionalContent}\n          {isDesktop ? (\n            <SelectLoading />\n          ) : (\n            <SheetContent side=\"bottom\">\n              {title && (\n                <SheetHeader>\n                  <SheetTitle className=\"text-center\">{title}</SheetTitle>\n                </SheetHeader>\n              )}\n              {/* Render search and additional content inside SheetContent on mobile */}\n              {searchElm}\n              {additionalContent}\n              <SelectLoading />\n              {hasFooter && (\n                <SheetFooter\n                  className={cn(\n                    'shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start',\n                    footerClassName,\n                  )}\n                >\n                  <SelectFooter\n                    cancelTracking={cancelTracking}\n                    applyTracking={applyTracking}\n                    closeAfterClear={closeAfterClear}\n                  />\n                </SheetFooter>\n              )}\n            </SheetContent>\n          )}\n          {hasFooter && isDesktop && (\n            <CompFooter\n              className={cn('shadow-up-shadow-8 relative !mt-0 border-t p-3', footerClassName)}\n            >\n              <SelectFooter\n                cancelTracking={cancelTracking}\n                applyTracking={applyTracking}\n                closeAfterClear={closeAfterClear}\n              />\n            </CompFooter>\n          )}\n        </>\n      );\n    }\n\n    return (\n      <>\n        {isDesktop && headerElm}\n        {/* Only render search and additional content outside on desktop */}\n        {isDesktop && searchElm}\n        {isDesktop && additionalContent}\n        {contentElm}\n        {hasFooter && isDesktop && (\n          <CompFooter\n            className={cn('shadow-up-shadow-8 relative !mt-0 border-t p-3', footerClassName)}\n          >\n            <SelectFooter\n              cancelTracking={cancelTracking}\n              applyTracking={applyTracking}\n              closeAfterClear={closeAfterClear}\n            />\n          </CompFooter>\n        )}\n      </>\n    );\n  },\n);\n\nSelectContent.displayName = 'SelectContent';\n\nexport { SelectContent };\n"]}

package/dist/common/interactive/select/select-footer.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var button = require('../../../components/button');
+var helpers = require('../../../lib/helpers');
+var context = require('./context');
+var selectClose = require('./select-close');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const SelectFooter = React__namespace.forwardRef(
+  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {
+    const { onApply, onClearValue, value, setValue, setGroupValue } = context.useSelectContext();
+    const onClearProp = helpers.useCallbackRef(() => {
+      setValue?.([]);
+      setGroupValue?.({ group: [], child: [] });
+      onClearValue?.();
+    });
+    const onApplyProp = helpers.useCallbackRef((e) => {
+      onApply?.(value);
+    });
+    const ClearButton = closeAfterClear ? selectClose.SelectClose : React__namespace.Fragment;
+    const clearButtonProps = closeAfterClear ? { asChild: true } : {};
+    const multipleValue = value?.length;
+    return /* @__PURE__ */ jsxRuntime.jsxs(button.ButtonGroup, { ref, ...props, className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { ...clearButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          className: "w-full px-0",
+          style: {
+            flex: 1
+          },
+          variant: "secondary",
+          size: "sm",
+          onClick: onClearProp,
+          ...cancelTracking,
+          children: "B\u1ECF ch\u1ECDn"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(selectClose.SelectClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          className: "w-full flex-1",
+          style: {
+            flex: 2
+          },
+          variant: "default",
+          size: "sm",
+          onClick: onApplyProp,
+          ...applyTracking,
+          children: `${`\xC1p d\u1EE5ng`}${multipleValue ? ` (${multipleValue})` : ""}`
+        }
+      ) })
+    ] });
+  }
+);
+SelectFooter.displayName = "SelectFooter";
+
+exports.SelectFooter = SelectFooter;
+//# sourceMappingURL=select-footer.js.map
+//# sourceMappingURL=select-footer.js.map

package/dist/common/interactive/select/select-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-footer.tsx"],"names":["React","useSelectContext","useCallbackRef","SelectClose","ButtonGroup","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,eAAeA,gBAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,eAAA,GAAkB,KAAA,EAAO,gBAAgB,aAAA,EAAe,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC7E,IAAA,MAAM,EAAE,OAAA,EAAS,YAAA,EAAc,OAAO,QAAA,EAAU,aAAA,KAAkBC,wBAAA,EAAiB;AACnF,IAAA,MAAM,WAAA,GAAcC,uBAA2D,MAAM;AAEnF,MAAA,QAAA,GAAW,EAAE,CAAA;AACb,MAAA,aAAA,GAAgB,EAAE,KAAA,EAAO,IAAI,KAAA,EAAO,IAAI,CAAA;AACxC,MAAA,YAAA,IAAe;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAcA,sBAAA,CAA2D,CAAC,CAAA,KAAM;AACpF,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,eAAA,GAAkBC,uBAAA,GAAcH,gBAAA,CAAM,QAAA;AAC1D,IAAA,MAAM,mBAAmB,eAAA,GAAkB,EAAE,OAAA,EAAS,IAAA,KAAS,EAAC;AAChE,IAAA,MAAM,gBAAgB,KAAA,EAAO,MAAA;AAC7B,IAAA,uCACGI,kBAAA,EAAA,EAAY,GAAA,EAAW,GAAG,KAAA,EAAO,WAAU,QAAA,EAC1C,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,WAAA,EAAA,EAAa,GAAG,gBAAA,EACf,QAAA,kBAAAA,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,aAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,WAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,cAAA;AAAA,UACL,QAAA,EAAA;AAAA;AAAA,OAED,EACF,CAAA;AAAA,sBACAD,cAAA,CAACF,uBAAA,EAAA,EAAY,OAAA,EAAO,IAAA,EAClB,QAAA,kBAAAE,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,eAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,SAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,aAAA;AAAA,UAEH,aAAG,CAAA,eAAA,CAAS,CAAA,EAAG,gBAAgB,CAAA,EAAA,EAAK,aAAa,MAAM,EAAE,CAAA;AAAA;AAAA,OAC5D,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"select-footer.js","sourcesContent":["import * as React from 'react';\nimport { Button, ButtonGroup } from '../../../components/button';\nimport { useCallbackRef } from '../../../lib/helpers';\nimport { useSelectContext } from './context';\nimport { SelectClose } from './select-close';\nimport { SelectFooterProps } from './types';\n\nconst SelectFooter = React.forwardRef<React.ElementRef<typeof ButtonGroup>, SelectFooterProps>(\n  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {\n    const { onApply, onClearValue, value, setValue, setGroupValue } = useSelectContext();\n    const onClearProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>(() => {\n      // Clear value\n      setValue?.([]);\n      setGroupValue?.({ group: [], child: [] });\n      onClearValue?.();\n    });\n\n    const onApplyProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>((e) => {\n      onApply?.(value);\n    });\n\n    const ClearButton = closeAfterClear ? SelectClose : React.Fragment;\n    const clearButtonProps = closeAfterClear ? { asChild: true } : {};\n    const multipleValue = value?.length;\n    return (\n      <ButtonGroup ref={ref} {...props} className=\"w-full\">\n        <ClearButton {...clearButtonProps}>\n          <Button\n            type=\"button\"\n            className=\"w-full px-0\"\n            style={{\n              flex: 1,\n            }}\n            variant={'secondary'}\n            size={'sm'}\n            onClick={onClearProp}\n            {...cancelTracking}\n          >\n            Bỏ chọn\n          </Button>\n        </ClearButton>\n        <SelectClose asChild>\n          <Button\n            type=\"button\"\n            className=\"w-full flex-1\"\n            style={{\n              flex: 2,\n            }}\n            variant={'default'}\n            size={'sm'}\n            onClick={onApplyProp}\n            {...applyTracking}\n          >\n            {`${`Áp dụng`}${multipleValue ? ` (${multipleValue})` : ''}`}\n          </Button>\n        </SelectClose>\n      </ButtonGroup>\n    );\n  },\n);\n\nSelectFooter.displayName = 'SelectFooter';\n\nexport { SelectFooter };\n"]}

package/dist/common/interactive/select/select-footer.mjs

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ButtonGroup, Button } from '../../../components/button';
+import { useCallbackRef } from '../../../lib/helpers';
+import { useSelectContext } from './context';
+import { SelectClose } from './select-close';
+
+const SelectFooter = React.forwardRef(
+  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {
+    const { onApply, onClearValue, value, setValue, setGroupValue } = useSelectContext();
+    const onClearProp = useCallbackRef(() => {
+      setValue?.([]);
+      setGroupValue?.({ group: [], child: [] });
+      onClearValue?.();
+    });
+    const onApplyProp = useCallbackRef((e) => {
+      onApply?.(value);
+    });
+    const ClearButton = closeAfterClear ? SelectClose : React.Fragment;
+    const clearButtonProps = closeAfterClear ? { asChild: true } : {};
+    const multipleValue = value?.length;
+    return /* @__PURE__ */ jsxs(ButtonGroup, { ref, ...props, className: "w-full", children: [
+      /* @__PURE__ */ jsx(ClearButton, { ...clearButtonProps, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          className: "w-full px-0",
+          style: {
+            flex: 1
+          },
+          variant: "secondary",
+          size: "sm",
+          onClick: onClearProp,
+          ...cancelTracking,
+          children: "B\u1ECF ch\u1ECDn"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SelectClose, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          className: "w-full flex-1",
+          style: {
+            flex: 2
+          },
+          variant: "default",
+          size: "sm",
+          onClick: onApplyProp,
+          ...applyTracking,
+          children: `${`\xC1p d\u1EE5ng`}${multipleValue ? ` (${multipleValue})` : ""}`
+        }
+      ) })
+    ] });
+  }
+);
+SelectFooter.displayName = "SelectFooter";
+
+export { SelectFooter };
+//# sourceMappingURL=select-footer.mjs.map
+//# sourceMappingURL=select-footer.mjs.map

package/dist/common/interactive/select/select-footer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-footer.tsx"],"names":[],"mappings":";;;;;;;AAOA,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,eAAA,GAAkB,KAAA,EAAO,gBAAgB,aAAA,EAAe,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC7E,IAAA,MAAM,EAAE,OAAA,EAAS,YAAA,EAAc,OAAO,QAAA,EAAU,aAAA,KAAkB,gBAAA,EAAiB;AACnF,IAAA,MAAM,WAAA,GAAc,eAA2D,MAAM;AAEnF,MAAA,QAAA,GAAW,EAAE,CAAA;AACb,MAAA,aAAA,GAAgB,EAAE,KAAA,EAAO,IAAI,KAAA,EAAO,IAAI,CAAA;AACxC,MAAA,YAAA,IAAe;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,cAAA,CAA2D,CAAC,CAAA,KAAM;AACpF,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,eAAA,GAAkB,WAAA,GAAc,KAAA,CAAM,QAAA;AAC1D,IAAA,MAAM,mBAAmB,eAAA,GAAkB,EAAE,OAAA,EAAS,IAAA,KAAS,EAAC;AAChE,IAAA,MAAM,gBAAgB,KAAA,EAAO,MAAA;AAC7B,IAAA,4BACG,WAAA,EAAA,EAAY,GAAA,EAAW,GAAG,KAAA,EAAO,WAAU,QAAA,EAC1C,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,GAAG,gBAAA,EACf,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,aAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,WAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,cAAA;AAAA,UACL,QAAA,EAAA;AAAA;AAAA,OAED,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAO,IAAA,EAClB,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,eAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,SAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,aAAA;AAAA,UAEH,aAAG,CAAA,eAAA,CAAS,CAAA,EAAG,gBAAgB,CAAA,EAAA,EAAK,aAAa,MAAM,EAAE,CAAA;AAAA;AAAA,OAC5D,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"select-footer.mjs","sourcesContent":["import * as React from 'react';\nimport { Button, ButtonGroup } from '../../../components/button';\nimport { useCallbackRef } from '../../../lib/helpers';\nimport { useSelectContext } from './context';\nimport { SelectClose } from './select-close';\nimport { SelectFooterProps } from './types';\n\nconst SelectFooter = React.forwardRef<React.ElementRef<typeof ButtonGroup>, SelectFooterProps>(\n  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {\n    const { onApply, onClearValue, value, setValue, setGroupValue } = useSelectContext();\n    const onClearProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>(() => {\n      // Clear value\n      setValue?.([]);\n      setGroupValue?.({ group: [], child: [] });\n      onClearValue?.();\n    });\n\n    const onApplyProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>((e) => {\n      onApply?.(value);\n    });\n\n    const ClearButton = closeAfterClear ? SelectClose : React.Fragment;\n    const clearButtonProps = closeAfterClear ? { asChild: true } : {};\n    const multipleValue = value?.length;\n    return (\n      <ButtonGroup ref={ref} {...props} className=\"w-full\">\n        <ClearButton {...clearButtonProps}>\n          <Button\n            type=\"button\"\n            className=\"w-full px-0\"\n            style={{\n              flex: 1,\n            }}\n            variant={'secondary'}\n            size={'sm'}\n            onClick={onClearProp}\n            {...cancelTracking}\n          >\n            Bỏ chọn\n          </Button>\n        </ClearButton>\n        <SelectClose asChild>\n          <Button\n            type=\"button\"\n            className=\"w-full flex-1\"\n            style={{\n              flex: 2,\n            }}\n            variant={'default'}\n            size={'sm'}\n            onClick={onApplyProp}\n            {...applyTracking}\n          >\n            {`${`Áp dụng`}${multipleValue ? ` (${multipleValue})` : ''}`}\n          </Button>\n        </SelectClose>\n      </ButtonGroup>\n    );\n  },\n);\n\nSelectFooter.displayName = 'SelectFooter';\n\nexport { SelectFooter };\n"]}

package/dist/common/interactive/select/select-item.js

@@ -0,0 +1,214 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@/lib/utils');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var checkbox = require('../../../components/checkbox');
+var helpers = require('../../../lib/helpers');
+var list = require('../list');
+var pressable = require('../pressable');
+var context = require('./context');
+var selectClose = require('./select-close');
+var UISystemProvider = require('@/providers/UISystemProvider');
+var types = require('@/lib/types');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const SelectItemBase = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    disabled,
+    multiple = false,
+    isChecked = false,
+    closeAfterClick: closeAfterClickProps,
+    rightIcon: rightIconProp,
+    option,
+    group,
+    ...props
+  }, ref) => {
+    const closeAfterClick = closeAfterClickProps ?? !multiple;
+    const ListItemWrapper = closeAfterClick ? selectClose.SelectClose : React__namespace.Fragment;
+    const listItemWrapperProps = closeAfterClick ? { asChild: true } : {};
+    const showIconChecked = isChecked && !multiple;
+    const rightIcon = rightIconProp || (showIconChecked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { color: "#094bf4", className: "h-4 w-4" }) : null);
+    const {
+      blockSendTracking,
+      keyForValue,
+      keyForName,
+      keyForGroupName,
+      trackingData: trackingDataContext,
+      trackingIndex,
+      trackingName,
+      sendIfUnCheck
+    } = React__namespace.useContext(context.SelectTrackingContext);
+    const trackingData = {
+      ...trackingDataContext ?? {},
+      status: multiple ? !isChecked ? "checked" : "unchecked" : void 0,
+      [keyForValue ?? "value"]: option?.value,
+      [keyForName ?? "name"]: option?.name,
+      ...keyForGroupName && { [keyForGroupName ?? "groupName"]: group?.name }
+    };
+    const blockTracking = !sendIfUnCheck && isChecked;
+    return /* @__PURE__ */ jsxRuntime.jsx(ListItemWrapper, { ...listItemWrapperProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+      pressable.Pressable,
+      {
+        trackingData,
+        trackingIndex,
+        trackingName,
+        blockSendTracking: blockSendTracking || blockTracking,
+        className: "rounded",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          list.ListItem,
+          {
+            ref,
+            activated: isChecked,
+            className: utils.cn(
+              "cursor-pointer space-x-3",
+              {
+                "cursor-not-allowed": disabled,
+                "justify-between": isChecked && !multiple
+              },
+              className
+            ),
+            size: "normal",
+            disabled,
+            ...props,
+            children: [
+              multiple && /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox, { checked: isChecked }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
+              rightIcon
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+SelectItemBase.displayName = "SelectItemBase";
+const SelectItem = React__namespace.forwardRef(
+  ({ option, onClick, multiple, group, ...props }, ref) => {
+    const { value, setValue, groupValue, setGroupValue } = context.useSelectContext();
+    const { sendTrack } = UISystemProvider.useUISystemContext();
+    const {
+      trackingSelectName,
+      trackingData: trackingDataContext,
+      trackingIndex: trackingIndexContext,
+      blockSendTracking,
+      keyForValue,
+      keyForName
+    } = React__namespace.useContext(context.SelectTrackingContext);
+    const isChecked = React__namespace.useMemo(() => {
+      if (!value || !option) return false;
+      return value.some((item) => item?.value === option?.value);
+    }, [value, option]);
+    const _onClick = (e) => {
+      if (props?.disabled) {
+        return;
+      }
+      const sendSelectTracking = (selectedOption, isSelecting) => {
+        if (trackingSelectName && sendTrack && !blockSendTracking) {
+          const selectTrackingData = {
+            ...trackingDataContext || {},
+            status: isSelecting ? "selected" : "unselected",
+            [keyForValue || "value"]: selectedOption?.value,
+            [keyForName || "name"]: selectedOption?.name,
+            ...trackingIndexContext !== void 0 && { index: trackingIndexContext }
+          };
+          sendTrack(trackingSelectName, types.TRACKING_TYPE.click, selectTrackingData);
+        }
+      };
+      if (!multiple) {
+        if (isChecked) {
+          setValue?.([option]);
+        } else {
+          setValue?.([option]);
+          sendSelectTracking(option, true);
+        }
+      } else {
+        if (isChecked) {
+          const nextValue = value?.filter((item) => item.value !== option.value);
+          sendSelectTracking(option, false);
+          if (!nextValue?.map((nextVal) => nextVal?.groupName)?.includes(group?.name)) {
+            setGroupValue?.((prev) => ({
+              group: prev?.group?.filter((item) => item?.name !== group?.name),
+              child: value?.filter((item) => item?.value !== option?.value)?.map((item) => ({ ...item, parentValue: group?.value }))
+            }));
+          } else {
+            setGroupValue?.((prev) => ({
+              group: prev?.group,
+              child: value?.filter((item) => item?.value !== option?.value)?.map((item) => ({ ...item, parentValue: group?.value }))
+            }));
+          }
+          setValue?.((value2) => (value2 || []).filter((item) => item.value !== option.value));
+        } else {
+          if (!groupValue?.group?.map((groupVal) => groupVal?.value)?.includes(group?.value)) {
+            setGroupValue?.((prev = { group: [], child: [] }) => {
+              const resultGroup = [...prev?.group || []];
+              const resultChild = [...prev?.child || []];
+              if (!resultGroup?.includes(group)) {
+                resultGroup?.push(group);
+              }
+              return {
+                group: resultGroup,
+                child: [...resultChild, { ...option, parentValue: group?.value }]
+              };
+            });
+          } else {
+            setGroupValue?.((prev = { group: [], child: [] }) => {
+              const resultGroup = [...prev?.group || []];
+              const resultChild = [...prev?.child || []];
+              return {
+                group: resultGroup,
+                child: [...resultChild, { ...option, parentValue: group?.value }]
+              };
+            });
+          }
+          setValue?.((value2 = []) => [...value2, option]);
+          sendSelectTracking(option, true);
+        }
+      }
+      onClick?.(e);
+    };
+    const onClickFn = helpers.useCallbackRef(_onClick);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectItemBase,
+      {
+        option,
+        ref,
+        group,
+        "data-select-item-value": option.value,
+        "data-select-item-name": option.name,
+        onClick: onClickFn,
+        multiple,
+        isChecked,
+        ...props
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+
+exports.SelectItem = SelectItem;
+exports.SelectItemBase = SelectItemBase;
+//# sourceMappingURL=select-item.js.map
+//# sourceMappingURL=select-item.js.map

package/dist/common/interactive/select/select-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-item.tsx"],"names":["React","SelectClose","jsx","Check","SelectTrackingContext","Pressable","jsxs","ListItem","cn","Checkbox","useSelectContext","useUISystemContext","TRACKING_TYPE","value","useCallbackRef"],"mappings":"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","file":"select-item.js","sourcesContent":["import { cn } from '@/lib/utils';\nimport { Check } from 'lucide-react';\nimport * as React from 'react';\nimport { Checkbox } from '../../../components/checkbox';\nimport { useCallbackRef } from '../../../lib/helpers';\nimport { ListItem, ListItemValueText } from '../list';\nimport { Pressable } from '../pressable';\nimport { useSelectContext, SelectTrackingContext } from './context';\nimport { SelectClose } from './select-close';\nimport { Option, OptionGroup, SelectItemBaseProps, SelectItemProps } from './types';\nimport { useUISystemContext } from '@/providers/UISystemProvider';\nimport { TRACKING_TYPE } from '@/lib/types';\n\nconst SelectItemBase = React.forwardRef<React.ElementRef<typeof ListItem>, SelectItemBaseProps>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      multiple = false,\n      isChecked = false,\n      closeAfterClick: closeAfterClickProps,\n      rightIcon: rightIconProp,\n      option,\n      group,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeAfterClick = closeAfterClickProps ?? !multiple;\n    const ListItemWrapper = closeAfterClick ? SelectClose : React.Fragment;\n    const listItemWrapperProps = closeAfterClick ? { asChild: true } : {};\n    const showIconChecked = isChecked && !multiple;\n    const rightIcon =\n      rightIconProp || (showIconChecked ? <Check color=\"#094bf4\" className=\"h-4 w-4\" /> : null);\n    const {\n      blockSendTracking,\n      keyForValue,\n      keyForName,\n      keyForGroupName,\n      trackingData: trackingDataContext,\n      trackingIndex,\n      trackingName,\n      sendIfUnCheck,\n    } = React.useContext(SelectTrackingContext);\n    const trackingData = {\n      ...(trackingDataContext ?? {}),\n      status: multiple ? (!isChecked ? 'checked' : 'unchecked') : undefined,\n      [keyForValue ?? 'value']: option?.value,\n      [keyForName ?? 'name']: option?.name,\n      ...(keyForGroupName && { [keyForGroupName ?? 'groupName']: group?.name }),\n    };\n    // Chú ý: giá trị isChecked là giá trị trước đó\n    // Nên nếu isChecked = false và nó được click => thì trạng thái tiếp theo là checked\n    const blockTracking = !sendIfUnCheck && isChecked;\n\n    return (\n      <ListItemWrapper {...listItemWrapperProps}>\n        <Pressable\n          trackingData={trackingData}\n          trackingIndex={trackingIndex}\n          trackingName={trackingName}\n          blockSendTracking={blockSendTracking || blockTracking}\n          className=\"rounded\"\n        >\n          <ListItem\n            ref={ref}\n            activated={isChecked}\n            className={cn(\n              'cursor-pointer space-x-3',\n              {\n                'cursor-not-allowed': disabled,\n                'justify-between': isChecked && !multiple,\n              },\n              className,\n            )}\n            size=\"normal\"\n            disabled={disabled}\n            {...props}\n          >\n            {multiple && <Checkbox checked={isChecked} />}\n            <div className=\"min-w-0 flex-1\">{children}</div>\n            {rightIcon}\n          </ListItem>\n        </Pressable>\n      </ListItemWrapper>\n    );\n  },\n);\n\nSelectItemBase.displayName = 'SelectItemBase';\n\nconst SelectItem = React.forwardRef<React.ElementRef<typeof ListItem>, SelectItemProps>(\n  ({ option, onClick, multiple, group, ...props }, ref) => {\n    const { value, setValue, groupValue, setGroupValue } = useSelectContext();\n    const { sendTrack } = useUISystemContext();\n    const {\n      trackingSelectName,\n      trackingData: trackingDataContext,\n      trackingIndex: trackingIndexContext,\n      blockSendTracking,\n      keyForValue,\n      keyForName,\n    } = React.useContext(SelectTrackingContext);\n\n    // More robust isChecked calculation\n    const isChecked = React.useMemo(() => {\n      if (!value || !option) return false;\n      return value.some((item) => item?.value === option?.value);\n    }, [value, option]);\n\n    const _onClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n      if (props?.disabled) {\n        return;\n      }\n\n      // Send select tracking for newly selected items\n      const sendSelectTracking = (selectedOption: Option, isSelecting: boolean) => {\n        if (trackingSelectName && sendTrack && !blockSendTracking) {\n          const selectTrackingData = {\n            ...(trackingDataContext || {}),\n            status: isSelecting ? 'selected' : 'unselected',\n            [keyForValue || 'value']: selectedOption?.value,\n            [keyForName || 'name']: selectedOption?.name,\n            ...(trackingIndexContext !== undefined && { index: trackingIndexContext }),\n          };\n          sendTrack(trackingSelectName, TRACKING_TYPE.click, selectTrackingData);\n        }\n      };\n\n      // Handle single select\n      if (!multiple) {\n        if (isChecked) {\n          // For single select, clicking the same option should keep it selected\n          // Don't clear the value - user can use the remove icon if they want to clear\n          setValue?.([option]);\n        } else {\n          setValue?.([option]);\n          // Send tracking for newly selected item\n          sendSelectTracking(option, true);\n        }\n      } else {\n        // Handle in multi select\n        if (isChecked) {\n          // User is UNCHECKING the item in multiple select\n          const nextValue = value?.filter((item) => item.value !== option.value);\n\n          // Send unselected tracking\n          sendSelectTracking(option, false);\n\n          if (!nextValue?.map((nextVal) => (nextVal as any)?.groupName)?.includes(group?.name)) {\n            setGroupValue?.((prev) => ({\n              group: prev?.group?.filter((item) => item?.name !== group?.name),\n              child: value\n                ?.filter((item) => item?.value !== option?.value)\n                ?.map((item) => ({ ...item, parentValue: group?.value })),\n            }));\n          } else {\n            setGroupValue?.((prev) => ({\n              group: prev?.group,\n              child: value\n                ?.filter((item) => item?.value !== option?.value)\n                ?.map((item) => ({ ...item, parentValue: group?.value })),\n            }));\n          }\n          setValue?.((value) => (value || []).filter((item) => item.value !== option.value));\n        } else {\n          if (\n            !groupValue?.group?.map((groupVal) => groupVal?.value)?.includes(group?.value as string)\n          ) {\n            setGroupValue?.((prev = { group: [], child: [] }) => {\n              const resultGroup = [...(prev?.group || [])];\n              const resultChild = [...(prev?.child || [])];\n              if (!resultGroup?.includes(group as OptionGroup<Option>)) {\n                resultGroup?.push(group as OptionGroup<Option>);\n              }\n              return {\n                group: resultGroup,\n                child: [...resultChild, { ...option, parentValue: group?.value }],\n              };\n            });\n          } else {\n            setGroupValue?.((prev = { group: [], child: [] }) => {\n              const resultGroup = [...(prev?.group || [])];\n              const resultChild = [...(prev?.child || [])];\n              return {\n                group: resultGroup,\n                child: [...resultChild, { ...option, parentValue: group?.value }],\n              };\n            });\n          }\n          setValue?.((value = []) => [...value, option]);\n          // Send tracking for newly selected item in multi-select\n          sendSelectTracking(option, true);\n        }\n      }\n      onClick?.(e);\n    };\n    const onClickFn = useCallbackRef(_onClick);\n    return (\n      <SelectItemBase\n        option={option}\n        ref={ref}\n        group={group}\n        data-select-item-value={option.value}\n        data-select-item-name={option.name}\n        onClick={onClickFn}\n        multiple={multiple}\n        isChecked={isChecked}\n        {...props}\n      />\n    );\n  },\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItemBase, SelectItem };\n"]}