@koobiq/react-components 0.23.0 → 0.25.0

package/dist/components/SelectNext/Select.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
+import { CollectionBuilder, Collection, useSelectState, removeDataAttributes, useSlottedContext, FormContext, useSelect, FieldErrorContext } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./Select.module.css.js";
+import { SelectList } from "./components/SelectList/SelectList.js";
+import { TagGroup } from "./components/TagGroup/TagGroup.js";
+import { SelectOption } from "./components/SelectOption/SelectOption.js";
+import { SelectSection } from "./components/SelectSection/SelectSection.js";
+import { useForm } from "../Form/FormContext.js";
+import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
+import { FormField } from "../FormField/FormField.js";
+import { Divider } from "../Divider/Divider.js";
+import { List } from "../List/List.js";
+function SelectInner({
+  state: inState,
+  props,
+  listBoxRef
+}) {
+  const {
+    selectedTagsOverflow = "responsive",
+    renderValue: renderValueProp,
+    "data-testid": testId,
+    defaultInputValue,
+    labelPlacement,
+    onInputChange,
+    selectionMode,
+    defaultFilter,
+    isLabelHidden,
+    isSearchable,
+    errorMessage,
+    placeholder,
+    loadingText,
+    isClearable,
+    noItemsText,
+    inputValue,
+    labelAlign,
+    startAddon,
+    isRequired,
+    onLoadMore,
+    isDisabled,
+    fullWidth,
+    className,
+    isLoading,
+    slotProps,
+    endAddon,
+    caption,
+    onClear,
+    style,
+    label
+  } = props;
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
+  const clearButtonIsHidden = isDisabled || !inState.selectedItems.length;
+  const handleClear = useCallback(() => {
+    inState.selectionManager.setSelectedKeys(/* @__PURE__ */ new Set());
+    onClear?.();
+  }, [onClear, inState]);
+  const {
+    menuProps,
+    valueProps,
+    triggerProps,
+    descriptionProps,
+    errorMessageProps,
+    labelProps: labelPropsAria,
+    ...validation
+  } = useSelect(
+    removeDataAttributes({
+      ...props,
+      isDisabled,
+      selectionMode,
+      validationBehavior,
+      allowsEmptyCollection: true
+    }),
+    inState,
+    listBoxRef
+  );
+  const { isInvalid } = validation;
+  const { ref: containerRef, width } = useElementSize();
+  const rootProps = mergeProps({
+    "data-testid": testId,
+    "data-invalid": isInvalid || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-required": isRequired || void 0,
+    className,
+    fullWidth,
+    labelPlacement,
+    labelAlign,
+    style
+  });
+  const listProps = mergeProps(
+    {
+      isLoading,
+      inputValue,
+      onLoadMore,
+      noItemsText,
+      loadingText,
+      isSearchable,
+      defaultFilter,
+      state: inState,
+      onInputChange,
+      className: s.list,
+      defaultInputValue
+    },
+    slotProps?.list,
+    menuProps
+  );
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    labelPropsAria,
+    slotProps?.label
+  );
+  const clearButtonProps = mergeProps(
+    {
+      isClearable,
+      onPress: handleClear,
+      className: s.clearButton,
+      isHidden: clearButtonIsHidden
+    },
+    slotProps?.clearButton
+  );
+  const { slotProps: groupSlotProps, ...otherGroup } = slotProps?.group || {};
+  const groupProps = mergeProps(
+    {
+      slotProps: mergeProps(
+        {
+          endAddon: { className: s.addon },
+          startAddon: { className: s.addon }
+        },
+        groupSlotProps
+      ),
+      startAddon,
+      onMouseDown: (e) => {
+        if (e.currentTarget !== e.target || isDisabled) return;
+        e.preventDefault();
+        listBoxRef?.current?.focus();
+        inState.open();
+      },
+      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        endAddon,
+        /* @__PURE__ */ jsx(FormFieldClearButton, { ...clearButtonProps }),
+        /* @__PURE__ */ jsx("span", { className: s.chevron, children: /* @__PURE__ */ jsx(IconChevronDownS16, {}) })
+      ] }),
+      isInvalid,
+      isDisabled,
+      ref: containerRef
+    },
+    otherGroup
+  );
+  const controlProps = mergeProps(
+    {
+      ref: listBoxRef,
+      placeholder
+    },
+    valueProps,
+    triggerProps,
+    slotProps?.control
+  );
+  const popoverProps = mergeProps(
+    {
+      offset: 4,
+      state: inState,
+      hideArrow: true,
+      type: "listbox",
+      maxBlockSize: 256,
+      className: s.popover,
+      anchorRef: containerRef,
+      placement: "bottom start",
+      size: Math.max(width, 200)
+    },
+    slotProps?.popover
+  );
+  const captionProps = mergeProps(
+    { children: caption },
+    descriptionProps,
+    slotProps?.caption
+  );
+  const errorProps = mergeProps(
+    { children: errorMessage },
+    errorMessageProps,
+    slotProps?.errorMessage
+  );
+  const renderDefaultValue = (state, states) => {
+    if (!state.selectedItems?.length) return null;
+    if (selectionMode === "multiple")
+      return /* @__PURE__ */ jsx(
+        TagGroup,
+        {
+          state,
+          states,
+          selectedTagsOverflow
+        }
+      );
+    return state.selectedItems[0].textValue;
+  };
+  const renderValue = renderValueProp || renderDefaultValue;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+      /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+        /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(inState, {
+          isInvalid,
+          isDisabled: props.isDisabled,
+          isRequired: props.isRequired
+        }) }) }),
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
+  ] });
+}
+function StandaloneSelect({
+  props: inProps,
+  listBoxRef,
+  collection
+}) {
+  const props = { ...inProps, collection, children: null, items: null };
+  const { isDisabled: formIsDisabled } = useForm();
+  const isDisabled = inProps?.isDisabled ?? formIsDisabled;
+  const state = useSelectState(
+    removeDataAttributes({
+      ...props,
+      isDisabled
+    })
+  );
+  return /* @__PURE__ */ jsx(
+    SelectInner,
+    {
+      state,
+      listBoxRef,
+      props: { ...props, isDisabled }
+    }
+  );
+}
+function SelectRender(props, ref) {
+  const listBoxRef = useDOMRef(ref);
+  return /* @__PURE__ */ jsx(CollectionBuilder, { content: /* @__PURE__ */ jsx(Collection, { ...props }), children: (collection) => /* @__PURE__ */ jsx(
+    StandaloneSelect,
+    {
+      props,
+      collection,
+      listBoxRef
+    }
+  ) });
+}
+const SelectComponent = forwardRef(SelectRender);
+const SelectNext = SelectComponent;
+SelectNext.Item = SelectOption;
+SelectNext.Section = SelectSection;
+SelectNext.Divider = Divider;
+SelectNext.ItemText = List.ItemText;
+export {
+  SelectNext
+};

