@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -0,0 +1,392 @@
+"use client";
+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";
+import { Button } from "../../Button/index.js";
+import { Stack } from "../../Stack/index.js";
+import { Tag } from "../../Tag/index.js";
+import { Text } from "../../Text/index.js";
+import { Tooltip } from "../../Tooltip/index.js";
+import { findOptionInOptions } from "../findOptionInOptions.js";
+import { useSelectInput } from "../SelectInputProvider.js";
+import { selectBar, selectinputPlaceholder, selectbarState, multiselectStack, selectBarTags, maxWidthTag, minWidthTag, plusTag, selectedValues } from "./selectBar.css.js";
+const SIZES_TAG = {
+  gap: 8,
+  paddings: 16
+};
+const DisplayValues = ({
+  refTag,
+  nonOverflowedValues,
+  potentiallyNonOverflowedValues,
+  disabled,
+  readOnly,
+  overflowed,
+  overflowAmount,
+  size,
+  measureRef,
+  lastElementMaxWidth,
+  overflow,
+  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 SelectBar = ({
+  size,
+  clearable,
+  disabled,
+  readOnly,
+  placeholder,
+  success,
+  error,
+  autoFocus,
+  tooltip,
+  innerRef,
+  id,
+  "data-testid": dataTestId,
+  label,
+  dropdownId
+}) => {
+  const {
+    isDropdownVisible,
+    onChange,
+    setIsDropdownVisible,
+    options,
+    selectedData,
+    setSelectedData,
+    multiselect
+  } = useSelectInput();
+  const openable = !(readOnly || disabled);
+  const [displayShadowCopy, setDisplayShadowCopy] = useState(false);
+  const refTag = useRef(null);
+  const measureRef = useRef(null);
+  const arrowRef = useRef(null);
+  const refPlusTag = useRef(null);
+  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] : [];
+      }
+      return [];
+    }
+  );
+  const potentiallyNonOverflowedValues = useMemo(
+    () => selectedData.selectedValues.map((selectedValue) => findOptionInOptions(options, selectedValue)).filter((option) => !!option),
+    [options, selectedData.selectedValues]
+  );
+  const state = useMemo(() => {
+    if (error) {
+      return "danger";
+    }
+    if (success) {
+      return "success";
+    }
+    return "neutral";
+  }, [error, success]);
+  useEffect(() => {
+    setDisplayShadowCopy(true);
+  }, [selectedData.selectedValues.length]);
+  const getWidth = useCallback(() => {
+    if (refTag.current) {
+      return refTag.current.offsetWidth;
+    }
+    return innerRef.current?.offsetWidth ?? 0 - (arrowRef.current?.offsetWidth ?? 0) - SIZES_TAG.paddings;
+  }, [innerRef.current?.offsetWidth]);
+  useLayoutEffect(() => {
+    if (selectedData.selectedValues.length === 0) {
+      setOverflowAmount(0);
+      setNonOverFlowedValues([]);
+    }
+    if (measureRef.current && selectedData.selectedValues.length > 0) {
+      const toMeasureElements = measureRef.current.children;
+      const toMeasureElementsArray = [...toMeasureElements];
+      const innerWidth = getWidth();
+      const {
+        measuredVisibleTags,
+        measuredHiddenTags,
+        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: []
+        }
+      );
+      const additionnalElementsWidth = SIZES_TAG.paddings + (refPlusTag.current?.offsetWidth ?? 0);
+      const finalWidth = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0);
+      const overflowPx = finalWidth - innerWidth;
+      const hasOverflow = overflowPx > 0;
+      const hasHiddenTags = measuredHiddenTags > 0;
+      const lastVisibleElementMaxSize = lastVisibleElementWidth - overflowPx;
+      if (measuredHiddenTags === 1 && measuredVisibleTags.length === 0) {
+        setOverflowAmount(0);
+        setNonOverFlowedValues([potentiallyNonOverflowedValues[0]]);
+        const newOverflowPx = lastVisibleElementWidth + (measuredHiddenTags > 1 ? additionnalElementsWidth : 0) - innerWidth;
+        setLastElementMaxWidth(lastVisibleElementWidth - newOverflowPx);
+        setOverflow(true);
+      } else if (hasOverflow && hasHiddenTags && (lastVisibleElementMaxSize > 65 || measuredVisibleTags.length === 1 && lastVisibleElementMaxSize > 65) && typeof lastVisibleLabel === "string") {
+        setLastElementMaxWidth(lastVisibleElementMaxSize);
+        setOverflow(true);
+        setOverflowAmount(measuredHiddenTags);
+        setNonOverFlowedValues(measuredVisibleTags);
+      } else if (hasOverflow && hasHiddenTags) {
+        setLastElementMaxWidth(0);
+        setOverflow(false);
+        setOverflowAmount(measuredHiddenTags + 1);
+        setNonOverFlowedValues(measuredVisibleTags.slice(0, -1));
+      } else {
+        setOverflow(false);
+        setOverflowAmount(measuredHiddenTags);
+        setNonOverFlowedValues(measuredVisibleTags);
+      }
+    }
+    setDisplayShadowCopy(false);
+  }, [
+    displayShadowCopy,
+    potentiallyNonOverflowedValues,
+    selectedData.selectedValues.length,
+    getWidth
+  ]);
+  useEffect(() => {
+    setSelectedData({ type: "update" });
+  }, [setSelectedData, options]);
+  const shouldDisplayValues = useMemo(() => {
+    if (multiselect) {
+      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?.("");
+                    }
+                  },
+                  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/components/dropdown.css.d.ts

@@ -0,0 +1,35 @@
+export declare const dropdown: string;
+export declare const dropdownContainer: string;
+export declare const dropdownContainerUnGrouped: string;
+export declare const dropdownGroup: string;
+export declare const dropdownGroupSelectable: string;
+export declare const dropdownGroupWrapper: string;
+export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    disabled: {
+        true: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            selectors: {
+                '&:hover, &:focus': {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                    cursor: "not-allowed";
+                    outline: "none";
+                };
+            };
+        };
+    };
+}>;
+export declare const footer: string;
+export declare const dropdownCheckbox: string;
+export declare const dropdownEmptyState: string;
+export declare const dropdownLoadMore: string;
+export declare const dropdownInfo: string;
+export declare const dropdownInfoTextItem: string;
+export declare const dropdownInfoContainer: string;
+export declare const searchBar: string;

