shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/alert-dialog-wrapper.js

@@ -0,0 +1,141 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useDevice = require('@/hooks/useDevice');
+var utils = require('@/lib/utils');
+var alertDialog = require('../../components/alert-dialog');
+var scrollArea = require('../../components/scroll-area');
+
+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 AlertDialogWrapper = React__namespace.forwardRef(
+  ({
+    // Trigger props
+    trigger,
+    triggerAsChild = false,
+    triggerClassName,
+    // Header props
+    showHeader = true,
+    title,
+    titleClassName,
+    description,
+    descriptionClassName,
+    headerClassName,
+    headerContent,
+    // Footer props
+    showFooter = true,
+    footerContent,
+    footerClassName,
+    // Action buttons
+    actionLabel = "Confirm",
+    actionVariant = "default",
+    actionClassName,
+    onActionClick,
+    cancelLabel = "Cancel",
+    cancelClassName,
+    onCancelClick,
+    showDefaultActions = true,
+    // Content props
+    children,
+    contentClassName,
+    childrenClassName,
+    // AlertDialog behavior props
+    open,
+    onOpenChange,
+    defaultOpen,
+    // ScrollArea props
+    autoHeight = true,
+    // Close button props
+    hasCloseButton = true,
+    // Size variants
+    size = "lg",
+    // Tracking props
+    trackingNameView,
+    trackingNameClose,
+    trackingData,
+    trackingIndex,
+    // Other props
+    className,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice.useDevice();
+    const effectiveAutoHeight = autoHeight && isDesktop;
+    const contentComponent = effectiveAutoHeight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("h-full overflow-y-auto px-4 py-2 pb-4", childrenClassName), children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("h-full px-4", childrenClassName), children }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialog, { open, onOpenChange, defaultOpen, children: [
+      trigger && /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTrigger, { asChild: triggerAsChild, className: triggerClassName, children: trigger }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        alertDialog.AlertDialogContent,
+        {
+          ref,
+          hasCloseButton,
+          size,
+          trackingNameView,
+          trackingNameClose,
+          trackingData,
+          trackingIndex,
+          className: utils.cn(
+            "flex flex-col p-0",
+            // For autoHeight dialogs on desktop, handle max-height
+            effectiveAutoHeight && "max-h-full lg:max-h-[88vh]",
+            // Default height for non-full size dialogs or mobile/tablet
+            !effectiveAutoHeight && size !== "full" && "h-full lg:h-[500px]",
+            className,
+            contentClassName
+          ),
+          ...props,
+          children: [
+            showHeader && (title || description || headerContent) && /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogHeader, { className: utils.cn("flex-shrink-0", headerClassName), children: headerContent ? headerContent : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              title && /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { className: titleClassName, children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { className: descriptionClassName, children: description })
+            ] }) }),
+            contentComponent,
+            showFooter && /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.AlertDialogFooter,
+              {
+                className: utils.cn("border-border flex-shrink-0 border-t p-4", footerClassName),
+                children: footerContent ? footerContent : showDefaultActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { className: cancelClassName, onClick: onCancelClick, children: cancelLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    alertDialog.AlertDialogAction,
+                    {
+                      className: utils.cn(
+                        actionVariant === "destructive" && "bg-destructive hover:bg-destructive/90",
+                        actionClassName
+                      ),
+                      onClick: onActionClick,
+                      children: actionLabel
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+AlertDialogWrapper.displayName = "AlertDialogWrapper";
+
+exports.AlertDialogWrapper = AlertDialogWrapper;
+//# sourceMappingURL=alert-dialog-wrapper.js.map
+//# sourceMappingURL=alert-dialog-wrapper.js.map

package/dist/common/interactive/alert-dialog-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/alert-dialog-wrapper.tsx"],"names":["React","useDevice","jsx","cn","ScrollArea","jsxs","AlertDialog","AlertDialogTrigger","AlertDialogContent","AlertDialogHeader","Fragment","AlertDialogTitle","AlertDialogDescription","AlertDialogFooter","AlertDialogCancel","AlertDialogAction"],"mappings":"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","file":"alert-dialog-wrapper.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n  alertDialogVariants,\n  type VariantProps,\n} from '../../components/alert-dialog';\nimport { ScrollArea } from '../../components/scroll-area';\n\ninterface AlertDialogWrapperProps extends React.ComponentPropsWithoutRef<\n  typeof AlertDialogContent\n> {\n  // Trigger props\n  trigger?: React.ReactNode;\n  triggerAsChild?: boolean;\n  triggerClassName?: string;\n\n  // Header props\n  showHeader?: boolean;\n  title?: string;\n  titleClassName?: string;\n  description?: string;\n  descriptionClassName?: string;\n  headerClassName?: string;\n  headerContent?: React.ReactNode;\n\n  // Footer props\n  showFooter?: boolean;\n  footerContent?: React.ReactNode;\n  footerClassName?: string;\n\n  // Action buttons\n  actionLabel?: string;\n  actionVariant?: 'default' | 'destructive';\n  actionClassName?: string;\n  onActionClick?: () => void;\n\n  cancelLabel?: string;\n  cancelClassName?: string;\n  onCancelClick?: () => void;\n\n  showDefaultActions?: boolean;\n\n  // Content props\n  children?: React.ReactNode;\n  contentClassName?: string;\n  childrenClassName?: string;\n\n  // AlertDialog behavior props\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n\n  // ScrollArea props\n  autoHeight?: boolean;\n\n  // Close button props\n  hasCloseButton?: boolean;\n\n  // Size variants\n  size?: VariantProps<typeof alertDialogVariants>['size'];\n\n  // Tracking props\n  trackingNameView?: string;\n  trackingNameClose?: string;\n  trackingData?: Record<string, any>;\n  trackingIndex?: number;\n}\n\nconst AlertDialogWrapper = React.forwardRef<\n  React.ElementRef<typeof AlertDialogContent>,\n  AlertDialogWrapperProps\n>(\n  (\n    {\n      // Trigger props\n      trigger,\n      triggerAsChild = false,\n      triggerClassName,\n\n      // Header props\n      showHeader = true,\n      title,\n      titleClassName,\n      description,\n      descriptionClassName,\n      headerClassName,\n      headerContent,\n\n      // Footer props\n      showFooter = true,\n      footerContent,\n      footerClassName,\n\n      // Action buttons\n      actionLabel = 'Confirm',\n      actionVariant = 'default',\n      actionClassName,\n      onActionClick,\n\n      cancelLabel = 'Cancel',\n      cancelClassName,\n      onCancelClick,\n\n      showDefaultActions = true,\n\n      // Content props\n      children,\n      contentClassName,\n      childrenClassName,\n\n      // AlertDialog behavior props\n      open,\n      onOpenChange,\n      defaultOpen,\n\n      // ScrollArea props\n      autoHeight = true,\n\n      // Close button props\n      hasCloseButton = true,\n\n      // Size variants\n      size = 'lg',\n\n      // Tracking props\n      trackingNameView,\n      trackingNameClose,\n      trackingData,\n      trackingIndex,\n\n      // Other props\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n\n    // autoHeight only works on desktop, mobile/tablet always use ScrollArea (full screen)\n    const effectiveAutoHeight = autoHeight && isDesktop;\n\n    const contentComponent = effectiveAutoHeight ? (\n      <div className={cn('h-full overflow-y-auto px-4 py-2 pb-4', childrenClassName)}>\n        {children}\n      </div>\n    ) : (\n      <div className=\"h-full min-h-0 flex-1\">\n        <ScrollArea className=\"h-full w-full\">\n          <div className={cn('h-full px-4', childrenClassName)}>{children}</div>\n        </ScrollArea>\n      </div>\n    );\n\n    return (\n      <AlertDialog open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n        {trigger && (\n          <AlertDialogTrigger asChild={triggerAsChild} className={triggerClassName}>\n            {trigger}\n          </AlertDialogTrigger>\n        )}\n\n        <AlertDialogContent\n          ref={ref}\n          hasCloseButton={hasCloseButton}\n          size={size}\n          trackingNameView={trackingNameView}\n          trackingNameClose={trackingNameClose}\n          trackingData={trackingData}\n          trackingIndex={trackingIndex}\n          className={cn(\n            'flex flex-col p-0',\n            // For autoHeight dialogs on desktop, handle max-height\n            effectiveAutoHeight && 'max-h-full lg:max-h-[88vh]',\n            // Default height for non-full size dialogs or mobile/tablet\n            !effectiveAutoHeight && size !== 'full' && 'h-full lg:h-[500px]',\n            className,\n            contentClassName,\n          )}\n          {...props}\n        >\n          {showHeader && (title || description || headerContent) && (\n            <AlertDialogHeader className={cn('flex-shrink-0', headerClassName)}>\n              {headerContent ? (\n                headerContent\n              ) : (\n                <>\n                  {title && <AlertDialogTitle className={titleClassName}>{title}</AlertDialogTitle>}\n                  {description && (\n                    <AlertDialogDescription className={descriptionClassName}>\n                      {description}\n                    </AlertDialogDescription>\n                  )}\n                </>\n              )}\n            </AlertDialogHeader>\n          )}\n\n          {contentComponent}\n\n          {showFooter && (\n            <AlertDialogFooter\n              className={cn('border-border flex-shrink-0 border-t p-4', footerClassName)}\n            >\n              {footerContent\n                ? footerContent\n                : showDefaultActions && (\n                    <>\n                      <AlertDialogCancel className={cancelClassName} onClick={onCancelClick}>\n                        {cancelLabel}\n                      </AlertDialogCancel>\n                      <AlertDialogAction\n                        className={cn(\n                          actionVariant === 'destructive' &&\n                            'bg-destructive hover:bg-destructive/90',\n                          actionClassName,\n                        )}\n                        onClick={onActionClick}\n                      >\n                        {actionLabel}\n                      </AlertDialogAction>\n                    </>\n                  )}\n            </AlertDialogFooter>\n          )}\n        </AlertDialogContent>\n      </AlertDialog>\n    );\n  },\n);\n\nAlertDialogWrapper.displayName = 'AlertDialogWrapper';\n\nexport { AlertDialogWrapper, type AlertDialogWrapperProps };\n"]}

package/dist/common/interactive/alert-dialog-wrapper.mjs

@@ -0,0 +1,119 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useDevice } from '@/hooks/useDevice';
+import { cn } from '@/lib/utils';
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../components/alert-dialog';
+import { ScrollArea } from '../../components/scroll-area';
+
+const AlertDialogWrapper = React.forwardRef(
+  ({
+    // Trigger props
+    trigger,
+    triggerAsChild = false,
+    triggerClassName,
+    // Header props
+    showHeader = true,
+    title,
+    titleClassName,
+    description,
+    descriptionClassName,
+    headerClassName,
+    headerContent,
+    // Footer props
+    showFooter = true,
+    footerContent,
+    footerClassName,
+    // Action buttons
+    actionLabel = "Confirm",
+    actionVariant = "default",
+    actionClassName,
+    onActionClick,
+    cancelLabel = "Cancel",
+    cancelClassName,
+    onCancelClick,
+    showDefaultActions = true,
+    // Content props
+    children,
+    contentClassName,
+    childrenClassName,
+    // AlertDialog behavior props
+    open,
+    onOpenChange,
+    defaultOpen,
+    // ScrollArea props
+    autoHeight = true,
+    // Close button props
+    hasCloseButton = true,
+    // Size variants
+    size = "lg",
+    // Tracking props
+    trackingNameView,
+    trackingNameClose,
+    trackingData,
+    trackingIndex,
+    // Other props
+    className,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice();
+    const effectiveAutoHeight = autoHeight && isDesktop;
+    const contentComponent = effectiveAutoHeight ? /* @__PURE__ */ jsx("div", { className: cn("h-full overflow-y-auto px-4 py-2 pb-4", childrenClassName), children }) : /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 flex-1", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsx("div", { className: cn("h-full px-4", childrenClassName), children }) }) });
+    return /* @__PURE__ */ jsxs(AlertDialog, { open, onOpenChange, defaultOpen, children: [
+      trigger && /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: triggerAsChild, className: triggerClassName, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        AlertDialogContent,
+        {
+          ref,
+          hasCloseButton,
+          size,
+          trackingNameView,
+          trackingNameClose,
+          trackingData,
+          trackingIndex,
+          className: cn(
+            "flex flex-col p-0",
+            // For autoHeight dialogs on desktop, handle max-height
+            effectiveAutoHeight && "max-h-full lg:max-h-[88vh]",
+            // Default height for non-full size dialogs or mobile/tablet
+            !effectiveAutoHeight && size !== "full" && "h-full lg:h-[500px]",
+            className,
+            contentClassName
+          ),
+          ...props,
+          children: [
+            showHeader && (title || description || headerContent) && /* @__PURE__ */ jsx(AlertDialogHeader, { className: cn("flex-shrink-0", headerClassName), children: headerContent ? headerContent : /* @__PURE__ */ jsxs(Fragment, { children: [
+              title && /* @__PURE__ */ jsx(AlertDialogTitle, { className: titleClassName, children: title }),
+              description && /* @__PURE__ */ jsx(AlertDialogDescription, { className: descriptionClassName, children: description })
+            ] }) }),
+            contentComponent,
+            showFooter && /* @__PURE__ */ jsx(
+              AlertDialogFooter,
+              {
+                className: cn("border-border flex-shrink-0 border-t p-4", footerClassName),
+                children: footerContent ? footerContent : showDefaultActions && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(AlertDialogCancel, { className: cancelClassName, onClick: onCancelClick, children: cancelLabel }),
+                  /* @__PURE__ */ jsx(
+                    AlertDialogAction,
+                    {
+                      className: cn(
+                        actionVariant === "destructive" && "bg-destructive hover:bg-destructive/90",
+                        actionClassName
+                      ),
+                      onClick: onActionClick,
+                      children: actionLabel
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+AlertDialogWrapper.displayName = "AlertDialogWrapper";
+
+export { AlertDialogWrapper };
+//# sourceMappingURL=alert-dialog-wrapper.mjs.map
+//# sourceMappingURL=alert-dialog-wrapper.mjs.map

package/dist/common/interactive/alert-dialog-wrapper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/alert-dialog-wrapper.tsx"],"names":[],"mappings":"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","file":"alert-dialog-wrapper.mjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n  alertDialogVariants,\n  type VariantProps,\n} from '../../components/alert-dialog';\nimport { ScrollArea } from '../../components/scroll-area';\n\ninterface AlertDialogWrapperProps extends React.ComponentPropsWithoutRef<\n  typeof AlertDialogContent\n> {\n  // Trigger props\n  trigger?: React.ReactNode;\n  triggerAsChild?: boolean;\n  triggerClassName?: string;\n\n  // Header props\n  showHeader?: boolean;\n  title?: string;\n  titleClassName?: string;\n  description?: string;\n  descriptionClassName?: string;\n  headerClassName?: string;\n  headerContent?: React.ReactNode;\n\n  // Footer props\n  showFooter?: boolean;\n  footerContent?: React.ReactNode;\n  footerClassName?: string;\n\n  // Action buttons\n  actionLabel?: string;\n  actionVariant?: 'default' | 'destructive';\n  actionClassName?: string;\n  onActionClick?: () => void;\n\n  cancelLabel?: string;\n  cancelClassName?: string;\n  onCancelClick?: () => void;\n\n  showDefaultActions?: boolean;\n\n  // Content props\n  children?: React.ReactNode;\n  contentClassName?: string;\n  childrenClassName?: string;\n\n  // AlertDialog behavior props\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n\n  // ScrollArea props\n  autoHeight?: boolean;\n\n  // Close button props\n  hasCloseButton?: boolean;\n\n  // Size variants\n  size?: VariantProps<typeof alertDialogVariants>['size'];\n\n  // Tracking props\n  trackingNameView?: string;\n  trackingNameClose?: string;\n  trackingData?: Record<string, any>;\n  trackingIndex?: number;\n}\n\nconst AlertDialogWrapper = React.forwardRef<\n  React.ElementRef<typeof AlertDialogContent>,\n  AlertDialogWrapperProps\n>(\n  (\n    {\n      // Trigger props\n      trigger,\n      triggerAsChild = false,\n      triggerClassName,\n\n      // Header props\n      showHeader = true,\n      title,\n      titleClassName,\n      description,\n      descriptionClassName,\n      headerClassName,\n      headerContent,\n\n      // Footer props\n      showFooter = true,\n      footerContent,\n      footerClassName,\n\n      // Action buttons\n      actionLabel = 'Confirm',\n      actionVariant = 'default',\n      actionClassName,\n      onActionClick,\n\n      cancelLabel = 'Cancel',\n      cancelClassName,\n      onCancelClick,\n\n      showDefaultActions = true,\n\n      // Content props\n      children,\n      contentClassName,\n      childrenClassName,\n\n      // AlertDialog behavior props\n      open,\n      onOpenChange,\n      defaultOpen,\n\n      // ScrollArea props\n      autoHeight = true,\n\n      // Close button props\n      hasCloseButton = true,\n\n      // Size variants\n      size = 'lg',\n\n      // Tracking props\n      trackingNameView,\n      trackingNameClose,\n      trackingData,\n      trackingIndex,\n\n      // Other props\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n\n    // autoHeight only works on desktop, mobile/tablet always use ScrollArea (full screen)\n    const effectiveAutoHeight = autoHeight && isDesktop;\n\n    const contentComponent = effectiveAutoHeight ? (\n      <div className={cn('h-full overflow-y-auto px-4 py-2 pb-4', childrenClassName)}>\n        {children}\n      </div>\n    ) : (\n      <div className=\"h-full min-h-0 flex-1\">\n        <ScrollArea className=\"h-full w-full\">\n          <div className={cn('h-full px-4', childrenClassName)}>{children}</div>\n        </ScrollArea>\n      </div>\n    );\n\n    return (\n      <AlertDialog open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n        {trigger && (\n          <AlertDialogTrigger asChild={triggerAsChild} className={triggerClassName}>\n            {trigger}\n          </AlertDialogTrigger>\n        )}\n\n        <AlertDialogContent\n          ref={ref}\n          hasCloseButton={hasCloseButton}\n          size={size}\n          trackingNameView={trackingNameView}\n          trackingNameClose={trackingNameClose}\n          trackingData={trackingData}\n          trackingIndex={trackingIndex}\n          className={cn(\n            'flex flex-col p-0',\n            // For autoHeight dialogs on desktop, handle max-height\n            effectiveAutoHeight && 'max-h-full lg:max-h-[88vh]',\n            // Default height for non-full size dialogs or mobile/tablet\n            !effectiveAutoHeight && size !== 'full' && 'h-full lg:h-[500px]',\n            className,\n            contentClassName,\n          )}\n          {...props}\n        >\n          {showHeader && (title || description || headerContent) && (\n            <AlertDialogHeader className={cn('flex-shrink-0', headerClassName)}>\n              {headerContent ? (\n                headerContent\n              ) : (\n                <>\n                  {title && <AlertDialogTitle className={titleClassName}>{title}</AlertDialogTitle>}\n                  {description && (\n                    <AlertDialogDescription className={descriptionClassName}>\n                      {description}\n                    </AlertDialogDescription>\n                  )}\n                </>\n              )}\n            </AlertDialogHeader>\n          )}\n\n          {contentComponent}\n\n          {showFooter && (\n            <AlertDialogFooter\n              className={cn('border-border flex-shrink-0 border-t p-4', footerClassName)}\n            >\n              {footerContent\n                ? footerContent\n                : showDefaultActions && (\n                    <>\n                      <AlertDialogCancel className={cancelClassName} onClick={onCancelClick}>\n                        {cancelLabel}\n                      </AlertDialogCancel>\n                      <AlertDialogAction\n                        className={cn(\n                          actionVariant === 'destructive' &&\n                            'bg-destructive hover:bg-destructive/90',\n                          actionClassName,\n                        )}\n                        onClick={onActionClick}\n                      >\n                        {actionLabel}\n                      </AlertDialogAction>\n                    </>\n                  )}\n            </AlertDialogFooter>\n          )}\n        </AlertDialogContent>\n      </AlertDialog>\n    );\n  },\n);\n\nAlertDialogWrapper.displayName = 'AlertDialogWrapper';\n\nexport { AlertDialogWrapper, type AlertDialogWrapperProps };\n"]}

package/dist/common/interactive/autocomplete.js

@@ -0,0 +1,178 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cmdk = require('cmdk');
+var React = require('react');
+var command = require('@/components/command');
+var input = require('@/components/input');
+var popover = require('@/components/popover');
+var skeleton = require('@/components/skeleton');
+var utils = require('@/lib/utils');
+
+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);
+
+function AutoComplete({
+  label = "",
+  placeholder = "",
+  options,
+  searchApi,
+  value,
+  onInputChange,
+  onSelectChange,
+  children,
+  enableAddNewItem,
+  newItemOption,
+  renderOption,
+  className,
+  renderEmpty,
+  ...props
+}) {
+  const triggerRef = React__namespace.useRef(null);
+  const [triggerWidth, setTriggerWidth] = React.useState();
+  const [open, setOpen] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [searchedOptions, setSearchedOptions] = React.useState([]);
+  const newItem = React.useMemo(() => newItemOption?.(value ?? ""), [newItemOption, value]);
+  React.useEffect(() => {
+    if (open) handleSearch(value);
+    if (triggerRef.current) {
+      setTriggerWidth(triggerRef.current.offsetWidth);
+    }
+  }, [open, value]);
+  const isPaginatedApi = (api) => {
+    return typeof api === "function" && api.length >= 2;
+  };
+  const handleSearch = async (searchValue) => {
+    if (!searchValue) {
+      setSearchedOptions([]);
+    } else if (searchApi) {
+      handleSearchApi(value, 1, 10);
+    } else if (options) {
+      handleSearchLocal(searchValue);
+    }
+  };
+  const handleSearchLocal = (searchValue) => {
+    if (searchValue && options && options?.length > 0) {
+      const resultOptions = [...options ?? []].filter(
+        // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,
+        (option) => option.name?.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").includes(
+          searchValue.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+        ) ?? false
+      );
+      setSearchedOptions(resultOptions);
+    } else if (options && options?.length > 0) {
+      setSearchedOptions([...options ?? []]);
+    }
+  };
+  const handleSearchApi = async (searchValue = "", page = 1, size = 10) => {
+    try {
+      setIsLoading(true);
+      if (isPaginatedApi(searchApi)) {
+        const res = await searchApi?.(searchValue, page, size);
+        const resultOptions = res?.data ?? [];
+        setSearchedOptions(resultOptions);
+      } else {
+        const resultOptions = await searchApi(searchValue);
+        setSearchedOptions(resultOptions);
+      }
+    } catch (error) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleSelectItem = (option) => {
+    onSelectChange?.(option);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(command.Command, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.Command.Input,
+      {
+        ...props,
+        asChild: true,
+        value,
+        onValueChange: onInputChange,
+        placeholder,
+        onKeyDown: (e) => setOpen(e.key !== "Escape"),
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsx(input.Input, { label })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      popover.PopoverContent,
+      {
+        asChild: true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (e.target instanceof Element && e.target.hasAttribute("cmdk-input")) {
+            e.preventDefault();
+          }
+        },
+        className: "w-full min-w-[300px] p-0",
+        hidden: !value,
+        align: "start",
+        style: { width: triggerWidth },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(command.CommandList, { children: [
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Loading, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 p-3", children: new Array(5).fill(1).map((_item, index) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" }, index)) }) }),
+          searchedOptions?.length > 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { className: "px-0 py-2", children: searchedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            command.CommandItem,
+            {
+              value: option.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => handleSelectItem(option),
+              className: utils.cn(
+                "text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none p-3",
+                index > 0 && "border-border border-t"
+              ),
+              children: renderOption ? renderOption(option) : option.name ?? option.value
+            },
+            option.value
+          )) }),
+          searchedOptions?.length === 0 && !isLoading && enableAddNewItem && newItem && /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { className: "px-0 py-2", children: [newItem].filter((o) => !!o).map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            command.CommandItem,
+            {
+              value: option.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => handleSelectItem(option),
+              className: utils.cn(
+                "text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none px-3 py-4",
+                index > 0 && "border-border border-t"
+              ),
+              children: renderOption ? renderOption(option, true) : option.name ?? option.value
+            },
+            option.value
+          )) }),
+          searchedOptions?.length === 0 && !isLoading && !enableAddNewItem && /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { className: "px-0 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            command.CommandItem,
+            {
+              onMouseDown: (e) => e.preventDefault(),
+              className: utils.cn("!text-t16 !text-muted-foreground !bg-transparent px-3 py-4"),
+              children: renderEmpty ? renderEmpty() : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Kh\xF4ng c\xF3 th\xF4ng tin hi\u1EC3n th\u1ECB" })
+            }
+          ) })
+        ] })
+      }
+    )
+  ] }) });
+}
+
+exports.AutoComplete = AutoComplete;
+//# sourceMappingURL=autocomplete.js.map
+//# sourceMappingURL=autocomplete.js.map

