@povio/ui 0.0.4 → 0.0.6

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/dist/components/inputs/Selection/shared/select.context.d.ts

@@ -0,0 +1,30 @@
+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';
+export declare namespace SelectContext {
+    interface FieldState {
+        value: Key | Key[] | null;
+        inputValue: string;
+        searchValue: string;
+    }
+    export type Type = {
+        fieldState: FieldState;
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        isDebouncing: boolean;
+        onChange: (val: Key | Key[]) => void;
+        onClear: () => void;
+        onSelectAll: () => void;
+        onRemove: (val: Key) => void;
+        listItems: ExtendedSelectItem[];
+        selectableListItems: SelectItem[];
+        selectedItems: SelectItem[];
+        selectedIds: Key[];
+        isMultiple: boolean;
+    } & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
+    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export const useSelect: () => Type;
+    export {};
+}

package/{src/components/inputs/Selection/shared/select.context.tsx → dist/components/inputs/Selection/shared/select.context.js}

@@ -1,64 +1,15 @@
-import { type PropsWithChildren, createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { Key } from "react-aria-components";
-
-import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
-import type {
-  ExtendedSelectItem,
-  GroupedSelectProps,
-  SelectItem,
-} from "#ui/components/inputs/Selection/shared/select.types";
-import { NewItemId, useSelectItems } from "#ui/components/inputs/Selection/shared/useSelectItems";
-import { useDebounceCallback } from "#ui/hooks/useDebounceCallback";
-
-export namespace SelectContext {
-  interface FieldState {
-    value: Key | Key[] | null;
-    inputValue: string;
-    searchValue: string;
-  }
-
-  export type Type = {
-    fieldState: FieldState;
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    isDebouncing: boolean;
-    onChange: (val: Key | Key[]) => void;
-    onClear: () => void;
-    onSelectAll: () => void;
-    onRemove: (val: Key) => void;
-    listItems: ExtendedSelectItem[];
-    selectableListItems: SelectItem[];
-    selectedItems: SelectItem[];
-    selectedIds: Key[];
-    isMultiple: boolean;
-  } & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
-
-  const Context = createContext<Type>({} as never);
-
-  const defaultMapInitialToSelectItem = (item: { id: Key; label?: string; name?: string }) =>
-    ({
-      id: item.id,
-      label: item.label ?? item.name ?? "",
-    }) as SelectItem;
-
-  export type ProviderProps = GroupedSelectProps &
-    Pick<
-      SelectBaseProps,
-      | "items"
-      | "onInputChange"
-      | "onSearchChange"
-      | "showSelectAllOption"
-      | "showNewItemOption"
-      | "newItemMinLength"
-      | "onNewItemOption"
-      | "isLoading"
-      | "hasLoadMore"
-      | "mapInitialToSelectItem"
-      | "isSearchable"
-      | "isClientSearchDisabled"
-    >;
-
-  export const Provider = ({
+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,
@@ -72,9 +23,8 @@ export namespace SelectContext {
     children,
     mapInitialToSelectItem = defaultMapInitialToSelectItem,
     ...props
-  }: PropsWithChildren<ProviderProps>) => {
+  }) => {
     const isMultiple = props.selectionMode === "multiple";
-
     const initialSelectedItems = useMemo(() => {
       if (!props.initialSelection) {
         return null;
@@ -84,24 +34,21 @@ export namespace SelectContext {
       }
       return mapInitialToSelectItem(props.initialSelection);
     }, [props.initialSelection, mapInitialToSelectItem]);
-
     const [isOpen, setIsOpen] = useState(false);
-    const [fieldState, setFieldState] = useState<FieldState>({
+    const [fieldState, setFieldState] = useState({
       value: props.value ?? (isMultiple ? [] : null),
       inputValue: "",
-      searchValue: "",
+      searchValue: ""
     });
     const { callback: onSearchChangeDebounced, isDebouncing } = useDebounceCallback(onSearchChange);
     const [showAll, setShowAll] = useState(false);
-    const [cachedItems, setCachedItems] = useState<SelectItem[]>(items);
+    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,
@@ -114,49 +61,40 @@ export namespace SelectContext {
       newItemMinLength,
       isLoading,
       hasLoadMore,
-      isClientSearchDisabled,
+      isClientSearchDisabled
     });
-
     const selectedItems = useMemo(
-      () =>
-        allItems.filter(({ id }) =>
-          Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value,
-        ),
-      [allItems, fieldState.value],
+      () => 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(
-      (value: Key | null) => allItems.find((item) => item && item.id === value) ?? null,
-      [allItems],
+      (value2) => allItems.find((item) => item && item.id === value2) ?? null,
+      [allItems]
     );
-
     const updateValue = useCallback(
-      (value: Key[] | Key | null) => {
-        if (Array.isArray(value)) {
-          valueRef.current = value.map((id) => getItem(id)).filter((item): item is SelectItem => item !== null);
+      (value2) => {
+        if (Array.isArray(value2)) {
+          valueRef.current = value2.map((id) => getItem(id)).filter((item) => item !== null);
         } else {
-          valueRef.current = getItem(value);
+          valueRef.current = getItem(value2);
         }
       },
-      [getItem],
+      [getItem]
     );
-
-    const getValueIds = () =>
-      Array.isArray(valueRef.current) ? valueRef.current.map(({ id }) => id) : (valueRef.current?.id ?? null);
-
+    const getValueIds = () => Array.isArray(valueRef.current) ? valueRef.current.map(({ id }) => id) : valueRef.current?.id ?? null;
     const emitStateChanges = useCallback(
-      (changes: FieldState, skipSelectionChange?: boolean) => {
+      (changes, skipSelectionChange) => {
         const valueChanged = JSON.stringify(changes.value) !== JSON.stringify(getValueIds());
         if (valueChanged) {
           updateValue(changes.value);
-
           if (!skipSelectionChange) {
             if (isMultiple) {
-              props.onChange?.(changes.value as Key[]);
+              props.onChange?.(changes.value);
             } else {
-              props.onChange?.(changes.value as Key);
+              props.onChange?.(changes.value);
             }
           }
         }
@@ -167,14 +105,13 @@ export namespace SelectContext {
           onSearchChangeDebounced?.(changes.searchValue);
         }
       },
-      [fieldState, isMultiple, props, onInputChange, onSearchChangeDebounced, updateValue],
+      [fieldState, isMultiple, props, onInputChange, onSearchChangeDebounced, updateValue]
     );
-
-    const syncFieldState = (value: Key | Key[] | null) => {
+    const syncFieldState = (value2) => {
       const newFieldState = {
-        value,
-        inputValue: isMultiple || Array.isArray(value) ? fieldState.inputValue : (getItem(value)?.label ?? ""),
-        searchValue: "",
+        value: value2,
+        inputValue: isMultiple || Array.isArray(value2) ? fieldState.inputValue : getItem(value2)?.label ?? "",
+        searchValue: ""
       };
       setFieldState(newFieldState);
       emitStateChanges(newFieldState, true);
@@ -182,30 +119,25 @@ export namespace SelectContext {
         setShowAll(true);
       }
     };
-
     useEffect(() => {
-      const value = props.value ?? null;
-      if (JSON.stringify(value) !== JSON.stringify(fieldState.value)) {
-        syncFieldState(value);
+      const value2 = props.value ?? null;
+      if (JSON.stringify(value2) !== JSON.stringify(fieldState.value)) {
+        syncFieldState(value2);
       } else {
-        updateValue(value);
+        updateValue(value2);
       }
-      // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [props.value]);
-
     useEffect(() => {
-      if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value as Key)?.label) {
+      if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) {
         syncFieldState(fieldState.value);
       }
-      // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [allListItems]);
-
     const handleInputChange = useCallback(
-      (inputValue: string) => {
+      (inputValue) => {
         const newFieldState = {
           value: isMultiple || inputValue !== "" ? fieldState.value : null,
           inputValue,
-          searchValue: inputValue,
+          searchValue: inputValue
         };
         setFieldState(newFieldState);
         emitStateChanges(newFieldState);
@@ -214,18 +146,17 @@ export namespace SelectContext {
           setIsOpen(true);
         }
       },
-      [emitStateChanges, fieldState.value, isMultiple],
+      [emitStateChanges, fieldState.value, isMultiple]
     );
-
     const onChange = useCallback(
-      (value: Key | Key[] | null) => {
-        if (value === NewItemId) {
+      (value2) => {
+        if (value2 === NewItemId) {
           onNewItemOption?.(fieldState.inputValue);
         } else {
           const newFieldState = {
-            value,
-            inputValue: isMultiple || Array.isArray(value) ? "" : (getItem(value)?.label ?? ""),
-            searchValue: "",
+            value: value2,
+            inputValue: isMultiple || Array.isArray(value2) ? "" : getItem(value2)?.label ?? "",
+            searchValue: ""
           };
           setFieldState(newFieldState);
           emitStateChanges(newFieldState);
@@ -235,40 +166,35 @@ export namespace SelectContext {
           setShowAll(true);
         }
       },
-      [emitStateChanges, onNewItemOption, fieldState.inputValue, getItem, isMultiple],
+      [emitStateChanges, onNewItemOption, fieldState.inputValue, getItem, isMultiple]
     );
-
     const onClear = useCallback(() => {
-      if (!valueRef.current || (Array.isArray(valueRef.current) && valueRef.current.length === 0)) {
+      if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
         setFieldState((prev) => ({
           ...prev,
-          inputValue: "",
+          inputValue: ""
         }));
         return;
       }
-
       if (isMultiple) {
         onChange([]);
       } else {
         onChange(null);
       }
     }, [isMultiple, onChange]);
-
     const onSelectAll = useCallback(() => {
       onChange(selectableListItems.map(({ id }) => id));
     }, [selectableListItems, onChange]);
-
     const onRemove = useCallback(
-      (value: Key) => {
+      (value2) => {
         if (isMultiple && Array.isArray(fieldState.value)) {
-          onChange(fieldState.value.filter((id) => id !== value));
+          onChange(fieldState.value.filter((id) => id !== value2));
         }
       },
-      [isMultiple, fieldState.value, onChange],
+      [isMultiple, fieldState.value, onChange]
     );
-
     const value = useMemo(
-      (): Type => ({
+      () => ({
         fieldState,
         isOpen,
         setIsOpen,
@@ -284,7 +210,7 @@ export namespace SelectContext {
         selectedIds,
         isMultiple,
         isLoading,
-        hasLoadMore,
+        hasLoadMore
       }),
       [
         fieldState,
@@ -302,15 +228,16 @@ export namespace SelectContext {
         selectedItems,
         isMultiple,
         isLoading,
-        hasLoadMore,
-      ],
+        hasLoadMore
+      ]
     );
-
-    return <Context.Provider value={value}>{children}</Context.Provider>;
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
   };
-
-  export const useSelect = () => {
+  SelectContext2.useSelect = () => {
     const select = use(Context);
     return select;
   };
-}
+})(SelectContext || (SelectContext = {}));
+export {
+  SelectContext
+};

package/dist/components/inputs/Selection/shared/select.types.d.ts

@@ -0,0 +1,55 @@
+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';
+export interface SelectItem<TKey extends Key = Key> {
+    id: TKey;
+    label: string;
+    content?: string | ReactElement;
+    isDisabled?: boolean;
+}
+export interface ExtendedSelectItem<TKey extends Key = Key> extends SelectItem<TKey> {
+    isNewItem?: boolean;
+    isSelectAllItem?: boolean;
+    isLoadingItem?: boolean;
+}
+export interface DefaultInitialSelectItem<TKey extends Key = Key> {
+    id: TKey;
+    label?: string;
+    name?: string;
+}
+export interface SingleSelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> {
+    selectionMode?: "single";
+    value?: TKey | undefined | null;
+    onChange?: (value: TKey | null) => void;
+    showSelectionBar?: never;
+    showSelectAllOption?: never;
+    initialSelection?: TInitialSelectItem | null;
+    showSelectionContent?: boolean;
+}
+export interface MultiSelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> {
+    selectionMode: "multiple";
+    value?: TKey[];
+    onChange?: (value: TKey[]) => void;
+    showSelectionBar?: boolean;
+    showSelectAllOption?: boolean;
+    initialSelection?: TInitialSelectItem[] | null;
+    showSelectionContent?: never;
+}
+export type GroupedSelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = MultiSelectProps<TKey, TInitialSelectItem> | SingleSelectProps<TKey, TInitialSelectItem>;
+export type GroupedSelectControlProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = ({
+    selectionMode: MultiSelectProps["selectionMode"];
+} & ControlProps<MultiSelectProps<TKey, TInitialSelectItem>, TFieldValues>) | ({
+    selectionMode?: SingleSelectProps["selectionMode"];
+} & ControlProps<SingleSelectProps<TKey, TInitialSelectItem>, TFieldValues>);
+export interface SelectNewItemProps {
+    showNewItemOption?: boolean;
+    newItemMinLength?: number;
+    onNewItemOption?: (value: string) => void;
+    newItemRender?: (label: string) => ReactElement;
+}
+export interface SelectAsyncProps {
+    isLoading?: boolean;
+    hasLoadMore?: boolean;
+    onLoadMore?: () => void;
+}

package/dist/components/inputs/Selection/shared/useSelectItems.d.ts

@@ -0,0 +1,23 @@
+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';
+export declare const SelectAllItemId = "all-item-id";
+export declare const NewItemId = "new-item-id";
+export declare const LoadingItemId = "loading-item-id";
+export declare const ReservedItemIds: string[];
+interface UseSelectItemsProps extends Pick<SelectBaseProps, "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "isLoading" | "hasLoadMore" | "isClientSearchDisabled"> {
+    initialSelectedItems?: SelectItem[] | SelectItem | null;
+    selectedItems?: SelectItem[] | SelectItem | null;
+    cachedItems: SelectItem[];
+    inputValue: string;
+    showAll: boolean;
+    isMultiple: boolean;
+}
+export declare function useSelectItems({ initialSelectedItems, selectedItems, cachedItems, inputValue, showAll, isMultiple, showSelectAllOption, showNewItemOption, newItemMinLength, isLoading, hasLoadMore, isClientSearchDisabled, }: UseSelectItemsProps): {
+    allItems: SelectItem<Key>[];
+    allListItems: ExtendedSelectItem<Key>[];
+    filteredListItems: ExtendedSelectItem<Key>[];
+    listItems: ExtendedSelectItem<Key>[];
+    selectableListItems: ExtendedSelectItem<Key>[];
+};
+export {};