@vx-oss/heroui-v2-use-aria-multiselect 2.4.20-alpha.0

package/LICENSE

@@ -0,0 +1,32 @@
+SPDX-License-Identifier: MIT
+
+The MIT License (MIT)
+
+Parameters
+
+Creator / Maintainer    : Vezham Technologies Private Limited
+Original Author         : NextUI Inc
+Licensor                : Vezham Technologies Private Limited
+
+Copyright © 2025, Vezham Technologies Private Limited. All rights reserved.
+Copyright (c) 2020, NextUI Inc.
+
+---
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @vx-oss/heroui-v2-use-aria-multiselect
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @vx-oss/heroui-v2-use-aria-multiselect
+# or
+npm i @vx-oss/heroui-v2-use-aria-multiselect
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/chunk-74XVDT4G.mjs

@@ -0,0 +1,40 @@
+// src/use-multiselect-list-state.ts
+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 (!props.isLoading && 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) => {
+    return 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/chunk-FHVPTEOP.mjs

@@ -0,0 +1,69 @@
+import {
+  useMultiSelectListState
+} from "./chunk-74XVDT4G.mjs";
+
+// src/use-multiselect-state.ts
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useFormValidationState } from "@react-stately/form";
+import { useState } from "react";
+function useMultiSelectState({
+  validate,
+  validationBehavior,
+  ...props
+}) {
+  const [isFocused, setFocused] = useState(false);
+  const [focusStrategy, setFocusStrategy] = useState(null);
+  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);
+    },
+    // @ts-ignore
+    value: listState.selectedKeys
+  });
+  const shouldHideContent = listState.collection.size === 0 && props.hideEmptyContent;
+  return {
+    ...validationState,
+    ...listState,
+    ...triggerState,
+    focusStrategy,
+    close() {
+      triggerState.close();
+    },
+    open(focusStrategy2 = null) {
+      if (shouldHideContent) return;
+      setFocusStrategy(focusStrategy2);
+      triggerState.open();
+    },
+    toggle(focusStrategy2 = null) {
+      if (shouldHideContent) return;
+      setFocusStrategy(focusStrategy2);
+      triggerState.toggle();
+    },
+    isFocused,
+    setFocused
+  };
+}
+
+export {
+  useMultiSelectState
+};

package/dist/chunk-RLX3CPDX.mjs

