@povio/ui 0.0.4 → 0.0.6

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -0,0 +1,237 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { use, useState, useMemo } from "react";
+import { useHover, useFocusWithin, useFocusVisible } from "react-aria";
+import { ComboBoxStateContext, Input, Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import useMeasure from "react-use-measure";
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { SelectContext } from "./select.context.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputSize, inputBase } from "../../shared/input.cva.js";
+import { Tag } from "../../../text/Tag/Tag.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+const SelectInput = ({
+  ref,
+  placeholder,
+  variant,
+  as,
+  size,
+  isDisabled,
+  isInvalid,
+  className,
+  hideDropdownIcon,
+  isSearchable,
+  isClearable,
+  showSelectionContent,
+  inputClassName,
+  fieldProps,
+  headerProps,
+  onCloseComboBox,
+  onBlur,
+  ...props
+}) => {
+  const uiStyle = UIStyle.useConfig();
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
+  const { t } = useTranslation(ns);
+  const state = use(ComboBoxStateContext);
+  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) => {
+    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 /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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 || void 0,
+      "data-focused": isOpen || isFocused || void 0,
+      "data-focus-within": isFocused || void 0,
+      "data-searchable-focus-within": isFocused && isSearchable || void 0,
+      "data-focus-visible": isFocused && isFocusVisible || void 0,
+      "data-has-selection": !isEmpty || void 0,
+      "data-has-search": fieldState.searchValue !== "" || void 0,
+      "data-invalid": isInvalid || void 0,
+      ...hoverProps,
+      ...focusWithinProps,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "relative flex flex-1 items-center truncate",
+              showTags && inputSizeCva({ size, ...props, className: "pr-2 pl-input-side-default" })
+            ),
+            children: [
+              as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
+                FormFieldLabel,
+                {
+                  ref: labelContentRef,
+                  as,
+                  ...headerProps,
+                  labelProps
+                }
+              ),
+              (showTags || isSearchable) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("flex flex-1 flex-wrap gap-2 truncate", !isSearchable && "pointer-events-none z-[1]"),
+                  style,
+                  children: [
+                    showTags && selectedItems.map((item) => /* @__PURE__ */ jsx(
+                      Tag,
+                      {
+                        dismissable: true,
+                        isDisabled,
+                        onDismiss: () => onRemove(item.id),
+                        excludeFromTabOrder: true,
+                        className: "z-[1]",
+                        children: item.label
+                      },
+                      item.id
+                    )),
+                    isSearchable && /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        placeholder,
+                        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,
+                        ...fieldProps
+                      }
+                    )
+                  ]
+                }
+              ),
+              !isSearchable && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  isDisabled,
+                  onPress: () => setIsOpen(!isOpen),
+                  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,
+                  ...fieldProps,
+                  children: (isEmpty || !isMultiple) && /* @__PURE__ */ jsxs(
+                    Typography,
+                    {
+                      size: "label-1",
+                      className: "truncate empty:before:inline-block empty:before:content-['']",
+                      children: [
+                        isEmpty && placeholder,
+                        !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        showClearButton && /* @__PURE__ */ jsx(InputClear, { onClear }),
+        !hideDropdownIcon && /* @__PURE__ */ jsx(
+          Button,
+          {
+            excludeFromTabOrder: true,
+            "aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
+            className: "self-stretch pr-input-side-default pl-1-5 outline-none",
+            isDisabled,
+            onPress: () => {
+              if (!isSearchable) {
+                setIsOpen(!isOpen);
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              ArrowDropDownIcon,
+              {
+                className: clsx(
+                  "size-6 shrink-0",
+                  isOpen && "rotate-180",
+                  isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"
+                ),
+                "aria-hidden": "true"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SelectInput
+};

package/dist/components/inputs/Selection/shared/SelectListBox.d.ts

@@ -0,0 +1,9 @@
+import { AriaListBoxProps } from 'react-aria';
+import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+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 declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/shared/SelectListBox.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ListBox } from "react-aria-components";
+import { SelectListBoxItem } from "./SelectListBoxItem.js";
+import { SelectListBoxItemSelectAll } from "./SelectListBoxItemSelectAll.js";
+import { SelectListBoxLoadingItem } from "./SelectListBoxLoadingItem.js";
+import { SelectContext } from "./select.context.js";
+import { SelectAllItemId } from "./useSelectItems.js";
+const SelectListBox = ({
+  label,
+  selectionMode,
+  isSearchable,
+  isScrollable = true,
+  newItemRender,
+  onLoadMore,
+  className,
+  onClose,
+  ...props
+}) => {
+  const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
+  const onSelectionChange = (value) => {
+    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 /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      ...props,
+      "aria-label": label,
+      selectionMode,
+      className: clsx(
+        "flex-1 outline-none",
+        isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
+        className
+      ),
+      items: listItems,
+      selectedKeys: selectedIds,
+      onSelectionChange,
+      escapeKeyBehavior: "none",
+      shouldSelectOnPressUp: true,
+      children: ({ isSelectAllItem, isNewItem, isLoadingItem, ...item }) => {
+        if (isSelectAllItem) {
+          return /* @__PURE__ */ jsx(
+            SelectListBoxItemSelectAll,
+            {
+              ...item
+            },
+            item.id
+          );
+        }
+        if (isLoadingItem) {
+          return /* @__PURE__ */ jsx(
+            SelectListBoxLoadingItem,
+            {
+              ...item,
+              onLoadMore
+            },
+            item.id
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          SelectListBoxItem,
+          {
+            ...item,
+            isSearchable,
+            isNewItem,
+            newItemRender
+          },
+          item.id
+        );
+      }
+    }
+  );
+};
+export {
+  SelectListBox
+};

package/dist/components/inputs/Selection/shared/SelectListBoxItem.d.ts

@@ -0,0 +1,8 @@
+import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+interface SelectListBoxItemProps extends Pick<SelectBaseProps, "isSearchable" | "newItemRender">, SelectItem {
+    isNewItem?: boolean;
+}
+export declare const SelectListBoxItem: ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled, }: SelectListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const selectListBoxItemClass: string;
+export {};

package/dist/components/inputs/Selection/shared/SelectListBoxItem.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRef, useMemo } from "react";
+import { ListBoxItem } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
+import { SelectContext } from "./select.context.js";
+import { ns } from "../../../../config/i18n.js";
+const SelectListBoxItem = ({
+  isSearchable,
+  isNewItem,
+  newItemRender,
+  id,
+  label,
+  content,
+  isDisabled
+}) => {
+  const ref = useRef(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 /* @__PURE__ */ jsxs(
+    ListBoxItem,
+    {
+      ref,
+      id,
+      textValue: label,
+      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"
+      ),
+      children: [
+        isMultiple && !isSearchable && /* @__PURE__ */ jsx(
+          CheckboxCheckmark,
+          {
+            variant: "default",
+            className: "group-focus-visible:!outline-none"
+          }
+        ),
+        isMultiple && isSearchable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "group",
+            "data-rac": "",
+            "data-selected": selectedIds.includes(id) || void 0,
+            children: /* @__PURE__ */ jsx(
+              CheckboxCheckmark,
+              {
+                variant: "default",
+                className: "group-focus-visible:!outline-none"
+              }
+            )
+          }
+        ),
+        itemContent
+      ]
+    }
+  );
+};
+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"
+);
+export {
+  SelectListBoxItem,
+  selectListBoxItemClass
+};

package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.d.ts

@@ -0,0 +1,4 @@
+import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+type SelectListBoxItemSelectAllProps = SelectItem;
+export declare const SelectListBoxItemSelectAll: ({ id, label, isDisabled }: SelectListBoxItemSelectAllProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ListBoxItem } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
+import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { SelectContext } from "./select.context.js";
+import { ns } from "../../../../config/i18n.js";
+const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
+  const ref = useRef(null);
+  const { t } = useTranslation(ns);
+  const { selectableListItems, selectedIds } = SelectContext.useSelect();
+  return /* @__PURE__ */ jsxs(
+    ListBoxItem,
+    {
+      ref,
+      id,
+      textValue: label || t(($) => $.ui.select.allOption),
+      isDisabled,
+      className: selectListBoxItemClass,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "group",
+            "data-rac": "",
+            "data-selected": selectedIds.length === selectableListItems.length || void 0,
+            "data-indeterminate": selectedIds.length > 0 && selectedIds.length < selectableListItems.length || void 0,
+            children: /* @__PURE__ */ jsx(
+              CheckboxCheckmark,
+              {
+                variant: "default",
+                className: "group-focus-visible:!outline-none"
+              }
+            )
+          }
+        ),
+        t(($) => $.ui.select.allOption)
+      ]
+    }
+  );
+};
+export {
+  SelectListBoxItemSelectAll
+};

