@react-md/core 6.2.0 → 6.3.0

package/dist/form/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset: () => void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-Za-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","isCounter","messageProps","length","children"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface TextFieldHookComponentOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> {\n  /**\n   * An optional id to use for the `TextField`, `Password`, or `TextArea` that\n   * is also used to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea`, or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * @since 6.3.0\n   */\n  form?: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Set to `true` to prevent the state from automatically resetting with a\n   * form's `reset` event.\n   *\n   * @defaultValue `false`\n   * @since 6.3.0\n   */\n  disableReset?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends TextFieldValidationOptions,\n    TextFieldHookComponentOptions<E>,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset: () => void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-Za-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    form,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    disableReset,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  useFormReset({\n    form,\n    onReset: disableReset ? undefined : reset,\n    elementRef: fieldRef,\n  });\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","useFormReset","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","form","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","disableReset","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","isCounter","messageProps","length","children","onReset","elementRef"],"mappings":"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"}

package/dist/interaction/utils.d.ts

@@ -1,5 +1,19 @@
 import { type KeyboardEvent, type MouseEvent, type TouchEvent } from "react";
+import { type Point } from "../types.js";
 import { type ElementInteractionState, type RippleState, type RippleStyle } from "./types.js";
+/**
+ * @internal
+ * @since 6.3.0
+ */
+interface GetRadiusOptions extends Point {
+    height: number;
+    width: number;
+}
+/**
+ * @internal
+ * @since 6.3.0
+ */
+export declare function getRadius(options: GetRadiusOptions): number;
 /** @internal */
 export declare function getRippleStyle(event: MouseEvent<HTMLElement> | TouchEvent<HTMLElement> | KeyboardEvent<HTMLElement>, programmatic: boolean): RippleStyle;
 /** @internal */

package/dist/interaction/utils.js

@@ -1,17 +1,23 @@
 import { findSizingContainer } from "../positioning/utils.js";
