@povio/ui 0.0.2 → 0.0.3

package/src/components/inputs/Selection/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,61 @@
+import { mergeRefs } from "@react-aria/utils";
+import type { Key } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { SelectBase, type SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
+import type {
+  DefaultInitialSelectItem,
+  GroupedSelectControlProps,
+  GroupedSelectProps,
+} from "#ui/components/inputs/Selection/shared/select.types";
+import type { OmitDiscriminatedUnion } from "#ui/types/common";
+
+export type AutocompleteProps<
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
+
+export type ControlledAutocompleteProps<
+  TFieldValues extends FieldValues,
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> &
+  GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
+
+export const Autocomplete = <
+  TFieldValues extends FieldValues,
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+>(
+  props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>,
+) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <SelectBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+            isSearchable
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <SelectBase
+      {...props}
+      isSearchable
+    />
+  );
+};

package/src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx

@@ -0,0 +1,58 @@
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useState } from "react";
+import type { Key } from "react-aria-components";
+import type { FieldValues } from "react-hook-form";
+
+import { Autocomplete, type AutocompleteProps } from "#ui/components/inputs/Selection/Autocomplete/Autocomplete";
+import type {
+  GroupedSelectControlProps,
+  GroupedSelectProps,
+  SelectItem,
+} from "#ui/components/inputs/Selection/shared/select.types";
+import type { OmitDiscriminatedUnion } from "#ui/types/common";
+
+type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any) => UseQueryResult<Array<TSelectItem>>;
+
+type TKey<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
+  id: infer InferredKey extends Key;
+}
+  ? InferredKey
+  : never;
+
+type QueryAutocompleteProps<
+  TFieldValues extends FieldValues,
+  TSelectItem extends SelectItem<any>,
+  TQueryFn extends QueryFn<TSelectItem>,
+> = OmitDiscriminatedUnion<
+  AutocompleteProps<TKey<TQueryFn>>,
+  "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps
+> &
+  GroupedSelectControlProps<TFieldValues, TKey<TQueryFn>> & {
+    query: Parameters<TQueryFn>[0] extends { search?: string } ? TQueryFn : never;
+    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
+    queryOptions?: Parameters<TQueryFn>[1];
+  };
+
+export const QueryAutocomplete = <
+  TFieldValues extends FieldValues,
+  TSelectItem extends SelectItem<any>,
+  TQueryFn extends QueryFn<TSelectItem>,
+>({
+  query,
+  queryParams,
+  queryOptions,
+  ...props
+}: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => {
+  const [search, setSearch] = useState("");
+  const { data: items, isLoading } = query({ search, ...queryParams }, queryOptions);
+
+  return (
+    <Autocomplete
+      {...props}
+      items={items ?? []}
+      onSearchChange={setSearch}
+      isClientSearchDisabled
+      isLoading={isLoading}
+    />
+  );
+};

package/src/components/inputs/Selection/Select/Select.tsx

@@ -0,0 +1,59 @@
+import { mergeRefs } from "@react-aria/utils";
+import type { Key } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { SelectBase, type SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
+import type {
+  DefaultInitialSelectItem,
+  GroupedSelectControlProps,
+  GroupedSelectProps,
+  SelectAsyncProps,
+} from "#ui/components/inputs/Selection/shared/select.types";
+import type { OmitDiscriminatedUnion } from "#ui/types/common";
+
+export type SelectProps<
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+> = OmitDiscriminatedUnion<
+  SelectBaseProps<TKey, TInitialSelectItem>,
+  "initialSelection" | "mapInitialToSelectItem" | keyof SelectAsyncProps
+>;
+
+export type ControlledSelectProps<
+  TFieldValues extends FieldValues,
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> &
+  GroupedSelectControlProps<TFieldValues, TKey>;
+
+export const Select = <
+  TFieldValues extends FieldValues,
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+>(
+  props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>,
+) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <SelectBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <SelectBase {...props} />;
+};

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

@@ -0,0 +1,69 @@
+import type { ReactElement, Ref } from "react";
+import type { AriaButtonProps } from "react-aria";
+import type { Key } from "react-aria-components";
+
+import type { FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import { SelectDesktop } from "#ui/components/inputs/Selection/shared/SelectDesktop";
+import { SelectMobile } from "#ui/components/inputs/Selection/shared/SelectMobile";
+import { SelectContext } from "#ui/components/inputs/Selection/shared/select.context";
+import type {
+  DefaultInitialSelectItem,
+  GroupedSelectProps,
+  SelectAsyncProps,
+  SelectItem,
+  SelectNewItemProps,
+} from "#ui/components/inputs/Selection/shared/select.types";
+import type { InputVariantProps } from "#ui/components/inputs/shared/input.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { useBreakpoint } from "#ui/hooks/useBreakpoint";
+
+export type SelectBaseProps<
+  TKey extends Key = Key,
+  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
+> = FormFieldProps &
+  GroupedSelectProps<TKey, TInitialSelectItem> &
+  SelectNewItemProps &
+  SelectAsyncProps &
+  InputVariantProps &
+  Pick<AriaButtonProps, "onBlur"> & {
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+    placeholder?: string;
+    hideDropdownIcon?: boolean;
+    isSearchable?: boolean;
+    isClearable?: boolean;
+    isClientSearchDisabled?: boolean;
+    ignoreTriggerWidth?: boolean;
+    items: SelectItem<TKey>[];
+    inputClassName?: string;
+    containerClassName?: string;
+    customTrigger?: ReactElement;
+    onInputChange?: (value: string) => void;
+    onSearchChange?: (value: string) => void;
+    mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+  };
+
+export const SelectBase = <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(
+  dProps: SelectBaseProps<TKey, TInitialSelectItem>,
+) => {
+  const ui = UIConfig.useConfig();
+
+  const props = {
+    ...dProps,
+    selectionMode: dProps.selectionMode ?? ui.select.selectionMode,
+    variant: dProps.variant ?? ui.input.variant,
+    as: dProps.as ?? ui.input.as,
+    size: dProps.size ?? ui.input.size,
+    hideLabel: dProps.hideLabel ?? ui.input.hideLabel,
+    isClearable: dProps.isClearable ?? ui.input.isClearable,
+    isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
+  } as SelectBaseProps<TKey>;
+
+  const isDesktop = useBreakpoint("md");
+
+  return (
+    <SelectContext.Provider {...(props as SelectContext.ProviderProps)}>
+      {isDesktop ? <SelectDesktop {...props} /> : <SelectMobile {...props} />}
+    </SelectContext.Provider>
+  );
+};

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

@@ -0,0 +1,236 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { type ElementType, Fragment, useMemo, useRef } from "react";
+import { useLabel } from "react-aria";
+import {
+  ComboBox as AriaComboBox,
+  type ComboBoxProps as AriaComboBoxProps,
+  DialogTrigger as AriaDialogTrigger,
+  type DialogTriggerProps as AriaDialogTriggerProps,
+  Popover as AriaPopover,
+  type Key,
+} from "react-aria-components";
+import type { ComboBoxState as AriaComboBoxState } from "react-stately";
+import useMeasure from "react-use-measure";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+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 { SelectContext } from "#ui/components/inputs/Selection/shared/select.context";
+import type { SelectItem } from "#ui/components/inputs/Selection/shared/select.types";
+import { SelectAllItemId } from "#ui/components/inputs/Selection/shared/useSelectItems";
+
+type SelectDesktopProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
+
+export const SelectDesktop = <TKey extends Key = Key>({
+  ref,
+  error,
+  ignoreTriggerWidth,
+  showSelectionContent,
+  inputClassName,
+  containerClassName,
+  customTrigger,
+  onBlur,
+  ...props
+}: SelectDesktopProps<TKey>) => {
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    headerClassName,
+    errorClassName,
+    placeholder,
+    variant,
+    isDisabled,
+    className,
+    hideLabel,
+    hideDropdownIcon,
+    isSearchable,
+    isClearable,
+    isLoading,
+    as,
+    size,
+  } = 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 triggerRef = useRef<HTMLDivElement>(null);
+  const closeComboBoxRef = useRef<AriaComboBoxState<SelectItem> | null>(null);
+  const [wrapperRef, { width }] = useMeasure();
+  const {
+    fieldState,
+    isOpen,
+    setIsOpen,
+    onInputChange,
+    onChange,
+    onClear,
+    onSelectAll,
+    listItems,
+    selectableListItems,
+    selectedIds,
+    isMultiple,
+  } = SelectContext.useSelect();
+
+  const onSelectionChange = (value: Key | null) => {
+    if (!value) {
+      return;
+    }
+
+    if (value === SelectAllItemId) {
+      if (selectedIds.length === selectableListItems.length) {
+        onClear();
+      } else {
+        onSelectAll();
+      }
+      return;
+    }
+
+    if (!isMultiple) {
+      onChange(value);
+      return;
+    }
+
+    if (!Array.isArray(fieldState.value)) {
+      onChange([value]);
+      return;
+    }
+
+    if (fieldState.value.includes(value)) {
+      onChange(fieldState.value.filter((id) => id !== value));
+    } else {
+      onChange(fieldState.value.concat(value));
+    }
+  };
+
+  const openChangeHandler = (value: boolean) => {
+    if (closeComboBoxRef.current && value) {
+      closeComboBoxRef.current.setOpen(false);
+      closeComboBoxRef.current = null;
+    } else {
+      setIsOpen(value);
+    }
+  };
+
+  const WrapperComponent: ElementType = isSearchable ? AriaComboBox : Fragment;
+
+  const comboBoxProps: AriaComboBoxProps<SelectItem> = {
+    items: listItems,
+    selectedKey: isMultiple ? null : (fieldState.value as Key),
+    onSelectionChange,
+    inputValue: fieldState.inputValue,
+    onInputChange,
+    onOpenChange: openChangeHandler,
+    allowsEmptyCollection: true,
+    isDisabled,
+    isInvalid: !!error,
+    menuTrigger: "focus",
+    className: clsx("w-full", containerClassName),
+  };
+
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const dialogTriggerProps: Omit<AriaDialogTriggerProps, "children"> = {
+    isOpen,
+    onOpenChange: setIsOpen,
+  };
+
+  const showPopover = useMemo(
+    () => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading,
+    [listItems, isLoading],
+  );
+
+  return (
+    <WrapperComponent {...(isSearchable ? comboBoxProps : {})}>
+      <FormField
+        {...formFieldProps}
+        {...(!isSearchable && {
+          labelProps,
+          className: clsx("w-full", containerClassName),
+        })}
+        as={as}
+        ref={wrapperRef}
+      >
+        {customTrigger ? (
+          <AriaDialogTrigger {...dialogTriggerProps}>
+            <div
+              {...fieldProps}
+              ref={mergeRefs(ref, triggerRef)}
+            >
+              {customTrigger}
+            </div>
+          </AriaDialogTrigger>
+        ) : (
+          <SelectInput
+            ref={mergeRefs(ref, triggerRef)}
+            placeholder={placeholder}
+            variant={variant}
+            as={as}
+            size={size}
+            isDisabled={isDisabled}
+            isInvalid={!!error}
+            className={className}
+            hideDropdownIcon={hideDropdownIcon}
+            isSearchable={isSearchable}
+            isClearable={isClearable}
+            showSelectionContent={showSelectionContent}
+            inputClassName={inputClassName}
+            onBlur={onBlur}
+            onCloseComboBox={(state) => {
+              if (isSearchable) {
+                closeComboBoxRef.current = state;
+              }
+            }}
+            fieldProps={fieldProps}
+            headerProps={headerProps}
+          />
+        )}
+
+        {(!isSearchable || showPopover) && (
+          <AriaPopover
+            triggerRef={triggerRef}
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            className="my-4 outline-none"
+            style={{ width: !ignoreTriggerWidth ? width : undefined }}
+            offset={0}
+          >
+            <SelectListBox
+              {...props}
+              className="max-h-80 rounded-list-rounding-dropdown border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-5 [scrollbar-width:thin]"
+              autoFocus={!isSearchable}
+            />
+          </AriaPopover>
+        )}
+      </FormField>
+    </WrapperComponent>
+  );
+};