package/dist/components/inputs/Selection/shared/SelectListBoxLoadingItem.d.ts

@@ -0,0 +1,6 @@
+import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+interface SelectListBoxLoadingItemProps extends Omit<SelectItem, "isDisabled"> {
+    onLoadMore?: () => void;
+}
+export declare const SelectListBoxLoadingItem: ({ id, label, onLoadMore }: SelectListBoxLoadingItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Selection/shared/SelectListBoxLoadingItem.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ListBoxItem } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { SelectContext } from "./select.context.js";
+import { Loader } from "../../../status/Loader/Loader.js";
+import { ns } from "../../../../config/i18n.js";
+import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
+const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
+  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 /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      id,
+      textValue: label || t(($) => $.ui.loadingState.text),
+      isDisabled: true,
+      className: selectListBoxItemClass,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (ref) => {
+            setRef(ref);
+            return () => {
+              setRef(null);
+            };
+          },
+          className: "flex flex-1 justify-center text-interactive-text-primary-idle",
+          children: /* @__PURE__ */ jsx(Loader, {})
+        }
+      )
+    }
+  );
+};
+export {
+  SelectListBoxLoadingItem
+};

package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.d.ts

@@ -0,0 +1,5 @@
+interface SelectListBoxSelectionBarProps {
+    className?: string;
+}
+export declare const SelectListBoxSelectionBar: ({ className }: SelectListBoxSelectionBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { SelectContext } from "./select.context.js";
+import { ns } from "../../../../config/i18n.js";
+const SelectListBoxSelectionBar = ({ className }) => {
+  const { t } = useTranslation(ns);
+  const { onClear, onSelectAll } = SelectContext.useSelect();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex items-center justify-between border-elevation-outline-default-1 border-b px-4 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          TextButton,
+          {
+            type: "button",
+            color: "primary",
+            onPress: onSelectAll,
+            children: t(($) => $.ui.select.selectAll)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextButton,
+          {
+            type: "button",
+            color: "secondary",
+            onPress: onClear,
+            children: t(($) => $.ui.select.clearSelection)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SelectListBoxSelectionBar
+};

package/dist/components/inputs/Selection/shared/SelectMobile.d.ts

@@ -0,0 +1,5 @@
+import { Key } from 'react-aria-components';
+import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
+export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export {};