@koobiq/react-primitives 0.3.0 → 0.4.0

package/dist/behaviors/index.d.ts

@@ -6,3 +6,6 @@ export * from './useRadio';
 export * from './useRadioGroup';
 export * from './useRadioGroupState';
 export * from './useNumberField';
+export * from './useMultiSelect';
+export * from './useMultiSelectState';
+export * from './useMultiSelectListState';

package/dist/behaviors/useMultiSelect.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, RefObject } from 'react';
+import type { ValidationResult } from '@koobiq/react-core';
+import type { AriaListBoxOptions } from '@react-aria/listbox';
+import type { AriaSelectProps, AriaButtonProps } from '../index';
+import type { MultiSelectProps as MultiSelectStateProps, MultiSelectState } from './useMultiSelectState';
+type MultiSelectProps<T> = Omit<AriaSelectProps<T>, 'onSelectionChange'> & {
+    disallowEmptySelection?: boolean;
+    onSelectionChange?: MultiSelectStateProps<T>['onSelectionChange'];
+};
+interface MultiSelectAria<T> extends ValidationResult {
+    /** Props for the label element. */
+    labelProps: HTMLAttributes<HTMLElement>;
+    /** Props for the popup trigger element. */
+    triggerProps: AriaButtonProps;
+    /** Props for the element representing the selected value. */
+    valueProps: HTMLAttributes<HTMLElement>;
+    /** Props for the popup. */
+    menuProps: AriaListBoxOptions<T>;
+    /** Props for the select's description element, if any. */
+    descriptionProps: HTMLAttributes<HTMLElement>;
+    /** Props for the select's error message element, if any. */
+    errorMessageProps: HTMLAttributes<HTMLElement>;
+}
+export declare function useMultiSelect<T>(props: MultiSelectProps<T>, state: MultiSelectState<T>, ref: RefObject<HTMLElement>): MultiSelectAria<T>;
+export {};

package/dist/behaviors/useMultiSelect.js

