@optiaxiom/react 1.1.3 → 1.2.1

package/dist/esm/packages/react/src/search-input/SearchInput.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useRef, useState } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef, useRef } from 'react';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
@@ -13,19 +14,13 @@ import { forceValueChange } from '../utils/forceValueChange.js';
 import { search, clear } from './SearchInput-css.js';
 
 const SearchInput = forwardRef(
-  ({
-    addonBefore,
-    className,
-    defaultValue = "",
-    onChange,
-    onValueClear,
-    value: valueProp,
-    ...props
-  }, outerRef) => {
+  ({ addonBefore, className, onChange, onValueClear, ...props }, outerRef) => {
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
-    const [innerValue, setValue] = useState(defaultValue);
-    const value = typeof valueProp === "undefined" ? innerValue : valueProp;
+    const [value, setValue] = useControllableState({
+      defaultProp: props.defaultValue,
+      prop: props.value
+    });
     return /* @__PURE__ */ jsx(
       Input,
       {
@@ -59,7 +54,6 @@ const SearchInput = forwardRef(
         },
         ref,
         type: "search",
-        value,
         ...search({}, className),
         ...props
       }

package/dist/esm/packages/react/src/select/Select.js

@@ -1,76 +1,116 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useSelect } from 'downshift';
+import { forwardRef, useRef, useMemo } from 'react';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
 import { SelectProvider } from '../select-context/SelectContext.js';
+import { SelectHiddenSelect } from '../select-hidden-select/SelectHiddenSelect.js';
+import { useObserveReset } from './useObserveReset.js';
+import { useObserveValue } from './useObserveValue.js';
 
-function Select({
-  children,
-  defaultOpen = false,
-  defaultValue,
-  disabled,
-  items,
-  itemToKey = (value2) => value2,
-  itemToString = (value2) => value2 ? String(value2) : "",
-  onOpenChange,
-  onValueChange,
-  open,
-  value,
-  ...props
-}) {
-  const [selectedItem, setSelectedItem] = useControllableState({
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: value
-  });
-  const [isOpen, setIsOpen] = useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: open
-  });
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
-  );
-  const downshift = useSelect({
-    ...props,
-    highlightedIndex,
-    isOpen: placed,
+const Select = forwardRef(
+  ({
+    children,
+    defaultOpen = false,
+    defaultValue,
+    disabled,
+    isItemDisabled = () => false,
     items,
-    itemToKey,
-    itemToString,
-    onHighlightedIndexChange(changes) {
-      if ((changes.type === useSelect.stateChangeTypes.ItemMouseMove || changes.type === useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
-        setHighlightedIndex(changes.highlightedIndex);
-      }
-    },
-    onIsOpenChange({ isOpen: isOpen2 }) {
-      setIsOpen(isOpen2);
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2 }) {
-      setSelectedItem(selectedItem2);
-    },
-    selectedItem: selectedItem ?? null
-  });
-  downshift.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
-    SelectProvider,
-    {
-      disabled,
-      downshift,
-      highlightedItem: items[highlightedIndex],
-      isOpen,
+    itemToLabel = (value2) => value2 ? String(value2) : "",
+    itemToValue = (item) => typeof item === "string" ? item : void 0,
+    name,
+    onBlur,
+    onChange,
+    onOpenChange,
+    onValueChange,
+    open,
+    required,
+    value
+  }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const [shadowValue, setShadowValue] = useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: value
+    });
+    useObserveValue(innerRef, setShadowValue);
+    useObserveReset(innerRef, setShadowValue);
+    const selectedItem = useMemo(
+      () => shadowValue ? items.find((item) => itemToValue(item) === shadowValue) : void 0,
+      [itemToValue, items, shadowValue]
+    );
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+      () => selectedItem ? items.findIndex(
+        (item) => itemToValue(selectedItem) === itemToValue(item)
+      ) : -1
+    );
+    const downshift = useSelect({
+      highlightedIndex,
+      isItemDisabled,
+      isOpen: placed,
       items,
-      itemToKey,
-      itemToString,
-      placed,
-      selectedItem,
-      setPlaced,
-      children
-    }
-  ) });
-}
+      itemToKey: itemToValue,
+      itemToString: itemToLabel,
+      onHighlightedIndexChange(changes) {
+        if ((changes.type === useSelect.stateChangeTypes.ItemMouseMove || changes.type === useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
+          setHighlightedIndex(changes.highlightedIndex);
+        }
+      },
+      onIsOpenChange({ isOpen: isOpen2 }) {
+        setIsOpen(isOpen2);
+      },
+      onSelectedItemChange({ selectedItem: selectedItem2 }) {
+        if (innerRef.current) {
+          innerRef.current.value = itemToValue(selectedItem2) ?? "";
+        }
+      },
+      selectedItem: selectedItem ?? null
+    });
+    downshift.getMenuProps({}, { suppressRefError: true });
+    return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(
+      SelectProvider,
+      {
+        disabled,
+        downshift,
+        highlightedItem: items[highlightedIndex],
+        isOpen,
+        items,
+        itemToLabel,
+        itemToValue,
+        onBlur,
+        placed,
+        selectedItem,
+        setPlaced,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectHiddenSelect,
+            {
+              defaultValue,
+              name,
+              onChange: (event) => {
+                setShadowValue(event.target.value);
+                onChange?.(event);
+              },
+              ref,
+              required,
+              value
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
 Select.displayName = "@optiaxiom/react/Select";
 
 export { Select };

package/dist/esm/packages/react/src/select/useObserveReset.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+const useObserveReset = (inputRef, setValue) => {
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const form = input.closest("form");
+    if (!form) {
+      return;
+    }
+    const listener = () => setValue("");
+    form.addEventListener("reset", listener);
+    return () => form.removeEventListener("reset", listener);
+  }, [inputRef, setValue]);
+};
+
+export { useObserveReset };

package/dist/esm/packages/react/src/select/useObserveValue.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+const useObserveValue = (inputRef, setValue) => {
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(
+      input.constructor.prototype,
+      "value"
+    );
+    Object.defineProperty(input, "value", {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        return descriptor?.get?.call(input);
+      },
+      set: function(value) {
+        descriptor?.set?.call(input, value);
+        setValue(value);
+      }
+    });
+  }, [inputRef, setValue]);
+};
+
+export { useObserveValue };

