@povio/ui 0.0.4 → 0.0.6

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

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

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

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

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

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

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

@@ -1,169 +0,0 @@
-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.types.ts

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