@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,231 @@
+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 { SelectInputTags } from "./SelectInputTags.js";
+import { SelectContext } from "./select.context.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputSize, inputBase, inputSide } from "../../shared/input.cva.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,
+  selectedTagsType,
+  onCloseComboBox,
+  onBlur,
+  ...props
+}) => {
+  const uiStyle = UIStyle.useConfig();
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+  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 {};
+    }
+    const paddingLeft = `calc(${isSearchable || showTags ? "1 * " : "2 * "}var(${inputSideCva({ size, type: "var" })}) + ${labelWidth}px)`;
+    return {
+      paddingLeft
+    };
+  }, [labelWidth, as, size, isSearchable, showTags, inputSideCva]);
+  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 relative flex px-0!", 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 })), 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 && /* @__PURE__ */ jsx(
+                  SelectInputTags,
+                  {
+                    selectedItems,
+                    isDisabled,
+                    selectedTagsType,
+                    onRemove
+                  }
+                ),
+                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"
+                      }),
+                      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 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: clsx(
+                    "truncate empty:before:inline-block empty:before:content-['']",
+                    isEmpty && "text-text-default-3"
+                  ),
+                  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: clsx("self-stretch pl-1-5 outline-none", inputSizeCva({ size })),
+            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/{src → dist}/components/inputs/Selection/shared/SelectInputTags.d.ts

@@ -1,6 +1,6 @@
 import { Key } from 'react-aria-components';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { SelectBaseProps } from './SelectBase';
+import { SelectItem } from './select.types';
 interface SelectInputTagsProps {
     selectedItems: SelectItem[];
     isDisabled: SelectBaseProps["isDisabled"];

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

@@ -0,0 +1,22 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { Tag } from "../../../text/Tag/Tag.js";
+const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, onRemove }) => {
+  if (selectedTagsType !== "tags") {
+    return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: selectedItems.map((item) => /* @__PURE__ */ jsx(
+    Tag,
+    {
+      dismissable: true,
+      isDisabled,
+      onDismiss: () => onRemove(item.id),
+      excludeFromTabOrder: true,
+      className: "z-1",
+      children: item.label
+    },
+    item.id
+  )) });
+};
+export {
+  SelectInputTags
+};

package/{src → dist}/components/inputs/Selection/shared/SelectListBox.d.ts

@@ -1,6 +1,6 @@
 import { AriaListBoxProps } from 'react-aria';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { SelectBaseProps } from './SelectBase';
+import { SelectItem } from './select.types';
 export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
     className?: string;
     isScrollable?: boolean;

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

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Virtualizer, ListLayout, 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,
+  virtualizerOptions,
+  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(
+    Virtualizer,
+    {
+      layout: ListLayout,
+      layoutOptions: {
+        estimatedRowHeight: 40,
+        ...virtualizerOptions
+      },
+      children: /* @__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/{src → dist}/components/inputs/Selection/shared/SelectListBoxItem.d.ts

@@ -1,5 +1,5 @@
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { SelectBaseProps } from './SelectBase';
+import { SelectItem } from './select.types';
 interface SelectListBoxItemProps extends Pick<SelectBaseProps, "isSearchable" | "newItemRender">, SelectItem {
     isNewItem?: boolean;
 }

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/{src → dist}/components/inputs/Selection/shared/SelectListBoxItemSelectAll.d.ts

@@ -1,4 +1,4 @@
-import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { SelectItem } from './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/{src → dist}/components/inputs/Selection/shared/SelectListBoxLoadingItem.d.ts

@@ -1,4 +1,4 @@
-import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { SelectItem } from './select.types';
 interface SelectListBoxLoadingItemProps extends Omit<SelectItem, "isDisabled"> {
     onLoadMore?: () => void;
 }

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.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/{src → dist}/components/inputs/Selection/shared/SelectMobile.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+import { SelectBaseProps } from './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 {};