@povio/ui 0.0.2 → 0.0.3

package/src/components/inputs/Selection/shared/SelectMobile.tsx

@@ -0,0 +1,169 @@
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { useLabel } from "react-aria";
+import {
+  DialogTrigger as AriaDialogTrigger,
+  type DialogTriggerProps as AriaDialogTriggerProps,
+  type Key,
+} from "react-aria-components";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import { FormFieldHeader, type FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { FormFieldHeaderClose } from "#ui/components/inputs/FormField/FormFieldHeaderClose";
+import { TextInput } from "#ui/components/inputs/Input/TextInput/TextInput";
+import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
+import { SelectInput } from "#ui/components/inputs/Selection/shared/SelectInput";
+import { SelectListBox } from "#ui/components/inputs/Selection/shared/SelectListBox";
+import { SelectListBoxSelectionBar } from "#ui/components/inputs/Selection/shared/SelectListBoxSelectionBar";
+import { SelectContext } from "#ui/components/inputs/Selection/shared/select.context";
+import { BottomSheet } from "#ui/components/overlays/BottomSheet/BottomSheet";
+
+type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
+
+export const SelectMobile = <TKey extends Key = Key>({
+  ref,
+  error,
+  showSelectionContent,
+  inputClassName,
+  containerClassName,
+  customTrigger,
+  onBlur,
+  ...props
+}: SelectMobileProps<TKey>) => {
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    headerClassName,
+    errorClassName,
+    placeholder,
+    variant,
+    isDisabled,
+    className,
+    hideLabel,
+    hideDropdownIcon,
+    isSearchable,
+    isClearable,
+    as,
+  } = props;
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const { labelProps, fieldProps } = useLabel({ label });
+
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const { fieldState, isOpen, setIsOpen, onInputChange, isMultiple } = SelectContext.useSelect();
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const dialogTriggerProps: Omit<AriaDialogTriggerProps, "children"> = {
+    isOpen,
+    onOpenChange: setIsOpen,
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className={clsx("w-full", containerClassName)}
+    >
+      <AriaDialogTrigger {...dialogTriggerProps}>
+        {customTrigger ? (
+          <div
+            {...fieldProps}
+            ref={ref}
+          >
+            {customTrigger}
+          </div>
+        ) : (
+          <SelectInput
+            ref={ref}
+            placeholder={placeholder}
+            variant={variant}
+            as={as}
+            isDisabled={isDisabled}
+            isInvalid={!!error}
+            className={className}
+            hideDropdownIcon={hideDropdownIcon}
+            isSearchable={false}
+            isClearable={isClearable}
+            showSelectionContent={showSelectionContent}
+            onBlur={onBlur}
+            fieldProps={fieldProps}
+            headerProps={headerProps}
+          />
+        )}
+
+        <BottomSheet
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          onStateChange={(state) => {
+            if (state === "opened") {
+              searchInputRef.current?.focus();
+            }
+          }}
+          label={label}
+          footer={isMultiple && <SelectListBoxSelectionBar />}
+          isDismissable
+        >
+          {(close) => (
+            <div className="flex flex-col">
+              {isSearchable ? (
+                <TextInput
+                  ref={searchInputRef}
+                  label={label}
+                  placeholder={placeholder}
+                  value={fieldState.inputValue}
+                  onChange={onInputChange}
+                  rightContent={<FormFieldHeaderClose onClose={close} />}
+                  inputClassName={inputClassName}
+                  className="mb-1-5 px-4 pt-3"
+                />
+              ) : (
+                <FormFieldHeader
+                  label={label}
+                  rightContent={<FormFieldHeaderClose onClose={close} />}
+                  className="!mb-1-5 px-4 pt-3"
+                />
+              )}
+
+              <SelectListBox
+                {...props}
+                autoFocus={!isSearchable}
+                isScrollable={false}
+                onClose={close}
+              />
+            </div>
+          )}
+        </BottomSheet>
+      </AriaDialogTrigger>
+    </FormField>
+  );
+};

package/src/components/inputs/Selection/shared/select.context.tsx

