@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/SelectInput/components/SelectBar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircleIcon, CheckCircleIcon, CloseIcon, ArrowDownIcon, PlusIcon } from "@ultraviolet/icons";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect } from "react";
@@ -30,35 +30,91 @@ const DisplayValues = ({
   refPlusTag,
   displayShadowCopy
 }) => {
-  const {
-    multiselect,
-    selectedData,
-    setSelectedData,
-    options,
-    onChange
-  } = useSelectInput();
-  return multiselect ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: multiselectStack, direction: "row", gap: "1", ref: refTag, wrap: "nowrap", children: [
-    displayShadowCopy ? /* @__PURE__ */ jsx("div", { ref: measureRef, style: {
-      position: "absolute"
-    }, children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsx(Tag, { className: `${option.value} ${selectBarTags.hidden}`, onClose: () => {
-    }, children: option?.label }, option.value)) }) : null,
-    nonOverflowedValues.map((option, index) => /* @__PURE__ */ jsx(Tag, { className: selectBarTags.visible, "data-testid": "selected-options-tags", disabled, onClose: !readOnly ? (event) => {
-      event.stopPropagation();
-      setSelectedData({
-        clickedOption: option,
-        type: "selectOption"
-      });
-      const newSelectedValues = selectedData.selectedValues?.filter((val) => val !== option.value);
-      onChange?.(newSelectedValues);
-    } : void 0, sentiment: "neutral", style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
-      [minWidthTag]: "auto",
-      [maxWidthTag]: `${lastElementMaxWidth}px`
-    }) : void 0, children: option?.label }, option?.value)),
-    overflowed ? /* @__PURE__ */ jsx(Stack, { justifyContent: "center", ref: refPlusTag, children: /* @__PURE__ */ jsxs(Tag, { "aria-label": "Plus tag", className: plusTag, "data-testid": "plus-tag", disabled, sentiment: "neutral", children: [
-      /* @__PURE__ */ jsx(PlusIcon, { size: "xsmall" }),
-      overflowAmount
-    ] }, "+") }) : null
-  ] }) : /* @__PURE__ */ jsx(Text, { as: "span", className: selectedValues, disabled, prominence: "default", sentiment: "neutral", variant: size === "large" ? "body" : "bodySmall", children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null });
+  const { multiselect, selectedData, setSelectedData, options, onChange } = useSelectInput();
+  return multiselect ? /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      alignItems: "center",
+      className: multiselectStack,
+      direction: "row",
+      gap: "1",
+      ref: refTag,
+      wrap: "nowrap",
+      children: [
+        displayShadowCopy ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: measureRef,
+            style: {
+              position: "absolute"
+            },
+            children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                className: `${option.value} ${selectBarTags.hidden}`,
+                onClose: () => {
+                },
+                children: option?.label
+              },
+              option.value
+            ))
+          }
+        ) : null,
+        nonOverflowedValues.map((option, index) => /* @__PURE__ */ jsx(
+          Tag,
+          {
+            className: selectBarTags.visible,
+            "data-testid": "selected-options-tags",
+            disabled,
+            onClose: !readOnly ? (event) => {
+              event.stopPropagation();
+              setSelectedData({
+                clickedOption: option,
+                type: "selectOption"
+              });
+              const newSelectedValues = selectedData.selectedValues?.filter(
+                (val) => val !== option.value
+              );
+              onChange?.(newSelectedValues);
+            } : void 0,
+            sentiment: "neutral",
+            style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
+              [minWidthTag]: "auto",
+              [maxWidthTag]: `${lastElementMaxWidth}px`
+            }) : void 0,
+            children: option?.label
+          },
+          option?.value
+        )),
+        overflowed ? /* @__PURE__ */ jsx(Stack, { justifyContent: "center", ref: refPlusTag, children: /* @__PURE__ */ jsxs(
+          Tag,
+          {
+            "aria-label": "Plus tag",
+            className: plusTag,
+            "data-testid": "plus-tag",
+            disabled,
+            sentiment: "neutral",
+            children: [
+              /* @__PURE__ */ jsx(PlusIcon, { size: "xsmall" }),
+              overflowAmount
+            ]
+          },
+          "+"
+        ) }) : null
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "span",
+      className: selectedValues,
+      disabled,
+      prominence: "default",
+      sentiment: "neutral",
+      variant: size === "large" ? "body" : "bodySmall",
+      children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null
+    }
+  );
 };
 const SelectBar = ({
   size,
@@ -94,14 +150,22 @@ const SelectBar = ({
   const [overflowAmount, setOverflowAmount] = useState(0);
   const [overflow, setOverflow] = useState(false);
   const [lastElementMaxWidth, setLastElementMaxWidth] = useState(0);
-  const [nonOverflowedValues, setNonOverFlowedValues] = useState(() => {
-    if (selectedData.selectedValues[0]) {
-      const firstSelectOption = findOptionInOptions(options, selectedData.selectedValues[0]);
-      return firstSelectOption ? [firstSelectOption] : [];
+  const [nonOverflowedValues, setNonOverFlowedValues] = useState(
+    () => {
+      if (selectedData.selectedValues[0]) {
+        const firstSelectOption = findOptionInOptions(
+          options,
+          selectedData.selectedValues[0]
+        );
+        return firstSelectOption ? [firstSelectOption] : [];
+      }
+      return [];
     }
-    return [];
-  });
-  const potentiallyNonOverflowedValues = useMemo(() => selectedData.selectedValues.map((selectedValue) => findOptionInOptions(options, selectedValue)).filter((option) => !!option), [options, selectedData.selectedValues]);
+  );
+  const potentiallyNonOverflowedValues = useMemo(
+    () => selectedData.selectedValues.map((selectedValue) => findOptionInOptions(options, selectedValue)).filter((option) => !!option),
+    [options, selectedData.selectedValues]
+  );
   const state = useMemo(() => {
     if (error) {
       return "danger";
@@ -135,24 +199,30 @@ const SelectBar = ({
         accumulatedWidth,
         lastVisibleElementWidth,
         lastVisibleLabel
-      } = toMeasureElementsArray.reduce((accumulator, currentValue, index) => {
-        const elementWidth = currentValue.offsetWidth;
-        const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
-        const canBeVisible = newAccumulatedWidth <= innerWidth;
-        return {
-          accumulatedWidth: !canBeVisible ? accumulator.accumulatedWidth : newAccumulatedWidth,
-          lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
-          lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index].label : accumulator.lastVisibleLabel,
-          measuredHiddenTags: accumulator.measuredHiddenTags + (!canBeVisible ? 1 : 0),
-          measuredVisibleTags: [...accumulator.measuredVisibleTags, canBeVisible && potentiallyNonOverflowedValues[index]].filter(Boolean)
-        };
-      }, {
-        accumulatedWidth: 0,
-        lastVisibleElementWidth: 0,
-        lastVisibleLabel: "",
-        measuredHiddenTags: 0,
-        measuredVisibleTags: []
-      });
+      } = toMeasureElementsArray.reduce(
+        (accumulator, currentValue, index) => {
+          const elementWidth = currentValue.offsetWidth;
+          const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
+          const canBeVisible = newAccumulatedWidth <= innerWidth;
+          return {
+            accumulatedWidth: !canBeVisible ? accumulator.accumulatedWidth : newAccumulatedWidth,
+            lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
+            lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index].label : accumulator.lastVisibleLabel,
+            measuredHiddenTags: accumulator.measuredHiddenTags + (!canBeVisible ? 1 : 0),
+            measuredVisibleTags: [
+              ...accumulator.measuredVisibleTags,
+              canBeVisible && potentiallyNonOverflowedValues[index]
+            ].filter(Boolean)
+          };
+        },
+        {
+          accumulatedWidth: 0,
+          lastVisibleElementWidth: 0,
+          lastVisibleLabel: "",
+          measuredHiddenTags: 0,
+          measuredVisibleTags: []
+        }
+      );
       const additionnalElementsWidth = SIZES_TAG.paddings + (refPlusTag.current?.offsetWidth ?? 0);
       const finalWidth = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0);
       const overflowPx = finalWidth - innerWidth;
@@ -182,55 +252,140 @@ const SelectBar = ({
       }
     }
     setDisplayShadowCopy(false);
-  }, [displayShadowCopy, potentiallyNonOverflowedValues, selectedData.selectedValues.length, getWidth]);
+  }, [
+    displayShadowCopy,
+    potentiallyNonOverflowedValues,
+    selectedData.selectedValues.length,
+    getWidth
+  ]);
   useEffect(() => {
-    setSelectedData({
-      type: "update"
-    });
+    setSelectedData({ type: "update" });
   }, [setSelectedData, options]);
   const shouldDisplayValues = useMemo(() => {
     if (multiselect) {
-      return potentiallyNonOverflowedValues.length > 0 || selectedData.selectedValues.some((selectedValue) => findOptionInOptions(options, selectedValue) !== void 0);
+      return potentiallyNonOverflowedValues.length > 0 || selectedData.selectedValues.some(
+        (selectedValue) => findOptionInOptions(options, selectedValue) !== void 0
+      );
     }
     return selectedData.selectedValues[0] !== void 0 && findOptionInOptions(options, selectedData.selectedValues[0]) !== void 0;
-  }, [multiselect, options, potentiallyNonOverflowedValues.length, selectedData.selectedValues]);
-  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("div", { "aria-controls": dropdownId, "aria-expanded": isDropdownVisible, "aria-label": label, autoFocus, className: selectBar({
-    disabled,
-    dropdownVisible: isDropdownVisible,
-    readOnly,
-    size,
-    state
-  }), "data-disabled": disabled, "data-readonly": readOnly, "data-testid": dataTestId, id, onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : void 0, onKeyDown: (event) => {
-    if (event.key === "ArrowDown") {
-      if (!isDropdownVisible) {
-        setIsDropdownVisible(true);
-      } else {
-        document.getElementById(`option-0`)?.focus();
-      }
-    }
-    if (event.key === " ") {
-      event.preventDefault();
-    }
-    return ["Enter", " "].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
-  }, ref: innerRef, role: "combobox", tabIndex: 0, children: [
-    shouldDisplayValues ? /* @__PURE__ */ jsx(DisplayValues, { disabled, displayShadowCopy, lastElementMaxWidth, measureRef, nonOverflowedValues, overflow, overflowAmount, overflowed: !!overflowAmount, potentiallyNonOverflowedValues, readOnly, refPlusTag, refTag, size }) : /* @__PURE__ */ jsx(Text, { as: "span", className: selectinputPlaceholder, disabled, prominence: "weak", sentiment: "neutral", variant: size === "large" ? "body" : "bodySmall", children: placeholder }),
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: selectbarState, direction: "row", gap: 1, ref: arrowRef, children: [
-      error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
-      success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null,
-      clearable && selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", "data-testid": "clear-all", disabled: disabled || !selectedData.selectedValues[0] || readOnly, onClick: (event) => {
-        event.stopPropagation();
-        setSelectedData({
-          type: "clearAll"
-        });
-        if (multiselect) {
-          onChange?.([]);
-        } else {
-          onChange?.("");
+  }, [
+    multiselect,
+    options,
+    potentiallyNonOverflowedValues.length,
+    selectedData.selectedValues
+  ]);
+  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownVisible,
+      "aria-label": label,
+      autoFocus,
+      className: selectBar({
+        disabled,
+        dropdownVisible: isDropdownVisible,
+        readOnly,
+        size,
+        state
+      }),
+      "data-disabled": disabled,
+      "data-readonly": readOnly,
+      "data-testid": dataTestId,
+      id,
+      onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : void 0,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown") {
+          if (!isDropdownVisible) {
+            setIsDropdownVisible(true);
+          } else {
+            document.getElementById(`option-0`)?.focus();
+          }
         }
-      }, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null,
-      /* @__PURE__ */ jsx(ArrowDownIcon, { "aria-label": "show dropdown", disabled: disabled || readOnly, sentiment: "neutral", size: "small" })
-    ] })
-  ] }) });
+        if (event.key === " ") {
+          event.preventDefault();
+        }
+        return ["Enter", " "].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
+      },
+      ref: innerRef,
+      role: "combobox",
+      tabIndex: 0,
+      children: [
+        shouldDisplayValues ? /* @__PURE__ */ jsx(
+          DisplayValues,
+          {
+            disabled,
+            displayShadowCopy,
+            lastElementMaxWidth,
+            measureRef,
+            nonOverflowedValues,
+            overflow,
+            overflowAmount,
+            overflowed: !!overflowAmount,
+            potentiallyNonOverflowedValues,
+            readOnly,
+            refPlusTag,
+            refTag,
+            size
+          }
+        ) : /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            className: selectinputPlaceholder,
+            disabled,
+            prominence: "weak",
+            sentiment: "neutral",
+            variant: size === "large" ? "body" : "bodySmall",
+            children: placeholder
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: "center",
+            className: selectbarState,
+            direction: "row",
+            gap: 1,
+            ref: arrowRef,
+            children: [
+              error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
+              success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null,
+              clearable && selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "clear value",
+                  "data-testid": "clear-all",
+                  disabled: disabled || !selectedData.selectedValues[0] || readOnly,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    setSelectedData({ type: "clearAll" });
+                    if (multiselect) {
+                      onChange?.([]);
+                    } else {
+                      onChange?.("");
+                    }
+                  },
+                  sentiment: "neutral",
+                  size: "small",
+                  variant: "ghost",
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                ArrowDownIcon,
+                {
+                  "aria-label": "show dropdown",
+                  disabled: disabled || readOnly,
+                  sentiment: "neutral",
+                  size: "small"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 };
 export {
   SelectBar

package/dist/components/SelectInput/index.d.ts

@@ -127,5 +127,5 @@ type SelectInputProps<IsMulti extends undefined | boolean = false> = {
 /**
  * SelectInput component is used to select one or many elements from a selection.
  */
-export declare const SelectInput: <IsMulti extends undefined | boolean>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, dropdownAlign, portalTarget, onOpen, style, }: SelectInputProps<IsMulti>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SelectInput: <IsMulti extends undefined | boolean>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, dropdownAlign, portalTarget, onOpen, style, }: SelectInputProps<IsMulti>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectInput/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef } from "react";
 import { Label } from "../Label/index.js";
 import { Stack } from "../Stack/index.js";
