@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/SelectInputV2/SelectInputProvider.js

@@ -0,0 +1,203 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useMemo, useState, useReducer, useContext } from "react";
+const SelectInputContext = createContext({
+  options: [],
+  multiselect: false,
+  onSearch: () => {
+  },
+  isDropdownVisible: false,
+  setIsDropdownVisible: () => {
+  },
+  searchInput: "",
+  setSearchInput: () => {
+  },
+  selectAll: { label: "" },
+  selectAllGroup: false,
+  numberOfOptions: 0,
+  displayedOptions: [],
+  selectedData: { allSelected: false, selectedGroups: [], selectedValues: [] },
+  setSelectedData: () => {
+  },
+  onChange: () => {
+  }
+});
+const useSelectInput = () => useContext(SelectInputContext);
+const SelectInputProvider = ({
+  options,
+  multiselect,
+  selectAll,
+  value,
+  selectAllGroup,
+  numberOfOptions,
+  children,
+  onChange
+}) => {
+  const currentValue = useMemo(() => {
+    if (value) {
+      if (Array.isArray(value)) {
+        return value;
+      }
+      return [value];
+    }
+    return [];
+  }, [value]);
+  const selectedGroups = useMemo(() => {
+    if (Array.isArray(options)) {
+      return [];
+    }
+    return Object.keys(options).filter(
+      (group) => options[group].every(
+        (groupOption) => currentValue.includes(groupOption.value)
+      )
+    );
+  }, [currentValue, options]);
+  const [displayedOptions, setDisplayedOptions] = useState(options);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const [searchInput, setSearchInput] = useState("");
+  const allValues = useMemo(() => {
+    if (!Array.isArray(options)) {
+      return Object.keys(options).map(
+        (group) => options[group].filter((option) => !option.disabled)
+      ).flat();
+    }
+    return options;
+  }, [options]);
+  const allGroups = useMemo(() => {
+    if (!Array.isArray(options)) {
+      return Object.keys(options);
+    }
+    return [];
+  }, [options]);
+  const reducer = (state, action) => {
+    switch (action.type) {
+      case "selectAll":
+        if (state.allSelected) {
+          return { selectedValues: [], allSelected: false, selectedGroups: [] };
+        }
+        return {
+          selectedValues: allValues.map((option) => option.value),
+          allSelected: true,
+          selectedGroups: allGroups
+        };
+      case "selectGroup":
+        if (!Array.isArray(options)) {
+          if (state.selectedGroups.includes(action.selectedGroup)) {
+            return {
+              selectedValues: [...state.selectedValues].filter(
+                (selectedValue) => !options[action.selectedGroup].find(
+                  (option) => option.value === selectedValue
+                )
+              ),
+              allSelected: false,
+              selectedGroups: state.selectedGroups.filter(
+                (selectedGroup) => selectedGroup !== action.selectedGroup
+              )
+            };
+          }
+          const newSelectedValues = [...state.selectedValues];
+          options[action.selectedGroup].map(
+            (option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value)
+          );
+          return {
+            selectedValues: newSelectedValues,
+            allSelected: newSelectedValues.length === numberOfOptions,
+            selectedGroups: [...state.selectedGroups, action.selectedGroup]
+          };
+        }
+        return state;
+      case "selectOption":
+        if (multiselect) {
+          if (state.selectedValues.includes(action.clickedOption.value)) {
+            return {
+              selectedValues: state.selectedValues.filter(
+                (val) => val !== action.clickedOption.value
+              ),
+              allSelected: false,
+              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter(
+                (selectedGroup) => selectedGroup !== action.group
+              ) : []
+            };
+          }
+          return {
+            selectedValues: [
+              ...state.selectedValues,
+              action.clickedOption.value
+            ],
+            allSelected: state.selectedValues.length + 1 === numberOfOptions,
+            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(
+              (option) => [
+                ...state.selectedValues,
+                action.clickedOption.value
+              ].includes(option.value) || option.disabled
+            ) ? [...state.selectedGroups, action.group] : state.selectedGroups
+          };
+        }
+        return {
+          selectedValues: [action.clickedOption.value],
+          allSelected: false,
+          selectedGroups: state.selectedGroups
+        };
+      case "clearAll":
+        return { selectedGroups: [], selectedValues: [], allSelected: false };
+      case "update":
+        return {
+          selectedGroups: state.selectedGroups,
+          allSelected: state.allSelected,
+          selectedValues: state.selectedValues.filter((selectedValue) => {
+            if (!Array.isArray(options)) {
+              return Object.keys(options).some(
+                (group) => options[group].some(
+                  (option) => option.value === selectedValue && !option.disabled
+                )
+              );
+            }
+            return options.some(
+              (option) => option.value === selectedValue && !option.disabled
+            );
+          })
+        };
+      default:
+        return state;
+    }
+  };
+  const [selectedData, setSelectedData] = useReducer(reducer, {
+    selectedValues: currentValue,
+    allSelected: false,
+    selectedGroups
+  });
+  const providerValue = useMemo(
+    () => ({
+      onSearch: setDisplayedOptions,
+      isDropdownVisible,
+      setIsDropdownVisible,
+      searchInput,
+      setSearchInput,
+      options,
+      multiselect,
+      selectAll,
+      selectAllGroup,
+      numberOfOptions,
+      displayedOptions,
+      selectedData,
+      setSelectedData,
+      onChange
+    }),
+    [
+      displayedOptions,
+      isDropdownVisible,
+      multiselect,
+      numberOfOptions,
+      options,
+      searchInput,
+      selectAll,
+      selectAllGroup,
+      selectedData,
+      onChange
+    ]
+  );
+  return /* @__PURE__ */ jsx(SelectInputContext.Provider, { value: providerValue, children });
+};
+export {
+  SelectInputProvider,
+  useSelectInput
+};

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

