@povio/ui 0.0.6 → 0.0.8

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

@@ -1,161 +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
-  } = 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
-          }
-        ),
-        /* @__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,243 +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);
-        }
-      },
-      [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
-};

package/dist/components/inputs/Slider/Slider.js

@@ -1,137 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { Slider as Slider$1, SliderTrack, SliderThumb } from "react-aria-components";
-import { Controller } from "react-hook-form";
-import { FormField } from "../FormField/FormField.js";
-import { uiOutlineClass } from "../../outline.clsx.js";
-import { Typography } from "../../text/Typography/Typography.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
-const SliderBase = (props) => {
-  const ui = UIConfig.useConfig();
-  const {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    unit,
-    hideLabel = ui.input.hideLabel,
-    minValue = ui.slider.minValue,
-    maxValue = ui.slider.maxValue,
-    ...rest
-  } = props;
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden,
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const defaultValue = props.defaultValue ?? (props.isRange ? [minValue, minValue] : minValue);
-  const getTrackFillStyle = (state) => {
-    const p0 = state.getThumbPercent(0);
-    const p1 = state.getThumbPercent(1);
-    return {
-      left: props.isRange ? `${p0 * 100}%` : 0,
-      width: props.isRange ? `${(p1 - p0) * 100}%` : `${p0 * 100}%`
-    };
-  };
-  return /* @__PURE__ */ jsx(
-    Slider$1,
-    {
-      ...rest,
-      defaultValue,
-      minValue,
-      maxValue,
-      isDisabled,
-      children: /* @__PURE__ */ jsx(FormField, { ...formFieldProps, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
-            size: "label-2",
-            children: [
-              minValue,
-              unit
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(SliderTrack, { className: "relative mx-2 h-6 w-full", children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "-translate-y-1/2 absolute top-1/2 h-1 w-full overflow-hidden rounded-full bg-elevation-outline-default-1", children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                "absolute top-0 h-1 rounded-full",
-                props.isDisabled ? "bg-interactive-contained-primary-disabled" : "bg-interactive-contained-primary-idle"
-              ),
-              style: getTrackFillStyle(state)
-            }
-          ) }),
-          state.values.map((_, i) => /* @__PURE__ */ jsx(
-            SliderThumb,
-            {
-              index: i,
-              className: clsx(
-                "absolute top-1/2 size-4 cursor-pointer rounded-full bg-interactive-contained-primary-idle disabled:cursor-default",
-                "dragging:bg-interactive-contained-primary-pressed hover:bg-interactive-contained-primary-hover focus-visible:outline-interactive-contained-primary-focus disabled:bg-interactive-contained-primary-disabled",
-                uiOutlineClass
-              ),
-              isDisabled
-            },
-            i
-          ))
-        ] }) }),
-        /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
-            size: "label-2",
-            children: [
-              maxValue,
-              unit
-            ]
-          }
-        )
-      ] }) })
-    }
-  );
-};
-const Slider = (props) => {
-  if ("formControl" in props && props.formControl) {
-    const { formControl, ref, ...innerProps } = props;
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        control: formControl.control,
-        name: formControl.name,
-        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
-          SliderBase,
-          {
-            ...innerProps,
-            ref: mergeRefs(ref, field.ref),
-            value: field.value,
-            onChange: field.onChange,
-            isDisabled: field.disabled || props.isDisabled,
-            error: props.error ?? error?.message
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(SliderBase, { ...props });
-};
-export {
-  Slider
-};