@@ -0,0 +1,149 @@
+import { useMemo } from "react";
+import { useCollator, filterDOMProps, mergeProps, useId, chain, setInteractionModality } from "@koobiq/react-core";
+import { useField } from "@react-aria/label";
+import { useMenuTrigger } from "@react-aria/menu";
+import { ListKeyboardDelegate, useTypeSelect } from "@react-aria/selection";
+function useMultiSelect(props, state, ref) {
+  const { disallowEmptySelection, isDisabled } = props;
+  const collator = useCollator({ usage: "search", sensitivity: "base" });
+  const delegate = useMemo(
+    () => new ListKeyboardDelegate(
+      state.collection,
+      state.disabledKeys,
+      null,
+      collator
+    ),
+    [state.collection, state.disabledKeys, collator]
+  );
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    {
+      isDisabled,
+      type: "listbox"
+    },
+    state,
+    ref
+  );
+  const triggerOnKeyDown = (e) => {
+    if (state.selectionMode === "single") {
+      switch (e.key) {
+        case "ArrowLeft": {
+          e.preventDefault();
+          const key = state.selectedKeys.size > 0 ? delegate.getKeyAbove(
+            state.selectedKeys.values().next().value
+          ) : delegate.getFirstKey();
+          if (key) {
+            state.setSelectedKeys([key]);
+          }
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          const key = state.selectedKeys.size > 0 ? delegate.getKeyBelow(
+            state.selectedKeys.values().next().value
+          ) : delegate.getFirstKey();
+          if (key) {
+            state.setSelectedKeys([key]);
+          }
+          break;
+        }
+      }
+    }
+  };
+  const { typeSelectProps } = useTypeSelect({
+    keyboardDelegate: delegate,
+    selectionManager: state.selectionManager,
+    onTypeSelect(key) {
+      state.setSelectedKeys([key]);
+    }
+  });
+  const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  const { labelProps, fieldProps, errorMessageProps, descriptionProps } = useField({
+    ...props,
+    isInvalid,
+    labelElementType: "span",
+    errorMessage: props.errorMessage || validationErrors
+  });
+  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
+  delete typeSelectProps.onKeyDownCapture;
+  const domProps = filterDOMProps(props, { labelable: true });
+  const triggerProps = mergeProps(
+    typeSelectProps,
+    menuTriggerProps,
+    fieldProps
+  );
+  const valueId = useId();
+  return {
+    labelProps: {
+      ...labelProps,
+      onClick: () => {
+        if (!props.isDisabled) {
+          ref.current?.focus();
+          setInteractionModality("keyboard");
+        }
+      }
+    },
+    isInvalid,
+    validationErrors,
+    validationDetails,
+    errorMessageProps,
+    descriptionProps,
+    triggerProps: mergeProps(domProps, {
+      ...triggerProps,
+      onKeyDown: chain(
+        triggerProps.onKeyDown,
+        triggerOnKeyDown,
+        props.onKeyDown
+      ),
+      onKeyUp: props.onKeyUp,
+      "aria-labelledby": [
+        triggerProps["aria-labelledby"],
+        triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null,
+        valueId
+      ].filter(Boolean).join(" "),
+      onFocus(e) {
+        if (state.isFocused) {
+          return;
+        }
+        if (props.onFocus) {
+          props.onFocus(e);
+        }
+        state.setFocused(true);
+      },
+      onBlur(e) {
+        if (state.isOpen) {
+          return;
+        }
+        if (props.onBlur) {
+          props.onBlur(e);
+        }
+        state.setFocused(false);
+      }
+    }),
+    valueProps: {
+      id: valueId
+    },
+    menuProps: {
+      ...menuProps,
+      disallowEmptySelection,
+      autoFocus: state.focusStrategy || true,
+      shouldSelectOnPressUp: true,
+      shouldFocusOnHover: true,
+      onBlur: (e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) {
+          return;
+        }
+        if (props.onBlur) {
+          props.onBlur(e);
+        }
+        state.setFocused(false);
+      },
+      "aria-labelledby": [
+        fieldProps["aria-labelledby"],
+        triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
+      ].filter(Boolean).join(" ")
+    }
+  };
+}
+export {
+  useMultiSelect
+};

package/dist/behaviors/useMultiSelectListState.d.ts

@@ -0,0 +1,16 @@
+import type { Key } from 'react';
+import type { Node, CollectionBase, MultipleSelection } from '@koobiq/react-core';
+import type { ListState } from '@react-stately/list';
+export interface MultiSelectListProps<T> extends CollectionBase<T>, MultipleSelection {
+}
+export interface MultiSelectListState<T> extends ListState<T> {
+    /** The keys for the currently selected items. */
+    selectedKeys: Set<Key>;
+    /** Sets the selected keys. */
+    setSelectedKeys(keys: Iterable<Key>): void;
+    /** The value of the currently selected items. */
+    selectedItems: Node<T>[] | null;
+    /** The type of selection. */
+    selectionMode: MultipleSelection['selectionMode'];
+}
+export declare function useMultiSelectListState<T extends object>(props: MultiSelectListProps<T>): MultiSelectListState<T>;

package/dist/behaviors/useMultiSelectListState.js

@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+import { useListState } from "@react-stately/list";
+function useMultiSelectListState(props) {
+  const {
+    collection,
+    disabledKeys,
+    selectionManager,
+    selectionManager: { setSelectedKeys, selectedKeys, selectionMode }
+  } = useListState(props);
+  const missingKeys = useMemo(() => {
+    if (selectedKeys.size !== 0) {
+      return Array.from(selectedKeys).filter(Boolean).filter((key) => !collection.getItem(key));
+    }
+    return [];
+  }, [selectedKeys, collection]);
+  const selectedItems = selectedKeys.size !== 0 ? Array.from(selectedKeys).map((key) => collection.getItem(key)).filter(Boolean) : null;
+  if (missingKeys.length) {
+    console.warn(
+      `Select: Keys "${missingKeys.join(
+        ", "
+      )}" passed to "selectedKeys" are not present in the collection.`
+    );
+  }
+  return {
+    collection,
+    disabledKeys,
+    selectionManager,
+    selectionMode,
+    selectedKeys,
+    setSelectedKeys: setSelectedKeys.bind(selectionManager),
+    selectedItems
+  };
+}
+export {
+  useMultiSelectListState
+};