package/dist/esm/packages/react/src/select-content/SelectContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-CLZmZfb3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-Clg7WjUb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_16z4ysg']});
+var content = recipeRuntime({base:['jqon0m']});
 
 export { content };

package/dist/esm/packages/react/src/select-content/SelectContent.js

@@ -5,9 +5,11 @@ import { Portal } from '@radix-ui/react-portal';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
+import { ListboxVirtualized } from '../listbox-virtualized/ListboxVirtualized.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { ModalLayer } from '../modal-layer/ModalLayer.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
+import { SelectRadioItem } from '../select-radio-item/SelectRadioItem.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import { content } from './SelectContent-css.js';
@@ -22,9 +24,16 @@ const SelectContent = forwardRef(
     ...props
   }, ref) => {
     const { boxProps, restProps } = extractBoxProps(props);
-    const { downshift, isOpen, placed, setPlaced } = useSelectContext(
-      "@optiaxiom/react/SelectContent"
-    );
+    const {
+      downshift,
+      highlightedItem,
+      isOpen,
+      items,
+      itemToLabel,
+      itemToValue,
+      placed,
+      setPlaced
+    } = useSelectContext("@optiaxiom/react/SelectContent");
     return /* @__PURE__ */ jsx(
       TransitionGroup,
       {
@@ -40,7 +49,7 @@ const SelectContent = forwardRef(
           {
             asChild: true,
             maxH: "sm",
-            minW: loading ? "trigger" : void 0,
+            minW: "trigger",
             provider: "popper",
             ...content({}, className),
             ...boxProps,
@@ -52,10 +61,20 @@ const SelectContent = forwardRef(
               PopperContent,
               {
                 align,
+                asChild: !loading && typeof children === "function",
                 onPlaced: () => setPlaced(true),
                 side,
                 sideOffset: 5,
-                children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
+                children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children ? typeof children === "function" ? /* @__PURE__ */ jsx(
+                  ListboxVirtualized,
+                  {
+                    highlightedItem,
+                    items,
+                    children
+                  }
+                ) : children : items.map((item) => {
+                  return /* @__PURE__ */ jsx(SelectRadioItem, { item, children: itemToLabel(item) }, itemToValue(item));
+                })
               }
             )
           }

package/dist/esm/packages/react/src/select-hidden-select/SelectHiddenSelect.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { useSelectContext } from '../select-context/SelectContext.js';
+
+const SelectHiddenSelect = forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
+  const { items, itemToLabel, itemToValue } = useSelectContext(
+    "@optiaxiom/react/SelectHiddenSelect"
+  );
+  return /* @__PURE__ */ jsx(VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxs(
+    "select",
+    {
+      defaultValue,
+      disabled,
+      name,
+      onChange,
+      ref,
+      required,
+      tabIndex: -1,
+      value,
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "" }),
+        items.map((item) => /* @__PURE__ */ jsx("option", { value: itemToValue(item), children: itemToLabel(item) }, itemToValue(item)))
+      ]
+    }
+  ) });
+});
+SelectHiddenSelect.displayName = "@optiaxiom/react/SelectHiddenSelect";
+
+export { SelectHiddenSelect };

