@povio/ui 0.0.5 → 0.0.7

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

@@ -1,58 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,236 +0,0 @@
-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>
-  );
-};

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

@@ -1,278 +0,0 @@
-import { clsx } from "clsx";
-import { type KeyboardEvent, use, useMemo, useState } from "react";
-import { type AriaFieldProps, useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import {
-  Button as AriaButton,
-  ComboBoxStateContext as AriaComboBoxStateContext,
-  Input as AriaInput,
-} from "react-aria-components";
-import { useTranslation } from "react-i18next";
-import type { ComboBoxState } from "react-stately";
-import useMeasure from "react-use-measure";
-
-import { ArrowDropDownIcon } from "#ui/assets/icons/ArrowDropDown";
-import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
-import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
-import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
-import { SelectContext } from "#ui/components/inputs/Selection/shared/select.context";
-import type { SelectItem } from "#ui/components/inputs/Selection/shared/select.types";
-import { InputClear } from "#ui/components/inputs/shared/InputClear";
-import {
-  type InputBaseProps,
-  type InputSizeProps,
-  type InputVariantProps,
-  inputBase,
-  inputSize,
-} from "#ui/components/inputs/shared/input.cva";
-import { Tag } from "#ui/components/text/Tag/Tag";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { ns } from "#ui/config/i18n";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-interface SelectInputProps
-  extends InputVariantProps,
-    Pick<
-      SelectBaseProps,
-      | "ref"
-      | "placeholder"
-      | "isDisabled"
-      | "hideDropdownIcon"
-      | "isSearchable"
-      | "isClearable"
-      | "onBlur"
-      | "showSelectionContent"
-      | "inputClassName"
-    > {
-  isInvalid?: boolean;
-  className?: string;
-  fieldProps?: AriaFieldProps;
-  headerProps?: FormFieldHeaderProps;
-  onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
-}
-
-export const SelectInput = ({
-  ref,
-  placeholder,
-  variant,
-  as,
-  size,
-  isDisabled,
-  isInvalid,
-  className,
-  hideDropdownIcon,
-  isSearchable,
-  isClearable,
-  showSelectionContent,
-  inputClassName,
-  fieldProps,
-  headerProps,
-  onCloseComboBox,
-  onBlur,
-  ...props
-}: SelectInputProps) => {
-  const uiStyle = UIStyle.useConfig();
-  const inputSizeCva = (uiStyle?.input?.sizeCva ?? inputSize) as unknown as UIStyle.Cva<InputSizeProps>;
-  const inputBaseCva = (uiStyle?.input?.baseCva ?? inputBase) as unknown as UIStyle.Cva<InputBaseProps>;
-
-  const { t } = useTranslation(ns);
-  const state = use(AriaComboBoxStateContext);
-  const { hoverProps, isHovered } = useHover({ isDisabled });
-  const [isFocused, setIsFocused] = useState(false);
-  const { focusWithinProps } = useFocusWithin({
-    onFocusWithinChange: setIsFocused,
-  });
-  const { isFocusVisible } = useFocusVisible();
-  const [labelContentRef, { width: labelWidth }] = useMeasure();
-
-  const {
-    fieldState,
-    isOpen,
-    setIsOpen,
-    listItems,
-    selectedItems,
-    onChange,
-    onClear,
-    onRemove,
-    isMultiple,
-    isLoading,
-  } = SelectContext.useSelect();
-
-  const isEmpty = selectedItems.length === 0;
-
-  const showTags = isMultiple && !isEmpty;
-
-  const showClearButton =
-    isClearable && isHovered && (selectedItems.length > 0 || (isSearchable && fieldState.inputValue !== ""));
-
-  const style = useMemo(() => {
-    if (as !== "filter") {
-      return {};
-    }
-    return {
-      paddingLeft: `calc(var(--spacing-input-side-default) + ${labelWidth}px + var(--spacing-2))`,
-    };
-  }, [labelWidth, as]);
-
-  const labelProps = useMemo(() => {
-    const { labelProps: headerLabelProps } = headerProps ?? {};
-
-    const isFilterOrFloating = as && ["filter", "floating"].includes(as);
-    if (!isFilterOrFloating || isSearchable) {
-      return headerLabelProps;
-    }
-
-    return {
-      ...headerLabelProps,
-      className: clsx(headerLabelProps?.className, "pointer-events-none"),
-    };
-  }, [as, headerProps, isSearchable]);
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Enter" && !isMultiple && !isLoading && listItems.length === 1 && !listItems[0].isDisabled) {
-      e.preventDefault();
-      onChange(listItems[0].id);
-      onCloseComboBox?.(state);
-    }
-
-    if (
-      e.key === "Backspace" &&
-      isMultiple &&
-      fieldState.inputValue === "" &&
-      Array.isArray(fieldState.value) &&
-      fieldState.value.length > 0
-    ) {
-      onChange(fieldState.value.slice(0, -1));
-    }
-  };
-
-  return (
-    <div
-      ref={ref}
-      className={inputBaseCva({
-        variant,
-        as,
-        ...props,
-        className: clsx("group/select-content !px-0 relative flex", isSearchable && "cursor-text", className),
-      })}
-      data-rac=""
-      data-disabled={isDisabled}
-      data-hovered={isHovered || undefined}
-      data-focused={isOpen || isFocused || undefined}
-      data-focus-within={isFocused || undefined}
-      data-searchable-focus-within={(isFocused && isSearchable) || undefined}
-      data-focus-visible={(isFocused && isFocusVisible) || undefined}
-      data-has-selection={!isEmpty || undefined}
-      data-has-search={fieldState.searchValue !== "" || undefined}
-      data-invalid={isInvalid || undefined}
-      {...hoverProps}
-      {...focusWithinProps}
-    >
-      <div
-        className={clsx(
-          "relative flex flex-1 items-center truncate",
-          showTags && inputSizeCva({ size, ...props, className: "pr-2 pl-input-side-default" }),
-        )}
-      >
-        {as && ["filter", "floating"].includes(as) && headerProps && (
-          <FormFieldLabel
-            ref={labelContentRef}
-            as={as}
-            {...headerProps}
-            labelProps={labelProps}
-          />
-        )}
-        {(showTags || isSearchable) && (
-          <div
-            className={clsx("flex flex-1 flex-wrap gap-2 truncate", !isSearchable && "pointer-events-none z-[1]")}
-            style={style}
-          >
-            {showTags &&
-              selectedItems.map((item) => (
-                <Tag
-                  key={item.id}
-                  dismissable
-                  isDisabled={isDisabled}
-                  onDismiss={() => onRemove(item.id)}
-                  excludeFromTabOrder
-                  className="z-[1]"
-                >
-                  {item.label}
-                </Tag>
-              ))}
-
-            {isSearchable && (
-              <AriaInput
-                placeholder={placeholder}
-                onBlur={onBlur}
-                className={clsx(
-                  "flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
-                  !showTags &&
-                    inputSizeCva({
-                      size,
-                      ...props,
-                      className: "rounded-input-rounding-default pl-input-side-default",
-                    }),
-                  inputClassName,
-                )}
-                onKeyDown={onKeyDown}
-                {...fieldProps}
-              />
-            )}
-          </div>
-        )}
-
-        {!isSearchable && (
-          <AriaButton
-            isDisabled={isDisabled}
-            onPress={() => setIsOpen(!isOpen)}
-            onBlur={onBlur}
-            data-type="select-trigger"
-            className={inputSizeCva({
-              size,
-              ...props,
-              className: clsx(
-                "w-full truncate pl-input-side-default text-start outline-none disabled:text-interactive-text-secondary-disabled",
-                showTags && "absolute inset-0 z-0",
-              ),
-            })}
-            style={style}
-            {...fieldProps}
-          >
-            {(isEmpty || !isMultiple) && (
-              <Typography
-                size="label-1"
-                className="truncate empty:before:inline-block empty:before:content-['']"
-              >
-                {isEmpty && placeholder}
-                {!isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)}
-              </Typography>
-            )}
-          </AriaButton>
-        )}
-      </div>
-      {showClearButton && <InputClear onClear={onClear} />}
-      {!hideDropdownIcon && (
-        <AriaButton
-          excludeFromTabOrder
-          aria-label={t(($) => (isOpen ? $.ui.closeAlt : $.ui.openAlt))}
-          className="self-stretch pr-input-side-default pl-1-5 outline-none"
-          isDisabled={isDisabled}
-          onPress={() => {
-            if (!isSearchable) {
-              setIsOpen(!isOpen);
-            }
-          }}
-        >
-          <ArrowDropDownIcon
-            className={clsx(
-              "size-6 shrink-0",
-              isOpen && "rotate-180",
-              isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle",
-            )}
-            aria-hidden="true"
-          />
-        </AriaButton>
-      )}
-    </div>
-  );
-};