package/dist/common/interactive/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/autocomplete.tsx"],"names":["React","useState","useMemo","useEffect","jsx","Popover","jsxs","Command","PopoverTrigger","CommandPrimitive","Input","PopoverContent","CommandList","Skeleton","CommandGroup","CommandItem","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,SAAS,YAAA,CAA+B;AAAA,EAC7C,KAAA,GAAQ,EAAA;AAAA,EACR,WAAA,GAAc,EAAA;AAAA,EACd,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAa;AACX,EAAA,MAAM,UAAA,GAAaA,gBAAA,CAAM,MAAA,CAAuB,IAAI,CAAA;AACpD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,cAAA,EAAiB;AACzD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,cAAA,CAAmB,EAAE,CAAA;AAEnE,EAAA,MAAM,OAAA,GAAUC,aAAA,CAAQ,MAAM,aAAA,GAAgB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,aAAA,EAAe,KAAK,CAAC,CAAA;AAElF,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,eAAmB,KAAK,CAAA;AAE5B,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,eAAA,CAAgB,UAAA,CAAW,QAAQ,WAAW,CAAA;AAAA,IAChD;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,KAAK,CAAC,CAAA;AAEhB,EAAA,MAAM,cAAA,GAAiB,CAAC,GAAA,KAAwD;AAC9E,IAAA,OAAO,OAAO,GAAA,KAAQ,UAAA,IAAc,GAAA,CAAI,MAAA,IAAU,CAAA;AAAA,EACpD,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,OAAO,WAAA,KAAyB;AACnD,IAAA,IAAI,CAAC,WAAA,EAAa;AAChB,MAAA,kBAAA,CAAmB,EAAE,CAAA;AAAA,IACvB,WAAW,SAAA,EAAW;AACpB,MAAA,eAAA,CAAgB,KAAA,EAAO,GAAG,EAAE,CAAA;AAAA,IAC9B,WAAW,OAAA,EAAS;AAClB,MAAA,iBAAA,CAAkB,WAAW,CAAA;AAAA,IAC/B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,WAAA,KAAyB;AAClD,IAAA,IAAI,WAAA,IAAe,OAAA,IAAW,OAAA,EAAS,MAAA,GAAS,CAAA,EAAG;AACjD,MAAA,MAAM,gBAAgB,CAAC,GAAI,OAAA,IAAW,EAAG,CAAA,CAAE,MAAA;AAAA;AAAA,QAEzC,CAAC,MAAA,KACC,MAAA,CAAO,IAAA,EACH,WAAA,EAAY,CACb,SAAA,CAAU,KAAK,CAAA,CACf,OAAA,CAAQ,kBAAA,EAAoB,EAAE,CAAA,CAC9B,QAAA;AAAA,UACC,WAAA,CACG,aAAY,CACZ,SAAA,CAAU,KAAK,CAAA,CACf,OAAA,CAAQ,oBAAoB,EAAE;AAAA,SACnC,IAAK;AAAA,OACX;AAEA,MAAA,kBAAA,CAAmB,aAAa,CAAA;AAAA,IAClC,CAAA,MAAA,IAAW,OAAA,IAAW,OAAA,EAAS,MAAA,GAAS,CAAA,EAAG;AACzC,MAAA,kBAAA,CAAmB,CAAC,GAAI,OAAA,IAAW,EAAG,CAAC,CAAA;AAAA,IACzC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,OAAO,WAAA,GAAsB,IAAI,IAAA,GAAe,CAAA,EAAG,OAAe,EAAA,KAAO;AAC/F,IAAA,IAAI;AACF,MAAA,YAAA,CAAa,IAAI,CAAA;AACjB,MAAA,IAAI,cAAA,CAAe,SAAS,CAAA,EAAG;AAC7B,QAAA,MAAM,GAAA,GAAM,MAAM,SAAA,GAAY,WAAA,EAAa,MAAM,IAAI,CAAA;AACrD,QAAA,MAAM,aAAA,GAAgB,GAAA,EAAK,IAAA,IAAQ,EAAC;AACpC,QAAA,kBAAA,CAAmB,aAAa,CAAA;AAAA,MAClC,CAAA,MAAO;AACL,QAAA,MAAM,aAAA,GAAgB,MAAO,SAAA,CAAwC,WAAW,CAAA;AAChF,QAAA,kBAAA,CAAmB,aAAa,CAAA;AAAA,MAClC;AAAA,IACF,SAAS,KAAA,EAAO;AAAA,IAChB,CAAA,SAAE;AACA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,MAAA,KAAmB;AAC3C,IAAA,cAAA,GAAiB,MAAM,CAAA;AACvB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA;AAEA,EAAA,uBACEC,cAAA,CAACC,mBAAQ,IAAA,EAAY,YAAA,EAAc,SACjC,QAAA,kBAAAC,eAAA,CAACC,eAAA,EAAA,EAAQ,cAAc,KAAA,EACrB,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAACI,0BAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAAJ,cAAA,CAAC,KAAA,EAAA,EAAI,KAAK,UAAA,EACR,QAAA,kBAAAA,cAAA;AAAA,MAACK,YAAA,CAAiB,KAAA;AAAA,MAAjB;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,OAAA,EAAO,IAAA;AAAA,QACP,KAAA;AAAA,QACA,aAAA,EAAe,aAAA;AAAA,QACf,WAAA;AAAA,QACA,WAAW,CAAC,CAAA,KAAM,OAAA,CAAQ,CAAA,CAAE,QAAQ,QAAQ,CAAA;AAAA,QAE3C,QAAA,EAAA,QAAA,oBAAYL,cAAA,CAACM,WAAA,EAAA,EAAM,KAAA,EAAc;AAAA;AAAA,OAEtC,CAAA,EACF,CAAA;AAAA,oBAEAN,cAAA;AAAA,MAACO,sBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAO,IAAA;AAAA,QACP,eAAA,EAAiB,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,QACzC,iBAAA,EAAmB,CAAC,CAAA,KAAM;AACxB,UAAA,IAAI,EAAE,MAAA,YAAkB,OAAA,IAAW,EAAE,MAAA,CAAO,YAAA,CAAa,YAAY,CAAA,EAAG;AACtE,YAAA,CAAA,CAAE,cAAA,EAAe;AAAA,UACnB;AAAA,QACF,CAAA;AAAA,QACA,SAAA,EAAU,0BAAA;AAAA,QAMV,QAAQ,CAAC,KAAA;AAAA,QACT,KAAA,EAAM,OAAA;AAAA,QACN,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,QAE7B,0CAACC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,SAAA,oBACCR,cAAA,CAACK,YAAA,CAAiB,OAAA,EAAjB,EACC,QAAA,kBAAAL,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EACZ,QAAA,EAAA,IAAI,KAAA,CAAM,CAAC,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,qBAChCA,cAAA,CAACS,iBAAA,EAAA,EAAS,SAAA,EAAU,aAAA,EAAA,EAAmB,KAAO,CAC/C,CAAA,EACH,CAAA,EACF,CAAA;AAAA,UAGD,eAAA,EAAiB,MAAA,GAAS,CAAA,IAAK,CAAC,SAAA,oBAC/BT,cAAA,CAACU,oBAAA,EAAA,EAAa,SAAA,EAAU,WAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,GAAA,CAAI,CAAC,QAAQ,KAAA,qBAC5BV,cAAA;AAAA,YAACW,mBAAA;AAAA,YAAA;AAAA,cAEC,OAAO,MAAA,CAAO,KAAA;AAAA,cACd,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,cACrC,QAAA,EAAU,MAAM,gBAAA,CAAiB,MAAM,CAAA;AAAA,cACvC,SAAA,EAAWC,QAAA;AAAA,gBACT,8EAAA;AAAA,gBACA,QAAQ,CAAA,IAAK;AAAA,eACf;AAAA,cAEC,yBAAe,YAAA,CAAa,MAAM,CAAA,GAAK,MAAA,CAAO,QAAQ,MAAA,CAAO;AAAA,aAAA;AAAA,YATzD,MAAA,CAAO;AAAA,WAWf,CAAA,EACH,CAAA;AAAA,UAGD,eAAA,EAAiB,MAAA,KAAW,CAAA,IAAK,CAAC,SAAA,IAAa,oBAAoB,OAAA,oBAClEZ,cAAA,CAACU,oBAAA,EAAA,EAAa,SAAA,EAAU,WAAA,EACrB,QAAA,EAAA,CAAC,OAAO,CAAA,CACN,MAAA,CAAO,CAAC,CAAA,KAAM,CAAC,CAAC,CAAC,CAAA,CACjB,GAAA,CAAI,CAAC,MAAA,EAAQ,KAAA,qBACZV,cAAA;AAAA,YAACW,mBAAA;AAAA,YAAA;AAAA,cAEC,OAAO,MAAA,CAAO,KAAA;AAAA,cACd,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,cACrC,QAAA,EAAU,MAAM,gBAAA,CAAiB,MAAM,CAAA;AAAA,cACvC,SAAA,EAAWC,QAAA;AAAA,gBACT,oFAAA;AAAA,gBACA,QAAQ,CAAA,IAAK;AAAA,eACf;AAAA,cAEC,yBAAe,YAAA,CAAa,MAAA,EAAQ,IAAI,CAAA,GAAK,MAAA,CAAO,QAAQ,MAAA,CAAO;AAAA,aAAA;AAAA,YAT/D,MAAA,CAAO;AAAA,WAWf,CAAA,EACL,CAAA;AAAA,UAGD,eAAA,EAAiB,MAAA,KAAW,CAAA,IAAK,CAAC,SAAA,IAAa,CAAC,gBAAA,oBAC/CZ,cAAA,CAACU,oBAAA,EAAA,EAAa,SAAA,EAAU,WAAA,EACtB,QAAA,kBAAAV,cAAA;AAAA,YAACW,mBAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,cACrC,SAAA,EAAWC,SAAG,4DAA4D,CAAA;AAAA,cAEzE,QAAA,EAAA,WAAA,GAAc,WAAA,EAAY,mBAAIZ,cAAA,CAAC,OAAE,QAAA,EAAA,gDAAA,EAA2B;AAAA;AAAA,WAC/D,EACF;AAAA,SAAA,EAEJ;AAAA;AAAA;AACF,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"autocomplete.js","sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Command, CommandGroup, CommandItem, CommandList } from '@/components/command';\nimport { Input } from '@/components/input';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/components/popover';\nimport { Skeleton } from '@/components/skeleton';\nimport { Option } from '@/common/interactive/select';\nimport {\n  ApiSearchFunction,\n  ApiSearchPaginatedFunction,\n} from '@/common/interactive/select-with-api';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\ntype Props<T extends string> = {\n  label?: string;\n  placeholder?: string;\n  options?: Option[];\n  searchApi?: ApiSearchFunction<Option> | ApiSearchPaginatedFunction<Option>;\n  value?: string;\n  onInputChange?: (value?: string) => void;\n  onSelectChange?: (value?: Option) => void;\n  children?: React.ReactNode;\n  enableAddNewItem?: boolean;\n  newItemOption?: (value: string) => Option | null;\n  renderOption?: (option: Option, isNewItem?: boolean) => React.ReactNode;\n  renderEmpty?: () => React.ReactNode;\n  className?: string;\n};\n\nexport function AutoComplete<T extends string>({\n  label = '',\n  placeholder = '',\n  options,\n  searchApi,\n  value,\n  onInputChange,\n  onSelectChange,\n  children,\n  enableAddNewItem,\n  newItemOption,\n  renderOption,\n  className,\n  renderEmpty,\n  ...props\n}: Props<T>) {\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<number>();\n  const [open, setOpen] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [searchedOptions, setSearchedOptions] = useState<Option[]>([]);\n\n  const newItem = useMemo(() => newItemOption?.(value ?? ''), [newItemOption, value]);\n\n  useEffect(() => {\n    if (open) handleSearch(value);\n\n    if (triggerRef.current) {\n      setTriggerWidth(triggerRef.current.offsetWidth);\n    }\n  }, [open, value]);\n\n  const isPaginatedApi = (api: any): api is ApiSearchPaginatedFunction<Option> => {\n    return typeof api === 'function' && api.length >= 2;\n  };\n\n  const handleSearch = async (searchValue?: string) => {\n    if (!searchValue) {\n      setSearchedOptions([]);\n    } else if (searchApi) {\n      handleSearchApi(value, 1, 10);\n    } else if (options) {\n      handleSearchLocal(searchValue);\n    }\n  };\n\n  const handleSearchLocal = (searchValue?: string) => {\n    if (searchValue && options && options?.length > 0) {\n      const resultOptions = [...(options ?? [])].filter(\n        // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,\n        (option) =>\n          option.name\n            ?.toLowerCase()\n            .normalize('NFD')\n            .replace(/[\\u0300-\\u036f]/g, '')\n            .includes(\n              searchValue\n                .toLowerCase()\n                .normalize('NFD')\n                .replace(/[\\u0300-\\u036f]/g, ''),\n            ) ?? false,\n      );\n\n      setSearchedOptions(resultOptions);\n    } else if (options && options?.length > 0) {\n      setSearchedOptions([...(options ?? [])]);\n    }\n  };\n\n  const handleSearchApi = async (searchValue: string = '', page: number = 1, size: number = 10) => {\n    try {\n      setIsLoading(true);\n      if (isPaginatedApi(searchApi)) {\n        const res = await searchApi?.(searchValue, page, size);\n        const resultOptions = res?.data ?? [];\n        setSearchedOptions(resultOptions);\n      } else {\n        const resultOptions = await (searchApi as ApiSearchFunction<Option>)(searchValue);\n        setSearchedOptions(resultOptions);\n      }\n    } catch (error) {\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleSelectItem = (option: Option) => {\n    onSelectChange?.(option);\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Command shouldFilter={false}>\n        <PopoverTrigger asChild>\n          <div ref={triggerRef}>\n            <CommandPrimitive.Input\n              {...props}\n              asChild\n              value={value}\n              onValueChange={onInputChange}\n              placeholder={placeholder}\n              onKeyDown={(e) => setOpen(e.key !== 'Escape')}\n            >\n              {children ?? <Input label={label} />}\n            </CommandPrimitive.Input>\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent\n          asChild\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          onInteractOutside={(e) => {\n            if (e.target instanceof Element && e.target.hasAttribute('cmdk-input')) {\n              e.preventDefault();\n            }\n          }}\n          className=\"w-full min-w-[300px] p-0\"\n          // hidden={\n          //   // (!searchedOptions || searchedOptions?.length == 0) &&\n          //   // (!enableAddNewItem || !value || !newItem) &&\n          //   // !isLoading\n          // }\n          hidden={!value}\n          align=\"start\"\n          style={{ width: triggerWidth }}\n        >\n          <CommandList>\n            {isLoading && (\n              <CommandPrimitive.Loading>\n                <div className=\"space-y-2 p-3\">\n                  {new Array(5).fill(1).map((_item, index) => (\n                    <Skeleton className=\"h-10 w-full\" key={index} />\n                  ))}\n                </div>\n              </CommandPrimitive.Loading>\n            )}\n\n            {searchedOptions?.length > 0 && !isLoading && (\n              <CommandGroup className=\"px-0 py-2\">\n                {searchedOptions.map((option, index: number) => (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    onMouseDown={(e) => e.preventDefault()}\n                    onSelect={() => handleSelectItem(option)}\n                    className={cn(\n                      \"text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none p-3\",\n                      index > 0 && 'border-border border-t',\n                    )}\n                  >\n                    {renderOption ? renderOption(option) : (option.name ?? option.value)}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            )}\n\n            {searchedOptions?.length === 0 && !isLoading && enableAddNewItem && newItem && (\n              <CommandGroup className=\"px-0 py-2\">\n                {[newItem]\n                  .filter((o) => !!o)\n                  .map((option, index: number) => (\n                    <CommandItem\n                      key={option.value}\n                      value={option.value}\n                      onMouseDown={(e) => e.preventDefault()}\n                      onSelect={() => handleSelectItem(option)}\n                      className={cn(\n                        \"text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none px-3 py-4\",\n                        index > 0 && 'border-border border-t',\n                      )}\n                    >\n                      {renderOption ? renderOption(option, true) : (option.name ?? option.value)}\n                    </CommandItem>\n                  ))}\n              </CommandGroup>\n            )}\n\n            {searchedOptions?.length === 0 && !isLoading && !enableAddNewItem && (\n              <CommandGroup className=\"px-0 py-2\">\n                <CommandItem\n                  onMouseDown={(e) => e.preventDefault()}\n                  className={cn('!text-t16 !text-muted-foreground !bg-transparent px-3 py-4')}\n                >\n                  {renderEmpty ? renderEmpty() : <p>Không có thông tin hiển thị</p>}\n                </CommandItem>\n              </CommandGroup>\n            )}\n          </CommandList>\n        </PopoverContent>\n      </Command>\n    </Popover>\n  );\n}\n"]}