@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/SelectInputV2/DropdownOption.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const StyledInfo = styled.div`
+  align-content: center;
+`;
+const DisplayOption = ({
+  option,
+  optionalInfoPlacement,
+  descriptionDirection
+}) => {
+  if (descriptionDirection === "row" && optionalInfoPlacement === "left") {
+    return /* @__PURE__ */ jsx(
+      Stack,
+      {
+        gap: 0.5,
+        direction: "row",
+        justifyContent: "left",
+        "data-testid": `option-stack-${option.value}`,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 0.5, direction: "row", alignItems: "center", children: [
+          option.optionalInfo ?? null,
+          /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", placement: "left", children: option.label }),
+          option.description ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "span",
+              variant: "bodySmall",
+              sentiment: "neutral",
+              placement: "left",
+              prominence: "weak",
+              children: option.description
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+  if (descriptionDirection === "row" && optionalInfoPlacement === "right") {
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        gap: 0.5,
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "baseline",
+        "data-testid": `option-stack-${option.value}`,
+        children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 0.5, direction: "row", children: [
+            /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", placement: "left", children: option.label }),
+            option.description ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                variant: "bodySmall",
+                sentiment: "neutral",
+                placement: "left",
+                prominence: "weak",
+                children: option.description
+              }
+            ) : null
+          ] }),
+          option.optionalInfo ? /* @__PURE__ */ jsx(StyledInfo, { children: option.optionalInfo }) : null
+        ]
+      }
+    );
+  }
+  if (descriptionDirection === "column" && optionalInfoPlacement === "left") {
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        gap: 0.5,
+        direction: "row",
+        justifyContent: option.optionalInfo ? "left" : "space-between",
+        alignItems: "normal",
+        children: [
+          option.optionalInfo ?? null,
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              gap: 0.5,
+              direction: "column",
+              "data-testid": `option-stack-${option.value}`,
+              children: [
+                /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", placement: "left", children: option.label }),
+                option.description ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    variant: "bodySmall",
+                    sentiment: "neutral",
+                    placement: "left",
+                    prominence: "weak",
+                    children: option.description
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: 0.5,
+      direction: "column",
+      alignItems: "normal",
+      "data-testid": `option-stack-${option.value}`,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 0.5, direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", placement: "left", children: option.label }),
+          option.optionalInfo ? /* @__PURE__ */ jsx(StyledInfo, { children: option.optionalInfo }) : null
+        ] }),
+        option.description ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            variant: "bodySmall",
+            sentiment: "neutral",
+            placement: "left",
+            prominence: "weak",
+            children: option.description
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  DisplayOption
+};

package/dist/components/SelectInputV2/SearchBarDropdown.d.ts