package/dist/components/SelectInput/components/dropdown.css.js

@@ -0,0 +1,34 @@
+/* empty css                            */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var dropdown = "uv_5kpm8k0";
+var dropdownContainer = "uv_5kpm8k1";
+var dropdownContainerUnGrouped = "uv_5kpm8k2";
+var dropdownGroup = "uv_5kpm8k3";
+var dropdownGroupSelectable = "uv_5kpm8k4";
+var dropdownGroupWrapper = "uv_5kpm8k5";
+var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k6", variantClassNames: { selected: { true: "uv_5kpm8k7" }, disabled: { true: "uv_5kpm8k8" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
+var footer = "uv_5kpm8k9";
+var dropdownCheckbox = "uv_5kpm8ka";
+var dropdownEmptyState = "uv_5kpm8kb";
+var dropdownLoadMore = "uv_5kpm8kc";
+var dropdownInfo = "uv_5kpm8kd";
+var dropdownInfoTextItem = "uv_5kpm8ke";
+var dropdownInfoContainer = "uv_5kpm8kf";
+var searchBar = "uv_5kpm8kg";
+export {
+  dropdown,
+  dropdownCheckbox,
+  dropdownContainer,
+  dropdownContainerUnGrouped,
+  dropdownEmptyState,
+  dropdownGroup,
+  dropdownGroupSelectable,
+  dropdownGroupWrapper,
+  dropdownInfo,
+  dropdownInfoContainer,
+  dropdownInfoTextItem,
+  dropdownItem,
+  dropdownLoadMore,
+  footer,
+  searchBar
+};

package/dist/components/SelectInput/components/selectBar.css.d.ts

