@sustaina/shared-ui 1.33.0 → 1.33.1

package/dist/index.d.mts

@@ -1390,6 +1390,7 @@ type VirtualizedCommandFieldNames<TData extends OptionData> = {
     value?: keyof TData;
 };
 type VirtualizedCommandProps<TData extends OptionData> = {
+    name?: string;
     options?: VirtualizedCommandOption<TData>[];
     height?: number;
     searchPlaceholder?: string;
@@ -1405,9 +1406,11 @@ type VirtualizedCommandProps<TData extends OptionData> = {
     onBlur?: (event: React$1.FocusEvent<HTMLDivElement, Element>) => void;
     onFocus?: (event: React$1.FocusEvent<HTMLDivElement, Element>) => void;
 };
-declare const VirtualizedCommand: <TData extends OptionData>({ height, options, emptyContent, searchPlaceholder, value, notFoundContent, showSearch, fieldNames, disabledOption, filterOption, onSelect, labelRender, onBlur, onFocus }: VirtualizedCommandProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const VirtualizedCommand: <TData extends OptionData>({ name, height, options, emptyContent, searchPlaceholder, value, notFoundContent, showSearch, fieldNames, disabledOption, filterOption, onSelect, labelRender, onBlur, onFocus }: VirtualizedCommandProps<TData>) => react_jsx_runtime.JSX.Element;
 
-type ComboboxProps<TData extends OptionData> = Omit<VirtualizedCommandProps<TData>, "onFocus" | "onBlur"> & {
+type ComboboxProps<TData extends OptionData> = React$1.AriaAttributes & Omit<VirtualizedCommandProps<TData>, "onFocus" | "onBlur"> & {
+    name?: string;
+    dropdownName?: string;
     defaultValue?: string;
     className?: string;
     disabled?: boolean;

package/dist/index.d.ts

@@ -1390,6 +1390,7 @@ type VirtualizedCommandFieldNames<TData extends OptionData> = {
     value?: keyof TData;
 };
 type VirtualizedCommandProps<TData extends OptionData> = {
+    name?: string;
     options?: VirtualizedCommandOption<TData>[];
     height?: number;
     searchPlaceholder?: string;
@@ -1405,9 +1406,11 @@ type VirtualizedCommandProps<TData extends OptionData> = {
     onBlur?: (event: React$1.FocusEvent<HTMLDivElement, Element>) => void;
     onFocus?: (event: React$1.FocusEvent<HTMLDivElement, Element>) => void;
 };
-declare const VirtualizedCommand: <TData extends OptionData>({ height, options, emptyContent, searchPlaceholder, value, notFoundContent, showSearch, fieldNames, disabledOption, filterOption, onSelect, labelRender, onBlur, onFocus }: VirtualizedCommandProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const VirtualizedCommand: <TData extends OptionData>({ name, height, options, emptyContent, searchPlaceholder, value, notFoundContent, showSearch, fieldNames, disabledOption, filterOption, onSelect, labelRender, onBlur, onFocus }: VirtualizedCommandProps<TData>) => react_jsx_runtime.JSX.Element;
 
-type ComboboxProps<TData extends OptionData> = Omit<VirtualizedCommandProps<TData>, "onFocus" | "onBlur"> & {
+type ComboboxProps<TData extends OptionData> = React$1.AriaAttributes & Omit<VirtualizedCommandProps<TData>, "onFocus" | "onBlur"> & {
+    name?: string;
+    dropdownName?: string;
     defaultValue?: string;
     className?: string;
     disabled?: boolean;

package/dist/index.js

@@ -10684,6 +10684,7 @@ var useFieldNames_default = useFieldNames;
 var ROW_HEIGHT = 32;
 var MIN_HEIGHT_EMPTY = 76;
 var VirtualizedCommand = ({
+  name,
   height = 292,
   options,
   emptyContent = "No data.",
@@ -10791,7 +10792,14 @@ var VirtualizedCommand = ({
     }
   }, [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 }),
+    showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+      CommandInput,
+      {
+        onValueChange: handleSearch,
+        placeholder: searchPlaceholder,
+        "data-testid": `command-input-${name}`
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       CommandList,
       {
@@ -10805,7 +10813,7 @@ var VirtualizedCommand = ({
         onMouseDown: () => setIsKeyboardNavActive(false),
         onMouseMove: () => setIsKeyboardNavActive(false),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
+          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { "data-testid": `command-item-empty-${name}`, children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
           /* @__PURE__ */ jsxRuntime.jsx(
             CommandGroup,
             {
@@ -10814,7 +10822,7 @@ var VirtualizedCommand = ({
                 width: "100%",
                 position: "relative"
               },
-              children: virtualOptions.map((virtualOption) => {
+              children: virtualOptions.map((virtualOption, index) => {
                 const option = filteredOptions[virtualOption.index];
                 const optionLabel = getLabelField(option);
                 const optionValue = getValueField(option);
@@ -10835,6 +10843,7 @@ var VirtualizedCommand = ({
                     onMouseLeave: () => !isKeyboardNavActive && setFocusedIndex(-1),
                     onSelect: (selectedValue) => onSelect?.(selectedValue, option),
                     disabled: disabledOption?.(option),
+                    "data-testid": `command-item-${index}-${optionValue}`,
                     children: [
                       typeof labelRendered === "string" ? /* @__PURE__ */ jsxRuntime.jsx(truncated_default, { tooltipProps: { disabled: true }, children: labelRendered }) : labelRendered,
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -10860,18 +10869,28 @@ var VirtualizedCommand = ({
 };
 var VirtualizedCommand_default = VirtualizedCommand;
 var ComboboxInner = ({
+  name,
+  dropdownName,
   defaultValue,
   className,
   options,
   value,
   disabled,
-  placeholder: placeholder2 = "placeholder",
+  placeholder: placeholder2,
   fieldNames,
   showClear = false,
   onSelect,
   onFocus,
   onBlur,
-  ...virtualizedCommandProps
+  disabledOption,
+  emptyContent,
+  filterOption,
+  height,
+  labelRender,
+  notFoundContent,
+  searchPlaceholder,
+  showSearch,
+  ...props
 }, ref) => {
   const { getValueField } = useFieldNames_default({ fieldNames });
   const [open, setOpen] = React4__namespace.useState(false);
@@ -10909,12 +10928,14 @@ var ComboboxInner = ({
       "button",
       {
         ref,
+        name,
         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",
+          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
           "transition-all",
           className
         ),
@@ -10922,6 +10943,8 @@ var ComboboxInner = ({
         disabled,
         onFocus,
         onBlur,
+        "data-testid": `combobox-trigger-${name}`,
+        ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             truncated_default,
@@ -10941,6 +10964,7 @@ var ComboboxInner = ({
                   "inline-flex items-center justify-center p-0 cursor-pointer transition-all size-[15px]"
                 ),
                 onClick: handleClear,
+                "data-testid": `combobox-clear-button-${name}`,
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-[15px] bg-black text-white border border-black hover:bg-[#333] rounded-full" })
               }
             )
@@ -10957,10 +10981,18 @@ var ComboboxInner = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           VirtualizedCommand_default,
           {
-            ...virtualizedCommandProps,
+            name: dropdownName,
+            emptyContent,
+            height,
+            notFoundContent,
+            searchPlaceholder,
+            showSearch,
             fieldNames,
             options,
             value: selectedValue,
+            disabledOption,
+            filterOption,
+            labelRender,
             onSelect: handleSelect
           }
         )