@@ -0,0 +1,316 @@
+import { type PropsWithChildren, createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Key } from "react-aria-components";
+
+import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
+import type {
+  ExtendedSelectItem,
+  GroupedSelectProps,
+  SelectItem,
+} from "#ui/components/inputs/Selection/shared/select.types";
+import { NewItemId, useSelectItems } from "#ui/components/inputs/Selection/shared/useSelectItems";
+import { useDebounceCallback } from "#ui/hooks/useDebounceCallback";
+
+export namespace SelectContext {
+  interface FieldState {
+    value: Key | Key[] | null;
+    inputValue: string;
+    searchValue: string;
+  }
+
+  export type Type = {
+    fieldState: FieldState;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    isDebouncing: boolean;
+    onChange: (val: Key | Key[]) => void;
+    onClear: () => void;
+    onSelectAll: () => void;
+    onRemove: (val: Key) => void;
+    listItems: ExtendedSelectItem[];
+    selectableListItems: SelectItem[];
+    selectedItems: SelectItem[];
+    selectedIds: Key[];
+    isMultiple: boolean;
+  } & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
+
+  const Context = createContext<Type>({} as never);
+
+  const defaultMapInitialToSelectItem = (item: { id: Key; label?: string; name?: string }) =>
+    ({
+      id: item.id,
+      label: item.label ?? item.name ?? "",
+    }) as SelectItem;
+
+  export type ProviderProps = GroupedSelectProps &
+    Pick<
+      SelectBaseProps,
+      | "items"
+      | "onInputChange"
+      | "onSearchChange"
+      | "showSelectAllOption"
+      | "showNewItemOption"
+      | "newItemMinLength"
+      | "onNewItemOption"
+      | "isLoading"
+      | "hasLoadMore"
+      | "mapInitialToSelectItem"
+      | "isSearchable"
+      | "isClientSearchDisabled"
+    >;
+
+  export const Provider = ({
+    items,
+    onInputChange,
+    onSearchChange,
+    showSelectAllOption,
+    showNewItemOption,
+    newItemMinLength,
+    onNewItemOption,
+    isLoading,
+    hasLoadMore,
+    isClientSearchDisabled,
+    children,
+    mapInitialToSelectItem = defaultMapInitialToSelectItem,
+    ...props
+  }: PropsWithChildren<ProviderProps>) => {
+    const isMultiple = props.selectionMode === "multiple";
+
+    const initialSelectedItems = useMemo(() => {
+      if (!props.initialSelection) {
+        return null;
+      }
+      if (Array.isArray(props.initialSelection)) {
+        return props.initialSelection.map(mapInitialToSelectItem);
+      }
+      return mapInitialToSelectItem(props.initialSelection);
+    }, [props.initialSelection, mapInitialToSelectItem]);
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [fieldState, setFieldState] = useState<FieldState>({
+      value: props.value ?? (isMultiple ? [] : null),
+      inputValue: "",
+      searchValue: "",
+    });
+    const { callback: onSearchChangeDebounced, isDebouncing } = useDebounceCallback(onSearchChange);
+    const [showAll, setShowAll] = useState(false);
+    const [cachedItems, setCachedItems] = useState<SelectItem[]>(items);
+    const valueRef = useRef(initialSelectedItems);
+
+    useEffect(() => {
+      if (!isLoading) {
+        setCachedItems(items);
+      }
+    }, [isLoading, items]);
+
+    const { allItems, allListItems, listItems, selectableListItems } = useSelectItems({
+      initialSelectedItems,
+      selectedItems: valueRef.current,
+      cachedItems,
+      inputValue: fieldState.inputValue,
+      showAll,
+      isMultiple,
+      showSelectAllOption,
+      showNewItemOption,
+      newItemMinLength,
+      isLoading,
+      hasLoadMore,
+      isClientSearchDisabled,
+    });
+
+    const selectedItems = useMemo(
+      () =>
+        allItems.filter(({ id }) =>
+          Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value,
+        ),
+      [allItems, fieldState.value],
+    );
+
+    const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
+
+    const getItem = useCallback(
+      (value: Key | null) => allItems.find((item) => item && item.id === value) ?? null,
+      [allItems],
+    );
+
+    const updateValue = useCallback(
+      (value: Key[] | Key | null) => {
+        if (Array.isArray(value)) {
+          valueRef.current = value.map((id) => getItem(id)).filter((item): item is SelectItem => item !== null);
+        } else {
+          valueRef.current = getItem(value);
+        }
+      },
+      [getItem],
+    );
+
+    const getValueIds = () =>
+      Array.isArray(valueRef.current) ? valueRef.current.map(({ id }) => id) : (valueRef.current?.id ?? null);
+
+    const emitStateChanges = useCallback(
+      (changes: FieldState, skipSelectionChange?: boolean) => {
+        const valueChanged = JSON.stringify(changes.value) !== JSON.stringify(getValueIds());
+        if (valueChanged) {
+          updateValue(changes.value);
+
+          if (!skipSelectionChange) {
+            if (isMultiple) {
+              props.onChange?.(changes.value as Key[]);
+            } else {
+              props.onChange?.(changes.value as Key);
+            }
+          }
+        }
+        if (changes.inputValue !== fieldState.inputValue) {
+          onInputChange?.(changes.inputValue);
+        }
+        if (changes.searchValue !== fieldState.searchValue) {
+          onSearchChangeDebounced?.(changes.searchValue);
+        }
+      },
+      [fieldState, isMultiple, props, onInputChange, onSearchChangeDebounced, updateValue],
+    );
+
+    const syncFieldState = (value: Key | Key[] | null) => {
+      const newFieldState = {
+        value,
+        inputValue: isMultiple || Array.isArray(value) ? fieldState.inputValue : (getItem(value)?.label ?? ""),
+        searchValue: "",
+      };
+      setFieldState(newFieldState);
+      emitStateChanges(newFieldState, true);
+      if (!isMultiple) {
+        setShowAll(true);
+      }
+    };
+
+    useEffect(() => {
+      const value = props.value ?? null;
+      if (JSON.stringify(value) !== JSON.stringify(fieldState.value)) {
+        syncFieldState(value);
+      } else {
+        updateValue(value);
+      }
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.value]);
+
+    useEffect(() => {
+      if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value as Key)?.label) {
+        syncFieldState(fieldState.value);
+      }
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [allListItems]);
+
+    const handleInputChange = useCallback(
+      (inputValue: string) => {
+        const newFieldState = {
+          value: isMultiple || inputValue !== "" ? fieldState.value : null,
+          inputValue,
+          searchValue: inputValue,
+        };
+        setFieldState(newFieldState);
+        emitStateChanges(newFieldState);
+        setShowAll(false);
+        if (!isOpen && inputValue !== "" && props.isSearchable) {
+          setIsOpen(true);
+        }
+      },
+      [emitStateChanges, fieldState.value, isMultiple],
+    );
+
+    const onChange = useCallback(
+      (value: Key | Key[] | null) => {
+        if (value === NewItemId) {
+          onNewItemOption?.(fieldState.inputValue);
+        } else {
+          const newFieldState = {
+            value,
+            inputValue: isMultiple || Array.isArray(value) ? "" : (getItem(value)?.label ?? ""),
+            searchValue: "",
+          };
+          setFieldState(newFieldState);
+          emitStateChanges(newFieldState);
+        }
+        if (!isMultiple) {
+          setIsOpen(false);
+          setShowAll(true);
+        }
+      },
+      [emitStateChanges, onNewItemOption, fieldState.inputValue, getItem, isMultiple],
+    );
+
+    const onClear = useCallback(() => {
+      if (!valueRef.current || (Array.isArray(valueRef.current) && valueRef.current.length === 0)) {
+        setFieldState((prev) => ({
+          ...prev,
+          inputValue: "",
+        }));
+        return;
+      }
+
+      if (isMultiple) {
+        onChange([]);
+      } else {
+        onChange(null);
+      }
+    }, [isMultiple, onChange]);
+
+    const onSelectAll = useCallback(() => {
+      onChange(selectableListItems.map(({ id }) => id));
+    }, [selectableListItems, onChange]);
+
+    const onRemove = useCallback(
+      (value: Key) => {
+        if (isMultiple && Array.isArray(fieldState.value)) {
+          onChange(fieldState.value.filter((id) => id !== value));
+        }
+      },
+      [isMultiple, fieldState.value, onChange],
+    );
+
+    const value = useMemo(
+      (): Type => ({
+        fieldState,
+        isOpen,
+        setIsOpen,
+        isDebouncing,
+        onInputChange: handleInputChange,
+        onChange,
+        onClear,
+        onSelectAll,
+        onRemove,
+        listItems,
+        selectableListItems,
+        selectedItems,
+        selectedIds,
+        isMultiple,
+        isLoading,
+        hasLoadMore,
+      }),
+      [
+        fieldState,
+        isOpen,
+        setIsOpen,
+        isDebouncing,
+        handleInputChange,
+        onChange,
+        onClear,
+        onSelectAll,
+        onRemove,
+        listItems,
+        selectableListItems,
+        selectedIds,
+        selectedItems,
+        isMultiple,
+        isLoading,
+        hasLoadMore,
+      ],
+    );
+
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  };
+
+  export const useSelect = () => {
+    const select = use(Context);
+    return select;
+  };
+}