@@ -0,0 +1,108 @@
+export declare const maxWidthTag: `var(--${string})`;
+export declare const minWidthTag: `var(--${string})`;
+export declare const selectbarState: string;
+export declare const selectinputPlaceholder: string;
+export declare const selectBarBase: string;
+export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        small: {
+            height: `var(--${string})`;
+            paddingLeft: `var(--${string})`;
+        };
+        medium: {
+            height: `var(--${string})`;
+        };
+        large: {
+            height: `var(--${string})`;
+        };
+    };
+    state: {
+        neutral: {
+            selectors: {
+                '&:not([data-disabled="true"])': {
+                    border: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):active': {
+                    borderColor: `var(--${string})`;
+                    boxShadow: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
+                    borderColor: `var(--${string})`;
+                    outline: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
+                    outline: string;
+                };
+            };
+        };
+        success: {
+            selectors: {
+                '&:not([data-disabled="true"])': {
+                    border: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):active': {
+                    borderColor: `var(--${string})`;
+                    boxShadow: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
+                    borderColor: `var(--${string})`;
+                    outline: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
+                    outline: string;
+                };
+            };
+        };
+        danger: {
+            selectors: {
+                '&:not([data-disabled="true"])': {
+                    border: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):active': {
+                    borderColor: `var(--${string})`;
+                    boxShadow: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
+                    borderColor: `var(--${string})`;
+                    outline: string;
+                };
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
+                    outline: string;
+                };
+            };
+        };
+    };
+    dropdownVisible: {
+        true: {
+            borderColor: `var(--${string})`;
+        };
+    };
+    readOnly: {
+        true: {
+            background: `var(--${string})`;
+            borderColor: `var(--${string})`;
+            cursor: "default";
+            selectors: {
+                '&:hover': {
+                    borderColor: `var(--${string})`;
+                };
+            };
+        };
+    };
+    disabled: {
+        true: {
+            background: `var(--${string})`;
+            borderColor: `var(--${string})`;
+            cursor: "not-allowed";
+            selectors: {
+                '&:hover': {
+                    borderColor: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
+export declare const selectBarTags: Record<"hidden" | "visible", string>;
+export declare const selectedValues: string;
+export declare const plusTag: string;
+export declare const multiselectStack: string;

package/dist/components/SelectInput/components/selectBar.css.js

@@ -0,0 +1,22 @@
+/* empty css                             */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var maxWidthTag = "var(--uv_1ba7knd0)";
+var minWidthTag = "var(--uv_1ba7knd1)";
+var selectbarState = "uv_1ba7knd2";
+var selectinputPlaceholder = "uv_1ba7knd3";
+var selectBar = createRuntimeFn({ defaultClassName: "uv_1ba7knd5 uv_1ba7knd4", variantClassNames: { size: { small: "uv_1ba7knd6", medium: "uv_1ba7knd7", large: "uv_1ba7knd8" }, state: { neutral: "uv_1ba7knd9", success: "uv_1ba7knda", danger: "uv_1ba7kndb" }, dropdownVisible: { true: "uv_1ba7kndc" }, readOnly: { true: "uv_1ba7kndd" }, disabled: { true: "uv_1ba7knde" } }, defaultVariants: { state: "neutral", size: "large", dropdownVisible: false, readOnly: false, disabled: false }, compoundVariants: [[{ dropdownVisible: true, state: "neutral" }, "uv_1ba7kndf"], [{ dropdownVisible: true, state: "success" }, "uv_1ba7kndg"], [{ dropdownVisible: true, state: "danger" }, "uv_1ba7kndh"]] });
+var selectBarTags = { hidden: "uv_1ba7kndj uv_1ba7kndi", visible: "uv_1ba7kndk uv_1ba7kndi" };
+var selectedValues = "uv_1ba7kndl";
+var plusTag = "uv_1ba7kndm";
+var multiselectStack = "uv_1ba7kndn";
+export {
+  maxWidthTag,
+  minWidthTag,
+  multiselectStack,
+  plusTag,
+  selectBar,
+  selectBarTags,
+  selectbarState,
+  selectedValues,
+  selectinputPlaceholder
+};

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

@@ -123,9 +123,9 @@ type SelectInputProps<IsMulti extends undefined | boolean = false> = {
      * Please wrap that definition in useCallback
      */
     onOpen?: () => void;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className' | 'style'>;
 /**
  * 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, }: 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 {};