package/dist/behaviors/useMultiSelectState.d.ts

@@ -0,0 +1,19 @@
+import type { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from '@koobiq/react-core';
+import type { FormValidationState } from '@react-stately/form';
+import type { MenuTriggerState } from '@react-stately/menu';
+import type { OverlayTriggerProps } from '@react-types/overlays';
+import type { MultiSelectListState } from './useMultiSelectListState';
+export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, 'isReadOnly'>, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
+    /**
+     * Whether the menu should automatically flip direction when space is limited.
+     * @default true
+     */
+    shouldFlip?: boolean;
+}
+export interface MultiSelectState<T> extends MultiSelectListState<T>, MenuTriggerState, FormValidationState {
+    /** Whether the select is currently focused. */
+    isFocused: boolean;
+    /** Sets whether the select is focused. */
+    setFocused(isFocused: boolean): void;
+}
+export declare function useMultiSelectState<T extends object>({ validate, validationBehavior, ...props }: MultiSelectProps<T>): MultiSelectState<T>;

package/dist/behaviors/useMultiSelectState.js

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { useFormValidationState } from "@react-stately/form";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useMultiSelectListState } from "./useMultiSelectListState.js";
+function useMultiSelectState({
+  validate,
+  validationBehavior,
+  ...props
+}) {
+  const [isFocused, setFocused] = useState(false);
+  const triggerState = useMenuTriggerState(props);
+  const listState = useMultiSelectListState({
+    ...props,
+    onSelectionChange: (keys) => {
+      if (props.onSelectionChange != null) {
+        if (keys === "all") {
+          props.onSelectionChange(new Set(listState.collection.getKeys()));
+        } else {
+          props.onSelectionChange(keys);
+        }
+      }
+      if (props.selectionMode === "single") {
+        triggerState.close();
+      }
+    }
+  });
+  const validationState = useFormValidationState({
+    ...props,
+    validationBehavior,
+    validate: (value) => {
+      if (!validate) return;
+      const keys = Array.from(value);
+      return validate(props.selectionMode === "single" ? keys[0] : keys);
+    },
+    value: listState.selectedKeys
+  });
+  return {
+    ...validationState,
+    ...listState,
+    ...triggerState,
+    close() {
+      triggerState.close();
+    },
+    open() {
+      if (listState.collection.size !== 0) {
+        triggerState.open();
+      }
+    },
+    toggle(focusStrategy) {
+      if (listState.collection.size !== 0) {
+        triggerState.toggle(focusStrategy);
+      }
+    },
+    isFocused,
+    setFocused
+  };
+}
+export {
+  useMultiSelectState
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { useToggleButtonGroup, useToggleButtonGroupItem, type AriaToggleButtonGroupProps, type AriaToggleButtonGroupItemProps, } from '@react-aria/button';
+export { useToggleButtonGroup, useToggleButtonGroupItem, type AriaButtonProps, type AriaToggleButtonGroupProps, type AriaToggleButtonGroupItemProps, } from '@react-aria/button';
 export * from '@react-stately/collections';
 export * from '@react-stately/data';
 export * from '@react-stately/tree';
@@ -7,6 +7,7 @@ export * from '@react-aria/separator';
 export * from '@react-aria/overlays';
 export { useOverlayTriggerState, type OverlayTriggerState, } from '@react-stately/overlays';
 export * from '@react-aria/dialog';
+export * from '@react-aria/label';
 export * from '@react-aria/listbox';
 export * from '@react-stately/list';
 export * from '@react-aria/select';
@@ -26,6 +27,8 @@ export * from '@react-aria/progress';
 export type { CalendarProps, CalendarAria, CalendarGridAria, CalendarCellAria, AriaCalendarProps, AriaCalendarCellProps, AriaCalendarGridProps, } from '@react-aria/calendar';
 export { useCalendar, useCalendarCell, useCalendarGrid, } from '@react-aria/calendar';
 export * from '@react-stately/calendar';
+export * from '@react-stately/form';
+export * from '@react-aria/selection';
 export * from './behaviors';
 export * from './components';
 export * from './utils';

package/dist/index.js

@@ -7,6 +7,7 @@ export * from "@react-aria/separator";
 export * from "@react-aria/overlays";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 export * from "@react-aria/dialog";
+export * from "@react-aria/label";
 export * from "@react-aria/listbox";
 export * from "@react-stately/list";
 export * from "@react-aria/select";
@@ -25,6 +26,8 @@ export * from "@react-stately/table";
 export * from "@react-aria/progress";
 import { useCalendar, useCalendarCell, useCalendarGrid } from "@react-aria/calendar";
 export * from "@react-stately/calendar";
+export * from "@react-stately/form";
+export * from "@react-aria/selection";
 import { Provider, removeDataAttributes, useRenderProps } from "./utils/index.js";
 import { useButton } from "./behaviors/useButton.js";
 import { useCheckbox } from "./behaviors/useCheckbox.js";
@@ -34,6 +37,9 @@ import { useRadio } from "./behaviors/useRadio.js";
 import { useRadioGroup } from "./behaviors/useRadioGroup.js";
 import { useRadioGroupState } from "./behaviors/useRadioGroupState.js";
 import { useNumberField } from "./behaviors/useNumberField.js";
+import { useMultiSelect } from "./behaviors/useMultiSelect.js";
+import { useMultiSelectState } from "./behaviors/useMultiSelectState.js";
+import { useMultiSelectListState } from "./behaviors/useMultiSelectListState.js";
 import { Text } from "./components/Text/Text.js";
 import { TextContext } from "./components/Text/TextContext.js";
 import { Group } from "./components/Group/Group.js";
@@ -87,6 +93,9 @@ export {
   useGroupContext,
   useInputContext,
   useLink,
+  useMultiSelect,
+  useMultiSelectListState,
+  useMultiSelectState,
   useNumberField,
   useOverlayTriggerState,
   useRadio,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -29,6 +29,7 @@
     "@react-aria/checkbox": "^3.14.0",
     "@react-aria/datepicker": "^3.14.5",
     "@react-aria/dialog": "^3.5.19",
+    "@react-aria/label": "^3.7.20",
     "@react-aria/link": "^3.8.3",
     "@react-aria/listbox": "^3.14.2",
     "@react-aria/menu": "^3.18.2",
@@ -37,6 +38,7 @@
     "@react-aria/progress": "^3.4.17",
     "@react-aria/radio": "^3.10.9",
     "@react-aria/select": "^3.15.7",
+    "@react-aria/selection": "^3.25.0",
     "@react-aria/separator": "^3.4.8",
     "@react-aria/switch": "^3.7.5",
     "@react-aria/table": "^3.17.5",
@@ -49,18 +51,19 @@
     "@react-stately/collections": "^3.12.5",
     "@react-stately/data": "^3.13.0",
     "@react-stately/datepicker": "^3.14.2",
+    "@react-stately/form": "^3.2.0",
     "@react-stately/list": "^3.12.0",
     "@react-stately/menu": "^3.9.3",
     "@react-stately/numberfield": "^3.9.7",
     "@react-stately/overlays": "^3.6.17",
     "@react-stately/radio": "^3.10.8",
-    "@react-stately/select": "^3.6.14",
+    "@react-stately/select": "3.7.0",
     "@react-stately/table": "^3.14.3",
     "@react-stately/toggle": "^3.7.0",
     "@react-stately/tooltip": "^3.5.5",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/react-core": "0.3.0",
-    "@koobiq/logger": "0.3.0"
+    "@koobiq/react-core": "0.4.0",
+    "@koobiq/logger": "0.4.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",