@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,161 @@
+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/{src → dist}/components/inputs/Selection/shared/select.context.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { Key } from 'react-aria-components';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { ExtendedSelectItem, GroupedSelectProps, SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { SelectBaseProps } from './SelectBase';
+import { ExtendedSelectItem, GroupedSelectProps, SelectItem } from './select.types';
 export declare namespace SelectContext {
     interface FieldState {
         value: Key | Key[] | null;

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

@@ -0,0 +1,244 @@
+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/{src → dist}/components/inputs/Selection/shared/select.types.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { ControlProps } from '../../shared/form.types';
 export interface SelectItem<TKey extends Key = Key> {
     id: TKey;
     label: string;

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

@@ -1,6 +1,6 @@
 import { Key } from 'react-aria-components';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { ExtendedSelectItem, SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
+import { SelectBaseProps } from './SelectBase';
+import { ExtendedSelectItem, SelectItem } from './select.types';
 export declare const SelectAllItemId = "all-item-id";
 export declare const NewItemId = "new-item-id";
 export declare const LoadingItemId = "loading-item-id";

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

@@ -0,0 +1,94 @@
+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/{src → dist}/components/inputs/Slider/Slider.d.ts

@@ -1,8 +1,8 @@
 import { Ref } from 'react';
 import { SliderProps as AriaSliderProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { FormFieldProps } from '../FormField/FormField';
+import { ControlProps } from '../shared/form.types';
 type SliderValue<IsRange extends boolean = false> = IsRange extends false ? number : number[];
 interface SliderBaseProps<IsRange extends boolean = false> extends FormFieldProps, Omit<AriaSliderProps, "value" | "defaultValue" | "onChange" | "className"> {
     ref?: Ref<HTMLDivElement>;

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

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

package/{src → dist}/components/inputs/TextEditor/TextEditor.d.ts

@@ -1,8 +1,8 @@
 import { JSONContent } from '@tiptap/react';
 import { Ref } from 'react';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { FormFieldProps } from '../FormField/FormField';
+import { ControlProps } from '../shared/form.types';
 export interface TextEditorValue {
     html?: string | null;
     json?: JSONContent | null;