@@ -0,0 +1,144 @@
+// src/use-multiselect.ts
+import { useCollator } from "@react-aria/i18n";
+import { setInteractionModality } from "@react-aria/interactions";
+import { useField } from "@react-aria/label";
+import { useMenuTrigger } from "@react-aria/menu";
+import { ListKeyboardDelegate, useTypeSelect } from "@react-aria/selection";
+import { chain, filterDOMProps, mergeProps, useId } from "@react-aria/utils";
+import { useMemo } from "react";
+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, descriptionProps, errorMessageProps } = useField({
+    ...props,
+    labelElementType: "span",
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
+  delete typeSelectProps.onKeyDownCapture;
+  menuTriggerProps.onPressStart = (e) => {
+    if (e.pointerType !== "touch" && e.pointerType !== "keyboard" && !isDisabled) {
+      state.toggle(e.pointerType === "virtual" ? "first" : null);
+    }
+  };
+  const domProps = filterDOMProps(props, { labelable: true });
+  const triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);
+  const valueId = useId();
+  return {
+    labelProps: {
+      ...labelProps,
+      onClick: () => {
+        var _a;
+        if (!props.isDisabled) {
+          (_a = ref.current) == null ? void 0 : _a.focus();
+          setInteractionModality("keyboard");
+        }
+      }
+    },
+    triggerProps: mergeProps(domProps, {
+      ...triggerProps,
+      onKeyDown: chain(triggerProps.onKeyDown, triggerOnKeyDown, props.onKeyDown),
+      onKeyUp: props.onKeyUp,
+      "aria-labelledby": [
+        valueId,
+        triggerProps["aria-labelledby"],
+        triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null
+      ].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);
+      },
+      // @ts-ignore
+      onFocus: menuProps == null ? void 0 : menuProps.onFocus,
+      "aria-labelledby": [
+        fieldProps["aria-labelledby"],
+        triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+
+export {
+  useMultiSelect
+};

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+export { MultiSelectAria, MultiSelectProps, useMultiSelect } from './use-multiselect.mjs';
+export { MultiSelectListProps, MultiSelectListState, useMultiSelectListState } from './use-multiselect-list-state.mjs';
+export { MultiSelectState, useMultiSelectState } from './use-multiselect-state.mjs';
+import '@react-types/button';
+import '@react-aria/listbox';
+import 'react';
+import '@react-types/shared';
+import '@react-types/overlays';
+import '@react-stately/menu';
+import '@react-stately/form';
+import '@react-stately/list';

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { MultiSelectAria, MultiSelectProps, useMultiSelect } from './use-multiselect.js';
+export { MultiSelectListProps, MultiSelectListState, useMultiSelectListState } from './use-multiselect-list-state.js';
+export { MultiSelectState, useMultiSelectState } from './use-multiselect-state.js';
+import '@react-types/button';
+import '@react-aria/listbox';
+import 'react';
+import '@react-types/shared';
+import '@react-types/overlays';
+import '@react-stately/menu';
+import '@react-stately/form';
+import '@react-stately/list';

package/dist/index.js

@@ -0,0 +1,273 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useMultiSelect: () => useMultiSelect,
+  useMultiSelectListState: () => useMultiSelectListState,
+  useMultiSelectState: () => useMultiSelectState
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-multiselect.ts
+var import_i18n = require("@react-aria/i18n");
+var import_interactions = require("@react-aria/interactions");
+var import_label = require("@react-aria/label");
+var import_menu = require("@react-aria/menu");
+var import_selection = require("@react-aria/selection");
+var import_utils = require("@react-aria/utils");
+var import_react = require("react");
+function useMultiSelect(props, state, ref) {
+  const { disallowEmptySelection, isDisabled } = props;
+  const collator = (0, import_i18n.useCollator)({ usage: "search", sensitivity: "base" });
+  const delegate = (0, import_react.useMemo)(
+    () => new import_selection.ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator),
+    [state.collection, state.disabledKeys, collator]
+  );
+  const { menuTriggerProps, menuProps } = (0, import_menu.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 } = (0, import_selection.useTypeSelect)({
+    keyboardDelegate: delegate,
+    selectionManager: state.selectionManager,
+    onTypeSelect(key) {
+      state.setSelectedKeys([key]);
+    }
+  });
+  const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = (0, import_label.useField)({
+    ...props,
+    labelElementType: "span",
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
+  delete typeSelectProps.onKeyDownCapture;
+  menuTriggerProps.onPressStart = (e) => {
+    if (e.pointerType !== "touch" && e.pointerType !== "keyboard" && !isDisabled) {
+      state.toggle(e.pointerType === "virtual" ? "first" : null);
+    }
+  };
+  const domProps = (0, import_utils.filterDOMProps)(props, { labelable: true });
+  const triggerProps = (0, import_utils.mergeProps)(typeSelectProps, menuTriggerProps, fieldProps);
+  const valueId = (0, import_utils.useId)();
+  return {
+    labelProps: {
+      ...labelProps,
+      onClick: () => {
+        var _a;
+        if (!props.isDisabled) {
+          (_a = ref.current) == null ? void 0 : _a.focus();
+          (0, import_interactions.setInteractionModality)("keyboard");
+        }
+      }
+    },
+    triggerProps: (0, import_utils.mergeProps)(domProps, {
+      ...triggerProps,
+      onKeyDown: (0, import_utils.chain)(triggerProps.onKeyDown, triggerOnKeyDown, props.onKeyDown),
+      onKeyUp: props.onKeyUp,
+      "aria-labelledby": [
+        valueId,
+        triggerProps["aria-labelledby"],
+        triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null
+      ].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);
+      },
+      // @ts-ignore
+      onFocus: menuProps == null ? void 0 : menuProps.onFocus,
+      "aria-labelledby": [
+        fieldProps["aria-labelledby"],
+        triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+
+// src/use-multiselect-list-state.ts
+var import_react2 = require("react");
+var import_list = require("@react-stately/list");
+function useMultiSelectListState(props) {
+  const {
+    collection,
+    disabledKeys,
+    selectionManager,
+    selectionManager: { setSelectedKeys, selectedKeys, selectionMode }
+  } = (0, import_list.useListState)(props);
+  const missingKeys = (0, import_react2.useMemo)(() => {
+    if (!props.isLoading && 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) => {
+    return 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
+  };
+}
+
+// src/use-multiselect-state.ts
+var import_menu2 = require("@react-stately/menu");
+var import_form = require("@react-stately/form");
+var import_react3 = require("react");
+function useMultiSelectState({
+  validate,
+  validationBehavior,
+  ...props
+}) {
+  const [isFocused, setFocused] = (0, import_react3.useState)(false);
+  const [focusStrategy, setFocusStrategy] = (0, import_react3.useState)(null);
+  const triggerState = (0, import_menu2.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 = (0, import_form.useFormValidationState)({
+    ...props,
+    validationBehavior,
+    validate: (value) => {
+      if (!validate) return;
+      const keys = Array.from(value);
+      return validate(props.selectionMode === "single" ? keys[0] : keys);
+    },
+    // @ts-ignore
+    value: listState.selectedKeys
+  });
+  const shouldHideContent = listState.collection.size === 0 && props.hideEmptyContent;
+  return {
+    ...validationState,
+    ...listState,
+    ...triggerState,
+    focusStrategy,
+    close() {
+      triggerState.close();
+    },
+    open(focusStrategy2 = null) {
+      if (shouldHideContent) return;
+      setFocusStrategy(focusStrategy2);
+      triggerState.open();
+    },
+    toggle(focusStrategy2 = null) {
+      if (shouldHideContent) return;
+      setFocusStrategy(focusStrategy2);
+      triggerState.toggle();
+    },
+    isFocused,
+    setFocused
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMultiSelect,
+  useMultiSelectListState,
+  useMultiSelectState
+});

package/dist/index.mjs

@@ -0,0 +1,14 @@
+import {
+  useMultiSelectState
+} from "./chunk-FHVPTEOP.mjs";
+import {
+  useMultiSelectListState
+} from "./chunk-74XVDT4G.mjs";
+import {
+  useMultiSelect
+} from "./chunk-RLX3CPDX.mjs";
+export {
+  useMultiSelect,
+  useMultiSelectListState,
+  useMultiSelectState
+};

package/dist/use-multiselect-list-state.d.mts

@@ -0,0 +1,19 @@
+import { ListState } from '@react-stately/list';
+import { Node, MultipleSelection, CollectionBase, AsyncLoadable } from '@react-types/shared';
+import { Key } from 'react';
+
+interface MultiSelectListProps<T> extends CollectionBase<T>, AsyncLoadable, MultipleSelection {
+}
+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"];
+}
+declare function useMultiSelectListState<T extends object>(props: MultiSelectListProps<T>): MultiSelectListState<T>;
+
+export { type MultiSelectListProps, type MultiSelectListState, useMultiSelectListState };

package/dist/use-multiselect-list-state.d.ts

@@ -0,0 +1,19 @@
+import { ListState } from '@react-stately/list';
+import { Node, MultipleSelection, CollectionBase, AsyncLoadable } from '@react-types/shared';
+import { Key } from 'react';
+
+interface MultiSelectListProps<T> extends CollectionBase<T>, AsyncLoadable, MultipleSelection {
+}
+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"];
+}
+declare function useMultiSelectListState<T extends object>(props: MultiSelectListProps<T>): MultiSelectListState<T>;
+
+export { type MultiSelectListProps, type MultiSelectListState, useMultiSelectListState };

package/dist/use-multiselect-list-state.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-multiselect-list-state.ts
+var use_multiselect_list_state_exports = {};
+__export(use_multiselect_list_state_exports, {
+  useMultiSelectListState: () => useMultiSelectListState
+});
+module.exports = __toCommonJS(use_multiselect_list_state_exports);
+var import_react = require("react");
+var import_list = require("@react-stately/list");
+function useMultiSelectListState(props) {
+  const {
+    collection,
+    disabledKeys,
+    selectionManager,
+    selectionManager: { setSelectedKeys, selectedKeys, selectionMode }
+  } = (0, import_list.useListState)(props);
+  const missingKeys = (0, import_react.useMemo)(() => {
+    if (!props.isLoading && 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) => {
+    return 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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMultiSelectListState
+});

package/dist/use-multiselect-list-state.mjs

@@ -0,0 +1,6 @@
+import {
+  useMultiSelectListState
+} from "./chunk-74XVDT4G.mjs";
+export {
+  useMultiSelectListState
+};

package/dist/use-multiselect-state.d.mts

@@ -0,0 +1,35 @@
+import { OverlayTriggerProps } from '@react-types/overlays';
+import { CollectionBase, AsyncLoadable, InputBase, DOMProps, HelpTextProps, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, ValidationError } from '@react-types/shared';
+import { MenuTriggerState } from '@react-stately/menu';
+import { FormValidationState } from '@react-stately/form';
+import { MultiSelectListState } from './use-multiselect-list-state.mjs';
+import '@react-stately/list';
+import 'react';
+
+interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, "isReadOnly">, DOMProps, HelpTextProps, Omit<Validation<T>, "validate">, LabelableProps, TextInputBase, Omit<MultipleSelection, "none">, FocusableProps, OverlayTriggerProps {
+    /**
+     * Whether the menu should automatically flip direction when space is limited.
+     * @default true
+     */
+    shouldFlip?: boolean;
+    /**
+     * A function that returns an error message if a given value is invalid.
+     * Validation errors are displayed to the user when the form is submitted
+     * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+     * prop instead.
+     */
+    validate?: (value: string | string[]) => ValidationError | true | null | undefined;
+    /**
+     * Whether the menu should be hidden when there are no items.
+     */
+    hideEmptyContent?: boolean;
+}
+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;
+}
+declare function useMultiSelectState<T extends object>({ validate, validationBehavior, ...props }: MultiSelectProps<T>): MultiSelectState<T>;
+
+export { type MultiSelectProps, type MultiSelectState, useMultiSelectState };

package/dist/use-multiselect-state.d.ts

@@ -0,0 +1,35 @@
+import { OverlayTriggerProps } from '@react-types/overlays';
+import { CollectionBase, AsyncLoadable, InputBase, DOMProps, HelpTextProps, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, ValidationError } from '@react-types/shared';
+import { MenuTriggerState } from '@react-stately/menu';
+import { FormValidationState } from '@react-stately/form';
+import { MultiSelectListState } from './use-multiselect-list-state.js';
+import '@react-stately/list';
+import 'react';
+
+interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, "isReadOnly">, DOMProps, HelpTextProps, Omit<Validation<T>, "validate">, LabelableProps, TextInputBase, Omit<MultipleSelection, "none">, FocusableProps, OverlayTriggerProps {
+    /**
+     * Whether the menu should automatically flip direction when space is limited.
+     * @default true
+     */
+    shouldFlip?: boolean;
+    /**
+     * A function that returns an error message if a given value is invalid.
+     * Validation errors are displayed to the user when the form is submitted
+     * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+     * prop instead.
+     */
+    validate?: (value: string | string[]) => ValidationError | true | null | undefined;
+    /**
+     * Whether the menu should be hidden when there are no items.
+     */
+    hideEmptyContent?: boolean;
+}
+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;
+}
+declare function useMultiSelectState<T extends object>({ validate, validationBehavior, ...props }: MultiSelectProps<T>): MultiSelectState<T>;
+
+export { type MultiSelectProps, type MultiSelectState, useMultiSelectState };

package/dist/use-multiselect-state.js

@@ -0,0 +1,128 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-multiselect-state.ts
+var use_multiselect_state_exports = {};
+__export(use_multiselect_state_exports, {
+  useMultiSelectState: () => useMultiSelectState
+});
+module.exports = __toCommonJS(use_multiselect_state_exports);
+var import_menu = require("@react-stately/menu");
+var import_form = require("@react-stately/form");
+var import_react2 = require("react");
+
+// src/use-multiselect-list-state.ts
+var import_react = require("react");
+var import_list = require("@react-stately/list");
+function useMultiSelectListState(props) {
+  const {
+    collection,
+    disabledKeys,
+    selectionManager,
+    selectionManager: { setSelectedKeys, selectedKeys, selectionMode }
+  } = (0, import_list.useListState)(props);
+  const missingKeys = (0, import_react.useMemo)(() => {
+    if (!props.isLoading && 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) => {
+    return 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
+  };
+}
+
+// src/use-multiselect-state.ts
+function useMultiSelectState({
+  validate,
+  validationBehavior,
+  ...props
+}) {
+  const [isFocused, setFocused] = (0, import_react2.useState)(false);
+  const [focusStrategy, setFocusStrategy] = (0, import_react2.useState)(null);
+  const triggerState = (0, import_menu.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 = (0, import_form.useFormValidationState)({
+    ...props,
+    validationBehavior,
+    validate: (value) => {
+      if (!validate) return;
+      const keys = Array.from(value);
+      return validate(props.selectionMode === "single" ? keys[0] : keys);
+    },
+    // @ts-ignore
+    value: listState.selectedKeys
+  });
+  const shouldHideContent = listState.collection.size === 0 && props.hideEmptyContent;
+  return {
+    ...validationState,
+    ...listState,
+    ...triggerState,
+    focusStrategy,
+    close() {
+      triggerState.close();
+    },
+    open(focusStrategy2 = null) {
+      if (shouldHideContent) return;
+      setFocusStrategy(focusStrategy2);
+      triggerState.open();
+    },
+    toggle(focusStrategy2 = null) {
+      if (shouldHideContent) return;
+      setFocusStrategy(focusStrategy2);
+      triggerState.toggle();
+    },
+    isFocused,
+    setFocused
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMultiSelectState
+});

package/dist/use-multiselect-state.mjs

@@ -0,0 +1,7 @@
+import {
+  useMultiSelectState
+} from "./chunk-FHVPTEOP.mjs";
+import "./chunk-74XVDT4G.mjs";
+export {
+  useMultiSelectState
+};

package/dist/use-multiselect.d.mts

@@ -0,0 +1,29 @@
+import { MultiSelectProps as MultiSelectProps$1, MultiSelectState } from './use-multiselect-state.mjs';
+import { AriaButtonProps } from '@react-types/button';
+import { AriaListBoxOptions } from '@react-aria/listbox';
+import { HTMLAttributes, RefObject } from 'react';
+import { ValidationResult } from '@react-types/shared';
+import './use-multiselect-list-state.mjs';
+import '@react-types/overlays';
+import '@react-stately/menu';
+import '@react-stately/form';
+import '@react-stately/list';
+
+type MultiSelectProps<T> = MultiSelectProps$1<T>;
+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>;
+}
+declare function useMultiSelect<T>(props: MultiSelectProps<T>, state: MultiSelectState<T>, ref: RefObject<HTMLElement>): MultiSelectAria<T>;
+
+export { type MultiSelectAria, type MultiSelectProps, useMultiSelect };

package/dist/use-multiselect.d.ts

@@ -0,0 +1,29 @@
+import { MultiSelectProps as MultiSelectProps$1, MultiSelectState } from './use-multiselect-state.js';
+import { AriaButtonProps } from '@react-types/button';
+import { AriaListBoxOptions } from '@react-aria/listbox';
+import { HTMLAttributes, RefObject } from 'react';
+import { ValidationResult } from '@react-types/shared';
+import './use-multiselect-list-state.js';
+import '@react-types/overlays';
+import '@react-stately/menu';
+import '@react-stately/form';
+import '@react-stately/list';
+
+type MultiSelectProps<T> = MultiSelectProps$1<T>;
+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>;
+}
+declare function useMultiSelect<T>(props: MultiSelectProps<T>, state: MultiSelectState<T>, ref: RefObject<HTMLElement>): MultiSelectAria<T>;
+
+export { type MultiSelectAria, type MultiSelectProps, useMultiSelect };

package/dist/use-multiselect.js

@@ -0,0 +1,168 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-multiselect.ts
+var use_multiselect_exports = {};
+__export(use_multiselect_exports, {
+  useMultiSelect: () => useMultiSelect
+});
+module.exports = __toCommonJS(use_multiselect_exports);
+var import_i18n = require("@react-aria/i18n");
+var import_interactions = require("@react-aria/interactions");
+var import_label = require("@react-aria/label");
+var import_menu = require("@react-aria/menu");
+var import_selection = require("@react-aria/selection");
+var import_utils = require("@react-aria/utils");
+var import_react = require("react");
+function useMultiSelect(props, state, ref) {
+  const { disallowEmptySelection, isDisabled } = props;
+  const collator = (0, import_i18n.useCollator)({ usage: "search", sensitivity: "base" });
+  const delegate = (0, import_react.useMemo)(
+    () => new import_selection.ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator),
+    [state.collection, state.disabledKeys, collator]
+  );
+  const { menuTriggerProps, menuProps } = (0, import_menu.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 } = (0, import_selection.useTypeSelect)({
+    keyboardDelegate: delegate,
+    selectionManager: state.selectionManager,
+    onTypeSelect(key) {
+      state.setSelectedKeys([key]);
+    }
+  });
+  const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = (0, import_label.useField)({
+    ...props,
+    labelElementType: "span",
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
+  delete typeSelectProps.onKeyDownCapture;
+  menuTriggerProps.onPressStart = (e) => {
+    if (e.pointerType !== "touch" && e.pointerType !== "keyboard" && !isDisabled) {
+      state.toggle(e.pointerType === "virtual" ? "first" : null);
+    }
+  };
+  const domProps = (0, import_utils.filterDOMProps)(props, { labelable: true });
+  const triggerProps = (0, import_utils.mergeProps)(typeSelectProps, menuTriggerProps, fieldProps);
+  const valueId = (0, import_utils.useId)();
+  return {
+    labelProps: {
+      ...labelProps,
+      onClick: () => {
+        var _a;
+        if (!props.isDisabled) {
+          (_a = ref.current) == null ? void 0 : _a.focus();
+          (0, import_interactions.setInteractionModality)("keyboard");
+        }
+      }
+    },
+    triggerProps: (0, import_utils.mergeProps)(domProps, {
+      ...triggerProps,
+      onKeyDown: (0, import_utils.chain)(triggerProps.onKeyDown, triggerOnKeyDown, props.onKeyDown),
+      onKeyUp: props.onKeyUp,
+      "aria-labelledby": [
+        valueId,
+        triggerProps["aria-labelledby"],
+        triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null
+      ].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);
+      },
+      // @ts-ignore
+      onFocus: menuProps == null ? void 0 : menuProps.onFocus,
+      "aria-labelledby": [
+        fieldProps["aria-labelledby"],
+        triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMultiSelect
+});

package/dist/use-multiselect.mjs

@@ -0,0 +1,6 @@
+import {
+  useMultiSelect
+} from "./chunk-RLX3CPDX.mjs";
+export {
+  useMultiSelect
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@vx-oss/heroui-v2-use-aria-multiselect",
+  "version": "2.4.20-alpha.0",
+  "description": "Provides the behavior and accessibility implementation for a multi-select component.",
+  "keywords": [
+    "use-aria-multiselect"
+  ],
+  "author": "Vx OSS Devs <oss-developers@vezham.com>",
+  "homepage": "https://vezham.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vezham/heroui-v2.git",
+    "directory": "packages/hooks/use-aria-multiselect"
+  },
+  "bugs": {
+    "url": "https://github.com/vezham/heroui-v2/issues"
+  },
+  "dependencies": {
+    "@react-aria/i18n": "3.12.13",
+    "@react-aria/interactions": "3.25.6",
+    "@react-aria/label": "3.7.22",
+    "@react-aria/listbox": "3.15.0",
+    "@react-aria/menu": "3.19.3",
+    "@react-aria/selection": "3.26.0",
+    "@react-aria/utils": "3.31.0",
+    "@react-stately/form": "3.2.2",
+    "@react-stately/list": "3.13.1",
+    "@react-stately/menu": "3.9.8",
+    "@react-types/button": "3.14.1",
+    "@react-types/overlays": "3.9.2",
+    "@react-types/shared": "3.32.1"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}