@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/SelectInput/components/DropdownOption.js

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

package/dist/components/SelectInput/components/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("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SelectInput/components/SearchBarDropdown.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
+import { SearchIcon } from "@ultraviolet/icons";
+import { useRef, useEffect } from "react";
+import { TextInput } from "../../TextInput/index.js";
+import { useSelectInput } from "../SelectInputProvider.js";
+import { searchBar } from "./dropdown.css.js";
+const getReferenceText = (option) => {
+  if (option.searchText) {
+    return normalizeString(option.searchText);
+  }
+  if (typeof option.label === "string") {
+    return normalizeString(option.label);
+  }
+  return "";
+};
+const searchRegex = (data, query) => data.filter((option) => {
+  const referenceText = getReferenceText(option);
+  const regex = new RegExp(query, "i");
+  return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
+});
+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]).find((value) => !!value);
+        return firstFit;
+      }
+    } else {
+      const possibleOption = [...options].find((option) => !option.disabled);
+      if (possibleOption) {
+        return possibleOption;
+      }
+    }
+  }
+  return null;
+};
+const escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`);
+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) {
+      if (!Array.isArray(options)) {
+        const filteredOptions = { ...options };
+        Object.keys(filteredOptions).map((group) => {
+          filteredOptions[group] = searchRegex(
+            filteredOptions[group],
+            escapeRegExp(search.toString())
+          );
+          return null;
+        });
+        onSearch(filteredOptions);
+      } else {
+        const filteredOptions = searchRegex(
+          [...options],
+          escapeRegExp(search.toString())
+        );
+        onSearch(filteredOptions);
+      }
+    } else {
+      onSearch(options);
+    }
+    setSearchInput(search);
+  };
+  const handleKeyDown = (key, search) => {
+    if (key === "Enter") {
+      const closestOption = findClosestOption(displayedOptions, search);
+      if (closestOption) {
+        if (multiselect) {
+          setSelectedData({
+            clickedOption: closestOption,
+            group: !Array.isArray(options) ? Object.keys(options).find(
+              (group) => options[group].includes(closestOption)
+            ) : void 0,
+            type: "selectOption"
+          });
+          onChange?.(
+            selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]
+          );
+        } else {
+          setSelectedData({
+            clickedOption: closestOption,
+            type: "selectOption"
+          });
+          onChange?.(selectedData.selectedValues[0] ?? "");
+        }
+      }
+    } else if (key === "Tab") {
+      searchInputRef.current?.blur();
+    }
+  };
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 50);
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      "aria-label": "search-bar",
+      className: searchBar,
+      "data-testid": "search-bar",
+      onBlur: () => setSearchBarActive(false),
+      onChange: (event) => handleChange(event.target.value),
+      onFocus: () => setSearchBarActive(true),
+      onKeyDown: (event) => handleKeyDown(event.key, searchInput),
+      placeholder,
+      prefix: /* @__PURE__ */ jsx(SearchIcon, { sentiment: "neutral", size: "small" }),
+      ref: searchInputRef,
+      size: "medium",
+      value: searchInput
+    }
+  );
+};
+export {
+  SearchBarDropdown
+};

package/dist/components/SelectInput/{SelectBar.d.ts → components/SelectBar.d.ts}

@@ -15,16 +15,5 @@ type SelectBarProps = {
     tooltip?: string;
     dropdownId?: string;
 };
-declare const StyledInputWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    'data-readonly': boolean;
-    'data-disabled': boolean;
-    'data-size': "small" | "medium" | "large";
-    'data-state': "neutral" | "success" | "danger";
-    'data-dropdownvisible': boolean;
-    'aria-label'?: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId, }: SelectBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export { SelectBar, StyledInputWrapper };
+declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId, }: SelectBarProps) => import("react/jsx-runtime").JSX.Element;
+export { SelectBar };