@helpwave/hightide 0.1.26 → 0.1.27

package/dist/components/properties/SelectProperty.js

@@ -513,7 +513,7 @@ var PropertyBase = ({
 var import_react8 = require("react");
 var import_clsx5 = __toESM(require("clsx"));
 
-// src/components/layout-and-navigation/Expandable.tsx
+// src/components/layout/Expandable.tsx
 var import_react4 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_clsx3 = __toESM(require("clsx"));
@@ -521,7 +521,7 @@ var import_clsx3 = __toESM(require("clsx"));
 // src/utils/noop.ts
 var noop = () => void 0;
 
-// src/components/layout-and-navigation/Expandable.tsx
+// src/components/layout/Expandable.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -843,7 +843,7 @@ var match = (key, values) => {
 // src/components/user-action/select/Select.tsx
 var import_lucide_react3 = require("lucide-react");
 
-// src/components/layout-and-navigation/Chip.tsx
+// src/components/layout/Chip.tsx
 var import_clsx4 = __toESM(require("clsx"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Chip = ({
@@ -1049,7 +1049,8 @@ var SelectRoot = ({
   isOpen = false,
   disabled = false,
   invalid = false,
-  isMultiSelect = false
+  isMultiSelect = false,
+  iconAppearance = "left"
 }) => {
   const optionsRef = (0, import_react8.useRef)([]);
   const triggerRef = (0, import_react8.useRef)(null);
@@ -1063,8 +1064,11 @@ var SelectRoot = ({
     id: usedId,
     disabled,
     invalid,
-    value: isMultiSelect ? values ?? [] : [value].filter(Boolean),
-    isMultiSelect
+    value: isMultiSelect ? values ?? [] : [value].filter(Boolean)
+  };
+  const config = {
+    isMultiSelect,
+    iconAppearance
   };
   const registerItem = (0, import_react8.useCallback)((item) => {
     optionsRef.current.push(item);
@@ -1173,6 +1177,7 @@ var SelectRoot = ({
   }, [internalState.highlightedValue]);
   const contextValue = {
     state,
+    config,
     item: {
       register: registerItem,
       unregister: unregisterItem,
@@ -1190,10 +1195,11 @@ var SelectRoot = ({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectContext.Provider, { value: contextValue, children });
 };
 var SelectOption = (0, import_react8.forwardRef)(
-  function SelectOption2({ value, disabled = false, children, className, ...restProps }, ref) {
-    const { state, item, trigger } = useSelectContext();
+  function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
+    const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
     const itemRef = (0, import_react8.useRef)(null);
+    iconAppearance ??= config.iconAppearance;
     (0, import_react8.useEffect)(() => {
       register({
         value,
@@ -1230,7 +1236,7 @@ var SelectOption = (0, import_react8.forwardRef)(
         onClick: (event) => {
           if (!disabled) {
             toggleSelection(value);
-            if (!state.isMultiSelect) {
+            if (!config.isMultiSelect) {
               trigger.toggleOpen(false);
             }
             restProps.onClick?.(event);
@@ -1243,14 +1249,21 @@ var SelectOption = (0, import_react8.forwardRef)(
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          iconAppearance === "left" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_lucide_react3.CheckIcon,
             {
               className: (0, import_clsx5.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
-          children ?? value
+          children ?? value,
+          iconAppearance === "right" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_lucide_react3.CheckIcon,
+            {
+              className: (0, import_clsx5.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              "aria-hidden": true
+            }
+          )
         ]
       }
     );
@@ -1388,7 +1401,7 @@ var SelectContent = (0, import_react8.forwardRef)(
   }, ref) {
     const innerRef = (0, import_react8.useRef)(null);
     (0, import_react8.useImperativeHandle)(ref, () => innerRef.current);
-    const { trigger, state, item } = useSelectContext();
+    const { trigger, state, config, item } = useSelectContext();
     const position = useFloatingElement({
       active: state.isOpen,
       anchorRef: trigger.ref,
@@ -1448,7 +1461,7 @@ var SelectContent = (0, import_react8.forwardRef)(
                 case " ":
                   if (state.highlightedValue) {
                     item.toggleSelection(state.highlightedValue);
-                    if (!state.isMultiSelect) {
+                    if (!config.isMultiSelect) {
                       trigger.toggleOpen(false);
                     }
                     event.preventDefault();
@@ -1463,7 +1476,7 @@ var SelectContent = (0, import_react8.forwardRef)(
               ...position
             },
             role: "listbox",
-            "aria-multiselectable": state.isMultiSelect,
+            "aria-multiselectable": config.isMultiSelect,
             "aria-orientation": orientation,
             tabIndex: position ? 0 : void 0,
             children: props.children