@@ -0,0 +1,9 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { DataType } from './types';
+type SearchBarProps = {
+    placeholder: string;
+    displayedOptions: DataType;
+    setSearchBarActive: Dispatch<SetStateAction<boolean>>;
+};
+export declare const SearchBarDropdown: ({ placeholder, displayedOptions, setSearchBarActive, }: SearchBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SelectInputV2/SearchBarDropdown.js

@@ -0,0 +1,123 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { useRef } from "react";
+import { TextInputV2 } from "../TextInputV2/index.js";
+import { useSelectInput } from "./SelectInputProvider.js";
+const StyledInput = styled(TextInputV2)`
+  padding-top: ${({ theme }) => theme.space[1.5]};
+  padding-bottom: ${({ theme }) => theme.space[1.5]};
+  padding-left: ${({ theme }) => theme.space[2]};
+  padding-right: ${({ theme }) => theme.space[2]};
+`;
+const findClosestOption = (options, searchInput) => {
+  if (searchInput) {
+    if (!Array.isArray(options)) {
+      const possibleOptions = { ...options };
+      Object.keys(possibleOptions).map((group) => {
+        possibleOptions[group] = possibleOptions[group].filter(
+          (option) => !option.disabled
+        );
+        return null;
+      });
+      if (Object.keys(possibleOptions).some(
+        (group) => possibleOptions[group].length > 0
+      )) {
+        const firstFit = Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).filter((value) => !!value)[0];
+        return firstFit;
+      }
+    } else {
+      const possibleOptions = [...options].filter((option) => !option.disabled);
+      if (possibleOptions.length > 0) {
+        return possibleOptions[0];
+      }
+    }
+  }
+  return null;
+};
+const SearchBarDropdown = ({
+  placeholder,
+  displayedOptions,
+  setSearchBarActive
+}) => {
+  const searchInputRef = useRef(null);
+  const {
+    onChange,
+    onSearch,
+    setSearchInput,
+    searchInput,
+    options,
+    multiselect,
+    setSelectedData,
+    selectedData
+  } = useSelectInput();
+  const handleChange = (search) => {
+    if (search.length > 0) {
+      const regex = RegExp(search, "i");
+      if (!Array.isArray(options)) {
+        const filteredOptions = { ...options };
+        Object.keys(filteredOptions).map((group) => {
+          filteredOptions[group] = filteredOptions[group].filter(
+            (option) => option.searchText ? option.searchText.match(regex) : option.value.match(regex)
+          );
+          return null;
+        });
+        onSearch(filteredOptions);
+      } else {
+        const filteredOptions = [...options].filter(
+          (option) => option.searchText ? option.searchText.match(regex) : option.value.match(regex)
+        );
+        onSearch(filteredOptions);
+      }
+    } else {
+      onSearch(options);
+    }
+    setSearchInput(search);
+  };
+  const handleKeyDown = (key, search) => {
+    if (key === "Enter") {
+      const closestOption = findClosestOption(displayedOptions, search);
+      if (closestOption) {
+        if (multiselect) {
+          setSelectedData({
+            type: "selectOption",
+            clickedOption: closestOption,
+            group: !Array.isArray(options) ? Object.keys(options).filter(
+              (group) => options[group].includes(closestOption)
+            )[0] : void 0
+          });
+          onChange?.(
+            selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]
+          );
+          setSearchInput(closestOption.searchText ?? closestOption.value);
+        } else {
+          setSelectedData({
+            type: "selectOption",
+            clickedOption: closestOption
+          });
+          onChange?.(selectedData.selectedValues[0] ?? "");
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    StyledInput,
+    {
+      value: searchInput,
+      onChange: (event) => handleChange(event),
+      placeholder,
+      onFocus: () => setSearchBarActive(true),
+      onBlur: () => setSearchBarActive(false),
+      "data-testid": "search-bar",
+      prefix: /* @__PURE__ */ jsx(Icon, { name: "search", size: "small", sentiment: "neutral" }),
+      onKeyDown: (event) => handleKeyDown(event.key, searchInput),
+      size: "medium",
+      autoFocus: true,
+      "aria-label": "search-bar",
+      ref: searchInputRef
+    }
+  );
+};
+export {
+  SearchBarDropdown
+};

package/dist/components/SelectInputV2/SelectBar.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+type SelectBarProps = {
+    size: 'small' | 'medium' | 'large';
+    clearable: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    placeholder: string;
+    success?: string;
+    error?: string;
+    autoFocus?: boolean;
+    innerRef: RefObject<HTMLDivElement>;
+};
+export declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, innerRef, }: SelectBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SelectInputV2/SelectBar.js

@@ -0,0 +1,327 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { useRef, useState, useMemo, useEffect } 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 { useSelectInput } from "./SelectInputProvider.js";
+import { findOptionInOptions } from "./findOptionInOptions.js";
+import { INPUT_SIZE_HEIGHT, SIZES_TAG } from "./types.js";
+const StateStack = styled(Stack)`
+  padding-right: ${({ theme }) => theme.space["2"]};
+  display: flex;
+`;
+const StyledInputWrapper = styled(Stack)`
+  display: flex;
+  padding: ${({ theme }) => theme.space[1]};
+  padding-right: 0;
+  padding-left: ${({ theme }) => theme.space[2]};
+  cursor: pointer;
+  box-shadow: none;
+  background: ${({ theme }) => theme.colors.neutral.background};
+  border-radius: ${({ theme }) => theme.radii.default};
+
+  &[data-readonly='true'] {
+    background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+    border-color: ${({ theme }) => theme.colors.neutral.border};
+    cursor: default;
+  }
+
+  &[data-disabled='true'] {
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    border-color: ${({ theme }) => theme.colors.neutral.borderDisabled};
+    cursor: not-allowed;
+  }
+  &[data-size='small'] {
+    height: ${INPUT_SIZE_HEIGHT.small}px;
+  }
+  &[data-size='medium'] {
+    height: ${INPUT_SIZE_HEIGHT.medium}px;
+  }
+  &[data-size='large'] {
+    height: ${INPUT_SIZE_HEIGHT.large}px;
+  }
+  &[data-state='neutral'] {
+    border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  }
+  &[data-state='success'] {
+    border: 1px solid ${({ theme }) => theme.colors.success.border};
+  }
+  &[data-state='danger'] {
+    border: 1px solid ${({ theme }) => theme.colors.danger.border};
+  }
+
+  &:not([data-disabled='true']):not([data-readonly]):hover {
+    border-color: ${({ theme }) => theme.colors.primary.border};
+  }
+
+  &:not([data-disabled='true']):not([data-readonly]):active {
+    box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
+  }
+  &:hover,
+  :focus {
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+    outline: none;
+  }
+
+  &[data-dropdownvisible='true'] {
+    box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+  }
+`;
+const CustomTag = styled(Tag)`
+  height: fit-content;
+  width: fit-content;
+`;
+const StyledPlaceholder = styled(Text)`
+  color: ${({ theme }) => theme.colors.neutral.textWeak};
+  text-size: ${({ theme }) => theme.typography.body.fontSize};
+  display: flex;
+  flex: 1;
+  align-self: center;
+
+  &[data-disabled='true'] {
+    color: ${({ theme }) => theme.colors.neutral.textWeakDisabled};
+  }
+`;
+const isValidSelectedValue = (selectedValue, options) => !Array.isArray(options) ? Object.keys(options).some(
+  (group) => options[group].some(
+    (option) => option.value === selectedValue && !option.disabled
+  )
+) : options.some((option) => option.value === selectedValue && !option.disabled);
+const DisplayValues = ({
+  refTag,
+  nonOverflowedValues,
+  disabled,
+  readOnly,
+  overflowed,
+  overflowAmount,
+  size
+}) => {
+  const { multiselect, selectedData, setSelectedData, options, onChange } = useSelectInput();
+  return multiselect ? /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      gap: "1",
+      wrap: "nowrap",
+      ref: refTag,
+      alignItems: "center",
+      children: [
+        nonOverflowedValues.map((option) => /* @__PURE__ */ jsx(
+          CustomTag,
+          {
+            "data-testid": "selected-options-tags",
+            sentiment: "neutral",
+            disabled,
+            onClose: !readOnly ? (event) => {
+              event.stopPropagation();
+              setSelectedData({
+                type: "selectOption",
+                clickedOption: option
+              });
+              const newSelectedValues = selectedData.selectedValues?.filter(
+                (val) => val !== option.value
+              );
+              onChange?.(newSelectedValues);
+            } : void 0,
+            children: option?.label
+          },
+          option?.value
+        )),
+        overflowed ? /* @__PURE__ */ jsxs(
+          Tag,
+          {
+            sentiment: "neutral",
+            disabled,
+            "data-testid": "plus-tag",
+            "aria-label": "Plus tag",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "plus" }),
+              overflowAmount
+            ]
+          },
+          "+"
+        ) : null
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(Text, { as: "p", 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,
+  innerRef
+}) => {
+  const {
+    isDropdownVisible,
+    onChange,
+    setIsDropdownVisible,
+    options,
+    selectedData,
+    setSelectedData,
+    multiselect
+  } = useSelectInput();
+  const openable = !(readOnly || disabled);
+  const refTag = useRef(null);
+  const width = innerRef.current?.offsetWidth;
+  const [overflowed, setOverflowed] = useState(false);
+  const [overflowAmount, setOverflowAmount] = useState(0);
+  const [nonOverflowedValues, setNonOverFlowedValues] = useState(
+    () => {
+      if (selectedData.selectedValues[0]) {
+        const firstSelectOption = findOptionInOptions(
+          options,
+          selectedData.selectedValues[0]
+        );
+        return firstSelectOption ? [firstSelectOption] : [];
+      }
+      return [];
+    }
+  );
+  const state = useMemo(() => {
+    if (error) {
+      return "danger";
+    }
+    if (success) {
+      return "success";
+    }
+    return "neutral";
+  }, [error, success]);
+  useEffect(() => {
+    let tagsWidth = 0;
+    let computedOverflowAmount = 0;
+    let computedNonOverflowedValues = [];
+    const newSelectedValues = selectedData.selectedValues.filter(
+      (selectedValue) => isValidSelectedValue(selectedValue, options)
+    );
+    for (const selectedValue of newSelectedValues) {
+      const selectedOption = findOptionInOptions(options, selectedValue);
+      if (selectedOption?.label && width && isValidSelectedValue(selectedValue, options)) {
+        const lengthValue = selectedOption.value.length;
+        const totalTagWidth = SIZES_TAG.tagWidth + SIZES_TAG.letterWidth * lengthValue;
+        if (totalTagWidth + tagsWidth > width - 100) {
+          computedOverflowAmount += 1;
+          setOverflowAmount(computedOverflowAmount);
+        } else {
+          computedNonOverflowedValues = [
+            ...computedNonOverflowedValues,
+            selectedOption
+          ];
+          setNonOverFlowedValues(computedNonOverflowedValues);
+          tagsWidth += totalTagWidth;
+        }
+      }
+    }
+    if (computedOverflowAmount === 0) {
+      setOverflowed(false);
+    } else {
+      setOverflowed(true);
+    }
+    setOverflowAmount(computedOverflowAmount);
+  }, [options, selectedData.selectedValues, width]);
+  useEffect(() => {
+    setSelectedData({ type: "update" });
+  }, [setSelectedData, options]);
+  return /* @__PURE__ */ jsxs(
+    StyledInputWrapper,
+    {
+      "data-disabled": disabled,
+      "data-readonly": readOnly,
+      "data-size": size,
+      "data-dropdownvisible": isDropdownVisible,
+      "data-state": state,
+      direction: "row",
+      wrap: "nowrap",
+      gap: "1",
+      justifyContent: "space-between",
+      alignItems: "center",
+      onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : void 0,
+      "data-testid": "select-bar",
+      autoFocus,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown") {
+          if (!isDropdownVisible) {
+            setIsDropdownVisible(true);
+          } else {
+            document.getElementById(`option-0`)?.focus();
+          }
+        }
+        return ["Enter", " "].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
+      },
+      ref: innerRef,
+      "aria-labelledby": "select bar",
+      "aria-haspopup": "listbox",
+      "aria-expanded": isDropdownVisible,
+      "aria-controls": "select-dropdown",
+      tabIndex: 0,
+      children: [
+        selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsx(
+          DisplayValues,
+          {
+            refTag,
+            nonOverflowedValues,
+            disabled,
+            readOnly,
+            overflowed,
+            overflowAmount,
+            size
+          }
+        ) : /* @__PURE__ */ jsx(
+          StyledPlaceholder,
+          {
+            as: "p",
+            variant: size === "large" ? "body" : "bodySmall",
+            "data-disabled": disabled,
+            children: placeholder
+          }
+        ),
+        /* @__PURE__ */ jsxs(StateStack, { direction: "row", gap: 1, alignItems: "center", children: [
+          error ? /* @__PURE__ */ jsx(Icon, { name: "alert", sentiment: "danger" }) : null,
+          success && !error ? /* @__PURE__ */ jsx(Icon, { name: "checkbox-circle-outline", sentiment: "success" }) : null,
+          clearable && selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "clear value",
+              disabled: disabled || ![selectedData.selectedValues[0]] || readOnly,
+              variant: "ghost",
+              size: "small",
+              icon: "close",
+              onClick: (event) => {
+                event.stopPropagation();
+                setSelectedData({ type: "clearAll" });
+                if (multiselect) {
+                  onChange?.([]);
+                } else {
+                  onChange?.("");
+                }
+              },
+              sentiment: "neutral",
+              "data-testid": "clear-all"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              "aria-label": "show dropdown",
+              size: "small",
+              name: "arrow-down",
+              sentiment: "neutral",
+              disabled: disabled || readOnly
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  SelectBar
+};

package/dist/components/SelectInputV2/SelectInputProvider.d.ts

@@ -0,0 +1,41 @@
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { DataType, ReducerAction, ReducerState } from './types';
+type ContextProps = {
+    options: DataType;
+    onSearch: Dispatch<SetStateAction<DataType>>;
+    isDropdownVisible: boolean;
+    setIsDropdownVisible: Dispatch<SetStateAction<boolean>>;
+    searchInput: string;
+    setSearchInput: Dispatch<SetStateAction<string>>;
+    selectAll?: {
+        label: ReactNode;
+        description?: string;
+    };
+    selectAllGroup: boolean;
+    numberOfOptions: number;
+    displayedOptions: DataType;
+    selectedData: ReducerState;
+    setSelectedData: Dispatch<ReducerAction>;
+} & ({
+    multiselect: true;
+    onChange?: (value: string[]) => void;
+} | {
+    multiselect: false;
+    onChange?: (value: string) => void;
+});
+export declare const useSelectInput: () => ContextProps;
+type SelectInputProviderProps<IsMulti extends boolean> = {
+    options: DataType;
+    selectAll?: {
+        label: ReactNode;
+        description?: string;
+    };
+    children: ReactNode;
+    value?: string | string[];
+    selectAllGroup: boolean;
+    numberOfOptions: number;
+    multiselect: IsMulti;
+    onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
+};
+export declare const SelectInputProvider: <T extends boolean>({ options, multiselect, selectAll, value, selectAllGroup, numberOfOptions, children, onChange, }: SelectInputProviderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};