@petrarca/sonnet-forms 0.1.3 → 0.1.5

package/dist/index.js

@@ -435,61 +435,41 @@ import {
 } from "@petrarca/sonnet-ui";
 import { Popover, PopoverContent, PopoverTrigger } from "@petrarca/sonnet-ui";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function TriggerButton({
-  selectId,
-  open,
-  selectedOption,
-  placeholder,
-  error,
-  compact,
-  label,
-  description,
-  clearable,
-  value,
-  isDisabled,
-  autoFocus,
-  className,
+function useSelectState(value, onChange, onBlur) {
+  const [open, setOpen] = React5.useState(false);
+  const [searchQuery, setSearchQuery] = React5.useState("");
+  const handleSelect = (selectedValue) => {
+    onChange?.(selectedValue === value ? null : selectedValue);
+    setOpen(false);
+    setSearchQuery("");
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange?.(null);
+  };
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+    if (newOpen) return;
+    setSearchQuery("");
+    onBlur?.();
+  };
+  return {
+    open,
+    searchQuery,
+    setSearchQuery,
+    handleSelect,
+    handleClear,
+    handleOpenChange
+  };
+}
+function TriggerIcons({
+  showClear,
   onClear
 }) {
-  return /* @__PURE__ */ jsxs5(
-    Button,
-    {
-      id: selectId,
-      variant: "outline",
-      role: "combobox",
-      "aria-expanded": open,
-      "aria-invalid": error ? "true" : "false",
-      "aria-describedby": getAriaDescribedByCompact(
-        selectId,
-        error,
-        description,
-        compact
-      ),
-      "aria-label": getCompactAriaLabel(label, compact),
-      title: getCompactTitle(error, compact),
-      className: cn6(
-        "w-full justify-between",
-        !selectedOption && "text-muted-foreground",
-        error && "border-destructive",
-        className
-      ),
-      disabled: isDisabled,
-      autoFocus,
-      children: [
-        /* @__PURE__ */ jsx6("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
-          clearable && value && !isDisabled && /* @__PURE__ */ jsx6(
-            X,
-            {
-              className: "h-4 w-4 opacity-50 hover:opacity-100",
-              onClick: onClear
-            }
-          ),
-          /* @__PURE__ */ jsx6(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
+    showClear && /* @__PURE__ */ jsx6(X, { className: "h-4 w-4 opacity-50 hover:opacity-100", onClick: onClear }),
+    /* @__PURE__ */ jsx6(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+  ] });
 }
 function SelectDropdown({
   searchPlaceholder,
@@ -537,34 +517,7 @@ function SelectDropdown({
     ] })
   ] });
 }
-function useSelectState(value, onChange, onBlur) {
-  const [open, setOpen] = React5.useState(false);
-  const [searchQuery, setSearchQuery] = React5.useState("");
-  const handleSelect = (selectedValue) => {
-    onChange?.(selectedValue === value ? null : selectedValue);
-    setOpen(false);
-    setSearchQuery("");
-  };
-  const handleClear = (e) => {
-    e.stopPropagation();
-    onChange?.(null);
-  };
-  const handleOpenChange = (newOpen) => {
-    setOpen(newOpen);
-    if (newOpen) return;
-    setSearchQuery("");
-    onBlur?.();
-  };
-  return {
-    open,
-    searchQuery,
-    setSearchQuery,
-    handleSelect,
-    handleClear,
-    handleOpenChange
-  };
-}
-function resolveSelectDefaults(props) {
+function resolveDefaults(props) {
   return {
     placeholder: props.placeholder ?? "Select...",
     searchPlaceholder: props.searchPlaceholder ?? "Search...",
@@ -599,7 +552,7 @@ function FormSelect(props) {
     disabled,
     readOnly,
     loading
-  } = resolveSelectDefaults(props);
+  } = resolveDefaults(props);
   const generatedId = React5.useId();
   const selectId = id ?? generatedId;
   const {
@@ -623,23 +576,40 @@ function FormSelect(props) {
       compact,
       className: wrapperClassName,
       children: /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: handleOpenChange, children: [
-        /* @__PURE__ */ jsx6(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(
-          TriggerButton,
+        /* @__PURE__ */ jsx6(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+          Button,
           {
-            selectId,
-            open,
-            selectedOption,
-            placeholder,
-            error,
-            compact,
-            label,
-            description,
-            clearable,
-            value,
-            isDisabled,
+            id: selectId,
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": getAriaDescribedByCompact(
+              selectId,
+              error,
+              description,
+              compact
+            ),
+            "aria-label": getCompactAriaLabel(label, compact),
+            title: getCompactTitle(error, compact),
+            className: cn6(
+              "w-full justify-between",
+              !selectedOption && "text-muted-foreground",
+              error && "border-destructive",
+              className
+            ),
+            disabled: isDisabled,
             autoFocus,
-            className,
-            onClear: handleClear
+            children: [
+              /* @__PURE__ */ jsx6("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+              /* @__PURE__ */ jsx6(
+                TriggerIcons,
+                {
+                  showClear: clearable && !!value && !isDisabled,
+                  onClear: handleClear
+                }
+              )
+            ]
           }
         ) }),
         /* @__PURE__ */ jsx6(
@@ -866,69 +836,14 @@ function resolveMultiSelectDefaults(props) {
     maxDisplay: props.maxDisplay ?? Infinity
   };
 }
-function MultiSelectTrigger({
-  id,
-  open,
-  error,
-  className,
-  isDisabled,
-  autoFocus,
-  clearable,
-  hasValues,
-  selectedOptions,
-  effectiveMaxDisplay,
-  expanded,
-  maxDisplay,
-  badgeColor,
-  placeholder,
-  onRemove,
-  onExpand,
-  onCollapse,
-  onClearAll
+function TriggerIcons2({
+  showClear,
+  onClear
 }) {
-  return /* @__PURE__ */ jsxs6(
-    Button2,
-    {
-      id,
-      variant: "outline",
-      role: "combobox",
-      "aria-expanded": open,
-      className: cn7(
-        "w-full justify-between min-h-10 h-auto",
-        error && "border-destructive",
-        className
-      ),
-      disabled: isDisabled,
-      autoFocus,
-      children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-1 flex-1", children: /* @__PURE__ */ jsx7(
-          SelectedBadges,
-          {
-            selectedOptions,
-            effectiveMaxDisplay,
-            expanded,
-            maxDisplay,
-            isDisabled,
-            badgeColor,
-            placeholder,
-            onRemove,
-            onExpand,
-            onCollapse
-          }
-        ) }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 ml-2", children: [
-          clearable && hasValues && !isDisabled && /* @__PURE__ */ jsx7(
-            X2,
-            {
-              className: "h-4 w-4 opacity-50 hover:opacity-100",
-              onClick: onClearAll
-            }
-          ),
-          /* @__PURE__ */ jsx7(ChevronsUpDown2, { className: "h-4 w-4 shrink-0 opacity-50" })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 ml-2", children: [
+    showClear && /* @__PURE__ */ jsx7(X2, { className: "h-4 w-4 opacity-50 hover:opacity-100", onClick: onClear }),
+    /* @__PURE__ */ jsx7(ChevronsUpDown2, { className: "h-4 w-4 shrink-0 opacity-50" })
+  ] });
 }
 function FormMultiSelect(props) {
   const {
@@ -985,27 +900,44 @@ function FormMultiSelect(props) {
       className: wrapperClassName,
       children: [
         /* @__PURE__ */ jsxs6(Popover2, { open, onOpenChange: handleOpenChange, children: [
-          /* @__PURE__ */ jsx7(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx7(
-            MultiSelectTrigger,
+          /* @__PURE__ */ jsx7(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs6(
+            Button2,
             {
               id: fieldId,
-              open,
-              error,
-              className,
-              isDisabled,
+              variant: "outline",
+              role: "combobox",
+              "aria-expanded": open,
+              className: cn7(
+                "w-full justify-between min-h-10 h-auto",
+                error && "border-destructive",
+                className
+              ),
+              disabled: isDisabled,
               autoFocus,
-              clearable,
-              hasValues: value.length > 0,
-              selectedOptions,
-              effectiveMaxDisplay,
-              expanded,
-              maxDisplay,
-              badgeColor,
-              placeholder,
-              onRemove: handleRemove,
-              onExpand: handleExpand,
-              onCollapse: handleCollapse,
-              onClearAll: handleClearAll
+              children: [
+                /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-1 flex-1", children: /* @__PURE__ */ jsx7(
+                  SelectedBadges,
+                  {
+                    selectedOptions,
+                    effectiveMaxDisplay,
+                    expanded,
+                    maxDisplay,
+                    isDisabled,
+                    badgeColor,
+                    placeholder,
+                    onRemove: handleRemove,
+                    onExpand: handleExpand,
+                    onCollapse: handleCollapse
+                  }
+                ) }),
+                /* @__PURE__ */ jsx7(
+                  TriggerIcons2,
+                  {
+                    showClear: clearable && value.length > 0 && !isDisabled,
+                    onClear: handleClearAll
+                  }
+                )
+              ]
             }
           ) }),
           /* @__PURE__ */ jsx7(