@sustaina/shared-ui 1.32.0 → 1.33.0

package/dist/index.js

@@ -59,6 +59,8 @@ var modifiers = require('@dnd-kit/modifiers');
 var zod = require('zod');
 var Cropper = require('react-easy-crop');
 var reactNumberFormat = require('react-number-format');
+var cmdk = require('cmdk');
+var reactVirtual = require('@tanstack/react-virtual');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -4251,6 +4253,25 @@ var useTruncated = ({
   return isTruncated;
 };
 var useTruncated_default = useTruncated;
+var useControllableState = ({
+  defaultValue,
+  value
+}) => {
+  const [internalValue, setInternalValue] = React4__namespace.useState(value ?? defaultValue);
+  React4__namespace.useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const updateState = React4__namespace.useCallback((nextValue) => {
+    setInternalValue(nextValue);
+  }, []);
+  return {
+    value: internalValue,
+    updateState
+  };
+};
+var useControllableState_default = useControllableState;
 var HeaderCell = ({
   rootClassName,
   labelClassName,
@@ -9774,8 +9795,9 @@ var Navbar = ({
           mainButtonText && /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
+              variant: "cottonYellowDark",
               disabled: mainButtonDisable,
-              className: cn("bg-sus-secondary-1 hover:bg-sus-secondary-hover", mainButtonClassName),
+              className: mainButtonClassName,
               size: "lg",
               onClick: onMainButtonClick,
               children: mainButtonText
@@ -10151,7 +10173,7 @@ var Truncated = ({
     Tooltip,
     {
       ...tooltipProps,
-      open,
+      open: tooltipProps?.disabled ? false : open,
       onOpenChange: (open2) => {
         setOpen(isTruncated && open2);
       },
@@ -10435,6 +10457,519 @@ var ActionMenu = ({
     )
   ] });
 };
+function Dialog3({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal3({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay3({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent3({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal3, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay3, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      SheetPrimitive__namespace.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            SheetPrimitive__namespace.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader3({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle3({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription3({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function Command({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog3, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader3, { className: "sr-only", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle3, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription3, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DialogContent3, { className: cn("overflow-hidden p-0", className), showCloseButton, children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+  ] });
+}
+function CommandInput({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.Command.Input,
+      {
+        "data-slot": "command-input",
+        className: cn(
+          "placeholder:text-sus-gray-1 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function CommandList({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.List,
+    {
+      "data-slot": "command-list",
+      className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+      ...props
+    }
+  );
+}
+function CommandEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: cn("py-6 text-center text-sm", className),
+      ...props
+    }
+  );
+}
+function CommandGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("bg-border -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
+function CommandItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "hover:bg-[#EAF5EE] hover:text-sus-green-2 bg-white text-black relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
+      ...props
+    }
+  );
+}
+var useFieldNames = ({
+  fieldNames
+}) => {
+  const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
+  const getLabelField = React4__namespace.default.useCallback(
+    (option) => {
+      return option?.[labelFieldKey];
+    },
+    [labelFieldKey]
+  );
+  const getValueField = React4__namespace.default.useCallback(
+    (option) => {
+      return option?.[valueFieldKey];
+    },
+    [valueFieldKey]
+  );
+  return {
+    getLabelField,
+    getValueField
+  };
+};
+var useFieldNames_default = useFieldNames;
+var ROW_HEIGHT = 32;
+var MIN_HEIGHT_EMPTY = 76;
+var VirtualizedCommand = ({
+  height = 292,
+  options,
+  emptyContent = "No data.",
+  searchPlaceholder,
+  value,
+  notFoundContent = "Not item found.",
+  showSearch = true,
+  fieldNames,
+  disabledOption,
+  filterOption,
+  onSelect,
+  labelRender,
+  onBlur,
+  onFocus
+}) => {
+  const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
+  const internalOptions = React4__namespace.useMemo(() => options ?? [], [options]);
+  const [filteredOptions, setFilteredOptions] = React4__namespace.useState(internalOptions);
+  const [focusedIndex, setFocusedIndex] = React4__namespace.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React4__namespace.useState(false);
+  const parentRef = React4__namespace.useRef(null);
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: filteredOptions.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 2
+  });
+  const virtualOptions = virtualizer.getVirtualItems();
+  const dynamicHeight = React4__namespace.useMemo(() => {
+    const contentHeight = filteredOptions.length * ROW_HEIGHT;
+    if (contentHeight <= 0) {
+      return MIN_HEIGHT_EMPTY;
+    }
+    return Math.max(ROW_HEIGHT, Math.min(height, contentHeight));
+  }, [filteredOptions.length, height]);
+  const scrollToIndex = React4__namespace.useCallback(
+    (index) => {
+      virtualizer.scrollToIndex(index, {
+        align: "center"
+      });
+    },
+    [virtualizer]
+  );
+  const handleSearch = React4__namespace.useCallback(
+    (search) => {
+      setIsKeyboardNavActive(false);
+      setFilteredOptions(
+        internalOptions.filter((option) => {
+          if (typeof filterOption === "function") {
+            return filterOption(search, option);
+          }
+          const labelValue = getLabelField(option);
+          return labelValue?.toString()?.toLowerCase()?.includes?.(search.toLowerCase());
+        })
+      );
+    },
+    [filterOption, getLabelField, internalOptions]
+  );
+  const handleKeyDown = React4__namespace.useCallback(
+    (event) => {
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          setIsKeyboardNavActive(true);
+          setFocusedIndex((prev) => {
+            const newIndex = prev === -1 ? 0 : Math.min(prev + 1, filteredOptions.length - 1);
+            scrollToIndex(newIndex);
+            return newIndex;
+          });
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          setIsKeyboardNavActive(true);
+          setFocusedIndex((prev) => {
+            const newIndex = prev === -1 ? filteredOptions.length - 1 : Math.max(prev - 1, 0);
+            scrollToIndex(newIndex);
+            return newIndex;
+          });
+          break;
+        }
+        case "Enter": {
+          event.preventDefault();
+          const option = filteredOptions?.[focusedIndex];
+          if (option) {
+            onSelect?.(getValueField(option), option);
+          }
+          break;
+        }
+      }
+    },
+    [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
+  );
+  React4__namespace.useEffect(() => {
+    if (value) {
+      const option = filteredOptions.find((option2) => {
+        const optionValue = getValueField(option2);
+        return optionValue === value;
+      });
+      if (option) {
+        const index = filteredOptions.indexOf(option);
+        setFocusedIndex(index);
+        virtualizer.scrollToIndex(index, { align: "center" });
+      }
+    }
+  }, [value, filteredOptions, virtualizer, getValueField]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Command, { shouldFilter: false, onKeyDown: handleKeyDown, onFocus, onBlur, children: [
+    showSearch && /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { onValueChange: handleSearch, placeholder: searchPlaceholder }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      CommandList,
+      {
+        ref: parentRef,
+        className: "max-h-none",
+        style: {
+          height: dynamicHeight,
+          width: "100%",
+          overflow: "auto"
+        },
+        onMouseDown: () => setIsKeyboardNavActive(false),
+        onMouseMove: () => setIsKeyboardNavActive(false),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CommandGroup,
+            {
+              style: {
+                height: `${virtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative"
+              },
+              children: virtualOptions.map((virtualOption) => {
+                const option = filteredOptions[virtualOption.index];
+                const optionLabel = getLabelField(option);
+                const optionValue = getValueField(option);
+                const labelRendered = labelRender ? labelRender(filteredOptions[virtualOption.index]) : optionLabel;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  CommandItem,
+                  {
+                    className: cn("absolute left-0 top-0 w-full flex items-center justify-between", {
+                      "bg-sus-secondary-green-3 text-sus-green-2": focusedIndex === virtualOption.index,
+                      "aria-selected:bg-white aria-selected:text-black pointer-events-none": isKeyboardNavActive && focusedIndex !== virtualOption.index
+                    }),
+                    style: {
+                      height: `${virtualOption.size}px`,
+                      transform: `translateY(${virtualOption.start}px)`
+                    },
+                    value: optionValue,
+                    onMouseEnter: () => !isKeyboardNavActive && setFocusedIndex(virtualOption.index),
+                    onMouseLeave: () => !isKeyboardNavActive && setFocusedIndex(-1),
+                    onSelect: (selectedValue) => onSelect?.(selectedValue, option),
+                    disabled: disabledOption?.(option),
+                    children: [
+                      typeof labelRendered === "string" ? /* @__PURE__ */ jsxRuntime.jsx(truncated_default, { tooltipProps: { disabled: true }, children: labelRendered }) : labelRendered,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.Check,
+                        {
+                          className: cn(
+                            "mr-2 size-2 hover:text-sus-green-2",
+                            value === optionValue ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  optionValue
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var VirtualizedCommand_default = VirtualizedCommand;
+var ComboboxInner = ({
+  defaultValue,
+  className,
+  options,
+  value,
+  disabled,
+  placeholder: placeholder2 = "placeholder",
+  fieldNames,
+  showClear = false,
+  onSelect,
+  onFocus,
+  onBlur,
+  ...virtualizedCommandProps
+}, ref) => {
+  const { getValueField } = useFieldNames_default({ fieldNames });
+  const [open, setOpen] = React4__namespace.useState(false);
+  const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
+    defaultValue,
+    value
+  });
+  const renderValue = React4__namespace.useMemo(() => {
+    if (!selectedValue) return placeholder2;
+    const selectedOptionFound = options?.find((option) => {
+      const optionValue = getValueField(option);
+      return optionValue === selectedValue;
+    });
+    return selectedOptionFound ? getValueField(selectedOptionFound) : null;
+  }, [getValueField, options, placeholder2, selectedValue]);
+  const handleSelect = React4__namespace.useCallback(
+    (selected, option) => {
+      setSelectedValue(selected);
+      setOpen(false);
+      if (typeof onSelect === "function") {
+        onSelect(selected, option);
+      }
+    },
+    [onSelect, setSelectedValue]
+  );
+  const handleClear = React4__namespace.useCallback(
+    (event) => {
+      event.stopPropagation();
+      setSelectedValue(void 0);
+    },
+    [setSelectedValue]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        className: cn(
+          "flex w-full items-center justify-between gap-2 rounded-md border bg-white px-3 h-9 text-sm whitespace-nowrap shadow-xs outline-none border-input",
+          "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+          "transition-all",
+          className
+        ),
+        "data-state": open ? "open" : "closed",
+        disabled,
+        onFocus,
+        onBlur,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            truncated_default,
+            {
+              className: cn(!selectedValue && "text-sus-gray-1"),
+              tooltipProps: { disabled: true },
+              children: renderValue
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 opacity-50" }),
+            showClear && selectedValue && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                role: "button",
+                className: cn(
+                  "inline-flex items-center justify-center p-0 cursor-pointer transition-all size-[15px]"
+                ),
+                onClick: handleClear,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-[15px] bg-black text-white border border-black hover:bg-[#333] rounded-full" })
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        className: "p-0 w-(--radix-popper-anchor-width) min-w-(--radix-popper-anchor-width) max-w-(--radix-popper-available-width)",
+        align: "start",
+        sideOffset: 4,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          VirtualizedCommand_default,
+          {
+            ...virtualizedCommandProps,
+            fieldNames,
+            options,
+            value: selectedValue,
+            onSelect: handleSelect
+          }
+        )
+      }
+    )
+  ] });
+};
+var Combobox = React4__namespace.forwardRef(ComboboxInner);
+var Combobox_default = Combobox;
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -10448,6 +10983,16 @@ exports.Checkbox = Checkbox;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
+exports.Combobox = Combobox_default;
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
 exports.CropperModal = CropperModal;
 exports.CropperModalError = CropperModalError;
 exports.DIALOG_ALERT_I18N_SUBNAMESPACE = DIALOG_ALERT_I18N_SUBNAMESPACE;
@@ -10564,6 +11109,7 @@ exports.TooltipProvider = TooltipProvider2;
 exports.TooltipTrigger = TooltipTrigger2;
 exports.Truncated = truncated_default;
 exports.UI = ui_exports;
+exports.VirtualizedCommand = VirtualizedCommand_default;
 exports.booleanToSelectValue = booleanToSelectValue;
 exports.buildPrefixMap = buildPrefixMap;
 exports.buttonVariants = buttonVariants;
@@ -10588,6 +11134,7 @@ exports.splitOperators = splitOperators;
 exports.stripNullishObject = stripNullishObject;
 exports.throttle = throttle;
 exports.tokenizeFormulaString = tokenizeFormulaString;
+exports.useControllableState = useControllableState_default;
 exports.useFormField = useFormField;
 exports.useGridSettingsStore = useGridSettingsStore_default;
 exports.useHover = useHover_default;