-/** @internal */ function calcHypotenuse(a, b) {
-    return Math.sqrt(a * a + b * b);
-}
+import { calcHypotenuse } from "../utils/trigonometry.js";
 /**
- * Gets the current radius for a ripple based on the x and y page dimensions
- * as well as the size of the element.
- *
- * This is really just in a separate file so I can easily mock this and write
- * tests.
- *
  * @internal
- */ function getRadius(x, y, offsetWidth, offsetHeight) {
-    return Math.max(calcHypotenuse(x, y), calcHypotenuse(offsetWidth - x, y), calcHypotenuse(offsetWidth - x, offsetHeight - y), calcHypotenuse(x, offsetHeight - y));
+ * @since 6.3.0
+ */ export function getRadius(options) {
+    const { x, y, height, width } = options;
+    return Math.max(calcHypotenuse({
+        x,
+        y
+    }), calcHypotenuse({
+        x: width - x,
+        y
+    }), calcHypotenuse({
+        x: width - x,
+        y: height - y
+    }), calcHypotenuse({
+        x,
+        y: height - y
+    }));
 }
 /** @internal */ export function getRippleStyle(event, programmatic) {
     const element = findSizingContainer(event.currentTarget) || event.currentTarget;
@@ -33,7 +39,12 @@ import { findSizingContainer } from "../positioning/utils.js";
         x = pageX - (left + window.scrollX);
         y = pageY - (top + window.scrollY);
     }
-    const radius = getRadius(x, y, width, height);
+    const radius = getRadius({
+        x,
+        y,
+        width,
+        height
+    });
     const size = radius * 2;
     return {
         left: x - radius,

package/dist/interaction/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/utils.ts"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type TouchEvent } from \"react\";\n\nimport { findSizingContainer } from \"../positioning/utils.js\";\nimport {\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\n\n/** @internal */\nfunction calcHypotenuse(a: number, b: number): number {\n  return Math.sqrt(a * a + b * b);\n}\n\n/**\n * Gets the current radius for a ripple based on the x and y page dimensions\n * as well as the size of the element.\n *\n * This is really just in a separate file so I can easily mock this and write\n * tests.\n *\n * @internal\n */\nfunction getRadius(\n  x: number,\n  y: number,\n  offsetWidth: number,\n  offsetHeight: number\n): number {\n  return Math.max(\n    calcHypotenuse(x, y),\n    calcHypotenuse(offsetWidth - x, y),\n    calcHypotenuse(offsetWidth - x, offsetHeight - y),\n    calcHypotenuse(x, offsetHeight - y)\n  );\n}\n\n/** @internal */\nexport function getRippleStyle(\n  event:\n    | MouseEvent<HTMLElement>\n    | TouchEvent<HTMLElement>\n    | KeyboardEvent<HTMLElement>,\n  programmatic: boolean\n): RippleStyle {\n  const element =\n    findSizingContainer(event.currentTarget) || event.currentTarget;\n  const rect = element.getBoundingClientRect();\n  const { left, top, height, width } = rect;\n\n  let x: number;\n  let y: number;\n  if (\"key\" in event || programmatic) {\n    x = width / 2;\n    y = height / 2;\n  } else {\n    let pageX: number;\n    let pageY: number;\n    if (\"touches\" in event) {\n      ({ pageX, pageY } = event.touches[0]);\n    } else {\n      ({ pageX, pageY } = event);\n    }\n\n    x = pageX - (left + window.scrollX);\n    y = pageY - (top + window.scrollY);\n  }\n\n  const radius = getRadius(x, y, width, height);\n  const size = radius * 2;\n\n  return {\n    left: x - radius,\n    top: y - radius,\n    height: size,\n    width: size,\n  };\n}\n\n/**\n * This is used to set the `exiting` state after a normal \"touch\" duration.\n * 300ms seemed like a good threshold since it is the majority of the scaling\n * duration (450ms)\n */\nconst ENTER_DELAY = 300;\n\n/** @internal */\nexport function releaseRipple(\n  state: ElementInteractionState\n): ElementInteractionState {\n  // find the first non-exiting ripple which should now be released\n  const i = state.ripples.findIndex((ripple) => !ripple.exiting);\n  if (i === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  const ripple = ripples[i];\n  ripples[i] = {\n    ...ripple,\n    exiting: ripple.entered || Date.now() - ripple.startTime > ENTER_DELAY,\n  };\n  return { pressed: false, ripples };\n}\n\n/** @internal */\ninterface UpdateRipplesStateOptions {\n  type: \"entered\" | \"exited\";\n  state: ElementInteractionState;\n  ripple: RippleState;\n  holding: boolean;\n}\n\n/** @internal */\nexport function updateRipplesState(\n  options: UpdateRipplesStateOptions\n): ElementInteractionState {\n  const { type, ripple, state, holding } = options;\n\n  const rippleIndex = state.ripples.findIndex((r) => r === ripple);\n  if (rippleIndex === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  if (type === \"exited\") {\n    ripples.splice(rippleIndex, 1);\n  } else {\n    const exiting = !holding || Date.now() - ripple.startTime > ENTER_DELAY;\n    ripples[rippleIndex] = {\n      ...ripple,\n      exiting,\n      entered: true,\n    };\n  }\n\n  return { ...state, ripples };\n}\n"],"names":["findSizingContainer","calcHypotenuse","a","b","Math","sqrt","getRadius","x","y","offsetWidth","offsetHeight","max","getRippleStyle","event","programmatic","element","currentTarget","rect","getBoundingClientRect","left","top","height","width","pageX","pageY","touches","window","scrollX","scrollY","radius","size","ENTER_DELAY","releaseRipple","state","i","ripples","findIndex","ripple","exiting","slice","entered","Date","now","startTime","pressed","updateRipplesState","options","type","holding","rippleIndex","r","splice"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,0BAA0B;AAO9D,cAAc,GACd,SAASC,eAAeC,CAAS,EAAEC,CAAS;IAC1C,OAAOC,KAAKC,IAAI,CAACH,IAAIA,IAAIC,IAAIA;AAC/B;AAEA;;;;;;;;CAQC,GACD,SAASG,UACPC,CAAS,EACTC,CAAS,EACTC,WAAmB,EACnBC,YAAoB;IAEpB,OAAON,KAAKO,GAAG,CACbV,eAAeM,GAAGC,IAClBP,eAAeQ,cAAcF,GAAGC,IAChCP,eAAeQ,cAAcF,GAAGG,eAAeF,IAC/CP,eAAeM,GAAGG,eAAeF;AAErC;AAEA,cAAc,GACd,OAAO,SAASI,eACdC,KAG8B,EAC9BC,YAAqB;IAErB,MAAMC,UACJf,oBAAoBa,MAAMG,aAAa,KAAKH,MAAMG,aAAa;IACjE,MAAMC,OAAOF,QAAQG,qBAAqB;IAC1C,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAErC,IAAIV;IACJ,IAAIC;IACJ,IAAI,SAASK,SAASC,cAAc;QAClCP,IAAIe,QAAQ;QACZd,IAAIa,SAAS;IACf,OAAO;QACL,IAAIE;QACJ,IAAIC;QACJ,IAAI,aAAaX,OAAO;YACrB,CAAA,EAAEU,KAAK,EAAEC,KAAK,EAAE,GAAGX,MAAMY,OAAO,CAAC,EAAE,AAAD;QACrC,OAAO;YACJ,CAAA,EAAEF,KAAK,EAAEC,KAAK,EAAE,GAAGX,KAAI;QAC1B;QAEAN,IAAIgB,QAASJ,CAAAA,OAAOO,OAAOC,OAAO,AAAD;QACjCnB,IAAIgB,QAASJ,CAAAA,MAAMM,OAAOE,OAAO,AAAD;IAClC;IAEA,MAAMC,SAASvB,UAAUC,GAAGC,GAAGc,OAAOD;IACtC,MAAMS,OAAOD,SAAS;IAEtB,OAAO;QACLV,MAAMZ,IAAIsB;QACVT,KAAKZ,IAAIqB;QACTR,QAAQS;QACRR,OAAOQ;IACT;AACF;AAEA;;;;CAIC,GACD,MAAMC,cAAc;AAEpB,cAAc,GACd,OAAO,SAASC,cACdC,KAA8B;IAE9B,iEAAiE;IACjE,MAAMC,IAAID,MAAME,OAAO,CAACC,SAAS,CAAC,CAACC,SAAW,CAACA,OAAOC,OAAO;IAC7D,IAAIJ,MAAM,CAAC,GAAG;QACZ,OAAOD;IACT;IAEA,MAAME,UAAUF,MAAME,OAAO,CAACI,KAAK;IACnC,MAAMF,SAASF,OAAO,CAACD,EAAE;IACzBC,OAAO,CAACD,EAAE,GAAG;QACX,GAAGG,MAAM;QACTC,SAASD,OAAOG,OAAO,IAAIC,KAAKC,GAAG,KAAKL,OAAOM,SAAS,GAAGZ;IAC7D;IACA,OAAO;QAAEa,SAAS;QAAOT;IAAQ;AACnC;AAUA,cAAc,GACd,OAAO,SAASU,mBACdC,OAAkC;IAElC,MAAM,EAAEC,IAAI,EAAEV,MAAM,EAAEJ,KAAK,EAAEe,OAAO,EAAE,GAAGF;IAEzC,MAAMG,cAAchB,MAAME,OAAO,CAACC,SAAS,CAAC,CAACc,IAAMA,MAAMb;IACzD,IAAIY,gBAAgB,CAAC,GAAG;QACtB,OAAOhB;IACT;IAEA,MAAME,UAAUF,MAAME,OAAO,CAACI,KAAK;IACnC,IAAIQ,SAAS,UAAU;QACrBZ,QAAQgB,MAAM,CAACF,aAAa;IAC9B,OAAO;QACL,MAAMX,UAAU,CAACU,WAAWP,KAAKC,GAAG,KAAKL,OAAOM,SAAS,GAAGZ;QAC5DI,OAAO,CAACc,YAAY,GAAG;YACrB,GAAGZ,MAAM;YACTC;YACAE,SAAS;QACX;IACF;IAEA,OAAO;QAAE,GAAGP,KAAK;QAAEE;IAAQ;AAC7B"}
+{"version":3,"sources":["../../src/interaction/utils.ts"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type TouchEvent } from \"react\";\n\nimport { findSizingContainer } from \"../positioning/utils.js\";\nimport { type Point } from \"../types.js\";\nimport { calcHypotenuse } from \"../utils/trigonometry.js\";\nimport {\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\n\n/**\n * @internal\n * @since 6.3.0\n */\ninterface GetRadiusOptions extends Point {\n  height: number;\n  width: number;\n}\n\n/**\n * @internal\n * @since 6.3.0\n */\nexport function getRadius(options: GetRadiusOptions): number {\n  const { x, y, height, width } = options;\n\n  return Math.max(\n    calcHypotenuse({ x, y }),\n    calcHypotenuse({ x: width - x, y }),\n    calcHypotenuse({ x: width - x, y: height - y }),\n    calcHypotenuse({ x, y: height - y })\n  );\n}\n\n/** @internal */\nexport function getRippleStyle(\n  event:\n    | MouseEvent<HTMLElement>\n    | TouchEvent<HTMLElement>\n    | KeyboardEvent<HTMLElement>,\n  programmatic: boolean\n): RippleStyle {\n  const element =\n    findSizingContainer(event.currentTarget) || event.currentTarget;\n  const rect = element.getBoundingClientRect();\n  const { left, top, height, width } = rect;\n\n  let x: number;\n  let y: number;\n  if (\"key\" in event || programmatic) {\n    x = width / 2;\n    y = height / 2;\n  } else {\n    let pageX: number;\n    let pageY: number;\n    if (\"touches\" in event) {\n      ({ pageX, pageY } = event.touches[0]);\n    } else {\n      ({ pageX, pageY } = event);\n    }\n\n    x = pageX - (left + window.scrollX);\n    y = pageY - (top + window.scrollY);\n  }\n\n  const radius = getRadius({ x, y, width, height });\n  const size = radius * 2;\n\n  return {\n    left: x - radius,\n    top: y - radius,\n    height: size,\n    width: size,\n  };\n}\n\n/**\n * This is used to set the `exiting` state after a normal \"touch\" duration.\n * 300ms seemed like a good threshold since it is the majority of the scaling\n * duration (450ms)\n */\nconst ENTER_DELAY = 300;\n\n/** @internal */\nexport function releaseRipple(\n  state: ElementInteractionState\n): ElementInteractionState {\n  // find the first non-exiting ripple which should now be released\n  const i = state.ripples.findIndex((ripple) => !ripple.exiting);\n  if (i === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  const ripple = ripples[i];\n  ripples[i] = {\n    ...ripple,\n    exiting: ripple.entered || Date.now() - ripple.startTime > ENTER_DELAY,\n  };\n  return { pressed: false, ripples };\n}\n\n/** @internal */\ninterface UpdateRipplesStateOptions {\n  type: \"entered\" | \"exited\";\n  state: ElementInteractionState;\n  ripple: RippleState;\n  holding: boolean;\n}\n\n/** @internal */\nexport function updateRipplesState(\n  options: UpdateRipplesStateOptions\n): ElementInteractionState {\n  const { type, ripple, state, holding } = options;\n\n  const rippleIndex = state.ripples.findIndex((r) => r === ripple);\n  if (rippleIndex === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  if (type === \"exited\") {\n    ripples.splice(rippleIndex, 1);\n  } else {\n    const exiting = !holding || Date.now() - ripple.startTime > ENTER_DELAY;\n    ripples[rippleIndex] = {\n      ...ripple,\n      exiting,\n      entered: true,\n    };\n  }\n\n  return { ...state, ripples };\n}\n"],"names":["findSizingContainer","calcHypotenuse","getRadius","options","x","y","height","width","Math","max","getRippleStyle","event","programmatic","element","currentTarget","rect","getBoundingClientRect","left","top","pageX","pageY","touches","window","scrollX","scrollY","radius","size","ENTER_DELAY","releaseRipple","state","i","ripples","findIndex","ripple","exiting","slice","entered","Date","now","startTime","pressed","updateRipplesState","type","holding","rippleIndex","r","splice"],"mappings":"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"}

package/dist/menu/MenuBar.js

@@ -49,6 +49,7 @@ import { MenuBarProvider, useMenuBarProvider } from "./useMenuBarProvider.js";
     });
     const { activeId, enableHoverMode } = menuBarContext;
     const { movementProps, movementContext } = useKeyboardMovementProvider({
+        ref,
         onClick,
         onFocus,
         onKeyDown,
@@ -70,7 +71,6 @@ import { MenuBarProvider, useMenuBarProvider } from "./useMenuBarProvider.js";
             children: /*#__PURE__*/ _jsx(List, {
                 ...remaining,
                 ...movementProps,
-                ref: ref,
                 role: "menubar",
                 horizontal: horizontal,
                 children: children

package/dist/menu/MenuBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { List, type ListProps } from \"../list/List.js\";\nimport {\n  KeyboardMovementProvider,\n  useKeyboardMovementProvider,\n} from \"../movement/useKeyboardMovementProvider.js\";\nimport { MenuBarProvider, useMenuBarProvider } from \"./useMenuBarProvider.js\";\n\nexport interface MenuBarProps extends Omit<ListProps, \"role\"> {\n  /**\n   * @defaultValue `true`\n   */\n  horizontal?: boolean;\n\n  /**\n   * Set this to a number greater than 0 to allow opening dropdown menus within\n   * the menubar after hovering for the duration in milliseconds. Once a menu\n   * becomes visible within the menubar, all subsequent menus will become\n   * visible immediately on hover as well until the hover mode is ended.\n   *\n   * For example:\n   *\n   * - `0` - the dropdown menus become visible immediately on hover\n   * - `1000` - the first dropdown menu becomes visible after hovering for 1\n   *   second\n   * - `undefined` - the hover mode can only be activate after a click with\n   *   mouse, touch, or keyboard\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuBar } from \"@react-md/core/menu/MenuBar\";\n * import { MenuItem } from \"@react-md/core/menu/MenuItem\";\n * import type { ReactElement } from \"react\";\n *\n * export function SimpleExample(): ReactElement {\n *   return (\n *     <MenuBar>\n *       <DropdownMenu buttonChildren=\"Item 1\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 3</MenuItem>\n *       </DropdownMenu>\n *       <DropdownMenu buttonChildren=\"Item 2\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 3</MenuItem>\n *       </DropdownMenu>\n *       <DropdownMenu buttonChildren=\"Item 3\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 4</MenuItem>\n *       </DropdownMenu>\n *     </MenuBar>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Combined with the previous `MenuBarWidget`\n */\nexport const MenuBar = forwardRef<HTMLUListElement, MenuBarProps>(\n  function MenuBar(props, ref) {\n    const {\n      onClick,\n      onFocus,\n      onKeyDown,\n      horizontal = true,\n      hoverTimeout,\n      children,\n      ...remaining\n    } = props;\n    const menuBarContext = useMenuBarProvider({\n      root: true,\n      menubar: true,\n      hoverTimeout,\n    });\n    const { activeId, enableHoverMode } = menuBarContext;\n    const { movementProps, movementContext } = useKeyboardMovementProvider({\n      onClick,\n      onFocus,\n      onKeyDown,\n      loopable: true,\n      searchable: true,\n      horizontal,\n      includeDisabled: true,\n      tabIndexBehavior: \"roving\",\n      onFocusChange(event) {\n        if (activeId) {\n          enableHoverMode(event.element.id);\n        }\n      },\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <MenuBarProvider value={menuBarContext}>\n          <List\n            {...remaining}\n            {...movementProps}\n            ref={ref}\n            role=\"menubar\"\n            horizontal={horizontal}\n          >\n            {children}\n          </List>\n        </MenuBarProvider>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","List","KeyboardMovementProvider","useKeyboardMovementProvider","MenuBarProvider","useMenuBarProvider","MenuBar","props","ref","onClick","onFocus","onKeyDown","horizontal","hoverTimeout","children","remaining","menuBarContext","root","menubar","activeId","enableHoverMode","movementProps","movementContext","loopable","searchable","includeDisabled","tabIndexBehavior","onFocusChange","event","element","id","value","role"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SACEC,wBAAwB,EACxBC,2BAA2B,QACtB,6CAA6C;AACpD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,0BAA0B;AA2B9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,GACD,OAAO,MAAMC,wBAAUN,WACrB,SAASM,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,aAAa,IAAI,EACjBC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMS,iBAAiBX,mBAAmB;QACxCY,MAAM;QACNC,SAAS;QACTL;IACF;IACA,MAAM,EAAEM,QAAQ,EAAEC,eAAe,EAAE,GAAGJ;IACtC,MAAM,EAAEK,aAAa,EAAEC,eAAe,EAAE,GAAGnB,4BAA4B;QACrEM;QACAC;QACAC;QACAY,UAAU;QACVC,YAAY;QACZZ;QACAa,iBAAiB;QACjBC,kBAAkB;QAClBC,eAAcC,KAAK;YACjB,IAAIT,UAAU;gBACZC,gBAAgBQ,MAAMC,OAAO,CAACC,EAAE;YAClC;QACF;IACF;IAEA,qBACE,KAAC5B;QAAyB6B,OAAOT;kBAC/B,cAAA,KAAClB;YAAgB2B,OAAOf;sBACtB,cAAA,KAACf;gBACE,GAAGc,SAAS;gBACZ,GAAGM,aAAa;gBACjBb,KAAKA;gBACLwB,MAAK;gBACLpB,YAAYA;0BAEXE;;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/menu/MenuBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { List, type ListProps } from \"../list/List.js\";\nimport {\n  KeyboardMovementProvider,\n  useKeyboardMovementProvider,\n} from \"../movement/useKeyboardMovementProvider.js\";\nimport { MenuBarProvider, useMenuBarProvider } from \"./useMenuBarProvider.js\";\n\nexport interface MenuBarProps extends Omit<ListProps, \"role\"> {\n  /**\n   * @defaultValue `true`\n   */\n  horizontal?: boolean;\n\n  /**\n   * Set this to a number greater than 0 to allow opening dropdown menus within\n   * the menubar after hovering for the duration in milliseconds. Once a menu\n   * becomes visible within the menubar, all subsequent menus will become\n   * visible immediately on hover as well until the hover mode is ended.\n   *\n   * For example:\n   *\n   * - `0` - the dropdown menus become visible immediately on hover\n   * - `1000` - the first dropdown menu becomes visible after hovering for 1\n   *   second\n   * - `undefined` - the hover mode can only be activate after a click with\n   *   mouse, touch, or keyboard\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuBar } from \"@react-md/core/menu/MenuBar\";\n * import { MenuItem } from \"@react-md/core/menu/MenuItem\";\n * import type { ReactElement } from \"react\";\n *\n * export function SimpleExample(): ReactElement {\n *   return (\n *     <MenuBar>\n *       <DropdownMenu buttonChildren=\"Item 1\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 3</MenuItem>\n *       </DropdownMenu>\n *       <DropdownMenu buttonChildren=\"Item 2\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 3</MenuItem>\n *       </DropdownMenu>\n *       <DropdownMenu buttonChildren=\"Item 3\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 4</MenuItem>\n *       </DropdownMenu>\n *     </MenuBar>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Combined with the previous `MenuBarWidget`\n */\nexport const MenuBar = forwardRef<HTMLUListElement, MenuBarProps>(\n  function MenuBar(props, ref) {\n    const {\n      onClick,\n      onFocus,\n      onKeyDown,\n      horizontal = true,\n      hoverTimeout,\n      children,\n      ...remaining\n    } = props;\n    const menuBarContext = useMenuBarProvider({\n      root: true,\n      menubar: true,\n      hoverTimeout,\n    });\n    const { activeId, enableHoverMode } = menuBarContext;\n    const { movementProps, movementContext } = useKeyboardMovementProvider({\n      ref,\n      onClick,\n      onFocus,\n      onKeyDown,\n      loopable: true,\n      searchable: true,\n      horizontal,\n      includeDisabled: true,\n      tabIndexBehavior: \"roving\",\n      onFocusChange(event) {\n        if (activeId) {\n          enableHoverMode(event.element.id);\n        }\n      },\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <MenuBarProvider value={menuBarContext}>\n          <List\n            {...remaining}\n            {...movementProps}\n            role=\"menubar\"\n            horizontal={horizontal}\n          >\n            {children}\n          </List>\n        </MenuBarProvider>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","List","KeyboardMovementProvider","useKeyboardMovementProvider","MenuBarProvider","useMenuBarProvider","MenuBar","props","ref","onClick","onFocus","onKeyDown","horizontal","hoverTimeout","children","remaining","menuBarContext","root","menubar","activeId","enableHoverMode","movementProps","movementContext","loopable","searchable","includeDisabled","tabIndexBehavior","onFocusChange","event","element","id","value","role"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SACEC,wBAAwB,EACxBC,2BAA2B,QACtB,6CAA6C;AACpD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,0BAA0B;AA2B9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,GACD,OAAO,MAAMC,wBAAUN,WACrB,SAASM,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,aAAa,IAAI,EACjBC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMS,iBAAiBX,mBAAmB;QACxCY,MAAM;QACNC,SAAS;QACTL;IACF;IACA,MAAM,EAAEM,QAAQ,EAAEC,eAAe,EAAE,GAAGJ;IACtC,MAAM,EAAEK,aAAa,EAAEC,eAAe,EAAE,GAAGnB,4BAA4B;QACrEK;QACAC;QACAC;QACAC;QACAY,UAAU;QACVC,YAAY;QACZZ;QACAa,iBAAiB;QACjBC,kBAAkB;QAClBC,eAAcC,KAAK;YACjB,IAAIT,UAAU;gBACZC,gBAAgBQ,MAAMC,OAAO,CAACC,EAAE;YAClC;QACF;IACF;IAEA,qBACE,KAAC5B;QAAyB6B,OAAOT;kBAC/B,cAAA,KAAClB;YAAgB2B,OAAOf;sBACtB,cAAA,KAACf;gBACE,GAAGc,SAAS;gBACZ,GAAGM,aAAa;gBACjBW,MAAK;gBACLpB,YAAYA;0BAEXE;;;;AAKX,GACA"}

package/dist/menu/MenuItemTextField.d.ts

@@ -3,14 +3,13 @@ import { type TextFieldProps } from "../form/TextField.js";
 import { type PropsWithRef } from "../types.js";
 /**
  * @since 5.0.0
+ * @since 6.3.0 Removed the invalid `stretch` prop
  */
 export interface MenuItemTextFieldProps extends TextFieldProps {
     /**
      * Any additional props or a `ref` to apply to the surrounding `<li>` element.
      */
     liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;
-    /** @defaultValue `true` */
-    stretch?: boolean;
 }
 /**
  * **Client Component**

package/dist/menu/MenuItemTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type PropsWithRef } from \"../types.js\";\n\n/**\n * @since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}\n * @since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,SAAS,QAA6B,uBAAuB;AAgBtE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC7C,qBACE,KAACK;QACCC,MAAK;QACJ,GAAGJ,OAAO;QACXK,SAAS,CAACC;YACRN,SAASK,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWd,IAAI,+BAA+BM,SAASQ;kBAEvD,cAAA,KAACZ;YACE,GAAGM,SAAS;YACbH,KAAKA;YACLE,WAAW,CAACK;gBACVL,YAAYK;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}
+{"version":3,"sources":["../../src/menu/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type PropsWithRef } from \"../types.js\";\n\n/**\n * @since 5.0.0\n * @since 6.3.0 Removed the invalid `stretch` prop\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}\n * @since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,SAAS,QAA6B,uBAAuB;AActE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC7C,qBACE,KAACK;QACCC,MAAK;QACJ,GAAGJ,OAAO;QACXK,SAAS,CAACC;YACRN,SAASK,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWd,IAAI,+BAA+BM,SAASQ;kBAEvD,cAAA,KAACZ;YACE,GAAGM,SAAS;YACbH,KAAKA;YACLE,WAAW,CAACK;gBACVL,YAAYK;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}

package/dist/menu/MenuWidget.js

@@ -39,6 +39,7 @@ const noop = ()=>{
         defaultActiveId: id
     });
     const { movementProps, movementContext } = useKeyboardMovementProvider({
+        ref,
         onClick,
         onFocus (event) {
             onFocus(event);
@@ -67,10 +68,10 @@ const noop = ()=>{
                 ...isListbox ? {
                     onClick,
                     onFocus,
-                    onKeyDown
+                    onKeyDown,
+                    ref
                 } : movementProps,
                 id: id,
-                ref: ref,
                 role: role,
                 className: menu({
                     className,

package/dist/menu/MenuWidget.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useRef, useState } from \"react\";\n\nimport { List } from \"../list/List.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type NonNullMutableRef } from \"../types.js\";\nimport { type MenuListConvenienceProps } from \"./Menu.js\";\nimport { MenuWidgetKeyboardProvider } from \"./MenuWidgetKeyboardProvider.js\";\nimport { menu } from \"./styles.js\";\nimport {\n  MenuBarProvider,\n  useMenuBarContext,\n  useMenuBarProvider,\n} from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nexport interface MenuWidgetProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuListConvenienceProps {\n  isSheet: boolean;\n  horizontal: boolean;\n  disableElevation?: boolean;\n  cancelUnmountFocus: NonNullMutableRef<boolean>;\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * **Client Component**\n *\n * This component was added to support the listbox role and the `useId()` hook.\n * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the\n * next time the menu opens, so the aria-activedescendant will point to a\n * non-existing id\n *\n * @internal\n */\nexport const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(\n  function MenuWidget(props, ref) {\n    const {\n      id,\n      role = \"menu\",\n      className,\n      listStyle,\n      listClassName,\n      listProps,\n      children,\n      onClick,\n      onBlur = noop,\n      onFocus = noop,\n      onKeyDown = noop,\n      tabIndex = -1,\n      isSheet,\n      horizontal,\n      disableElevation,\n      cancelUnmountFocus,\n      getDefaultFocusedIndex,\n      ...remaining\n    } = props;\n    const isListbox = role === \"listbox\";\n    const { menubar } = useMenuBarContext();\n\n    // Since there is the possibility of other tab focusable elements within the\n    // sheet and the menu items are programmatically focused, the menu's\n    // tabIndex needs to be set to `-1` while one of the child menu items are\n    // focused. This allows Shift+Tab correctly focuses the previous focusable\n    // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up\n    // to the menu widget each time a new MenuItem is focused, only disable the\n    // focused state if the blur event is fired without another focus event\n    // within an animation frame.\n    const [sheetMenuFocused, setSheetMenuFocused] = useState(false);\n    const sheetBlurredFame = useRef(0);\n    const menuBarContext = useMenuBarProvider({\n      root: false,\n      menubar,\n      hoverTimeout: menubar ? 0 : undefined,\n      defaultActiveId: id,\n    });\n    const { movementProps, movementContext } = useKeyboardMovementProvider({\n      onClick,\n      onFocus(event) {\n        onFocus(event);\n\n        if (!isSheet) {\n          return;\n        }\n\n        window.cancelAnimationFrame(sheetBlurredFame.current);\n        setSheetMenuFocused(true);\n      },\n      onKeyDown,\n      horizontal,\n      loopable: true,\n      searchable: true,\n      programmatic: true,\n      includeDisabled: true,\n      getDefaultFocusedIndex,\n    });\n\n    return (\n      <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>\n        <MenuBarProvider value={menuBarContext}>\n          <div\n            aria-orientation={horizontal ? \"horizontal\" : undefined}\n            {...remaining}\n            {...(isListbox ? { onClick, onFocus, onKeyDown } : movementProps)}\n            id={id}\n            ref={ref}\n            role={role}\n            className={menu({\n              className,\n              elevated: !disableElevation && !isSheet,\n              horizontal,\n            })}\n            tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}\n            onBlur={(event) => {\n              onBlur(event);\n              if (!isSheet) {\n                return;\n              }\n\n              sheetBlurredFame.current = window.requestAnimationFrame(() => {\n                setSheetMenuFocused(false);\n              });\n            }}\n          >\n            <List\n              {...listProps}\n              style={listStyle ?? listProps?.style}\n              className={listClassName || listProps?.className}\n              horizontal={horizontal}\n              onClick={(event) => {\n                listProps?.onClick?.(event);\n\n                // this makes it so you can click on the menu/list without\n                // closing the menu\n                if (event.target === event.currentTarget) {\n                  event.stopPropagation();\n                }\n\n                // This might be a test only workaround since clicking links move focus\n                // somewhere else\n                if (event.target instanceof HTMLElement) {\n                  cancelUnmountFocus.current = event.currentTarget.contains(\n                    event.target.closest(\"a\")\n                  );\n                }\n              }}\n            >\n              {children}\n            </List>\n          </div>\n        </MenuBarProvider>\n      </MenuWidgetKeyboardProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","useState","List","useKeyboardMovementProvider","MenuWidgetKeyboardProvider","menu","MenuBarProvider","useMenuBarContext","useMenuBarProvider","noop","MenuWidget","props","ref","id","role","className","listStyle","listClassName","listProps","children","onClick","onBlur","onFocus","onKeyDown","tabIndex","isSheet","horizontal","disableElevation","cancelUnmountFocus","getDefaultFocusedIndex","remaining","isListbox","menubar","sheetMenuFocused","setSheetMenuFocused","sheetBlurredFame","menuBarContext","root","hoverTimeout","undefined","defaultActiveId","movementProps","movementContext","event","window","cancelAnimationFrame","current","loopable","searchable","programmatic","includeDisabled","disabled","value","div","aria-orientation","elevated","requestAnimationFrame","style","target","currentTarget","stopPropagation","HTMLElement","contains","closest"],"mappings":"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"}
+{"version":3,"sources":["../../src/menu/MenuWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useRef, useState } from \"react\";\n\nimport { List } from \"../list/List.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type NonNullMutableRef } from \"../types.js\";\nimport { type MenuListConvenienceProps } from \"./Menu.js\";\nimport { MenuWidgetKeyboardProvider } from \"./MenuWidgetKeyboardProvider.js\";\nimport { menu } from \"./styles.js\";\nimport {\n  MenuBarProvider,\n  useMenuBarContext,\n  useMenuBarProvider,\n} from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nexport interface MenuWidgetProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuListConvenienceProps {\n  isSheet: boolean;\n  horizontal: boolean;\n  disableElevation?: boolean;\n  cancelUnmountFocus: NonNullMutableRef<boolean>;\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * **Client Component**\n *\n * This component was added to support the listbox role and the `useId()` hook.\n * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the\n * next time the menu opens, so the aria-activedescendant will point to a\n * non-existing id\n *\n * @internal\n */\nexport const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(\n  function MenuWidget(props, ref) {\n    const {\n      id,\n      role = \"menu\",\n      className,\n      listStyle,\n      listClassName,\n      listProps,\n      children,\n      onClick,\n      onBlur = noop,\n      onFocus = noop,\n      onKeyDown = noop,\n      tabIndex = -1,\n      isSheet,\n      horizontal,\n      disableElevation,\n      cancelUnmountFocus,\n      getDefaultFocusedIndex,\n      ...remaining\n    } = props;\n    const isListbox = role === \"listbox\";\n    const { menubar } = useMenuBarContext();\n\n    // Since there is the possibility of other tab focusable elements within the\n    // sheet and the menu items are programmatically focused, the menu's\n    // tabIndex needs to be set to `-1` while one of the child menu items are\n    // focused. This allows Shift+Tab correctly focuses the previous focusable\n    // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up\n    // to the menu widget each time a new MenuItem is focused, only disable the\n    // focused state if the blur event is fired without another focus event\n    // within an animation frame.\n    const [sheetMenuFocused, setSheetMenuFocused] = useState(false);\n    const sheetBlurredFame = useRef(0);\n    const menuBarContext = useMenuBarProvider({\n      root: false,\n      menubar,\n      hoverTimeout: menubar ? 0 : undefined,\n      defaultActiveId: id,\n    });\n    const { movementProps, movementContext } = useKeyboardMovementProvider({\n      ref,\n      onClick,\n      onFocus(event) {\n        onFocus(event);\n\n        if (!isSheet) {\n          return;\n        }\n\n        window.cancelAnimationFrame(sheetBlurredFame.current);\n        setSheetMenuFocused(true);\n      },\n      onKeyDown,\n      horizontal,\n      loopable: true,\n      searchable: true,\n      programmatic: true,\n      includeDisabled: true,\n      getDefaultFocusedIndex,\n    });\n\n    return (\n      <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>\n        <MenuBarProvider value={menuBarContext}>\n          <div\n            aria-orientation={horizontal ? \"horizontal\" : undefined}\n            {...remaining}\n            {...(isListbox\n              ? { onClick, onFocus, onKeyDown, ref }\n              : movementProps)}\n            id={id}\n            role={role}\n            className={menu({\n              className,\n              elevated: !disableElevation && !isSheet,\n              horizontal,\n            })}\n            tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}\n            onBlur={(event) => {\n              onBlur(event);\n              if (!isSheet) {\n                return;\n              }\n\n              sheetBlurredFame.current = window.requestAnimationFrame(() => {\n                setSheetMenuFocused(false);\n              });\n            }}\n          >\n            <List\n              {...listProps}\n              style={listStyle ?? listProps?.style}\n              className={listClassName || listProps?.className}\n              horizontal={horizontal}\n              onClick={(event) => {\n                listProps?.onClick?.(event);\n\n                // this makes it so you can click on the menu/list without\n                // closing the menu\n                if (event.target === event.currentTarget) {\n                  event.stopPropagation();\n                }\n\n                // This might be a test only workaround since clicking links move focus\n                // somewhere else\n                if (event.target instanceof HTMLElement) {\n                  cancelUnmountFocus.current = event.currentTarget.contains(\n                    event.target.closest(\"a\")\n                  );\n                }\n              }}\n            >\n              {children}\n            </List>\n          </div>\n        </MenuBarProvider>\n      </MenuWidgetKeyboardProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","useState","List","useKeyboardMovementProvider","MenuWidgetKeyboardProvider","menu","MenuBarProvider","useMenuBarContext","useMenuBarProvider","noop","MenuWidget","props","ref","id","role","className","listStyle","listClassName","listProps","children","onClick","onBlur","onFocus","onKeyDown","tabIndex","isSheet","horizontal","disableElevation","cancelUnmountFocus","getDefaultFocusedIndex","remaining","isListbox","menubar","sheetMenuFocused","setSheetMenuFocused","sheetBlurredFame","menuBarContext","root","hoverTimeout","undefined","defaultActiveId","movementProps","movementContext","event","window","cancelAnimationFrame","current","loopable","searchable","programmatic","includeDisabled","disabled","value","div","aria-orientation","elevated","requestAnimationFrame","style","target","currentTarget","stopPropagation","HTMLElement","contains","closest"],"mappings":"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"}

package/dist/movement/constants.d.ts

@@ -6,11 +6,21 @@ import type { KeyboardMovementConfig } from "./types.js";
  * @internal
  */
 export declare const DEFAULT_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig>;
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export declare const DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP: Readonly<KeyboardMovementConfig>;
 /**
  * @since 5.1.2
  * @internal
  */
 export declare const DEFAULT_LTR_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig>;
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export declare const DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP: Readonly<KeyboardMovementConfig>;
 /**
  * @since 5.1.2
  * @internal

package/dist/movement/constants.js

@@ -18,15 +18,23 @@
     ]
 };
 /**
- * @since 5.1.2
+ * @since 6.3.0
  * @internal
- */ export const DEFAULT_LTR_KEYBOARD_MOVEMENT = {
+ */ export const DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP = {
     incrementKeys: [
         "ArrowRight"
     ],
     decrementKeys: [
         "ArrowLeft"
     ],
+    jumpToFirstKeys: [],
+    jumpToLastKeys: []
+};
+/**
+ * @since 5.1.2
+ * @internal
+ */ export const DEFAULT_LTR_KEYBOARD_MOVEMENT = {
+    ...DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP,
     jumpToFirstKeys: [
         "Home"
     ],
@@ -35,15 +43,23 @@
     ]
 };
 /**
- * @since 5.1.2
+ * @since 6.3.0
  * @internal
- */ export const DEFAULT_RTL_KEYBOARD_MOVEMENT = {
+ */ export const DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP = {
     incrementKeys: [
         "ArrowLeft"
     ],
     decrementKeys: [
         "ArrowRight"
     ],
+    jumpToFirstKeys: [],
+    jumpToLastKeys: []
+};
+/**
+ * @since 5.1.2
+ * @internal
+ */ export const DEFAULT_RTL_KEYBOARD_MOVEMENT = {
+    ...DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP,
     jumpToFirstKeys: [
         "Home"
     ],

package/dist/movement/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/movement/constants.ts"],"sourcesContent":["import type { KeyboardMovementConfig } from \"./types.js\";\n\n/**\n * Most custom keyboard functionality use these keys.\n *\n * @since 5.0.0\n * @internal\n */\nexport const DEFAULT_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig> = {\n  incrementKeys: [\"ArrowDown\"],\n  decrementKeys: [\"ArrowUp\"],\n  jumpToFirstKeys: [\"Home\"],\n  jumpToLastKeys: [\"End\"],\n};\n\n/**\n * @since 5.1.2\n * @internal\n */\nexport const DEFAULT_LTR_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig> = {\n  incrementKeys: [\"ArrowRight\"],\n  decrementKeys: [\"ArrowLeft\"],\n  jumpToFirstKeys: [\"Home\"],\n  jumpToLastKeys: [\"End\"],\n};\n\n/**\n * @since 5.1.2\n * @internal\n */\nexport const DEFAULT_RTL_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig> = {\n  incrementKeys: [\"ArrowLeft\"],\n  decrementKeys: [\"ArrowRight\"],\n  jumpToFirstKeys: [\"Home\"],\n  jumpToLastKeys: [\"End\"],\n};\n"],"names":["DEFAULT_KEYBOARD_MOVEMENT","incrementKeys","decrementKeys","jumpToFirstKeys","jumpToLastKeys","DEFAULT_LTR_KEYBOARD_MOVEMENT","DEFAULT_RTL_KEYBOARD_MOVEMENT"],"mappings":"AAEA;;;;;CAKC,GACD,OAAO,MAAMA,4BAA8D;IACzEC,eAAe;QAAC;KAAY;IAC5BC,eAAe;QAAC;KAAU;IAC1BC,iBAAiB;QAAC;KAAO;IACzBC,gBAAgB;QAAC;KAAM;AACzB,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAkE;IAC7EJ,eAAe;QAAC;KAAa;IAC7BC,eAAe;QAAC;KAAY;IAC5BC,iBAAiB;QAAC;KAAO;IACzBC,gBAAgB;QAAC;KAAM;AACzB,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAME,gCAAkE;IAC7EL,eAAe;QAAC;KAAY;IAC5BC,eAAe;QAAC;KAAa;IAC7BC,iBAAiB;QAAC;KAAO;IACzBC,gBAAgB;QAAC;KAAM;AACzB,EAAE"}
+{"version":3,"sources":["../../src/movement/constants.ts"],"sourcesContent":["import type { KeyboardMovementConfig } from \"./types.js\";\n\n/**\n * Most custom keyboard functionality use these keys.\n *\n * @since 5.0.0\n * @internal\n */\nexport const DEFAULT_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig> = {\n  incrementKeys: [\"ArrowDown\"],\n  decrementKeys: [\"ArrowUp\"],\n  jumpToFirstKeys: [\"Home\"],\n  jumpToLastKeys: [\"End\"],\n};\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP: Readonly<KeyboardMovementConfig> =\n  {\n    incrementKeys: [\"ArrowRight\"],\n    decrementKeys: [\"ArrowLeft\"],\n    jumpToFirstKeys: [],\n    jumpToLastKeys: [],\n  };\n\n/**\n * @since 5.1.2\n * @internal\n */\nexport const DEFAULT_LTR_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig> = {\n  ...DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP,\n  jumpToFirstKeys: [\"Home\"],\n  jumpToLastKeys: [\"End\"],\n};\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP: Readonly<KeyboardMovementConfig> =\n  {\n    incrementKeys: [\"ArrowLeft\"],\n    decrementKeys: [\"ArrowRight\"],\n    jumpToFirstKeys: [],\n    jumpToLastKeys: [],\n  };\n\n/**\n * @since 5.1.2\n * @internal\n */\nexport const DEFAULT_RTL_KEYBOARD_MOVEMENT: Readonly<KeyboardMovementConfig> = {\n  ...DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP,\n  jumpToFirstKeys: [\"Home\"],\n  jumpToLastKeys: [\"End\"],\n};\n"],"names":["DEFAULT_KEYBOARD_MOVEMENT","incrementKeys","decrementKeys","jumpToFirstKeys","jumpToLastKeys","DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP","DEFAULT_LTR_KEYBOARD_MOVEMENT","DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP","DEFAULT_RTL_KEYBOARD_MOVEMENT"],"mappings":"AAEA;;;;;CAKC,GACD,OAAO,MAAMA,4BAA8D;IACzEC,eAAe;QAAC;KAAY;IAC5BC,eAAe;QAAC;KAAU;IAC1BC,iBAAiB;QAAC;KAAO;IACzBC,gBAAgB;QAAC;KAAM;AACzB,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,6CACX;IACEJ,eAAe;QAAC;KAAa;IAC7BC,eAAe;QAAC;KAAY;IAC5BC,iBAAiB,EAAE;IACnBC,gBAAgB,EAAE;AACpB,EAAE;AAEJ;;;CAGC,GACD,OAAO,MAAME,gCAAkE;IAC7E,GAAGD,0CAA0C;IAC7CF,iBAAiB;QAAC;KAAO;IACzBC,gBAAgB;QAAC;KAAM;AACzB,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMG,6CACX;IACEN,eAAe;QAAC;KAAY;IAC5BC,eAAe;QAAC;KAAa;IAC7BC,iBAAiB,EAAE;IACnBC,gBAAgB,EAAE;AACpB,EAAE;AAEJ;;;CAGC,GACD,OAAO,MAAMI,gCAAkE;IAC7E,GAAGD,0CAA0C;IAC7CJ,iBAAiB;QAAC;KAAO;IACzBC,gBAAgB;QAAC;KAAM;AACzB,EAAE"}

package/dist/movement/types.d.ts

@@ -1,5 +1,5 @@
-import type { FocusEvent, FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler } from "react";
-import type { NonNullMutableRef, NonNullRef, UseStateSetter } from "../types.js";
+import { type HTMLAttributes, type KeyboardEvent, type Ref, type RefCallback, type RefObject } from "react";
+import { type NonNullMutableRef, type NonNullRef, type UseStateSetter } from "../types.js";
 /**
  * Set this to `"roving"` when:
  * - there are a group of focusable elements that have a `tabIndex={-1}`
@@ -109,6 +109,20 @@ export interface KeyboardMovementBehavior {
      */
     horizontal?: boolean;
 }
+/**
+ * @since 6.3.0
+ */
+export interface KeyboardFocusFromKeyOptions {
+    key: string;
+    /** @defaultValue `false` */
+    reversed?: boolean;
+    /** @defaultValue `getFocusableElementsFromRef()` */
+    focusables?: readonly HTMLElement[];
+}
+/**
+ * @since 6.3.0
+ */
+export type KeyboardFocusAction = (focusables?: readonly HTMLElement[]) => void;
 /**
  * @since 5.0.0
  * @since 6.0.0 Removed `attach`, `detach` and `watching`
@@ -124,6 +138,26 @@ export interface KeyboardMovementContext extends Required<KeyboardMovementBehavi
      * has been set to `"roving"` or `"virtual"`.
      */
     activeDescendantId: string;
+    /**
+     * @since 6.3.0
+     */
+    focusFirst: KeyboardFocusAction;
+    /**
+     * @since 6.3.0
+     */
+    focusLast: KeyboardFocusAction;
+    /**
+     * @since 6.3.0
+     */
+    focusNext: KeyboardFocusAction;
+    /**
+     * @since 6.3.0
+     */
+    focusPrevious: KeyboardFocusAction;
+    /**
+     * @since 6.3.0
+     */
+    focusFromKey: (options: KeyboardFocusFromKeyOptions) => void;
 }
 /**
  * @since 6.0.0
@@ -166,16 +200,23 @@ export interface KeyboardMovementExtensionData<E extends HTMLElement> extends Ke
     setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;
     setActiveDescendantId: (id: string) => void;
 }
+/**
+ * @since 6.3.0
+ */
+export type KeyboardMovementEventHandlers<E extends HTMLElement> = Pick<HTMLAttributes<E>, "onClick" | "onFocus" | "onKeyDown">;
+/**
+ * @since 6.3.0
+ */
+export interface SimpleKeyboardMovementWrapperOptions<E extends HTMLElement> extends KeyboardMovementEventHandlers<E> {
+    ref?: Ref<E>;
+}
 /**
  * @since 6.0.0
  * @internal
  */
-export interface KeyboardMovementProviderOptions<E extends HTMLElement> extends KeyboardMovementBehavior, KeyboardMovementConfiguration {
+export interface KeyboardMovementProviderOptions<E extends HTMLElement> extends KeyboardMovementBehavior, SimpleKeyboardMovementWrapperOptions<E>, KeyboardMovementConfiguration {
     /** @see {@link TabIndexBehavior} */
     tabIndexBehavior?: TabIndexBehavior;
-    onClick?: (event: MouseEvent<E>) => void;
-    onFocus?: (event: FocusEvent<E>) => void;
-    onKeyDown?: (event: KeyboardEvent<E>) => void;
     /** @defaultValue `false` */
     disabled?: boolean;
     /**
@@ -210,12 +251,21 @@ export interface KeyboardMovementProviderOptions<E extends HTMLElement> extends
      * @defaultValue `false`
      */
     isNegativeOneAllowed?: boolean;
+    /**
+     * This was added to support spinbutton groups so the user can either use the
+     * ArrowLeft, ArrowRight, or Tab keys to move. Without this, switching
+     * between tab and the arrow keys would have the wrong tab index.
+     *
+     * @since 6.3.0
+     * @defaultValue `false`
+     */
+    trackTabKeys?: boolean;
 }
 /**
  * @since 6.0.0
  * @internal
  */
-export interface KeyboardMovementProps<E extends HTMLElement> {
+export interface KeyboardMovementProps<E extends HTMLElement> extends Required<KeyboardMovementEventHandlers<E>> {
     /**
      * This will only be provided if the {@link KeyboardMovementContext.tabIndexBehavior}
      * is set to `"virtual"`.
@@ -231,15 +281,14 @@ export interface KeyboardMovementProps<E extends HTMLElement> {
      *   - a child element **should** have a `tabIndex={0}` instead
      */
     tabIndex?: number;
-    onClick: MouseEventHandler<E>;
-    onFocus: FocusEventHandler<E>;
-    onKeyDown: KeyboardEventHandler<E>;
+    ref: RefCallback<E>;
 }
 /**
  * @since 6.0.0
  * @internal
  */
 export interface KeyboardMovementProviderImplementation<E extends HTMLElement> {
+    nodeRef: RefObject<E>;
     movementProps: Readonly<KeyboardMovementProps<E>>;
     movementContext: Readonly<KeyboardMovementContext>;
     currentFocusIndex: NonNullMutableRef<number>;