package/src/components/inputs/Selection/shared/select.types.ts

@@ -0,0 +1,75 @@
+import type { ReactElement } from "react";
+import type { Key } from "react-aria-components";
+import type { FieldValues } from "react-hook-form";
+
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+
+export interface SelectItem<TKey extends Key = Key> {
+  id: TKey;
+  label: string;
+  content?: string | ReactElement;
+  isDisabled?: boolean;
+}
+
+export interface ExtendedSelectItem<TKey extends Key = Key> extends SelectItem<TKey> {
+  isNewItem?: boolean;
+  isSelectAllItem?: boolean;
+  isLoadingItem?: boolean;
+}
+
+export interface DefaultInitialSelectItem<TKey extends Key = Key> {
+  id: TKey;
+  label?: string;
+  name?: string;
+}
+
+export interface SingleSelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> {
+  selectionMode?: "single";
+  value?: TKey | undefined | null;
+  onChange?: (value: TKey | null) => void;
+  showSelectionBar?: never;
+  showSelectAllOption?: never;
+  initialSelection?: TInitialSelectItem | null;
+  showSelectionContent?: boolean;
+}
+
+export interface MultiSelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> {
+  selectionMode: "multiple";
+  value?: TKey[];
+  onChange?: (value: TKey[]) => void;
+  showSelectionBar?: boolean;
+  showSelectAllOption?: boolean;
+  initialSelection?: TInitialSelectItem[] | null;
+  showSelectionContent?: never;
+}
+
+export type GroupedSelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> =
+  | MultiSelectProps<TKey, TInitialSelectItem>
+  | SingleSelectProps<TKey, TInitialSelectItem>;
+
+export type GroupedSelectControlProps<
+  TFieldValues extends FieldValues,
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+> =
+  | ({ selectionMode: MultiSelectProps["selectionMode"] } & ControlProps<
+      MultiSelectProps<TKey, TInitialSelectItem>,
+      TFieldValues
+    >)
+  | ({ selectionMode?: SingleSelectProps["selectionMode"] } & ControlProps<
+      SingleSelectProps<TKey, TInitialSelectItem>,
+      TFieldValues
+    >);
+
+export interface SelectNewItemProps {
+  showNewItemOption?: boolean;
+  newItemMinLength?: number;
+  onNewItemOption?: (value: string) => void;
+  newItemRender?: (label: string) => ReactElement;
+}
+
+export interface SelectAsyncProps {
+  isLoading?: boolean;
+  hasLoadMore?: boolean;
+  onLoadMore?: () => void;
+}

