@povio/ui 2.1.14 → 2.1.16

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
-};

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

@@ -1,165 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { useRef } from "react";
-import { useLabel } from "react-aria";
-import { DialogTrigger } from "react-aria-components";
-import { FormField } from "../../FormField/FormField.js";
-import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
-import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
-import { TextInput } from "../../Input/TextInput/TextInput.js";
-import { SelectInput } from "./SelectInput.js";
-import { SelectListBox } from "./SelectListBox.js";
-import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
-import { SelectContext } from "./select.context.js";
-import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
-const SelectMobile = ({
-  ref,
-  error,
-  showSelectionContent,
-  inputClassName,
-  containerClassName,
-  customTrigger,
-  onBlur,
-  ...props
-}) => {
-  const {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden,
-    headerClassName,
-    errorClassName,
-    placeholder,
-    variant,
-    isDisabled,
-    className,
-    hideLabel,
-    hideDropdownIcon,
-    isSearchable,
-    isClearable,
-    as,
-    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 headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  const { fieldState, isOpen, setIsOpen, onInputChange, isMultiple } = SelectContext.useSelect();
-  const searchInputRef = useRef(null);
-  const dialogTriggerProps = {
-    isOpen,
-    onOpenChange: setIsOpen
-  };
-  return /* @__PURE__ */ jsx(
-    FormField,
-    {
-      ...formFieldProps,
-      as,
-      labelProps,
-      className: clsx("w-full", containerClassName),
-      children: /* @__PURE__ */ jsxs(DialogTrigger, { ...dialogTriggerProps, children: [
-        customTrigger ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...fieldProps,
-            ref,
-            children: customTrigger
-          }
-        ) : /* @__PURE__ */ jsx(
-          SelectInput,
-          {
-            ref,
-            placeholder,
-            variant,
-            as,
-            isDisabled,
-            isInvalid: !!error,
-            className,
-            hideDropdownIcon,
-            isSearchable: false,
-            isClearable,
-            showSelectionContent,
-            onBlur,
-            fieldProps,
-            headerProps,
-            collapseAfter,
-            selectedTagsType
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BottomSheet,
-          {
-            isOpen,
-            onOpenChange: setIsOpen,
-            onStateChange: (state) => {
-              if (state === "opened") {
-                searchInputRef.current?.focus();
-              }
-            },
-            label,
-            footer: isMultiple && /* @__PURE__ */ jsx(SelectListBoxSelectionBar, {}),
-            isDismissable: true,
-            children: (close) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              isSearchable ? /* @__PURE__ */ jsx(
-                TextInput,
-                {
-                  ref: searchInputRef,
-                  label,
-                  placeholder,
-                  value: fieldState.inputValue,
-                  onChange: onInputChange,
-                  rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-                  inputClassName,
-                  className: "mb-1-5 px-4 pt-3"
-                }
-              ) : /* @__PURE__ */ jsx(
-                FormFieldHeader,
-                {
-                  label,
-                  rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-                  className: "!mb-1-5 px-4 pt-3"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                SelectListBox,
-                {
-                  ...props,
-                  autoFocus: !isSearchable,
-                  isScrollable: false,
-                  onClose: close
-                }
-              )
-            ] })
-          }
-        )
-      ] })
-    }
-  );
-};
-export {
-  SelectMobile
-};

package/dist/components/inputs/Selection/shared/select.context.js