package/dist/esm/packages/react/src/select-trigger/SelectTrigger.js

@@ -16,11 +16,12 @@ const SelectTrigger = forwardRef(
     "aria-labelledby": ariaLabelledBy,
     asChild,
     children,
+    onBlur: onBlurProp,
     onKeyDown,
     placeholder,
     ...props
   }, ref) => {
-    const { disabled, downshift, isOpen, itemToString, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+    const { disabled, downshift, isOpen, itemToLabel, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
     const { boxProps, restProps } = extractBoxProps(props);
     const buttonRef = useRef(null);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -33,7 +34,7 @@ const SelectTrigger = forwardRef(
       },
       [focusOnOpen]
     );
-    const value = selectedItem ? itemToString(selectedItem) : placeholder;
+    const value = selectedItem ? itemToLabel(selectedItem) : placeholder;
     return /* @__PURE__ */ jsx(
       PopperAnchor,
       {
@@ -43,10 +44,15 @@ const SelectTrigger = forwardRef(
           ...restProps,
           "aria-labelledby": labelId,
           disabled,
+          onBlur: (event) => {
+            onBlurProp?.(event);
+            onBlur?.(event);
+          },
           onKeyDown: (event) => {
             onKeyDown?.(event);
             document.dispatchEvent(new Event("tooltip.open"));
-          }
+          },
+          type: "button"
         }),
         children: /* @__PURE__ */ jsx(Slot, { ref, children: asChild ? decorateChildren(
           { asChild, children },

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-B_6QgqHz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-0PyACqm-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_h2fokeqwgislkw3fqntlep77qq/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_16c9lji',md:'_1puaqo4',base:'_1njsnfw'},defaultClass:'_1njsnfw'},vertical:{conditions:{sm:'_1afo36p',md:'we6vxu',base:'_1g77u3d'},defaultClass:'_1g77u3d'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_9euht1',md:'cqt3oh',base:'_7rvl3'},defaultClass:'_7rvl3'},vertical:{conditions:{sm:'r895zl',md:'_9m7ba9',base:'_1yuf8nw'},defaultClass:'_1yuf8nw'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-BRkS9g3D.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-BnwUQUGM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'i3pl0q']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_1gn55m9']});
 
 export { skeleton };

package/dist/esm/packages/react/src/spinner/Spinner-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-Bq5xXaVI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-Dhifwe4Z.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'_28qzib',inverse:'_7nuyvr'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'_9a61t1',inverse:'_10ovkaa'}}});
 
 export { track };

package/dist/esm/packages/react/src/spotlight/Spotlight.js

@@ -12,8 +12,7 @@ function Spotlight({
   inputValue,
   isItemDisabled = () => false,
   items,
-  itemToKey = (value) => value,
-  itemToString = (value) => value ? String(value) : "",
+  itemToLabel = (value) => value ? String(value) : "",
   itemToSubItems,
   onInputValueChange,
   onItemSelect,
@@ -40,8 +39,7 @@ function Spotlight({
       inputValue,
       isItemDisabled,
       items,
-      itemToKey,
-      itemToString,
+      itemToLabel,
       itemToSubItems,
       onInputValueChange,
       onItemSelect,

package/dist/esm/packages/react/src/spotlight-content/SpotlightContent.js

@@ -14,8 +14,7 @@ const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size:
     inputValue,
     isItemDisabled,
     items,
-    itemToKey,
-    itemToString,
+    itemToLabel,
     itemToSubItems,
     onInputValueChange,
     onItemSelect
@@ -37,8 +36,7 @@ const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size:
             inputValue,
             isItemDisabled,
             items,
-            itemToKey,
-            itemToString,
+            itemToLabel,
             itemToSubItems,
             onInputValueChange,
             onItemSelect,

package/dist/esm/packages/react/src/spotlight-input/SpotlightInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-CxXQAtc0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-W0qTnuXO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'gxrskx']});
+var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'n8m7fs']});
 
 export { input };

package/dist/esm/packages/react/src/spotlight-radio-item/SpotlightRadioItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-CmVdlOZO.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-B-kpM7Gr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'os7ymw']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'hv84y1']});
 
 export { item };

package/dist/esm/packages/react/src/spotlight-sub-item/SpotlightSubItem-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-CqLFr5DZ.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-DA2xXbEa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-DsFm7XLh.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BZn78GT3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'q3kfn9',true:'j8cbez'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_4nd74b',true:'_160dri6'}}});
 
 export { item };