package/src/components/inputs/Selection/shared/useSelectItems.tsx

@@ -0,0 +1,127 @@
+import { useMemo } from "react";
+import { type Key, useFilter } from "react-aria-components";
+
+import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
+import type { ExtendedSelectItem, SelectItem } from "#ui/components/inputs/Selection/shared/select.types";
+
+export const SelectAllItemId = "all-item-id";
+const SelectAllItem = (inputValue: string) => ({
+  id: SelectAllItemId,
+  label: inputValue,
+  isSelectAllItem: true,
+});
+
+export const NewItemId = "new-item-id";
+const NewItem = (inputValue: string) => ({
+  id: NewItemId,
+  label: inputValue,
+  isNewItem: true,
+});
+
+export const LoadingItemId = "loading-item-id";
+const LoadingItem = (inputValue: string) => ({
+  id: LoadingItemId,
+  label: inputValue,
+  isLoadingItem: true,
+});
+
+export const ReservedItemIds = [SelectAllItemId, NewItemId, LoadingItemId];
+
+interface UseSelectItemsProps
+  extends Pick<
+    SelectBaseProps,
+    | "showSelectAllOption"
+    | "showNewItemOption"
+    | "newItemMinLength"
+    | "isLoading"
+    | "hasLoadMore"
+    | "isClientSearchDisabled"
+  > {
+  initialSelectedItems?: SelectItem[] | SelectItem | null;
+  selectedItems?: SelectItem[] | SelectItem | null;
+  cachedItems: SelectItem[];
+  inputValue: string;
+  showAll: boolean;
+  isMultiple: boolean;
+}
+
+export function useSelectItems({
+  initialSelectedItems,
+  selectedItems,
+  cachedItems,
+  inputValue,
+  showAll,
+  isMultiple,
+  showSelectAllOption,
+  showNewItemOption,
+  newItemMinLength = 3,
+  isLoading,
+  hasLoadMore,
+  isClientSearchDisabled,
+}: UseSelectItemsProps) {
+  // oxlint-disable-next-line @typescript-eslint/unbound-method
+  const { contains } = useFilter({ sensitivity: "base" });
+
+  const allListItems: ExtendedSelectItem[] = useMemo(() => {
+    const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
+
+    const showNewItem =
+      showNewItemOption &&
+      inputValue.length >= newItemMinLength &&
+      !cachedItems.find((item) => contains(item.label, inputValue));
+
+    const showLoadingItem = isLoading || hasLoadMore;
+
+    return [
+      ...(showSelectAllItem ? [SelectAllItem(inputValue)] : []),
+      ...cachedItems,
+      ...(showNewItem ? [NewItem(inputValue)] : []),
+      ...(showLoadingItem ? [LoadingItem(inputValue)] : []),
+    ];
+  }, [
+    isMultiple,
+    showNewItemOption,
+    inputValue,
+    newItemMinLength,
+    cachedItems,
+    contains,
+    isLoading,
+    hasLoadMore,
+    showSelectAllOption,
+  ]);
+
+  const allItems = useMemo(() => {
+    const items = [
+      ...(Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems]),
+      ...(Array.isArray(selectedItems) ? selectedItems : [selectedItems]),
+      ...allListItems,
+    ].filter((item): item is SelectItem => !!item);
+
+    const allItemsMap = new Map<Key, SelectItem>();
+    items.forEach((item) => allItemsMap.set(item.id, item));
+    return Array.from(allItemsMap.values());
+  }, [allListItems, initialSelectedItems, selectedItems]);
+
+  const filteredListItems = useMemo(
+    () => allListItems.filter((item) => contains(item.label, inputValue)),
+    [allListItems, contains, inputValue],
+  );
+
+  const listItems = useMemo(
+    () => (showAll || isClientSearchDisabled ? allListItems : filteredListItems),
+    [showAll, isClientSearchDisabled, allListItems, filteredListItems],
+  );
+
+  const selectableListItems = useMemo(
+    () => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))),
+    [listItems],
+  );
+
+  return {
+    allItems,
+    allListItems,
+    filteredListItems,
+    listItems,
+    selectableListItems,
+  };
+}