@@ -1,244 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useState, useRef, useEffect, useCallback, use } from "react";
-import { useSelectItems, NewItemId } from "./useSelectItems.js";
-import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-var SelectContext;
-((SelectContext2) => {
-  const Context = createContext({});
-  const defaultMapInitialToSelectItem = (item) => ({
-    id: item.id,
-    label: item.label ?? item.name ?? ""
-  });
-  SelectContext2.Provider = ({
-    items,
-    onInputChange,
-    onSearchChange,
-    showSelectAllOption,
-    showNewItemOption,
-    newItemMinLength,
-    onNewItemOption,
-    isLoading,
-    hasLoadMore,
-    isClientSearchDisabled,
-    children,
-    mapInitialToSelectItem = defaultMapInitialToSelectItem,
-    ...props
-  }) => {
-    const isMultiple = props.selectionMode === "multiple";
-    const initialSelectedItems = useMemo(() => {
-      if (!props.initialSelection) {
-        return null;
-      }
-      if (Array.isArray(props.initialSelection)) {
-        return props.initialSelection.map(mapInitialToSelectItem);
-      }
-      return mapInitialToSelectItem(props.initialSelection);
-    }, [props.initialSelection, mapInitialToSelectItem]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [fieldState, setFieldState] = useState({
-      value: props.value ?? (isMultiple ? [] : null),
-      inputValue: "",
-      searchValue: ""
-    });
-    const { callback: onSearchChangeDebounced, isDebouncing } = useDebounceCallback(onSearchChange);
-    const [showAll, setShowAll] = useState(false);
-    const [cachedItems, setCachedItems] = useState(items);
-    const valueRef = useRef(initialSelectedItems);
-    useEffect(() => {
-      if (!isLoading) {
-        setCachedItems(items);
-      }
-    }, [isLoading, items]);
-    const { allItems, allListItems, listItems, selectableListItems } = useSelectItems({
-      initialSelectedItems,
-      selectedItems: valueRef.current,
-      cachedItems,
-      inputValue: fieldState.inputValue,
-      showAll,
-      isMultiple,
-      showSelectAllOption,
-      showNewItemOption,
-      newItemMinLength,
-      isLoading,
-      hasLoadMore,
-      isClientSearchDisabled
-    });
-    const selectedItems = useMemo(
-      () => allItems.filter(
-        ({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value
-      ),
-      [allItems, fieldState.value]
-    );
-    const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
-    const getItem = useCallback(
-      (value2) => allItems.find((item) => item && item.id === value2) ?? null,
-      [allItems]
-    );
-    const updateValue = useCallback(
-      (value2) => {
-        if (Array.isArray(value2)) {
-          valueRef.current = value2.map((id) => getItem(id)).filter((item) => item !== null);
-        } else {
-          valueRef.current = getItem(value2);
-        }
-      },
-      [getItem]
-    );
-    const getValueIds = () => Array.isArray(valueRef.current) ? valueRef.current.map(({ id }) => id) : valueRef.current?.id ?? null;
-    const emitStateChanges = useCallback(
-      (changes, skipSelectionChange) => {
-        const valueChanged = JSON.stringify(changes.value) !== JSON.stringify(getValueIds());
-        if (valueChanged) {
-          updateValue(changes.value);
-          if (!skipSelectionChange) {
-            if (isMultiple) {
-              props.onChange?.(changes.value);
-            } else {
-              props.onChange?.(changes.value);
-            }
-          }
-        }
-        if (changes.inputValue !== fieldState.inputValue) {
-          onInputChange?.(changes.inputValue);
-        }
-        if (changes.searchValue !== fieldState.searchValue) {
-          onSearchChangeDebounced?.(changes.searchValue);
-        }
-      },
-      [fieldState, isMultiple, props, onInputChange, onSearchChangeDebounced, updateValue]
-    );
-    const syncFieldState = (value2) => {
-      const newFieldState = {
-        value: value2,
-        inputValue: isMultiple || Array.isArray(value2) ? fieldState.inputValue : getItem(value2)?.label ?? "",
-        searchValue: ""
-      };
-      setFieldState(newFieldState);
-      emitStateChanges(newFieldState, true);
-      if (!isMultiple) {
-        setShowAll(true);
-      }
-    };
-    useEffect(() => {
-      const value2 = props.value ?? null;
-      if (JSON.stringify(value2) !== JSON.stringify(fieldState.value)) {
-        syncFieldState(value2);
-      } else {
-        updateValue(value2);
-      }
-    }, [props.value]);
-    useEffect(() => {
-      if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) {
-        syncFieldState(fieldState.value);
-      }
-    }, [allListItems]);
-    const handleInputChange = useCallback(
-      (inputValue) => {
-        const newFieldState = {
-          value: isMultiple || inputValue !== "" ? fieldState.value : null,
-          inputValue,
-          searchValue: inputValue
-        };
-        setFieldState(newFieldState);
-        emitStateChanges(newFieldState);
-        setShowAll(false);
-        if (!isOpen && inputValue !== "" && props.isSearchable) {
-          setIsOpen(true);
-        }
-      },
-      // oxlint-disable-next-line exhaustive-deps
-      [emitStateChanges, fieldState.value, isMultiple]
-    );
-    const onChange = useCallback(
-      (value2) => {
-        if (value2 === NewItemId) {
-          onNewItemOption?.(fieldState.inputValue);
-        } else {
-          const newFieldState = {
-            value: value2,
-            inputValue: isMultiple || Array.isArray(value2) ? "" : getItem(value2)?.label ?? "",
-            searchValue: ""
-          };
-          setFieldState(newFieldState);
-          emitStateChanges(newFieldState);
-        }
-        if (!isMultiple) {
-          setIsOpen(false);
-          setShowAll(true);
-        }
-      },
-      [emitStateChanges, onNewItemOption, fieldState.inputValue, getItem, isMultiple]
-    );
-    const onClear = useCallback(() => {
-      if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
-        setFieldState((prev) => ({
-          ...prev,
-          inputValue: ""
-        }));
-        return;
-      }
-      if (isMultiple) {
-        onChange([]);
-      } else {
-        onChange(null);
-      }
-    }, [isMultiple, onChange]);
-    const onSelectAll = useCallback(() => {
-      onChange(selectableListItems.map(({ id }) => id));
-    }, [selectableListItems, onChange]);
-    const onRemove = useCallback(
-      (value2) => {
-        if (isMultiple && Array.isArray(fieldState.value)) {
-          onChange(fieldState.value.filter((id) => id !== value2));
-        }
-      },
-      [isMultiple, fieldState.value, onChange]
-    );
-    const value = useMemo(
-      () => ({
-        fieldState,
-        isOpen,
-        setIsOpen,
-        isDebouncing,
-        onInputChange: handleInputChange,
-        onChange,
-        onClear,
-        onSelectAll,
-        onRemove,
-        listItems,
-        selectableListItems,
-        selectedItems,
-        selectedIds,
-        isMultiple,
-        isLoading,
-        hasLoadMore
-      }),
-      [
-        fieldState,
-        isOpen,
-        setIsOpen,
-        isDebouncing,
-        handleInputChange,
-        onChange,
-        onClear,
-        onSelectAll,
-        onRemove,
-        listItems,
-        selectableListItems,
-        selectedIds,
-        selectedItems,
-        isMultiple,
-        isLoading,
-        hasLoadMore
-      ]
-    );
-    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
-  };
-  SelectContext2.useSelect = () => {
-    const select = use(Context);
-    return select;
-  };
-})(SelectContext || (SelectContext = {}));
-export {
-  SelectContext
-};

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

@@ -1,94 +0,0 @@
-import { useMemo } from "react";
-import { useFilter } from "react-aria-components";
-const SelectAllItemId = "all-item-id";
-const SelectAllItem = (inputValue) => ({
-  id: SelectAllItemId,
-  label: inputValue,
-  isSelectAllItem: true
-});
-const NewItemId = "new-item-id";
-const NewItem = (inputValue) => ({
-  id: NewItemId,
-  label: inputValue,
-  isNewItem: true
-});
-const LoadingItemId = "loading-item-id";
-const LoadingItem = (inputValue) => ({
-  id: LoadingItemId,
-  label: inputValue,
-  isLoadingItem: true
-});
-const ReservedItemIds = [SelectAllItemId, NewItemId, LoadingItemId];
-function useSelectItems({
-  initialSelectedItems,
-  selectedItems,
-  cachedItems,
-  inputValue,
-  showAll,
-  isMultiple,
-  showSelectAllOption,
-  showNewItemOption,
-  newItemMinLength = 3,
-  isLoading,
-  hasLoadMore,
-  isClientSearchDisabled
-}) {
-  const { contains } = useFilter({ sensitivity: "base" });
-  const allListItems = useMemo(() => {
-    const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
-    const showNewItem = showNewItemOption && inputValue.length >= newItemMinLength && !cachedItems.find((item) => contains(item.label, inputValue));
-    const showLoadingItem = isLoading || hasLoadMore;
-    return [
-      ...showSelectAllItem ? [SelectAllItem(inputValue)] : [],
-      ...cachedItems,
-      ...showNewItem ? [NewItem(inputValue)] : [],
-      ...showLoadingItem ? [LoadingItem(inputValue)] : []
-    ];
-  }, [
-    isMultiple,
-    showNewItemOption,
-    inputValue,
-    newItemMinLength,
-    cachedItems,
-    contains,
-    isLoading,
-    hasLoadMore,
-    showSelectAllOption
-  ]);
-  const allItems = useMemo(() => {
-    const items = [
-      ...Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems],
-      ...Array.isArray(selectedItems) ? selectedItems : [selectedItems],
-      ...allListItems
-    ].filter((item) => !!item);
-    const allItemsMap = /* @__PURE__ */ new Map();
-    items.forEach((item) => allItemsMap.set(item.id, item));
-    return Array.from(allItemsMap.values());
-  }, [allListItems, initialSelectedItems, selectedItems]);
-  const filteredListItems = useMemo(
-    () => allListItems.filter((item) => contains(item.label, inputValue)),
-    [allListItems, contains, inputValue]
-  );
-  const listItems = useMemo(
-    () => showAll || isClientSearchDisabled ? allListItems : filteredListItems,
-    [showAll, isClientSearchDisabled, allListItems, filteredListItems]
-  );
-  const selectableListItems = useMemo(
-    () => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))),
-    [listItems]
-  );
-  return {
-    allItems,
-    allListItems,
-    filteredListItems,
-    listItems,
-    selectableListItems
-  };
-}
-export {
-  LoadingItemId,
-  NewItemId,
-  ReservedItemIds,
-  SelectAllItemId,
-  useSelectItems
-};