@@ -52,16 +52,108 @@ const SelectInput = ({
   const finalId = id ?? localId;
   const dropdownId = useId();
   const ref = useRef(null);
-  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.filter((option) => !option.disabled).length, 0);
+  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce(
+    (acc, current) => acc + current.filter((option) => !option.disabled).length,
+    0
+  );
   const finalDataTestId = dataTestId ?? `select-input-${name ?? "name"}`;
-  return /* @__PURE__ */ jsx(SelectInputProvider, { multiselect, numberOfOptions, onChange, onOpen, options, refSelect: ref, selectAll, selectAllGroup, value, children: /* @__PURE__ */ jsxs("div", { "aria-label": name, className: `${className ? `${className} ` : ""}${selectinputContainer}`, onBlur, onFocus, style, children: [
-    /* @__PURE__ */ jsx(Dropdown, { descriptionDirection, dropdownAlign, emptyState, footer, id: dropdownId, isLoading, loadMore, optionalInfoPlacement, placeholder: placeholderSearch, portalTarget, refSelect: ref, searchable, size, children: /* @__PURE__ */ jsxs(Stack, { "aria-label": ariaLabel, gap: 0.5, children: [
-      label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: finalId, labelDescription, required, size, children: label }) : null,
-      /* @__PURE__ */ jsx(SelectBar, { autoFocus: autofocus, clearable, "data-testid": finalDataTestId, disabled, dropdownId, error, id: finalId, innerRef: ref, label, placeholder, readOnly, size, success, tooltip })
-    ] }) }),
-    !error && !success && helper ? /* @__PURE__ */ jsx(Text, { as: "p", className: selectinputHelper, prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
-    error && typeof error === "string" || success ? /* @__PURE__ */ jsx(Text, { as: "p", className: selectinputHelper, prominence: "default", sentiment: error ? "danger" : "success", variant: "caption", children: error || success }) : null
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    SelectInputProvider,
+    {
+      multiselect,
+      numberOfOptions,
+      onChange,
+      onOpen,
+      options,
+      refSelect: ref,
+      selectAll,
+      selectAllGroup,
+      value,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-label": name,
+          className: `${className ? `${className} ` : ""}${selectinputContainer}`,
+          onBlur,
+          onFocus,
+          style,
+          children: [
+            /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                descriptionDirection,
+                dropdownAlign,
+                emptyState,
+                footer,
+                id: dropdownId,
+                isLoading,
+                loadMore,
+                optionalInfoPlacement,
+                placeholder: placeholderSearch,
+                portalTarget,
+                refSelect: ref,
+                searchable,
+                size,
+                children: /* @__PURE__ */ jsxs(Stack, { "aria-label": ariaLabel, gap: 0.5, children: [
+                  label || labelDescription ? /* @__PURE__ */ jsx(
+                    Label,
+                    {
+                      htmlFor: finalId,
+                      labelDescription,
+                      required,
+                      size,
+                      children: label
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    SelectBar,
+                    {
+                      autoFocus: autofocus,
+                      clearable,
+                      "data-testid": finalDataTestId,
+                      disabled,
+                      dropdownId,
+                      error,
+                      id: finalId,
+                      innerRef: ref,
+                      label,
+                      placeholder,
+                      readOnly,
+                      size,
+                      success,
+                      tooltip
+                    }
+                  )
+                ] })
+              }
+            ),
+            !error && !success && helper ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "p",
+                className: selectinputHelper,
+                prominence: "weak",
+                sentiment: "neutral",
+                variant: "caption",
+                children: helper
+              }
+            ) : null,
+            error && typeof error === "string" || success ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "p",
+                className: selectinputHelper,
+                prominence: "default",
+                sentiment: error ? "danger" : "success",
+                variant: "caption",
+                children: error || success
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
 };
 export {
   SelectInput