package/dist/components/SelectNext/Select.module.css.js

@@ -0,0 +1,23 @@
+const addon = "kbq-select-addon-1077d8";
+const chevron = "kbq-select-chevron-5918a1";
+const body = "kbq-select-body-698617";
+const list = "kbq-select-list-51ca7a";
+const popover = "kbq-select-popover-756d4e";
+const clearButton = "kbq-select-clearButton-8498d2";
+const s = {
+  addon,
+  chevron,
+  body,
+  list,
+  popover,
+  clearButton
+};
+export {
+  addon,
+  body,
+  chevron,
+  clearButton,
+  s as default,
+  list,
+  popover
+};

package/dist/components/SelectNext/SelectContext.d.ts

@@ -0,0 +1,2 @@
+import type { ListState } from '@koobiq/react-primitives';
+export declare const SelectContext: import("react").Context<ListState<object> | null>;

package/dist/components/SelectNext/SelectContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const SelectContext = createContext(null);
+export {
+  SelectContext
+};

package/dist/components/SelectNext/components/SelectList/SelectList.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { SelectState, AriaListBoxProps } from '@koobiq/react-primitives';
+import type { SelectionMode } from '@react-types/select';
+import { type DividerProps } from '../../../Divider';
+import { type SearchInputProps } from '../../../SearchInput';
+export type SelectListProps<T extends object, M extends SelectionMode = 'single'> = {
+    state: SelectState<T, M>;
+    /** The filter function used to determine if a option should be included in the Select list. */
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /** The value of the Select search input (controlled). */
+    inputValue?: string;
+    /** The default value of the Select search input (uncontrolled). */
+    defaultInputValue?: string;
+    /** Handler that is called when the Select search input value changes. */
+    onInputChange?: (value: string) => void;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The load more spinner to render when loading additional items. */
+    isLoading?: boolean;
+    /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
+    onLoadMore?: () => void;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
+    /** Content to display when items are loading. */
+    loadingText?: ReactNode;
+    /** Enables search input for filtering items in the list. */
+    isSearchable?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        divider?: DividerProps;
+        root?: ComponentPropsWithRef<'div'>;
+        'search-input'?: SearchInputProps;
+    };
+} & Omit<AriaListBoxProps<T>, 'children'>;
+export declare function SelectList<T extends object, M extends SelectionMode = 'single'>(props: SelectListProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectNext/components/SelectList/SelectList.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useLocalizedStringFormatter, useFilter, useControlledState, useMultiRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useAutocompleteState, useAutocomplete, UNSTABLE_useFilteredListState, useListBox } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.js";
+import { SelectContext } from "../../SelectContext.js";
+import { CollectionRoot } from "../../utils.js";
+import s from "./SelectList.module.css.js";
+import { SearchInput } from "../../../SearchInput/SearchInput.js";
+import { Divider } from "../../../Divider/Divider.js";
+import { ListEmptyState } from "../../../List/components/ListEmptyState/ListEmptyState.js";
+import { ListLoadingState } from "../../../List/components/ListLoadingState/ListLoadingState.js";
+const { list } = utilClasses;
+function SelectList(props) {
+  const {
+    style,
+    isLoading,
+    className,
+    onLoadMore,
+    slotProps,
+    inputValue,
+    isSearchable,
+    onInputChange,
+    defaultFilter,
+    state: inState,
+    defaultInputValue,
+    noItemsText: noItemsTextProp,
+    loadingText: loadingTextProp
+  } = props;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const domRef = useRef(null);
+  const inputRef = useRef(null);
+  const collectionRef = useRef(null);
+  const { contains } = useFilter({ sensitivity: "base" });
+  const [filterText, setFilterText] = useControlledState(
+    inputValue,
+    defaultInputValue ?? "",
+    onInputChange
+  );
+  const noItemsText = (() => {
+    if (noItemsTextProp !== void 0) return noItemsTextProp;
+    const hasQuery = isSearchable && filterText.trim().length > 0;
+    return hasQuery ? t.format("nothing found") : t.format("empty items");
+  })();
+  const autocompleteState = useAutocompleteState({
+    inputValue: isSearchable ? filterText : "",
+    onInputChange: isSearchable ? setFilterText : () => {
+    }
+  });
+  const {
+    inputProps,
+    collectionProps,
+    filter: filterFn,
+    collectionRef: mergedCollectionRef
+  } = useAutocomplete(
+    {
+      inputRef,
+      collectionRef,
+      filter: defaultFilter || contains
+    },
+    autocompleteState
+  );
+  const listRef = useMultiRef([mergedCollectionRef, domRef]);
+  const state = UNSTABLE_useFilteredListState(
+    inState,
+    isSearchable ? filterFn : null
+  );
+  const isEmpty = state.collection.size === 0;
+  const { listBoxProps } = useListBox(
+    mergeProps(props, isSearchable ? collectionProps : null),
+    state,
+    domRef
+  );
+  const rootProps = mergeProps({ className: s.base }, slotProps?.root);
+  const listProps = mergeProps(
+    {
+      style,
+      ref: listRef,
+      "data-padded": true,
+      className: clsx(list, className)
+    },
+    listBoxProps
+  );
+  const searchInputProps = mergeProps(
+    {
+      autoFocus: true,
+      fullWidth: true,
+      isLabelHidden: true,
+      className: s.search,
+      placeholder: t.format("search"),
+      "aria-label": t.format("search"),
+      variant: "transparent"
+    },
+    slotProps?.["search-input"],
+    inputProps
+  );
+  const loadingText = loadingTextProp ?? t.format("loading");
+  const { collection } = state;
+  return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+    isSearchable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SearchInput, { ref: inputRef, ...searchInputProps }),
+      /* @__PURE__ */ jsx(Divider, { disablePaddings: true, ...slotProps?.divider })
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { ...listProps, children: [
+      /* @__PURE__ */ jsx(SelectContext.Provider, { value: state, children: /* @__PURE__ */ jsx(CollectionRoot, { collection }) }),
+      /* @__PURE__ */ jsx(
+        ListEmptyState,
+        {
+          isEmpty,
+          isLoading,
+          noItemsText
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ListLoadingState,
+        {
+          root: domRef.current,
+          isLoading,
+          onLoadMore,
+          loadingText,
+          observeDeps: [state.collection]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  SelectList
+};

package/dist/components/SelectNext/components/SelectList/SelectList.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-selectlist-68b1db";
+const search = "kbq-selectlist-search-800542";
+const s = {
+  base,
+  search
+};
+export {
+  base,
+  s as default,
+  search
+};

package/dist/components/SelectNext/components/SelectList/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectList';

package/dist/components/SelectNext/components/SelectOption/SelectOption.d.ts

@@ -0,0 +1,37 @@
+import type { Key, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type SelectOptionProps<T = object> = ExtendableComponentPropsWithRef<{
+    className?: string;
+    /** The unique id of the item. */
+    id?: Key;
+    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
+    value?: T;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string;
+    /** An accessibility label for this item. */
+    'aria-label'?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Handler that is called when a user performs an action on the item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: () => void;
+}, 'a'>;
+export declare const SelectOption: <T extends object>(props: Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "value" | "className" | "id" | "aria-label" | "isDisabled" | "textValue" | "onAction"> & {
+    className?: string;
+    /** The unique id of the item. */
+    id?: Key;
+    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
+    value?: object | undefined;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string;
+    /** An accessibility label for this item. */
+    'aria-label'?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Handler that is called when a user performs an action on the item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: () => void;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/SelectNext/components/SelectOption/SelectOption.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useContext } from "react";
+import { useMultiRef, useHover, usePress, filterDOMProps, clsx, mergeProps } from "@koobiq/react-core";
+import { createLeafComponent, ItemNode, useOption } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { SelectContext } from "../../SelectContext.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+const textVariant = utilClasses.typography;
+const { listItem } = utilClasses;
+const SelectOption = createLeafComponent(ItemNode, function SelectItem(props, forwardedRef, item) {
+  const { href, className, style } = props;
+  const domRef = useRef(null);
+  const ref = useMultiRef([forwardedRef, domRef]);
+  const state = useContext(SelectContext);
+  const { optionProps, isSelected, isDisabled, isFocusVisible } = useOption(
+    { key: item.key },
+    state,
+    domRef
+  );
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { isPressed, pressProps } = usePress({ isDisabled });
+  const Tag = href ? "a" : "li";
+  const DOMProps = filterDOMProps(props, { global: true });
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      style,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      ...mergeProps(optionProps, hoverProps, pressProps),
+      className: clsx(listItem, textVariant["text-normal"], className),
+      children: [
+        state.selectionManager.selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { isDisabled, isSelected, isReadOnly: true }),
+        item.rendered
+      ]
+    }
+  );
+});
+export {
+  SelectOption
+};

package/dist/components/SelectNext/components/SelectOption/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectOption';

package/dist/components/SelectNext/components/SelectSection/SelectSection.d.ts

@@ -0,0 +1,9 @@
+import type { Key, SectionProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type SelectSectionProps<T> = ExtendableComponentPropsWithRef<SectionProps<T> & {
+    /** The unique id of the item. */
+    id?: Key;
+}, 'section'>;
+export declare const SelectSection: <T extends object>(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "id" | keyof SectionProps<T_1>> & SectionProps<T> & {
+    /** The unique id of the item. */
+    id?: Key;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/SelectNext/components/SelectSection/SelectSection.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { filterDOMProps, mergeProps } from "@koobiq/react-core";
+import { createBranchComponent, SectionNode, useListBoxSection } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { SelectContext } from "../../SelectContext.js";
+import { CollectionBranch } from "../../utils.js";
+import { Typography } from "../../../Typography/Typography.js";
+const { listHeading } = utilClasses;
+function SelectSectionInner(props, ref, section) {
+  const state = useContext(SelectContext);
+  const { className, style } = props;
+  const { headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": props["aria-label"] ?? void 0
+  });
+  const DOMProps = filterDOMProps(props, { global: true });
+  delete DOMProps.id;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...mergeProps(DOMProps, groupProps),
+      className,
+      style,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            as: "span",
+            display: "block",
+            variant: "caps-compact-strong",
+            color: "contrast-secondary",
+            className: listHeading,
+            ...headingProps,
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsx(CollectionBranch, { collection: state.collection, parent: section })
+      ]
+    }
+  );
+}
+const SelectSection = createBranchComponent(
+  SectionNode,
+  SelectSectionInner
+);
+export {
+  SelectSection
+};

package/dist/components/SelectNext/components/SelectSection/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectSection';

package/dist/components/SelectNext/components/Tag/Tag.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TagGroupPropVariant } from '../../../TagGroup';
+type TagProps = ExtendableComponentPropsWithRef<{
+    /**
+     * The variant to use.
+     * @default 'theme-fade'
+     */
+    variant?: TagGroupPropVariant;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    icon?: ReactNode;
+    isDisabled?: boolean;
+    onRemove?: () => void;
+}, 'div'>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};