@povio/ui 0.0.7 → 0.0.8

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

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

@@ -1,9 +0,0 @@
-import { AriaListBoxProps } from 'react-aria';
-import { SelectBaseProps } from './SelectBase';
-import { SelectItem } from './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

@@ -1,97 +0,0 @@
-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.js

@@ -1,78 +0,0 @@
-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.js

@@ -1,45 +0,0 @@
-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.js

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

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