paris 0.24.0 → 0.25.0

package/dist/stories/select/Select.js

@@ -19,265 +19,274 @@ import { theme, pget } from '../theme/themes.js';
 import { TextWhenString } from '../utility/TextWhenString.js';
 import styles from './Select.module.scss.js';
 
-const Select = forwardRef(
-  ({
-    options,
+const SelectRender = ({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  status,
+  hideLabel,
+  description,
+  hideDescription,
+  descriptionPosition,
+  placeholder,
+  startEnhancer,
+  endEnhancer,
+  disabled,
+  kind = "listbox",
+  maxHeight = 320,
+  hasOptionBorder = false,
+  multiple = false,
+  multipleItemsName,
+  segmentedHeight = "compact",
+  onOpenChange,
+  overrides
+}, ref) => {
+  const inputID = useId();
+  const multiItems = multipleItemsName || "items";
+  const listboxButtonRef = ref;
+  const radioGroupRef = ref;
+  const [resolvedValue, setResolvedValue] = useControllableState({
     value,
-    defaultValue,
-    onChange,
-    label,
-    status,
-    hideLabel,
-    description,
-    hideDescription,
-    descriptionPosition,
-    placeholder,
-    startEnhancer,
-    endEnhancer,
-    disabled,
-    kind = "listbox",
-    maxHeight = 320,
-    hasOptionBorder = false,
-    multiple = false,
-    multipleItemsName,
-    segmentedHeight = "compact",
-    onOpenChange,
-    overrides
-  }, ref) => {
-    const inputID = useId();
-    const multiItems = multipleItemsName || "items";
-    const [resolvedValue, setResolvedValue] = useControllableState({
-      value,
-      defaultValue: defaultValue ?? (multiple ? [] : null),
-      onChange
-    });
-    const listboxValue = resolvedValue;
-    const listboxOnChange = setResolvedValue;
-    const singleValue = resolvedValue;
-    const singleOnChange = setResolvedValue;
-    const buttonText = () => {
-      if (!resolvedValue || resolvedValue.length === 0) {
-        return placeholder || "Select an option";
+    defaultValue: defaultValue ?? (multiple ? [] : null),
+    onChange: (next) => {
+      if (multiple) {
+        const ids = next ?? [];
+        const selected = ids.map((id) => options.find((o) => o.id === id)).filter((o) => Boolean(o));
+        onChange?.(selected.length ? selected : null);
+      } else {
+        const id = next;
+        const selected = id != null ? options.find((o) => o.id === id) ?? null : null;
+        onChange?.(selected);
       }
-      if (!multiple) {
-        return options?.find((o) => o.id === resolvedValue)?.node;
-      }
-      if (resolvedValue && resolvedValue.length === 1) {
-        return options?.find((o) => o.id === resolvedValue[0])?.node;
-      }
-      if (resolvedValue.length === options.length) {
-        return `All ${multiItems}`;
-      }
-      return `${resolvedValue.length} ${multiItems}`;
-    };
-    return /* @__PURE__ */ jsxs(
-      Field,
-      {
-        htmlFor: inputID,
-        label,
-        hideLabel,
-        description,
-        hideDescription,
-        descriptionPosition,
-        disabled,
-        overrides: {
-          container: overrides?.container,
-          label: overrides?.label,
-          description: overrides?.description
-        },
-        children: [
-          kind === "listbox" && /* @__PURE__ */ jsx(Listbox, { as: "div", ref, value: listboxValue, onChange: listboxOnChange, multiple, children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(OpenChangeEffect, { open, onOpenChange }),
-            /* @__PURE__ */ jsxs(
-              ListboxButton,
-              {
-                id: inputID,
-                ...overrides?.selectInput,
-                "aria-disabled": disabled,
-                "data-status": disabled ? "disabled" : status || "default",
-                className: clsx(
-                  overrides?.selectInput?.className,
-                  inputStyles.inputContainer,
-                  styles.listboxButton,
-                  styles.field
+    }
+  });
+  const listboxValue = resolvedValue;
+  const listboxOnChange = setResolvedValue;
+  const singleValue = resolvedValue;
+  const singleOnChange = setResolvedValue;
+  const buttonText = () => {
+    if (!resolvedValue || resolvedValue.length === 0) {
+      return placeholder || "Select an option";
+    }
+    if (!multiple) {
+      return options?.find((o) => o.id === resolvedValue)?.node;
+    }
+    if (resolvedValue && resolvedValue.length === 1) {
+      return options?.find((o) => o.id === resolvedValue[0])?.node;
+    }
+    if (resolvedValue.length === options.length) {
+      return `All ${multiItems}`;
+    }
+    return `${resolvedValue.length} ${multiItems}`;
+  };
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      htmlFor: inputID,
+      label,
+      hideLabel,
+      description,
+      hideDescription,
+      descriptionPosition,
+      disabled,
+      overrides: {
+        container: overrides?.container,
+        label: overrides?.label,
+        description: overrides?.description
+      },
+      children: [
+        kind === "listbox" && /* @__PURE__ */ jsx(Listbox, { as: "div", value: listboxValue, onChange: listboxOnChange, multiple, children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(OpenChangeEffect, { open, onOpenChange }),
+          /* @__PURE__ */ jsxs(
+            ListboxButton,
+            {
+              ref: listboxButtonRef,
+              id: inputID,
+              ...overrides?.selectInput,
+              "aria-disabled": disabled,
+              "data-status": disabled ? "disabled" : status || "default",
+              className: clsx(
+                overrides?.selectInput?.className,
+                inputStyles.inputContainer,
+                styles.listboxButton,
+                styles.field
+              ),
+              children: [
+                !!startEnhancer && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...overrides?.startEnhancerContainer,
+                    className: clsx(
+                      inputStyles.enhancer,
+                      overrides?.startEnhancerContainer?.className
+                    ),
+                    "data-status": disabled ? "disabled" : status || "default",
+                    children: !!startEnhancer && /* @__PURE__ */ jsx(
+                      MemoizedEnhancer,
+                      {
+                        enhancer: startEnhancer,
+                        size: parseInt(
+                          pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
+                          10
+                        )
+                      }
+                    )
+                  }
                 ),
-                children: [
-                  !!startEnhancer && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ...overrides?.startEnhancerContainer,
-                      className: clsx(
-                        inputStyles.enhancer,
-                        overrides?.startEnhancerContainer?.className
-                      ),
-                      "data-status": disabled ? "disabled" : status || "default",
-                      children: !!startEnhancer && /* @__PURE__ */ jsx(
-                        MemoizedEnhancer,
-                        {
-                          enhancer: startEnhancer,
-                          size: parseInt(
-                            pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
-                            10
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  buttonText(),
-                  endEnhancer ? /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ...overrides?.endEnhancerContainer,
-                      className: clsx(
-                        inputStyles.enhancer,
-                        overrides?.endEnhancerContainer?.className
-                      ),
-                      "data-status": disabled ? "disabled" : status || "default",
-                      children: !!endEnhancer && /* @__PURE__ */ jsx(
-                        MemoizedEnhancer,
-                        {
-                          enhancer: endEnhancer,
-                          size: parseInt(
-                            pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
-                            10
-                          )
-                        }
-                      )
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    FontAwesomeIcon,
-                    {
-                      className: clsx(inputStyles.enhancer, styles.chevron),
-                      "data-status": disabled ? "disabled" : status || "default",
-                      width: "10px",
-                      icon: faChevronDown
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ListboxOptions,
-              {
-                anchor: "bottom start",
-                transition: true,
-                className: clsx(overrides?.optionsContainer, styles.options),
-                style: {
-                  "--options-maxHeight": `${maxHeight}px`
-                },
-                children: (options || []).map((option) => /* @__PURE__ */ jsxs(
-                  ListboxOption,
+                buttonText(),
+                endEnhancer ? /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    value: option.id,
+                    ...overrides?.endEnhancerContainer,
                     className: clsx(
-                      overrides?.option,
-                      styles.option,
-                      hasOptionBorder && styles.optionBorder
+                      inputStyles.enhancer,
+                      overrides?.endEnhancerContainer?.className
                     ),
-                    disabled: option.disabled || false,
-                    children: [
-                      typeof option.node === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", kind: "paragraphSmall", children: option.node }) : option.node,
-                      /* @__PURE__ */ jsx(Icon, { icon: Check, size: 12, className: styles.check })
-                    ]
-                  },
-                  option.id
-                ))
-              }
-            )
-          ] }) }),
-          kind === "radio" && /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              ref,
-              as: "div",
-              className: styles.radioContainer,
-              value: singleValue,
-              onChange: singleOnChange,
-              children: options.map((option) => /* @__PURE__ */ jsxs(
-                Radio,
-                {
-                  as: "div",
-                  className: clsx(styles.radioOption),
-                  value: option.id,
-                  disabled: option.disabled || false,
-                  "data-status": disabled ? "disabled" : status || "default",
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: styles.radioCircle }),
-                    /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", children: option.node })
-                  ]
-                },
-                option.id
-              ))
-            }
-          ),
-          kind === "card" && /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              ref,
-              as: "div",
-              className: styles.cardContainer,
-              value: singleValue,
-              onChange: singleOnChange,
-              children: options.map((option) => /* @__PURE__ */ jsx(
-                Radio,
-                {
-                  as: "div",
-                  className: clsx(styles.cardOption),
-                  value: option.id,
-                  disabled: option.disabled || false,
-                  "data-status": disabled ? "disabled" : status || "default",
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(styles.cardSurface, typeof option.node === "string" && styles.text),
-                      children: /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphSmall", children: option.node })
-                    }
-                  )
-                },
-                option.id
-              ))
+                    "data-status": disabled ? "disabled" : status || "default",
+                    children: !!endEnhancer && /* @__PURE__ */ jsx(
+                      MemoizedEnhancer,
+                      {
+                        enhancer: endEnhancer,
+                        size: parseInt(
+                          pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
+                          10
+                        )
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  FontAwesomeIcon,
+                  {
+                    className: clsx(inputStyles.enhancer, styles.chevron),
+                    "data-status": disabled ? "disabled" : status || "default",
+                    width: "10px",
+                    icon: faChevronDown
+                  }
+                )
+              ]
             }
           ),
-          kind === "segmented" && /* @__PURE__ */ jsx(
-            RadioGroup,
+          /* @__PURE__ */ jsx(
+            ListboxOptions,
             {
-              ref,
-              as: "div",
-              className: styles.segmentedContainer,
-              value: singleValue ?? options[0].id,
-              onChange: singleOnChange,
-              children: options.map((option) => /* @__PURE__ */ jsxs(
-                Radio,
+              anchor: "bottom start",
+              transition: true,
+              className: clsx(overrides?.optionsContainer, styles.options),
+              style: {
+                "--options-maxHeight": `${maxHeight}px`
+              },
+              children: (options || []).map((option) => /* @__PURE__ */ jsxs(
+                ListboxOption,
                 {
-                  as: "div",
-                  className: clsx(styles.segmentedOption, styles[segmentedHeight]),
                   value: option.id,
+                  className: clsx(
+                    overrides?.option,
+                    styles.option,
+                    hasOptionBorder && styles.optionBorder
+                  ),
                   disabled: option.disabled || false,
-                  "data-status": disabled ? "disabled" : status || "default",
                   children: [
-                    (option.id === resolvedValue || !resolvedValue && option.id === options[0].id) && /* @__PURE__ */ jsx(
-                      motion.div,
-                      {
-                        className: styles.segmentedBackground,
-                        layoutId: `${inputID}-segmented-selected`,
-                        transition: {
-                          ease: [0.42, 0, 0.58, 1],
-                          duration: 0.25
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", weight: "medium", className: styles.segmentedText, children: option.node })
+                    typeof option.node === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", kind: "paragraphSmall", children: option.node }) : option.node,
+                    /* @__PURE__ */ jsx(Icon, { icon: Check, size: 12, className: styles.check })
                   ]
                 },
                 option.id
               ))
             }
           )
-        ]
-      }
-    );
-  }
-);
+        ] }) }),
+        kind === "radio" && /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            ref: radioGroupRef,
+            as: "div",
+            tabIndex: -1,
+            className: styles.radioContainer,
+            value: singleValue,
+            onChange: singleOnChange,
+            children: options.map((option) => /* @__PURE__ */ jsxs(
+              Radio,
+              {
+                as: "div",
+                className: clsx(styles.radioOption),
+                value: option.id,
+                disabled: option.disabled || false,
+                "data-status": disabled ? "disabled" : status || "default",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: styles.radioCircle }),
+                  /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", children: option.node })
+                ]
+              },
+              option.id
+            ))
+          }
+        ),
+        kind === "card" && /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            ref: radioGroupRef,
+            as: "div",
+            tabIndex: -1,
+            className: styles.cardContainer,
+            value: singleValue,
+            onChange: singleOnChange,
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              Radio,
+              {
+                as: "div",
+                className: clsx(styles.cardOption),
+                value: option.id,
+                disabled: option.disabled || false,
+                "data-status": disabled ? "disabled" : status || "default",
+                children: /* @__PURE__ */ jsx("div", { className: clsx(styles.cardSurface, typeof option.node === "string" && styles.text), children: /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphSmall", children: option.node }) })
+              },
+              option.id
+            ))
+          }
+        ),
+        kind === "segmented" && /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            ref: radioGroupRef,
+            as: "div",
+            tabIndex: -1,
+            className: styles.segmentedContainer,
+            value: singleValue ?? options[0].id,
+            onChange: singleOnChange,
+            children: options.map((option) => /* @__PURE__ */ jsxs(
+              Radio,
+              {
+                as: "div",
+                className: clsx(styles.segmentedOption, styles[segmentedHeight]),
+                value: option.id,
+                disabled: option.disabled || false,
+                "data-status": disabled ? "disabled" : status || "default",
+                children: [
+                  (option.id === resolvedValue || !resolvedValue && option.id === options[0].id) && /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: styles.segmentedBackground,
+                      layoutId: `${inputID}-segmented-selected`,
+                      transition: {
+                        ease: [0.42, 0, 0.58, 1],
+                        duration: 0.25
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", weight: "medium", className: styles.segmentedText, children: option.node })
+                ]
+              },
+              option.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+const Select = forwardRef(SelectRender);
 
 export { Select };
 //# sourceMappingURL=Select.js.map