@povio/ui 2.1.14 → 2.1.16

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

@@ -1,223 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { useRef, useMemo, Fragment } from "react";
-import { useLabel } from "react-aria";
-import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
-import useMeasure from "react-use-measure";
-import { FormField } from "../../FormField/FormField.js";
-import { SelectInput } from "./SelectInput.js";
-import { SelectListBox } from "./SelectListBox.js";
-import { SelectContext } from "./select.context.js";
-import { SelectAllItemId } from "./useSelectItems.js";
-import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-const SelectDesktop = ({
-  ref,
-  error,
-  ignoreTriggerWidth,
-  showSelectionContent,
-  inputClassName,
-  containerClassName,
-  customTrigger,
-  onBlur,
-  ...props
-}) => {
-  const {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden,
-    headerClassName,
-    errorClassName,
-    placeholder,
-    variant,
-    isDisabled,
-    className,
-    hideLabel,
-    hideDropdownIcon,
-    isSearchable,
-    isClearable,
-    isLoading,
-    as,
-    size,
-    collapseAfter,
-    selectedTagsType
-  } = props;
-  const 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 triggerRef = useRef(null);
-  const closeComboBoxRef = useRef(null);
-  const [wrapperRef, { width }] = useMeasure();
-  const {
-    fieldState,
-    isOpen,
-    setIsOpen,
-    onInputChange,
-    onChange,
-    onClear,
-    onSelectAll,
-    listItems,
-    selectableListItems,
-    selectedIds,
-    isMultiple
-  } = SelectContext.useSelect();
-  const onSelectionChange = (value) => {
-    if (!value) {
-      return;
-    }
-    if (value === SelectAllItemId) {
-      if (selectedIds.length === selectableListItems.length) {
-        onClear();
-      } else {
-        onSelectAll();
-      }
-      return;
-    }
-    if (!isMultiple) {
-      onChange(value);
-      return;
-    }
-    if (!Array.isArray(fieldState.value)) {
-      onChange([value]);
-      return;
-    }
-    if (fieldState.value.includes(value)) {
-      onChange(fieldState.value.filter((id) => id !== value));
-    } else {
-      onChange(fieldState.value.concat(value));
-    }
-  };
-  const openChangeHandler = (value) => {
-    if (closeComboBoxRef.current && value) {
-      closeComboBoxRef.current.setOpen(false);
-      closeComboBoxRef.current = null;
-    } else {
-      setIsOpen(value);
-    }
-  };
-  const WrapperComponent = isSearchable ? ComboBox : Fragment;
-  const comboBoxProps = {
-    items: listItems,
-    selectedKey: isMultiple ? null : fieldState.value,
-    onSelectionChange,
-    inputValue: fieldState.inputValue,
-    onInputChange,
-    onOpenChange: openChangeHandler,
-    allowsEmptyCollection: true,
-    isDisabled,
-    isInvalid: !!error,
-    menuTrigger: "focus",
-    className: clsx("w-full", containerClassName)
-  };
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  const dialogTriggerProps = {
-    isOpen,
-    onOpenChange: setIsOpen
-  };
-  const showPopover = useMemo(
-    () => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading,
-    [listItems, isLoading]
-  );
-  return /* @__PURE__ */ jsx(
-    TooltipWrapper,
-    {
-      as,
-      error,
-      children: /* @__PURE__ */ jsx(WrapperComponent, { ...isSearchable ? comboBoxProps : {}, children: /* @__PURE__ */ jsxs(
-        FormField,
-        {
-          ...formFieldProps,
-          ...!isSearchable && {
-            labelProps,
-            className: clsx("w-full", containerClassName)
-          },
-          as,
-          ref: wrapperRef,
-          children: [
-            customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, { ...dialogTriggerProps, children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                ...fieldProps,
-                ref: mergeRefs(ref, triggerRef),
-                children: customTrigger
-              }
-            ) }) : /* @__PURE__ */ jsx(
-              SelectInput,
-              {
-                ref: mergeRefs(ref, triggerRef),
-                placeholder,
-                variant,
-                as,
-                size,
-                isDisabled,
-                isInvalid: !!error,
-                className,
-                hideDropdownIcon,
-                isSearchable,
-                isClearable,
-                showSelectionContent,
-                inputClassName,
-                collapseAfter,
-                selectedTagsType,
-                onBlur,
-                onCloseComboBox: (state) => {
-                  if (isSearchable) {
-                    closeComboBoxRef.current = state;
-                  }
-                },
-                fieldProps,
-                headerProps
-              }
-            ),
-            (!isSearchable || showPopover) && /* @__PURE__ */ jsx(
-              Popover,
-              {
-                triggerRef,
-                isOpen,
-                onOpenChange: setIsOpen,
-                className: "my-4 outline-none",
-                style: { width: !ignoreTriggerWidth ? width : void 0 },
-                offset: 0,
-                children: /* @__PURE__ */ jsx(
-                  SelectListBox,
-                  {
-                    ...props,
-                    className: "max-h-80 rounded-list-rounding-dropdown border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-5 [scrollbar-width:thin]",
-                    autoFocus: !isSearchable
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ) })
-    }
-  );
-};
-export {
-  SelectDesktop
-};

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

@@ -1,234 +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 { 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,
-  collapseAfter,
-  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,
-      "data-is-empty": isEmpty || 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,
-                    collapseAfter,
-                    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/dist/components/inputs/Selection/shared/SelectInputTags.js

@@ -1,49 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { Tag } from "../../../text/Tag/Tag.js";
-const SelectInputTags = ({
-  selectedItems,
-  isDisabled,
-  selectedTagsType,
-  collapseAfter,
-  onRemove
-}) => {
-  const { displayedItems, remainingCount } = useMemo(() => {
-    if (!collapseAfter || selectedItems.length <= collapseAfter) {
-      return { displayedItems: selectedItems, remainingCount: 0 };
-    }
-    return {
-      displayedItems: selectedItems.slice(0, collapseAfter - 1),
-      remainingCount: selectedItems.length - (collapseAfter - 1)
-    };
-  }, [selectedItems, collapseAfter]);
-  if (selectedTagsType === "tags") {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      displayedItems.map((item) => /* @__PURE__ */ jsx(
-        Tag,
-        {
-          dismissable: true,
-          isDisabled,
-          onDismiss: () => onRemove(item.id),
-          excludeFromTabOrder: true,
-          className: "z-1",
-          children: item.label
-        },
-        item.id
-      )),
-      remainingCount > 0 && /* @__PURE__ */ jsx(
-        Tag,
-        {
-          isDisabled,
-          excludeFromTabOrder: true,
-          children: `+${remainingCount} more`
-        },
-        "remaining-count"
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
-};
-export {
-  SelectInputTags
-};

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

@@ -1,127 +0,0 @@
-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]);
-    }
-  };
-  const renderItem = (item) => {
-    if (item.isSelectAllItem) {
-      return /* @__PURE__ */ jsx(
-        SelectListBoxItemSelectAll,
-        {
-          ...item
-        },
-        item.id
-      );
-    }
-    if (item.isLoadingItem) {
-      return /* @__PURE__ */ jsx(
-        SelectListBoxLoadingItem,
-        {
-          ...item,
-          onLoadMore
-        },
-        item.id
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      SelectListBoxItem,
-      {
-        ...item,
-        isSearchable,
-        isNewItem: item.isNewItem,
-        newItemRender
-      },
-      item.id
-    );
-  };
-  if (virtualizerOptions || listItems.length > 100) {
-    return /* @__PURE__ */ jsx(
-      Virtualizer,
-      {
-        layout: ListLayout,
-        layoutOptions: virtualizerOptions,
-        children: /* @__PURE__ */ jsx(
-          ListBox,
-          {
-            ...props,
-            "aria-label": label,
-            selectionMode,
-            className: clsx(
-              "flex-1 outline-none [&>div:last-child>*]:border-b-0",
-              isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
-              className
-            ),
-            items: listItems,
-            selectedKeys: selectedIds,
-            onSelectionChange,
-            escapeKeyBehavior: "none",
-            shouldSelectOnPressUp: true,
-            children: renderItem
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    ListBox,
-    {
-      ...props,
-      "aria-label": label,
-      selectionMode,
-      className: clsx(
-        "flex-1 outline-none [&>div:last-child]:border-b-0",
-        isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
-        className
-      ),
-      items: listItems,
-      selectedKeys: selectedIds,
-      onSelectionChange,
-      escapeKeyBehavior: "none",
-      shouldSelectOnPressUp: true,
-      children: renderItem
-    }
-  );
-};
-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-contained-primary-on-idle",
-        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",
-  "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
-};