@@ -0,0 +1,2 @@
+import type { DataType, OptionType } from './types';
+export declare const findOptionInOptions: (options: DataType, optionValue: string) => OptionType | undefined;

package/dist/components/SelectInputV2/findOptionInOptions.js

@@ -0,0 +1,12 @@
+const findOptionInOptions = (options, optionValue) => {
+  let flatOptions = [];
+  if (!Array.isArray(options)) {
+    flatOptions = Object.keys(options).map((group) => options[group]).flat();
+  } else {
+    flatOptions = options;
+  }
+  return flatOptions.find((option) => option.value === optionValue);
+};
+export {
+  findOptionInOptions
+};

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

@@ -0,0 +1,115 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { DataType } from './types';
+type SelectInputV2Props<IsMulti extends undefined | boolean = false> = {
+    /**
+     * Input name
+     */
+    name: string;
+    /**
+     * Place holder when no value defined
+     */
+    placeholder?: string;
+    /**
+     * When searchable, placeholder when no value is searched
+     */
+    placeholderSearch?: string;
+    /**
+     * Label of the component
+     */
+    label?: string;
+    /**
+     * Helper text to give more information to the user
+     */
+    helper?: string;
+    /**
+     * Selectable options
+     */
+    options: DataType;
+    /**
+     * Message to show when no option available
+     */
+    emptyState?: ReactNode;
+    /**
+     * Whether it is possible to search through the input
+     */
+    searchable?: boolean;
+    /**
+     * Whether the component in disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component in readOnly
+     */
+    readOnly?: boolean;
+    /**
+     * Whether it is possible to clear the search input
+     */
+    clearable?: boolean;
+    /**
+     * Size of the input
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether field is required
+     */
+    required?: boolean;
+    /**
+     * More information regarding/description ofs the selectInput
+     */
+    labelDescription?: ReactNode;
+    /**
+     * Whether option description is on the right of the option or under it
+     */
+    descriptionDirection?: 'row' | 'column';
+    /**
+     * Where to place the additional info prop
+     */
+    optionalInfoPlacement?: 'left' | 'right';
+    /**
+     * To add custom fixed elements at the bottom of the dropdown
+     */
+    footer?: ReactNode;
+    /**
+     * Display an error message under the select bar
+     */
+    error?: string;
+    /**
+     * Display a success message under the select bar
+     */
+    success?: string;
+    /**
+     * Load more button to implement lazy loading
+     */
+    loadMore?: ReactNode;
+    /**
+     * When the options are loading, display a skeleton
+     */
+    isLoading?: boolean;
+    /**
+     * Adds an option to select every selectable options
+     */
+    selectAll?: {
+        label: ReactNode;
+        description?: string;
+    };
+    /**
+     * When options are group, define a option to select every selectable options of a group
+     */
+    selectAllGroup?: boolean;
+    autofocus?: boolean;
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect?: IsMulti;
+    /**
+     * Default value, must be one of the options
+     */
+    value?: IsMulti extends true ? string[] : string;
+    onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
+    'data-testid'?: string;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
+/**
+ * SelectInputV2 component is used to select one or many elements from a selection.
+ */
+export declare const SelectInputV2: <IsMulti extends boolean | undefined>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, }: SelectInputV2Props<IsMulti>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SelectInputV2/index.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { useRef } from "react";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Dropdown } from "./Dropdown.js";
+import { SelectBar } from "./SelectBar.js";
+import { SelectInputProvider } from "./SelectInputProvider.js";
+const SelectInputContainer = styled.div`
+  width: 100%;
+`;
+const HelperText = styled(Text)`
+  padding-top: ${({ theme }) => theme.space["0.5"]};
+`;
+const SelectInputV2 = ({
+  name,
+  id,
+  onBlur,
+  onFocus,
+  onChange,
+  "aria-label": ariaLabel,
+  value,
+  label,
+  helper,
+  options,
+  size = "large",
+  emptyState,
+  descriptionDirection = "column",
+  success,
+  error,
+  "data-testid": dataTestId,
+  className,
+  footer,
+  placeholderSearch = "Search in list",
+  placeholder = "Select item",
+  searchable = true,
+  disabled = false,
+  readOnly = false,
+  clearable = true,
+  multiselect = false,
+  required = false,
+  labelDescription,
+  autofocus,
+  loadMore,
+  optionalInfoPlacement = "right",
+  isLoading,
+  selectAll,
+  selectAllGroup = false
+}) => {
+  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
+  );
+  return /* @__PURE__ */ jsx(
+    SelectInputProvider,
+    {
+      options,
+      multiselect,
+      selectAll,
+      value,
+      selectAllGroup,
+      numberOfOptions,
+      onChange,
+      children: /* @__PURE__ */ jsxs(
+        SelectInputContainer,
+        {
+          id,
+          onBlur,
+          onFocus,
+          "data-testid": dataTestId,
+          className,
+          "aria-label": name,
+          children: [
+            /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                emptyState,
+                descriptionDirection,
+                searchable,
+                placeholder: placeholderSearch,
+                footer,
+                refSelect: ref,
+                loadMore,
+                optionalInfoPlacement,
+                isLoading,
+                children: /* @__PURE__ */ jsxs(Stack, { gap: 0.5, "aria-label": ariaLabel, children: [
+                  /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 0.5, children: [
+                    label ? /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        as: "label",
+                        variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+                        children: label
+                      }
+                    ) : null,
+                    required && label ? /* @__PURE__ */ jsx(Icon, { name: "asterisk", sentiment: "danger", size: 8 }) : null,
+                    labelDescription ?? null
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    SelectBar,
+                    {
+                      size,
+                      clearable,
+                      readOnly,
+                      disabled,
+                      placeholder,
+                      success,
+                      error,
+                      autoFocus: autofocus,
+                      innerRef: ref
+                    }
+                  )
+                ] })
+              }
+            ),
+            !error && !success ? /* @__PURE__ */ jsx(
+              HelperText,
+              {
+                variant: "caption",
+                as: "p",
+                sentiment: "neutral",
+                prominence: "default",
+                children: helper
+              }
+            ) : null,
+            error || success ? /* @__PURE__ */ jsx(
+              HelperText,
+              {
+                variant: "caption",
+                as: "p",
+                sentiment: error ? "danger" : "success",
+                prominence: "default",
+                children: error || success
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  SelectInputV2
+};

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+export type OptionType = {
+    value: string;
+    label: ReactNode;
+    disabled: boolean;
+    description?: string;
+    optionalInfo?: ReactNode;
+    searchText?: string;
+};
+export type DataType = Record<string, OptionType[]> | OptionType[];
+export type ReducerState = {
+    selectedValues: string[];
+    allSelected: boolean;
+    selectedGroups: string[];
+};
+export type ReducerAction = {
+    type: 'selectAll';
+} | {
+    type: 'selectGroup';
+    selectedGroup: string;
+} | {
+    type: 'selectOption';
+    clickedOption: OptionType;
+    group?: string;
+} | {
+    type: 'clearAll';
+} | {
+    type: 'update';
+};
+export declare const INPUT_SIZE_HEIGHT: {
+    readonly large: 48;
+    readonly medium: 40;
+    readonly small: 32;
+};
+export declare const SIZES_TAG: {
+    readonly letterWidth: 5;
+    readonly tagWidth: 72;
+};

package/dist/{src/components → components}/SelectInputV2/types.js

@@ -7,5 +7,7 @@ const SIZES_TAG = {
   letterWidth: 5,
   tagWidth: 72
 };
-
-export { INPUT_SIZE_HEIGHT, SIZES_TAG };
+export {
+  INPUT_SIZE_HEIGHT,
+  SIZES_TAG
+};

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

@@ -0,0 +1,25 @@
+import type { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+type SelectableCardProps = {
+    name?: string;
+    children?: (({ disabled, checked, }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
+    value: string | number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    showTick?: boolean;
+    type?: 'radio' | 'checkbox';
+    disabled?: boolean;
+    checked?: boolean;
+    className?: string;
+    isError?: boolean;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    id?: string;
+    tooltip?: string;
+    label?: ReactNode;
+    'data-testid'?: string;
+};
+/**
+ * SelectableCard is a component that can be used to create a radio or checkbox card.
+ * It can be used to create a list of selectable items or a single selectable item.
+ */
+export declare const SelectableCard: import("react").ForwardRefExoticComponent<SelectableCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};