@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/dist/form/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @remarks \\@since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAihBA,WAmDC"}
+{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAihBA,WAmDC"}

package/dist/form/useCheckboxGroup.d.ts

@@ -1,5 +1,5 @@
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CheckboxGroupOptions<V> {
     /**
      * A `name` to apply to all the checkboxes within the group. This is required
@@ -20,8 +20,7 @@ export interface CheckboxGroupOptions<V> {
      * checkbox is checked and determine if all the checkboxes have manually be
      * selected.
      *
-     * @example
-     * Indeterminate Behavior
+     * @example Indeterminate Behavior
      * ```tsx
      * const OPTIONS = [
      *   { label: "First", value: "a" },
@@ -45,7 +44,7 @@ export interface CheckboxGroupOptions<V> {
      */
     defaultCheckedValues?: UseStateInitializer<readonly V[]>;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CheckboxGroupImplementation<V extends string> {
     reset(): void;
     checkedValues: ReadonlySet<V>;
@@ -57,7 +56,7 @@ export interface CheckboxGroupImplementation<V extends string> {
         onChange(): void;
     };
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface IndeterminateCheckboxGroupImplementation<V extends string> extends CheckboxGroupImplementation<V> {
     getIndeterminateProps(): {
         "aria-checked": "mixed" | undefined;
@@ -67,7 +66,7 @@ export interface IndeterminateCheckboxGroupImplementation<V extends string> exte
         onChange(): void;
     };
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface MenuItemCheckboxGroupImplementation<V extends string> {
     reset(): void;
     checkedValues: ReadonlySet<V>;
@@ -77,7 +76,7 @@ export interface MenuItemCheckboxGroupImplementation<V extends string> {
         onCheckedChange(): void;
     };
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface IndeterminateMenuItemCheckboxGroupImplementation<V extends string> extends MenuItemCheckboxGroupImplementation<V> {
     getIndeterminateProps(): {
         "aria-checked": "mixed" | undefined;
@@ -86,7 +85,7 @@ export interface IndeterminateMenuItemCheckboxGroupImplementation<V extends stri
         onCheckedChange(): void;
     };
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CombinedCheckboxGroupReturnValue<V extends string> {
     reset(): void;
     checkedValues: ReadonlySet<V>;
@@ -108,8 +107,7 @@ export interface CombinedCheckboxGroupReturnValue<V extends string> {
     };
 }
 /**
- * @example
- * Checkbox Group
+ * @example Checkbox Group
  * ```tsx
  * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: "example" });
  *
@@ -128,7 +126,7 @@ export interface CombinedCheckboxGroupReturnValue<V extends string> {
  * );
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {
     menu?: false;
@@ -136,8 +134,7 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
     values?: never;
 }): CheckboxGroupImplementation<V>;
 /**
- * @example
- * Indeterminate Checkbox Group
+ * @example Indeterminate Checkbox Group
  * ```tsx
  * const OPTIONS = [
  *   { label: "First", value: "a" },
@@ -165,7 +162,7 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
  * );
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {
     menu?: false;
@@ -173,8 +170,7 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
     values: readonly V[];
 }): IndeterminateCheckboxGroupImplementation<V>;
 /**
- * @example
- * MenuItemCheckbox Group
+ * @example MenuItemCheckbox Group
  * ```tsx
  * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });
  *
@@ -193,7 +189,7 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
  * );
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {
     menu: true;
@@ -201,8 +197,7 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
     values?: never;
 }): MenuItemCheckboxGroupImplementation<V>;
 /**
- * @example
- * Indeterminate MenuItemCheckbox Group
+ * @example Indeterminate MenuItemCheckbox Group
  * ```tsx
  * const OPTIONS = [
  *   { label: "First", value: "a" },
@@ -230,7 +225,7 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
  * );
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {
     menu: true;

package/dist/form/useCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @remarks \\@since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook. This should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example\n   * Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const:\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange(): void;\n  };\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n  extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange(): void;\n  };\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    checked: boolean;\n    onCheckedChange(): void;\n  };\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange(): void;\n  };\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?(): void;\n    onCheckedChange?(): void;\n  };\n  getIndeterminateProps?(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?(): void;\n    onCheckedChange?(): void;\n  };\n}\n\n/**\n * @example\n * Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example\n * Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example\n * MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example\n * Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const [checkedValues, setCheckedValues] = useState<ReadonlySet<V>>(() => {\n    if (typeof defaultCheckedValues === \"function\") {\n      return new Set(defaultCheckedValues());\n    }\n\n    return new Set(defaultCheckedValues);\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues(() => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, []),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((prevValues) => {\n            const nextValues = new Set(prevValues);\n            if (prevValues.has(value)) {\n              nextValues.delete(value);\n            } else {\n              nextValues.add(value);\n            }\n\n            return nextValues;\n          });\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","checkedValues","setCheckedValues","Set","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","reset","current","getCheckboxProps","value","has","prevValues","nextValues","delete","add"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGtD,MAAMC,aAAa,EAAE;AAoQrB,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,CAACK,eAAeC,iBAAiB,GAAGT,SAAyB;QACjE,IAAI,OAAOO,yBAAyB,YAAY;YAC9C,OAAO,IAAIG,IAAIH;QACjB;QAEA,OAAO,IAAIG,IAAIH;IACjB;IACA,MAAMI,UAAUZ,OAAOS;IAEvB,IAAII;IACJ,IAAIN,QAAQ;QACVM,wBAAwB;YACtB,MAAMC,UAAUL,cAAcM,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWL,cAAcM,IAAI,GAAGR,OAAOU,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1Cb;gBACAS;gBACAE;gBACA,CAACV,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB;wBACf,IAAID,cAAcM,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIL,IAAIJ;wBACjB;wBAEA,OAAO,IAAII;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLQ,OAAOpB,YAAY;YACjBW,iBAAiBE,QAAQQ,OAAO;QAClC,GAAG,EAAE;QACLX;QACAC;QACAG;QACAQ,kBAAiBC,KAAK;YACpB,OAAO;gBACLjB;gBACAiB,OAAOhB,OAAOY,YAAYI;gBAC1BR,SAASL,cAAcc,GAAG,CAACD;gBAC3B,CAAChB,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB,CAACc;wBAChB,MAAMC,aAAa,IAAId,IAAIa;wBAC3B,IAAIA,WAAWD,GAAG,CAACD,QAAQ;4BACzBG,WAAWC,MAAM,CAACJ;wBACpB,OAAO;4BACLG,WAAWE,GAAG,CAACL;wBACjB;wBAEA,OAAOG;oBACT;gBACF;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook. This should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const:\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n  extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    checked: boolean;\n    onCheckedChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?(): void;\n    onCheckedChange?(): void;\n  };\n  getIndeterminateProps?(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?(): void;\n    onCheckedChange?(): void;\n  };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const [checkedValues, setCheckedValues] = useState<ReadonlySet<V>>(() => {\n    if (typeof defaultCheckedValues === \"function\") {\n      return new Set(defaultCheckedValues());\n    }\n\n    return new Set(defaultCheckedValues);\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues(() => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, []),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((prevValues) => {\n            const nextValues = new Set(prevValues);\n            if (prevValues.has(value)) {\n              nextValues.delete(value);\n            } else {\n              nextValues.add(value);\n            }\n\n            return nextValues;\n          });\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","checkedValues","setCheckedValues","Set","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","reset","current","getCheckboxProps","value","has","prevValues","nextValues","delete","add"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGtD,MAAMC,aAAa,EAAE;AA+PrB,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,CAACK,eAAeC,iBAAiB,GAAGT,SAAyB;QACjE,IAAI,OAAOO,yBAAyB,YAAY;YAC9C,OAAO,IAAIG,IAAIH;QACjB;QAEA,OAAO,IAAIG,IAAIH;IACjB;IACA,MAAMI,UAAUZ,OAAOS;IAEvB,IAAII;IACJ,IAAIN,QAAQ;QACVM,wBAAwB;YACtB,MAAMC,UAAUL,cAAcM,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWL,cAAcM,IAAI,GAAGR,OAAOU,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1Cb;gBACAS;gBACAE;gBACA,CAACV,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB;wBACf,IAAID,cAAcM,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIL,IAAIJ;wBACjB;wBAEA,OAAO,IAAII;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLQ,OAAOpB,YAAY;YACjBW,iBAAiBE,QAAQQ,OAAO;QAClC,GAAG,EAAE;QACLX;QACAC;QACAG;QACAQ,kBAAiBC,KAAK;YACpB,OAAO;gBACLjB;gBACAiB,OAAOhB,OAAOY,YAAYI;gBAC1BR,SAASL,cAAcc,GAAG,CAACD;gBAC3B,CAAChB,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB,CAACc;wBAChB,MAAMC,aAAa,IAAId,IAAIa;wBAC3B,IAAIA,WAAWD,GAAG,CAACD,QAAQ;4BACzBG,WAAWC,MAAM,CAACJ;wBACpB,OAAO;4BACLG,WAAWE,GAAG,CAACL;wBACjB;wBAEA,OAAOG;oBACT;gBACF;YACF;QACF;IACF;AACF"}

package/dist/form/useCombobox.d.ts

@@ -6,15 +6,15 @@ import { type PositionAnchor, type PositionWidth } from "../positioning/types.js
 import { type TransitionCallbacks } from "../transition/types.js";
 import { type NonNullMutableRef, type UseStateInitializer, type UseStateSetter } from "../types.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const getNonDisabledOptions: (container: HTMLElement) => readonly HTMLElement[];
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type SupportedComboboxPopup = "listbox" | "grid" | "dialog";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxKeyboardMovementData<E extends HTMLElement = HTMLInputElement> extends KeyboardMovementExtensionData<E> {
     show(): void;
@@ -23,15 +23,15 @@ export interface ComboboxKeyboardMovementData<E extends HTMLElement = HTMLInputE
     focusLast: NonNullMutableRef<boolean>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (movementData: ComboboxKeyboardMovementData<E>) => void;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ComboboxKeyboardMovementOptions<ComboboxEl extends HTMLElement = HTMLInputElement> = Pick<KeyboardMovementProviderOptions<ComboboxEl>, "onClick" | "onFocus" | "onKeyDown" | "disabled" | "loopable" | "searchable" | "onFocusChange" | "isNegativeOneAllowed">;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BaseComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxKeyboardMovementOptions<ComboboxEl> {
     /**
@@ -65,7 +65,7 @@ export interface BaseComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputE
     getDefaultFocusedIndex?: GetDefaultFocusedIndex;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
     getEnterDefaultFocusedIndex(options: {
@@ -75,7 +75,7 @@ export interface ComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputEleme
     }): number;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxWidgetProps<ComboboxEl extends HTMLElement = HTMLInputElement> {
     "aria-controls": string;
@@ -90,7 +90,7 @@ export interface ComboboxWidgetProps<ComboboxEl extends HTMLElement = HTMLInputE
     onKeyDown: KeyboardEventHandler<ComboboxEl>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxWidgetPopupProps<PopupEl extends HTMLElement = HTMLElement> {
     id: string;
@@ -98,45 +98,45 @@ export interface ComboboxWidgetPopupProps<PopupEl extends HTMLElement = HTMLElem
     role: "listbox" | "dialog" | "grid";
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ComboboxTransitionCallbacks = Pick<TransitionCallbacks, "onEntering" | "onEntered" | "onExiting" | "onExited">;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {
     disableTransition?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export type ConfigurableComboboxMenuProps = Partial<Omit<MenuProps, "fixedTo" | "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps>>;
+export type ConfigurableComboboxMenuProps = Partial<Omit<MenuProps, "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps>>;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface ProvidedComboboxMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> extends Required<ComboboxTransitionCallbacks>, ComboboxWidgetPopupProps<PopupEl> {
+export interface ProvidedComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement> extends Required<ComboboxTransitionCallbacks>, ComboboxWidgetPopupProps<PopupEl> {
     visible: boolean;
     onRequestClose(): void;
     /** @defaultValue `"min"` */
     width: PositionWidth;
     /** @defaultValue `BELOW_CENTER_ANCHOR` */
     anchor: PositionAnchor;
-    fixedTo: RefObject<ComboboxEl>;
+    fixedTo: RefObject<HTMLElement>;
     sheetProps: MenuSheetConfigurableProps & Required<ComboboxTransitionCallbacks>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface ComboboxMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>, ProvidedComboboxMenuProps<ComboboxEl, PopupEl> {
+export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>, ProvidedComboboxMenuProps<PopupEl> {
 }
 /**
  * Since the combobox usually uses the `Menu` as a popup element, this is a
  * helper util to create the required props and merge any additional props
  * with reasonable defaults.
  */
-export type ComboboxGetMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> = (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<ComboboxEl, PopupEl>;
+export type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> = (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends KeyboardMovementProviderImplementation<ComboboxEl> {
     show(): void;
@@ -148,10 +148,10 @@ export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInp
     popupProps: ComboboxWidgetPopupProps<PopupEl>;
     comboboxRef: RefObject<ComboboxEl>;
     comboboxProps: ComboboxWidgetProps<ComboboxEl>;
-    getMenuProps: ComboboxGetMenuProps<ComboboxEl, PopupEl>;
+    getMenuProps: ComboboxGetMenuProps<PopupEl>;
     getTransitionCallbacks(options: ComboboxTransitionOptions): Required<ComboboxTransitionCallbacks>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: ComboboxOptions<ComboboxEl, PopupEl>): ComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useCombobox.js

@@ -11,12 +11,12 @@ const noop = ()=>{
 // do nothing
 };
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const getNonDisabledOptions = (container)=>[
         ...container.querySelectorAll('[role="option"]:not([aria-disabled])')
     ];
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useCombobox(options) {
     const { form, popup = "listbox", onClick = noop, onFocus, onKeyDown, searchable, isNegativeOneAllowed, loopable, disabled, comboboxId: propComboboxId, comboboxRef: propComboboxRef, popupId: propPopupId, popupRef: propPopupRef, defaultVisible = false, onFocusChange = noop, extendKeyDown = noop, getFocusableElements = getNonDisabledOptions, getEnterDefaultFocusedIndex, getDefaultFocusedIndex } = options;
     const { toggled: visible, enable: show, disable: hide, setToggled: setVisible } = useToggle(defaultVisible);
@@ -185,9 +185,9 @@ const noop = ()=>{
             return {
                 anchor: BELOW_CENTER_ANCHOR,
                 width: "min",
+                fixedTo: comboboxRef,
                 ...props,
                 ...popupProps,
-                fixedTo: comboboxRef,
                 visible,
                 onRequestClose: hide,
                 ...getTransitionCallbacks(props),

package/dist/form/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n  useRef,\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { type MenuSheetConfigurableProps } from \"../menu/MenuSheet.js\";\nimport {\n  type GetDefaultFocusedIndex,\n  type GetFocusableElements,\n  type KeyboardMovementExtensionData,\n  type KeyboardMovementProviderImplementation,\n  type KeyboardMovementProviderOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type PositionAnchor,\n  type PositionWidth,\n} from \"../positioning/types.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport {\n  type TransitionCallbacks,\n  type TransitionEnterHandler,\n  type TransitionExitHandler,\n} from \"../transition/types.js\";\nimport {\n  type NonNullMutableRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { tryToSubmitRelatedForm } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const getNonDisabledOptions = (\n  container: HTMLElement\n): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLLIElement>(\n    '[role=\"option\"]:not([aria-disabled])'\n  ),\n];\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type SupportedComboboxPopup = \"listbox\" | \"grid\" | \"dialog\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxKeyboardMovementData<\n  E extends HTMLElement = HTMLInputElement,\n> extends KeyboardMovementExtensionData<E> {\n  show(): void;\n  hide(): void;\n  visible: boolean;\n  focusLast: NonNullMutableRef<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (\n  movementData: ComboboxKeyboardMovementData<E>\n) => void;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ComboboxKeyboardMovementOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> = Pick<\n  KeyboardMovementProviderOptions<ComboboxEl>,\n  | \"onClick\"\n  | \"onFocus\"\n  | \"onKeyDown\"\n  | \"disabled\"\n  | \"loopable\"\n  | \"searchable\"\n  | \"onFocusChange\"\n  | \"isNegativeOneAllowed\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxKeyboardMovementOptions<ComboboxEl> {\n  /**\n   * This is the {@link InputHTMLAttributes.form} attribute and is used to\n   * attempt submitting a form when the enter key is pressed.\n   */\n  form?: string;\n\n  /**\n   * @defaultValue `\"combobox-popup-\" + useId()`\n   */\n  popupId?: string;\n  popupRef?: Ref<PopupEl>;\n\n  /**\n   * @defaultValue `\"combobox-\" + useId()`\n   */\n  comboboxId?: string;\n  comboboxRef?: Ref<ComboboxEl>;\n\n  /**\n   * @defaultValue `\"listbox\"`\n   */\n  popup?: \"listbox\" | \"grid\" | \"dialog\";\n\n  /**\n   * @defaultValue `false`\n   */\n  defaultVisible?: UseStateInitializer<boolean>;\n\n  extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;\n\n  /**\n   * @defaultValue {@link getNonDisabledOptions}\n   */\n  getFocusableElements?: GetFocusableElements;\n\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {\n  getEnterDefaultFocusedIndex(options: {\n    focusLast: boolean;\n    focusables: readonly HTMLElement[];\n    currentFocusIndex: number;\n  }): number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxWidgetProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> {\n  \"aria-controls\": string;\n  \"aria-disabled\": true | undefined;\n  \"aria-expanded\": boolean;\n  \"aria-haspopup\": SupportedComboboxPopup;\n  id: string;\n  ref: RefCallback<ComboboxEl>;\n  role: \"combobox\";\n  onClick: MouseEventHandler<ComboboxEl>;\n  onFocus: FocusEventHandler<ComboboxEl>;\n  onKeyDown: KeyboardEventHandler<ComboboxEl>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxWidgetPopupProps<\n  PopupEl extends HTMLElement = HTMLElement,\n> {\n  id: string;\n  ref: RefCallback<PopupEl>;\n  role: \"listbox\" | \"dialog\" | \"grid\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ComboboxTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {\n  disableTransition?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ConfigurableComboboxMenuProps = Partial<\n  Omit<\n    MenuProps,\n    \"fixedTo\" | \"visible\" | \"onRequestClose\" | keyof ComboboxWidgetPopupProps\n  >\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedComboboxMenuProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLDivElement,\n> extends Required<ComboboxTransitionCallbacks>,\n    ComboboxWidgetPopupProps<PopupEl> {\n  visible: boolean;\n  onRequestClose(): void;\n\n  /** @defaultValue `\"min\"` */\n  width: PositionWidth;\n\n  /** @defaultValue `BELOW_CENTER_ANCHOR` */\n  anchor: PositionAnchor;\n\n  fixedTo: RefObject<ComboboxEl>;\n\n  sheetProps: MenuSheetConfigurableProps &\n    Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxMenuProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLDivElement,\n> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,\n    ProvidedComboboxMenuProps<ComboboxEl, PopupEl> {}\n\n/**\n * Since the combobox usually uses the `Menu` as a popup element, this is a\n * helper util to create the required props and merge any additional props\n * with reasonable defaults.\n */\nexport type ComboboxGetMenuProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLDivElement,\n> = (\n  props?: ConfigurableComboboxMenuProps\n) => ComboboxMenuProps<ComboboxEl, PopupEl>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends KeyboardMovementProviderImplementation<ComboboxEl> {\n  show(): void;\n  hide(): void;\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  focusLast: NonNullMutableRef<boolean>;\n  popupRef: RefObject<PopupEl>;\n  popupProps: ComboboxWidgetPopupProps<PopupEl>;\n  comboboxRef: RefObject<ComboboxEl>;\n  comboboxProps: ComboboxWidgetProps<ComboboxEl>;\n\n  getMenuProps: ComboboxGetMenuProps<ComboboxEl, PopupEl>;\n  getTransitionCallbacks(\n    options: ComboboxTransitionOptions\n  ): Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: ComboboxOptions<ComboboxEl, PopupEl>\n): ComboboxImplementation<ComboboxEl, PopupEl> {\n  const {\n    form,\n    popup = \"listbox\",\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    searchable,\n    isNegativeOneAllowed,\n    loopable,\n    disabled,\n    comboboxId: propComboboxId,\n    comboboxRef: propComboboxRef,\n    popupId: propPopupId,\n    popupRef: propPopupRef,\n    defaultVisible = false,\n    onFocusChange = noop,\n    extendKeyDown = noop,\n    getFocusableElements = getNonDisabledOptions,\n    getEnterDefaultFocusedIndex,\n    getDefaultFocusedIndex,\n  } = options;\n\n  const {\n    toggled: visible,\n    enable: show,\n    disable: hide,\n    setToggled: setVisible,\n  } = useToggle(defaultVisible);\n  const popupId = useEnsuredId(propPopupId, \"combobox-popup\");\n  const comboboxId = useEnsuredId(propComboboxId, \"combobox\");\n  const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);\n  const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);\n  const focusLast = useRef(false);\n  const {\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n  } = useKeyboardMovementProvider<ComboboxEl>({\n    onFocus,\n    onKeyDown,\n    onClick(event) {\n      onClick(event);\n      if (disabled) {\n        return;\n      }\n\n      show();\n    },\n    extendKeyDown(movementData) {\n      extendKeyDown({\n        ...movementData,\n        show,\n        hide,\n        visible,\n        focusLast,\n      });\n      const { event } = movementData;\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (visible) {\n        switch (event.key) {\n          case \"Tab\":\n          case \"Escape\":\n            event.stopPropagation();\n            hide();\n            break;\n          case \"Enter\":\n            event.preventDefault();\n            break;\n        }\n\n        // while visible, always use the default keyboard movement behavior\n        return;\n      }\n\n      switch (event.key) {\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"ArrowUp\";\n          show();\n          break;\n        case \"Enter\":\n          tryToSubmitRelatedForm(event, form);\n          break;\n      }\n    },\n    disabled,\n    loopable,\n    searchable,\n    onFocusChange,\n    programmatic: true,\n    includeDisabled: false,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements(container, programmatic) {\n      const popup = popupRef.current;\n      if (!popup) {\n        return [];\n      }\n\n      return getFocusableElements(popup || container, programmatic);\n    },\n    isNegativeOneAllowed,\n    getDefaultFocusedIndex,\n  });\n  const getTransitionCallbacks = (\n    options: ComboboxTransitionOptions = {}\n  ): Required<ComboboxTransitionCallbacks> => {\n    const { onEntered, onEntering, onExiting, onExited, disableTransition } =\n      options;\n\n    const handleEntering =\n      (callback: TransitionEnterHandler = noop, skipped: boolean) =>\n      (appearing: boolean) => {\n        callback(appearing);\n\n        const popup = popupRef.current;\n        if (!popup || skipped) {\n          // Chrome does not trigger the scrollIntoView behavior correctly while\n          // using a scale transition, so need to trigger this on the entered\n          // flow to really make sure the item is in view.\n          // An alternative would be to implement a custom scrollIntoView\n          // behavior again like the previous versions of react-md, but this is\n          // less lines of code\n          const activeOption = document.getElementById(activeDescendantId);\n          if (activeOption) {\n            activeOption.scrollIntoView({ block: \"nearest\" });\n          }\n          return;\n        }\n\n        const focusables = getFocusableElements(popup, true);\n        const index = getEnterDefaultFocusedIndex({\n          focusLast: focusLast.current,\n          focusables,\n          currentFocusIndex: currentFocusIndex.current,\n        });\n        focusLast.current = false;\n        currentFocusIndex.current = index;\n\n        const option = focusables[index];\n        if (!option) {\n          return;\n        }\n\n        onFocusChange({\n          index,\n          element: option,\n        });\n\n        option.scrollIntoView({ block: \"nearest\" });\n        setActiveDescendantId(option.id || \"\");\n      };\n    const handleExiting =\n      (callback: TransitionExitHandler = noop, skipped: boolean) =>\n      (): void => {\n        callback();\n\n        if (!skipped) {\n          // since the menu is unmounted or set to hidden while not visible, need\n          // to clear the aria-activedescendant and current focus index when\n          // hiding\n          currentFocusIndex.current = -1;\n          setActiveDescendantId(\"\");\n        }\n      };\n\n    const isTransitionCompleteSkipped =\n      !disableTransition && !TRANSITION_CONFIG.disabled;\n\n    return {\n      onEntering: handleEntering(onEntering, false),\n      onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),\n      onExiting: handleExiting(onExiting, false),\n      onExited: handleExiting(onExited, isTransitionCompleteSkipped),\n    };\n  };\n\n  const popupProps: ComboboxWidgetPopupProps<PopupEl> = {\n    id: popupId,\n    ref: popupRefCallback,\n    role: popup,\n  };\n\n  return {\n    show,\n    hide,\n    visible,\n    setVisible,\n    focusLast,\n    popupRef,\n    popupProps,\n    comboboxRef,\n    comboboxProps: {\n      ...movementProps,\n      \"aria-controls\": popupId,\n      \"aria-disabled\": disabled || undefined,\n      \"aria-expanded\": visible,\n      \"aria-haspopup\": popup,\n      id: comboboxId,\n      ref: comboboxRefCallback,\n      role: \"combobox\",\n    },\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n    getTransitionCallbacks,\n    getMenuProps(props = {}) {\n      const { sheetProps, disableTransition } = props;\n      return {\n        anchor: BELOW_CENTER_ANCHOR,\n        width: \"min\",\n        ...props,\n        ...popupProps,\n        fixedTo: comboboxRef,\n        visible,\n        onRequestClose: hide,\n        ...getTransitionCallbacks(props),\n        sheetProps: {\n          ...sheetProps,\n          ...getTransitionCallbacks({\n            ...sheetProps,\n            disableTransition:\n              sheetProps?.disableTransition ?? disableTransition,\n          }),\n        },\n      };\n    },\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","BELOW_CENTER_ANCHOR","TRANSITION_CONFIG","useEnsuredId","useEnsuredRef","useToggle","tryToSubmitRelatedForm","noop","getNonDisabledOptions","container","querySelectorAll","useCombobox","options","form","popup","onClick","onFocus","onKeyDown","searchable","isNegativeOneAllowed","loopable","disabled","comboboxId","propComboboxId","comboboxRef","propComboboxRef","popupId","propPopupId","popupRef","propPopupRef","defaultVisible","onFocusChange","extendKeyDown","getFocusableElements","getEnterDefaultFocusedIndex","getDefaultFocusedIndex","toggled","visible","enable","show","disable","hide","setToggled","setVisible","comboboxRefCallback","popupRefCallback","focusLast","movementProps","movementContext","currentFocusIndex","activeDescendantId","setActiveDescendantId","event","movementData","isPropagationStopped","key","stopPropagation","preventDefault","current","programmatic","includeDisabled","tabIndexBehavior","getTransitionCallbacks","onEntered","onEntering","onExiting","onExited","disableTransition","handleEntering","callback","skipped","appearing","activeOption","document","getElementById","scrollIntoView","block","focusables","index","option","element","id","handleExiting","isTransitionCompleteSkipped","popupProps","ref","role","comboboxProps","undefined","getMenuProps","props","sheetProps","anchor","width","fixedTo","onRequestClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/form/useCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n  useRef,\n  type FocusEventHandler,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { type MenuSheetConfigurableProps } from \"../menu/MenuSheet.js\";\nimport {\n  type GetDefaultFocusedIndex,\n  type GetFocusableElements,\n  type KeyboardMovementExtensionData,\n  type KeyboardMovementProviderImplementation,\n  type KeyboardMovementProviderOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type PositionAnchor,\n  type PositionWidth,\n} from \"../positioning/types.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport {\n  type TransitionCallbacks,\n  type TransitionEnterHandler,\n  type TransitionExitHandler,\n} from \"../transition/types.js\";\nimport {\n  type NonNullMutableRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { tryToSubmitRelatedForm } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport const getNonDisabledOptions = (\n  container: HTMLElement\n): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLLIElement>(\n    '[role=\"option\"]:not([aria-disabled])'\n  ),\n];\n\n/**\n * @since 6.0.0\n */\nexport type SupportedComboboxPopup = \"listbox\" | \"grid\" | \"dialog\";\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxKeyboardMovementData<\n  E extends HTMLElement = HTMLInputElement,\n> extends KeyboardMovementExtensionData<E> {\n  show(): void;\n  hide(): void;\n  visible: boolean;\n  focusLast: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (\n  movementData: ComboboxKeyboardMovementData<E>\n) => void;\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxKeyboardMovementOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> = Pick<\n  KeyboardMovementProviderOptions<ComboboxEl>,\n  | \"onClick\"\n  | \"onFocus\"\n  | \"onKeyDown\"\n  | \"disabled\"\n  | \"loopable\"\n  | \"searchable\"\n  | \"onFocusChange\"\n  | \"isNegativeOneAllowed\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface BaseComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxKeyboardMovementOptions<ComboboxEl> {\n  /**\n   * This is the {@link InputHTMLAttributes.form} attribute and is used to\n   * attempt submitting a form when the enter key is pressed.\n   */\n  form?: string;\n\n  /**\n   * @defaultValue `\"combobox-popup-\" + useId()`\n   */\n  popupId?: string;\n  popupRef?: Ref<PopupEl>;\n\n  /**\n   * @defaultValue `\"combobox-\" + useId()`\n   */\n  comboboxId?: string;\n  comboboxRef?: Ref<ComboboxEl>;\n\n  /**\n   * @defaultValue `\"listbox\"`\n   */\n  popup?: \"listbox\" | \"grid\" | \"dialog\";\n\n  /**\n   * @defaultValue `false`\n   */\n  defaultVisible?: UseStateInitializer<boolean>;\n\n  extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;\n\n  /**\n   * @defaultValue {@link getNonDisabledOptions}\n   */\n  getFocusableElements?: GetFocusableElements;\n\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {\n  getEnterDefaultFocusedIndex(options: {\n    focusLast: boolean;\n    focusables: readonly HTMLElement[];\n    currentFocusIndex: number;\n  }): number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> {\n  \"aria-controls\": string;\n  \"aria-disabled\": true | undefined;\n  \"aria-expanded\": boolean;\n  \"aria-haspopup\": SupportedComboboxPopup;\n  id: string;\n  ref: RefCallback<ComboboxEl>;\n  role: \"combobox\";\n  onClick: MouseEventHandler<ComboboxEl>;\n  onFocus: FocusEventHandler<ComboboxEl>;\n  onKeyDown: KeyboardEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetPopupProps<\n  PopupEl extends HTMLElement = HTMLElement,\n> {\n  id: string;\n  ref: RefCallback<PopupEl>;\n  role: \"listbox\" | \"dialog\" | \"grid\";\n}\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableComboboxMenuProps = Partial<\n  Omit<MenuProps, \"visible\" | \"onRequestClose\" | keyof ComboboxWidgetPopupProps>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedComboboxMenuProps<\n  PopupEl extends HTMLElement = HTMLDivElement,\n> extends Required<ComboboxTransitionCallbacks>,\n    ComboboxWidgetPopupProps<PopupEl> {\n  visible: boolean;\n  onRequestClose(): void;\n\n  /** @defaultValue `\"min\"` */\n  width: PositionWidth;\n\n  /** @defaultValue `BELOW_CENTER_ANCHOR` */\n  anchor: PositionAnchor;\n\n  fixedTo: RefObject<HTMLElement>;\n\n  sheetProps: MenuSheetConfigurableProps &\n    Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>\n  extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,\n    ProvidedComboboxMenuProps<PopupEl> {}\n\n/**\n * Since the combobox usually uses the `Menu` as a popup element, this is a\n * helper util to create the required props and merge any additional props\n * with reasonable defaults.\n */\nexport type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> =\n  (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends KeyboardMovementProviderImplementation<ComboboxEl> {\n  show(): void;\n  hide(): void;\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  focusLast: NonNullMutableRef<boolean>;\n  popupRef: RefObject<PopupEl>;\n  popupProps: ComboboxWidgetPopupProps<PopupEl>;\n  comboboxRef: RefObject<ComboboxEl>;\n  comboboxProps: ComboboxWidgetProps<ComboboxEl>;\n\n  getMenuProps: ComboboxGetMenuProps<PopupEl>;\n  getTransitionCallbacks(\n    options: ComboboxTransitionOptions\n  ): Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport function useCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: ComboboxOptions<ComboboxEl, PopupEl>\n): ComboboxImplementation<ComboboxEl, PopupEl> {\n  const {\n    form,\n    popup = \"listbox\",\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    searchable,\n    isNegativeOneAllowed,\n    loopable,\n    disabled,\n    comboboxId: propComboboxId,\n    comboboxRef: propComboboxRef,\n    popupId: propPopupId,\n    popupRef: propPopupRef,\n    defaultVisible = false,\n    onFocusChange = noop,\n    extendKeyDown = noop,\n    getFocusableElements = getNonDisabledOptions,\n    getEnterDefaultFocusedIndex,\n    getDefaultFocusedIndex,\n  } = options;\n\n  const {\n    toggled: visible,\n    enable: show,\n    disable: hide,\n    setToggled: setVisible,\n  } = useToggle(defaultVisible);\n  const popupId = useEnsuredId(propPopupId, \"combobox-popup\");\n  const comboboxId = useEnsuredId(propComboboxId, \"combobox\");\n  const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);\n  const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);\n  const focusLast = useRef(false);\n  const {\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n  } = useKeyboardMovementProvider<ComboboxEl>({\n    onFocus,\n    onKeyDown,\n    onClick(event) {\n      onClick(event);\n      if (disabled) {\n        return;\n      }\n\n      show();\n    },\n    extendKeyDown(movementData) {\n      extendKeyDown({\n        ...movementData,\n        show,\n        hide,\n        visible,\n        focusLast,\n      });\n      const { event } = movementData;\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (visible) {\n        switch (event.key) {\n          case \"Tab\":\n          case \"Escape\":\n            event.stopPropagation();\n            hide();\n            break;\n          case \"Enter\":\n            event.preventDefault();\n            break;\n        }\n\n        // while visible, always use the default keyboard movement behavior\n        return;\n      }\n\n      switch (event.key) {\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"ArrowUp\";\n          show();\n          break;\n        case \"Enter\":\n          tryToSubmitRelatedForm(event, form);\n          break;\n      }\n    },\n    disabled,\n    loopable,\n    searchable,\n    onFocusChange,\n    programmatic: true,\n    includeDisabled: false,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements(container, programmatic) {\n      const popup = popupRef.current;\n      if (!popup) {\n        return [];\n      }\n\n      return getFocusableElements(popup || container, programmatic);\n    },\n    isNegativeOneAllowed,\n    getDefaultFocusedIndex,\n  });\n  const getTransitionCallbacks = (\n    options: ComboboxTransitionOptions = {}\n  ): Required<ComboboxTransitionCallbacks> => {\n    const { onEntered, onEntering, onExiting, onExited, disableTransition } =\n      options;\n\n    const handleEntering =\n      (callback: TransitionEnterHandler = noop, skipped: boolean) =>\n      (appearing: boolean) => {\n        callback(appearing);\n\n        const popup = popupRef.current;\n        if (!popup || skipped) {\n          // Chrome does not trigger the scrollIntoView behavior correctly while\n          // using a scale transition, so need to trigger this on the entered\n          // flow to really make sure the item is in view.\n          // An alternative would be to implement a custom scrollIntoView\n          // behavior again like the previous versions of react-md, but this is\n          // less lines of code\n          const activeOption = document.getElementById(activeDescendantId);\n          if (activeOption) {\n            activeOption.scrollIntoView({ block: \"nearest\" });\n          }\n          return;\n        }\n\n        const focusables = getFocusableElements(popup, true);\n        const index = getEnterDefaultFocusedIndex({\n          focusLast: focusLast.current,\n          focusables,\n          currentFocusIndex: currentFocusIndex.current,\n        });\n        focusLast.current = false;\n        currentFocusIndex.current = index;\n\n        const option = focusables[index];\n        if (!option) {\n          return;\n        }\n\n        onFocusChange({\n          index,\n          element: option,\n        });\n\n        option.scrollIntoView({ block: \"nearest\" });\n        setActiveDescendantId(option.id || \"\");\n      };\n    const handleExiting =\n      (callback: TransitionExitHandler = noop, skipped: boolean) =>\n      (): void => {\n        callback();\n\n        if (!skipped) {\n          // since the menu is unmounted or set to hidden while not visible, need\n          // to clear the aria-activedescendant and current focus index when\n          // hiding\n          currentFocusIndex.current = -1;\n          setActiveDescendantId(\"\");\n        }\n      };\n\n    const isTransitionCompleteSkipped =\n      !disableTransition && !TRANSITION_CONFIG.disabled;\n\n    return {\n      onEntering: handleEntering(onEntering, false),\n      onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),\n      onExiting: handleExiting(onExiting, false),\n      onExited: handleExiting(onExited, isTransitionCompleteSkipped),\n    };\n  };\n\n  const popupProps: ComboboxWidgetPopupProps<PopupEl> = {\n    id: popupId,\n    ref: popupRefCallback,\n    role: popup,\n  };\n\n  return {\n    show,\n    hide,\n    visible,\n    setVisible,\n    focusLast,\n    popupRef,\n    popupProps,\n    comboboxRef,\n    comboboxProps: {\n      ...movementProps,\n      \"aria-controls\": popupId,\n      \"aria-disabled\": disabled || undefined,\n      \"aria-expanded\": visible,\n      \"aria-haspopup\": popup,\n      id: comboboxId,\n      ref: comboboxRefCallback,\n      role: \"combobox\",\n    },\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n    getTransitionCallbacks,\n    getMenuProps(props = {}) {\n      const { sheetProps, disableTransition } = props;\n      return {\n        anchor: BELOW_CENTER_ANCHOR,\n        width: \"min\",\n        fixedTo: comboboxRef,\n        ...props,\n        ...popupProps,\n        visible,\n        onRequestClose: hide,\n        ...getTransitionCallbacks(props),\n        sheetProps: {\n          ...sheetProps,\n          ...getTransitionCallbacks({\n            ...sheetProps,\n            disableTransition:\n              sheetProps?.disableTransition ?? disableTransition,\n          }),\n        },\n      };\n    },\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","BELOW_CENTER_ANCHOR","TRANSITION_CONFIG","useEnsuredId","useEnsuredRef","useToggle","tryToSubmitRelatedForm","noop","getNonDisabledOptions","container","querySelectorAll","useCombobox","options","form","popup","onClick","onFocus","onKeyDown","searchable","isNegativeOneAllowed","loopable","disabled","comboboxId","propComboboxId","comboboxRef","propComboboxRef","popupId","propPopupId","popupRef","propPopupRef","defaultVisible","onFocusChange","extendKeyDown","getFocusableElements","getEnterDefaultFocusedIndex","getDefaultFocusedIndex","toggled","visible","enable","show","disable","hide","setToggled","setVisible","comboboxRefCallback","popupRefCallback","focusLast","movementProps","movementContext","currentFocusIndex","activeDescendantId","setActiveDescendantId","event","movementData","isPropagationStopped","key","stopPropagation","preventDefault","current","programmatic","includeDisabled","tabIndexBehavior","getTransitionCallbacks","onEntered","onEntering","onExiting","onExited","disableTransition","handleEntering","callback","skipped","appearing","activeOption","document","getElementById","scrollIntoView","block","focusables","index","option","element","id","handleExiting","isTransitionCompleteSkipped","popupProps","ref","role","comboboxProps","undefined","getMenuProps","props","sheetProps","anchor","width","fixedTo","onRequestClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/form/useEditableCombobox.d.ts

@@ -1,15 +1,15 @@
 import { type BaseComboboxOptions, type ComboboxImplementation } from "./useCombobox.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface EditableComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface EditableComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useEditableCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options?: EditableComboboxOptions<ComboboxEl, PopupEl>): EditableComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useEditableCombobox.js

@@ -4,7 +4,7 @@ import { isTypeEvent } from "../movement/utils.js";
 import { useCombobox } from "./useCombobox.js";
 import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useEditableCombobox(options = {}) {
     const focusFirst = useRef(false);
     const { getMenuProps, ...combobox } = useCombobox({
@@ -91,6 +91,9 @@ import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
         ...combobox,
         getMenuProps (props) {
             return {
+                // override the inherited renderAsSheet context since the sheet makes it
+                // so the user can't actually type in the combobox
+                renderAsSheet: false,
                 preventOverlap: true,
                 ...getMenuProps(props)
             };

package/dist/form/useEditableCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useEditableCombobox.ts"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport { isTypeEvent } from \"../movement/utils.js\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\n} from \"./useCombobox.js\";\nimport { isChangeableHTMLElement, triggerManualChangeEvent } from \"./utils.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface EditableComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface EditableComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useEditableCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}\n): EditableComboboxImplementation<ComboboxEl, PopupEl> {\n  const focusFirst = useRef(false);\n  const { getMenuProps, ...combobox } = useCombobox({\n    ...options,\n    loopable: true,\n    searchable: false,\n    isNegativeOneAllowed: true,\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast, focusables, currentFocusIndex } = options;\n      if (focusFirst.current) {\n        focusFirst.current = false;\n        return 0;\n      }\n\n      if (focusLast) {\n        return focusables.length - 1;\n      }\n\n      return currentFocusIndex;\n    },\n    extendKeyDown(movementData) {\n      const {\n        event,\n        show,\n        hide,\n        visible,\n        currentFocusIndex,\n        setActiveDescendantId,\n      } = movementData;\n\n      const resetFocus = (): void => {\n        currentFocusIndex.current = -1;\n        setActiveDescendantId(\"\");\n      };\n\n      switch (event.key) {\n        case \"Escape\":\n          if (!visible && isChangeableHTMLElement(event.currentTarget)) {\n            event.preventDefault();\n            event.stopPropagation();\n            triggerManualChangeEvent(event.currentTarget, \"\");\n          }\n          break;\n        case \"Home\":\n        case \"End\":\n          // do not attempt to jump to the start or end of the listbox so\n          // natural text editing occurs\n          event.stopPropagation();\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowUp\":\n          // Note: The non-altKey version is handled in the `useCombobox` hook\n          //\n          // if the popup is available and the altKey was pressed, return focus\n          // to the combobox without closing. If the focus was already on the\n          // combobox, hide the popup\n          if (visible && event.altKey) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (currentFocusIndex.current !== -1) {\n              resetFocus();\n            } else {\n              hide();\n            }\n          }\n          break;\n        case \"ArrowDown\":\n          // if the popup is available, display the popup keep the focus on the\n          // combobox if the altKey was pressed. Otherwise, move focus into the\n          // listbox\n          if (!visible) {\n            event.preventDefault();\n            event.stopPropagation();\n            focusFirst.current = !event.altKey;\n            show();\n          }\n          break;\n        default:\n          if (isTypeEvent(event)) {\n            show();\n            resetFocus();\n          }\n      }\n    },\n  });\n\n  return {\n    ...combobox,\n    getMenuProps(props) {\n      return {\n        preventOverlap: true,\n        ...getMenuProps(props),\n      };\n    },\n  };\n}\n"],"names":["useRef","isTypeEvent","useCombobox","isChangeableHTMLElement","triggerManualChangeEvent","useEditableCombobox","options","focusFirst","getMenuProps","combobox","loopable","searchable","isNegativeOneAllowed","getEnterDefaultFocusedIndex","focusLast","focusables","currentFocusIndex","current","length","extendKeyDown","movementData","event","show","hide","visible","setActiveDescendantId","resetFocus","key","currentTarget","preventDefault","stopPropagation","altKey","props","preventOverlap"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SACEC,WAAW,QAGN,mBAAmB;AAC1B,SAASC,uBAAuB,EAAEC,wBAAwB,QAAQ,aAAa;AAkB/E;;CAEC,GACD,OAAO,SAASC,oBAIdC,UAAwD,CAAC,CAAC;IAE1D,MAAMC,aAAaP,OAAO;IAC1B,MAAM,EAAEQ,YAAY,EAAE,GAAGC,UAAU,GAAGP,YAAY;QAChD,GAAGI,OAAO;QACVI,UAAU;QACVC,YAAY;QACZC,sBAAsB;QACtBC,6BAA4BP,OAAO;YACjC,MAAM,EAAEQ,SAAS,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGV;YACrD,IAAIC,WAAWU,OAAO,EAAE;gBACtBV,WAAWU,OAAO,GAAG;gBACrB,OAAO;YACT;YAEA,IAAIH,WAAW;gBACb,OAAOC,WAAWG,MAAM,GAAG;YAC7B;YAEA,OAAOF;QACT;QACAG,eAAcC,YAAY;YACxB,MAAM,EACJC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPR,iBAAiB,EACjBS,qBAAqB,EACtB,GAAGL;YAEJ,MAAMM,aAAa;gBACjBV,kBAAkBC,OAAO,GAAG,CAAC;gBAC7BQ,sBAAsB;YACxB;YAEA,OAAQJ,MAAMM,GAAG;gBACf,KAAK;oBACH,IAAI,CAACH,WAAWrB,wBAAwBkB,MAAMO,aAAa,GAAG;wBAC5DP,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrB1B,yBAAyBiB,MAAMO,aAAa,EAAE;oBAChD;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,+DAA+D;oBAC/D,8BAA8B;oBAC9BP,MAAMS,eAAe;oBACrB,IAAIN,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,IAAIF,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,EAAE;oBACF,qEAAqE;oBACrE,mEAAmE;oBACnE,2BAA2B;oBAC3B,IAAIF,WAAWH,MAAMU,MAAM,EAAE;wBAC3BV,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBAErB,IAAId,kBAAkBC,OAAO,KAAK,CAAC,GAAG;4BACpCS;wBACF,OAAO;4BACLH;wBACF;oBACF;oBACA;gBACF,KAAK;oBACH,qEAAqE;oBACrE,qEAAqE;oBACrE,UAAU;oBACV,IAAI,CAACC,SAAS;wBACZH,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrBvB,WAAWU,OAAO,GAAG,CAACI,MAAMU,MAAM;wBAClCT;oBACF;oBACA;gBACF;oBACE,IAAIrB,YAAYoB,QAAQ;wBACtBC;wBACAI;oBACF;YACJ;QACF;IACF;IAEA,OAAO;QACL,GAAGjB,QAAQ;QACXD,cAAawB,KAAK;YAChB,OAAO;gBACLC,gBAAgB;gBAChB,GAAGzB,aAAawB,MAAM;YACxB;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useEditableCombobox.ts"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport { isTypeEvent } from \"../movement/utils.js\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\n} from \"./useCombobox.js\";\nimport { isChangeableHTMLElement, triggerManualChangeEvent } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport function useEditableCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}\n): EditableComboboxImplementation<ComboboxEl, PopupEl> {\n  const focusFirst = useRef(false);\n  const { getMenuProps, ...combobox } = useCombobox({\n    ...options,\n    loopable: true,\n    searchable: false,\n    isNegativeOneAllowed: true,\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast, focusables, currentFocusIndex } = options;\n      if (focusFirst.current) {\n        focusFirst.current = false;\n        return 0;\n      }\n\n      if (focusLast) {\n        return focusables.length - 1;\n      }\n\n      return currentFocusIndex;\n    },\n    extendKeyDown(movementData) {\n      const {\n        event,\n        show,\n        hide,\n        visible,\n        currentFocusIndex,\n        setActiveDescendantId,\n      } = movementData;\n\n      const resetFocus = (): void => {\n        currentFocusIndex.current = -1;\n        setActiveDescendantId(\"\");\n      };\n\n      switch (event.key) {\n        case \"Escape\":\n          if (!visible && isChangeableHTMLElement(event.currentTarget)) {\n            event.preventDefault();\n            event.stopPropagation();\n            triggerManualChangeEvent(event.currentTarget, \"\");\n          }\n          break;\n        case \"Home\":\n        case \"End\":\n          // do not attempt to jump to the start or end of the listbox so\n          // natural text editing occurs\n          event.stopPropagation();\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowUp\":\n          // Note: The non-altKey version is handled in the `useCombobox` hook\n          //\n          // if the popup is available and the altKey was pressed, return focus\n          // to the combobox without closing. If the focus was already on the\n          // combobox, hide the popup\n          if (visible && event.altKey) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (currentFocusIndex.current !== -1) {\n              resetFocus();\n            } else {\n              hide();\n            }\n          }\n          break;\n        case \"ArrowDown\":\n          // if the popup is available, display the popup keep the focus on the\n          // combobox if the altKey was pressed. Otherwise, move focus into the\n          // listbox\n          if (!visible) {\n            event.preventDefault();\n            event.stopPropagation();\n            focusFirst.current = !event.altKey;\n            show();\n          }\n          break;\n        default:\n          if (isTypeEvent(event)) {\n            show();\n            resetFocus();\n          }\n      }\n    },\n  });\n\n  return {\n    ...combobox,\n    getMenuProps(props) {\n      return {\n        // override the inherited renderAsSheet context since the sheet makes it\n        // so the user can't actually type in the combobox\n        renderAsSheet: false,\n        preventOverlap: true,\n        ...getMenuProps(props),\n      };\n    },\n  };\n}\n"],"names":["useRef","isTypeEvent","useCombobox","isChangeableHTMLElement","triggerManualChangeEvent","useEditableCombobox","options","focusFirst","getMenuProps","combobox","loopable","searchable","isNegativeOneAllowed","getEnterDefaultFocusedIndex","focusLast","focusables","currentFocusIndex","current","length","extendKeyDown","movementData","event","show","hide","visible","setActiveDescendantId","resetFocus","key","currentTarget","preventDefault","stopPropagation","altKey","props","renderAsSheet","preventOverlap"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SACEC,WAAW,QAGN,mBAAmB;AAC1B,SAASC,uBAAuB,EAAEC,wBAAwB,QAAQ,aAAa;AAkB/E;;CAEC,GACD,OAAO,SAASC,oBAIdC,UAAwD,CAAC,CAAC;IAE1D,MAAMC,aAAaP,OAAO;IAC1B,MAAM,EAAEQ,YAAY,EAAE,GAAGC,UAAU,GAAGP,YAAY;QAChD,GAAGI,OAAO;QACVI,UAAU;QACVC,YAAY;QACZC,sBAAsB;QACtBC,6BAA4BP,OAAO;YACjC,MAAM,EAAEQ,SAAS,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGV;YACrD,IAAIC,WAAWU,OAAO,EAAE;gBACtBV,WAAWU,OAAO,GAAG;gBACrB,OAAO;YACT;YAEA,IAAIH,WAAW;gBACb,OAAOC,WAAWG,MAAM,GAAG;YAC7B;YAEA,OAAOF;QACT;QACAG,eAAcC,YAAY;YACxB,MAAM,EACJC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPR,iBAAiB,EACjBS,qBAAqB,EACtB,GAAGL;YAEJ,MAAMM,aAAa;gBACjBV,kBAAkBC,OAAO,GAAG,CAAC;gBAC7BQ,sBAAsB;YACxB;YAEA,OAAQJ,MAAMM,GAAG;gBACf,KAAK;oBACH,IAAI,CAACH,WAAWrB,wBAAwBkB,MAAMO,aAAa,GAAG;wBAC5DP,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrB1B,yBAAyBiB,MAAMO,aAAa,EAAE;oBAChD;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,+DAA+D;oBAC/D,8BAA8B;oBAC9BP,MAAMS,eAAe;oBACrB,IAAIN,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,IAAIF,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,EAAE;oBACF,qEAAqE;oBACrE,mEAAmE;oBACnE,2BAA2B;oBAC3B,IAAIF,WAAWH,MAAMU,MAAM,EAAE;wBAC3BV,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBAErB,IAAId,kBAAkBC,OAAO,KAAK,CAAC,GAAG;4BACpCS;wBACF,OAAO;4BACLH;wBACF;oBACF;oBACA;gBACF,KAAK;oBACH,qEAAqE;oBACrE,qEAAqE;oBACrE,UAAU;oBACV,IAAI,CAACC,SAAS;wBACZH,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrBvB,WAAWU,OAAO,GAAG,CAACI,MAAMU,MAAM;wBAClCT;oBACF;oBACA;gBACF;oBACE,IAAIrB,YAAYoB,QAAQ;wBACtBC;wBACAI;oBACF;YACJ;QACF;IACF;IAEA,OAAO;QACL,GAAGjB,QAAQ;QACXD,cAAawB,KAAK;YAChB,OAAO;gBACL,wEAAwE;gBACxE,kDAAkD;gBAClDC,eAAe;gBACfC,gBAAgB;gBAChB,GAAG1B,aAAawB,MAAM;YACxB;QACF;IACF;AACF"}