@povio/ui 0.0.2 → 0.0.4

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

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

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

@@ -0,0 +1,121 @@
+import { clsx } from "clsx";
+import type { AriaListBoxProps } from "react-aria";
+import { ListBox as AriaListBox, type Selection } from "react-aria-components";
+
+import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
+import { SelectListBoxItem } from "#ui/components/inputs/Selection/shared/SelectListBoxItem";
+import { SelectListBoxItemSelectAll } from "#ui/components/inputs/Selection/shared/SelectListBoxItemSelectAll";
+import { SelectListBoxLoadingItem } from "#ui/components/inputs/Selection/shared/SelectListBoxLoadingItem";
+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";
+
+export interface SelectListBoxProps
+  extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable">,
+    Omit<
+      AriaListBoxProps<SelectItem>,
+      | "children"
+      | "aria-label"
+      | "selectionMode"
+      | "items"
+      | "selectedKeys"
+      | "onSelectionChange"
+      | "escapeKeyBehavior"
+      | "shouldSelectOnPressUp"
+      | "label"
+    > {
+  className?: string;
+  isScrollable?: boolean;
+  onClose?: () => void;
+}
+
+export const SelectListBox = ({
+  label,
+  selectionMode,
+  isSearchable,
+  isScrollable = true,
+  newItemRender,
+  onLoadMore,
+  className,
+  onClose,
+  ...props
+}: SelectListBoxProps) => {
+  const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } =
+    SelectContext.useSelect();
+
+  const onSelectionChange = (value: Selection) => {
+    const ids = Array.from(value);
+    if (!isMultiple && ids.length === 0) {
+      if (fieldState.value) {
+        onClose?.();
+        onChange(fieldState.value);
+      }
+      return;
+    }
+
+    if (isMultiple && ids.includes(SelectAllItemId)) {
+      if (ids.length > selectableListItems.length) {
+        onClear();
+      } else {
+        onSelectAll();
+      }
+      return;
+    }
+
+    if (isMultiple) {
+      onChange(ids);
+    } else {
+      onClose?.();
+      onChange(ids[0]);
+    }
+  };
+
+  return (
+    <AriaListBox
+      {...props}
+      aria-label={label}
+      selectionMode={selectionMode}
+      className={clsx(
+        "flex-1 outline-none",
+        isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
+        className,
+      )}
+      items={listItems}
+      selectedKeys={selectedIds}
+      onSelectionChange={onSelectionChange}
+      escapeKeyBehavior="none"
+      shouldSelectOnPressUp
+    >
+      {({ isSelectAllItem, isNewItem, isLoadingItem, ...item }) => {
+        if (isSelectAllItem) {
+          return (
+            <SelectListBoxItemSelectAll
+              key={item.id}
+              {...item}
+            />
+          );
+        }
+
+        if (isLoadingItem) {
+          return (
+            <SelectListBoxLoadingItem
+              key={item.id}
+              {...item}
+              onLoadMore={onLoadMore}
+            />
+          );
+        }
+
+        return (
+          <SelectListBoxItem
+            key={item.id}
+            {...item}
+            isSearchable={isSearchable}
+            isNewItem={isNewItem}
+            newItemRender={newItemRender}
+          />
+        );
+      }}
+    </AriaListBox>
+  );
+};

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

@@ -0,0 +1,79 @@
+import { clsx } from "clsx";
+import { useMemo, useRef } from "react";
+import { ListBoxItem as AriaListBoxItem } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { CheckboxCheckmark } from "#ui/components/inputs/Checkbox/CheckboxCheckmark";
+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 { ns } from "#ui/config/i18n";
+
+interface SelectListBoxItemProps extends Pick<SelectBaseProps, "isSearchable" | "newItemRender">, SelectItem {
+  isNewItem?: boolean;
+}
+
+export const SelectListBoxItem = ({
+  isSearchable,
+  isNewItem,
+  newItemRender,
+  id,
+  label,
+  content,
+  isDisabled,
+}: SelectListBoxItemProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation(ns);
+  const { selectedIds, isMultiple } = SelectContext.useSelect();
+
+  const itemContent = useMemo(() => {
+    if (isNewItem) {
+      return newItemRender?.(label) ?? `${t(($) => $.ui.autocomplete.createNewBtn)} '${label}'`;
+    }
+    return content ?? label;
+  }, [isNewItem, newItemRender, label, content, t]);
+
+  return (
+    <AriaListBoxItem
+      ref={ref}
+      id={id}
+      textValue={label}
+      isDisabled={isDisabled}
+      className={clsx(
+        selectListBoxItemClass,
+        !isMultiple &&
+          "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
+        isNewItem ? "text-interactive-text-primary-idle" : "text-interactive-text-secondary-idle",
+      )}
+    >
+      {isMultiple && !isSearchable && (
+        <CheckboxCheckmark
+          variant="default"
+          className="group-focus-visible:!outline-none"
+        />
+      )}
+      {isMultiple && isSearchable && (
+        <div
+          className="group"
+          data-rac=""
+          data-selected={selectedIds.includes(id) || undefined}
+        >
+          <CheckboxCheckmark
+            variant="default"
+            className="group-focus-visible:!outline-none"
+          />
+        </div>
+      )}
+      {itemContent}
+    </AriaListBoxItem>
+  );
+};
+
+export const selectListBoxItemClass = clsx(
+  "group flex cursor-pointer items-center gap-2 px-list-side-item py-list-height-item",
+  "border-b border-b-elevation-outline-default-1 outline-none last:border-b-0",
+  "font-labels-default text-interactive-text-secondary-idle text-label-2",
+  "hover:text-interactive-text-secondary-hover",
+  "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
+  "disabled:cursor-default disabled:text-interactive-text-secondary-disabled",
+);

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

@@ -0,0 +1,40 @@
+import { useRef } from "react";
+import { ListBoxItem as AriaListBoxItem } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { CheckboxCheckmark } from "#ui/components/inputs/Checkbox/CheckboxCheckmark";
+import { selectListBoxItemClass } from "#ui/components/inputs/Selection/shared/SelectListBoxItem";
+import { SelectContext } from "#ui/components/inputs/Selection/shared/select.context";
+import type { SelectItem } from "#ui/components/inputs/Selection/shared/select.types";
+import { ns } from "#ui/config/i18n";
+
+type SelectListBoxItemSelectAllProps = SelectItem;
+
+export const SelectListBoxItemSelectAll = ({ id, label, isDisabled }: SelectListBoxItemSelectAllProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation(ns);
+  const { selectableListItems, selectedIds } = SelectContext.useSelect();
+
+  return (
+    <AriaListBoxItem
+      ref={ref}
+      id={id}
+      textValue={label || t(($) => $.ui.select.allOption)}
+      isDisabled={isDisabled}
+      className={selectListBoxItemClass}
+    >
+      <div
+        className="group"
+        data-rac=""
+        data-selected={selectedIds.length === selectableListItems.length || undefined}
+        data-indeterminate={(selectedIds.length > 0 && selectedIds.length < selectableListItems.length) || undefined}
+      >
+        <CheckboxCheckmark
+          variant="default"
+          className="group-focus-visible:!outline-none"
+        />
+      </div>
+      {t(($) => $.ui.select.allOption)}
+    </AriaListBoxItem>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { ListBoxItem as AriaListBoxItem } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { selectListBoxItemClass } from "#ui/components/inputs/Selection/shared/SelectListBoxItem";
+import { SelectContext } from "#ui/components/inputs/Selection/shared/select.context";
+import type { SelectItem } from "#ui/components/inputs/Selection/shared/select.types";
+import { Loader } from "#ui/components/status/Loader/Loader";
+import { ns } from "#ui/config/i18n";
+import { useIntersectionObserver } from "#ui/hooks/useIntersectionObserver";
+
+interface SelectListBoxLoadingItemProps extends Omit<SelectItem, "isDisabled"> {
+  onLoadMore?: () => void;
+}
+
+export const SelectListBoxLoadingItem = ({ id, label, onLoadMore }: SelectListBoxLoadingItemProps) => {
+  const { t } = useTranslation(ns);
+  const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
+
+  const onIntersection = useCallback(() => {
+    if (!isDebouncing && !isLoading && hasLoadMore) {
+      onLoadMore?.();
+    }
+  }, [isDebouncing, isLoading, hasLoadMore, onLoadMore]);
+
+  const { setRef } = useIntersectionObserver({
+    onIntersection,
+    rootMargin: "40px",
+  });
+
+  return (
+    <AriaListBoxItem
+      id={id}
+      textValue={label || t(($) => $.ui.loadingState.text)}
+      isDisabled
+      className={selectListBoxItemClass}
+    >
+      <div
+        ref={(ref) => {
+          setRef(ref);
+
+          return () => {
+            setRef(null);
+          };
+        }}
+        className="flex flex-1 justify-center text-interactive-text-primary-idle"
+      >
+        <Loader />
+      </div>
+    </AriaListBoxItem>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { TextButton } from "#ui/components/buttons/TextButton/TextButton";
+import { SelectContext } from "#ui/components/inputs/Selection/shared/select.context";
+import { ns } from "#ui/config/i18n";
+
+interface SelectListBoxSelectionBarProps {
+  className?: string;
+}
+
+export const SelectListBoxSelectionBar = ({ className }: SelectListBoxSelectionBarProps) => {
+  const { t } = useTranslation(ns);
+  const { onClear, onSelectAll } = SelectContext.useSelect();
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-between border-elevation-outline-default-1 border-b px-4 py-3",
+        className,
+      )}
+    >
+      <TextButton
+        type="button"
+        color="primary"
+        onPress={onSelectAll}
+      >
+        {t(($) => $.ui.select.selectAll)}
+      </TextButton>
+      <TextButton
+        type="button"
+        color="secondary"
+        onPress={onClear}
+      >
+        {t(($) => $.ui.select.clearSelection)}
+      </TextButton>
+    </div>
+  );
+};