@react-md/core 6.5.0 → 6.5.2

package/dist/cssUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable Fonts}\n * @since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\n/** @since 6.0.0 */\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor | null;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to allow the content to only be visible for screen\n   * readers. Set this to `\"focusable\"` to allow the content to be visible to\n   * screen readers and once focused. Set this to `\"phone\"` to only render the\n   * the content as screen reader only text on phones.\n   *\n   * @defaultValue `false`\n   */\n  srOnly?: boolean | \"focusable\" | \"phone\";\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor &&\n      backgroundColor !== \"current-color\" &&\n      backgroundColor !== \"surface\" &&\n      `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAyKhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBACEA,oBAAoB,mBACpBA,oBAAoB,aACpB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACpCD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,OAAO,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,WAAW,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,gBAAgB,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,eAAe,EACvCJ,aAAa,CAAC,IAAI,EAAEA,WAAW,EAC/BC,cAAc,CAAC,IAAI,EAAEA,YAAY,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}
+{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable Fonts}\n * @since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\n/** @since 6.0.0 */\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor | null;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * Set this to `true` to allow the content to only be visible for screen\n * readers. Set this to `\"focusable\"` to allow the content to be visible to\n * screen readers and once focused. Set this to `\"phone\"` to only render the\n * content as screen reader only text on phones.\n *\n * @since 6.5.1\n */\nexport type SrOnlyBehavior = boolean | \"focusable\" | \"phone\";\n\n/**\n * @since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link SrOnlyBehavior}\n   * @defaultValue `false`\n   */\n  srOnly?: SrOnlyBehavior;\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor &&\n      backgroundColor !== \"current-color\" &&\n      backgroundColor !== \"surface\" &&\n      `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AA+KhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBACEA,oBAAoB,mBACpBA,oBAAoB,aACpB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACpCD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,OAAO,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,WAAW,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,gBAAgB,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,eAAe,EACvCJ,aAAa,CAAC,IAAI,EAAEA,WAAW,EAC/BC,cAAc,CAAC,IAAI,EAAEA,YAAY,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}

package/dist/datetime/useTimeField.js

@@ -33,7 +33,7 @@ import { getTimeStep } from "./utils.js";
  * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}
  */ export function useTimeField(options) {
     const { min, max, step, ...fieldOptions } = options;
-    if (process.env.NODE_ENV !== "production" && typeof step !== "undefined" && (!min || !max)) {
+    if (process.env.NODE_ENV !== "production" && step !== undefined && (!min || !max)) {
         throw new Error("A `step` was provided to a time field without the `min` or `max` props.");
     }
     const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);

package/dist/datetime/useTimeField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/datetime/useTimeField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\nimport { type TimeFieldStepOptions, getTimeStep } from \"./utils.js\";\n\n/** @since 6.3.0 */\nexport interface TimeFieldConstraints {\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  max?: string;\n\n  /**\n   * For time inputs, the value of step is given in seconds, with a scaling\n   * factor of 1000 (since the underlying numeric value is in milliseconds).\n   * The default value of step is 60, indicating 60 seconds (or 1 minute, or\n   * 60,000 milliseconds).\n   *\n   * When any is set as the value for step, the default 60 seconds is used, and\n   * the seconds value is not displayed in the UI.\n   *\n   * Here are a few examples:\n   *\n   * - `15`   -&gt; 15 seconds\n   * - `60`   -&gt; 1 minute\n   * - `900`  -&gt; 15 minutes\n   * - `3600` -&gt; 1 hour\n   *\n   * Since this might be a bit confusing, the values can be provided in an\n   * object instead:\n   *\n   * ```ts\n   * { seconds: 30 }\n   * { minutes: 1 }\n   * { minutes: 15 }\n   * { hours: 1 }\n   * { seconds: 15, minutes: 30, hours: 1 }\n   * ```\n   *\n   * NOTE: The `min` and `max` props **must** be provided as well for the\n   * `step` to work.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}\n   */\n  step?: number | \"any\" | TimeFieldStepOptions;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldOptions\n  extends\n    Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    TimeFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldProps\n  extends\n    Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<TimeFieldConstraints, \"step\"> {\n  type: \"time\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {\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 6.3.0 */\nexport interface TimeFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldWithMessageImplementation extends Omit<\n  TextFieldWithMessageImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {\n  fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;\n}\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions & { disableMessage: true }\n): TimeFieldImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): TimeFieldWithMessageImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): ValidatedTimeFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    typeof step !== \"undefined\" &&\n    (!min || !max)\n  ) {\n    throw new Error(\n      \"A `step` was provided to a time field without the `min` or `max` props.\"\n    );\n  }\n\n  const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    errorMessage,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step: getTimeStep(step),\n      type: \"time\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","getTimeStep","useTimeField","options","min","max","step","fieldOptions","process","env","NODE_ENV","Error","errorMessage","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AACjC,SAAoCC,WAAW,QAAQ,aAAa;AA2JpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,IACEK,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzB,OAAOJ,SAAS,eACf,CAAA,CAACF,OAAO,CAACC,GAAE,GACZ;QACA,MAAM,IAAIM,MACR;IAEJ;IAEA,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGd,aAAaO;IAE3D,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEQ,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUlB,OAAOgB;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPF;QACAC,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7Bf;YACAC;YACAC,MAAML,YAAYK;YAClBc,MAAM;QACR;IACF;AACF"}
+{"version":3,"sources":["../../src/datetime/useTimeField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\nimport { type TimeFieldStepOptions, getTimeStep } from \"./utils.js\";\n\n/** @since 6.3.0 */\nexport interface TimeFieldConstraints {\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  max?: string;\n\n  /**\n   * For time inputs, the value of step is given in seconds, with a scaling\n   * factor of 1000 (since the underlying numeric value is in milliseconds).\n   * The default value of step is 60, indicating 60 seconds (or 1 minute, or\n   * 60,000 milliseconds).\n   *\n   * When any is set as the value for step, the default 60 seconds is used, and\n   * the seconds value is not displayed in the UI.\n   *\n   * Here are a few examples:\n   *\n   * - `15`   -&gt; 15 seconds\n   * - `60`   -&gt; 1 minute\n   * - `900`  -&gt; 15 minutes\n   * - `3600` -&gt; 1 hour\n   *\n   * Since this might be a bit confusing, the values can be provided in an\n   * object instead:\n   *\n   * ```ts\n   * { seconds: 30 }\n   * { minutes: 1 }\n   * { minutes: 15 }\n   * { hours: 1 }\n   * { seconds: 15, minutes: 30, hours: 1 }\n   * ```\n   *\n   * NOTE: The `min` and `max` props **must** be provided as well for the\n   * `step` to work.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}\n   */\n  step?: number | \"any\" | TimeFieldStepOptions;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldOptions\n  extends\n    Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    TimeFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldProps\n  extends\n    Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<TimeFieldConstraints, \"step\"> {\n  type: \"time\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {\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 6.3.0 */\nexport interface TimeFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldWithMessageImplementation extends Omit<\n  TextFieldWithMessageImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {\n  fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;\n}\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions & { disableMessage: true }\n): TimeFieldImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): TimeFieldWithMessageImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): ValidatedTimeFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    step !== undefined &&\n    (!min || !max)\n  ) {\n    throw new Error(\n      \"A `step` was provided to a time field without the `min` or `max` props.\"\n    );\n  }\n\n  const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    errorMessage,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step: getTimeStep(step),\n      type: \"time\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","getTimeStep","useTimeField","options","min","max","step","fieldOptions","process","env","NODE_ENV","undefined","Error","errorMessage","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AACjC,SAAoCC,WAAW,QAAQ,aAAa;AA2JpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,IACEK,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzBJ,SAASK,aACR,CAAA,CAACP,OAAO,CAACC,GAAE,GACZ;QACA,MAAM,IAAIO,MACR;IAEJ;IAEA,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGf,aAAaO;IAE3D,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAES,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUnB,OAAOiB;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPF;QACAC,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7BhB;YACAC;YACAC,MAAML,YAAYK;YAClBe,MAAM;QACR;IACF;AACF"}

package/dist/delegateEvent.js

@@ -12,8 +12,8 @@
  */ function createEventHandler(throttle, callbacks) {
     let running = false;
     const runCallbacks = (event)=>()=>{
-            for(let i = 0; i < callbacks.length; i += 1){
-                callbacks[i](event);
+            for (const callback of callbacks){
+                callback(event);
             }
             running = false;
         };
@@ -26,13 +26,13 @@
             return;
         }
         running = true;
-        window.requestAnimationFrame(runCallbacks(event));
+        globalThis.requestAnimationFrame(runCallbacks(event));
     };
 }
 /**
  * Creates a throttled event handler for the provided event type and event
  * target.
- */ function createDelegatedEventHandler(eventType, eventTarget = window, throttle = false, options) {
+ */ function createDelegatedEventHandler(eventType, eventTarget = globalThis.window, throttle = false, options) {
     const callbacks = [];
     const handler = createEventHandler(throttle, callbacks);
     return {
@@ -41,10 +41,10 @@
      * throttled event. If this is the first callback to be added, the throttled
      * event will also be started.
      */ add: (callback)=>{
-            if (!callbacks.length) {
+            if (callbacks.length === 0) {
                 eventTarget.addEventListener(eventType, handler, options);
             }
-            if (callbacks.indexOf(callback) === -1) {
+            if (!callbacks.includes(callback)) {
                 callbacks.push(callback);
             }
         },
@@ -54,9 +54,9 @@
      * throttled event will also be stopped.
      */ remove: (callback)=>{
             const i = callbacks.indexOf(callback);
-            if (i >= 0) {
+            if (i !== -1) {
                 callbacks.splice(i, 1);
-                if (!callbacks.length) {
+                if (callbacks.length === 0) {
                     eventTarget.removeEventListener(eventType, handler, options);
                 }
             }
@@ -87,7 +87,7 @@
  * @returns The delegated event handler that allows you to add or remove
  * `EventListener`s to that event.
  * @internal
- */ export function delegateEvent(eventType, eventTarget = window, throttle = eventType === "resize" || eventType === "scroll", options) {
+ */ export function delegateEvent(eventType, eventTarget = globalThis.window, throttle = eventType === "resize" || eventType === "scroll", options) {
     let index = delegatedEvents.findIndex((event)=>event.type === eventType && event.target === eventTarget && event.options === options && event.throttle === throttle);
     if (index === -1) {
         delegatedEvents.push({

package/dist/delegateEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/delegateEvent.ts"],"sourcesContent":["/** @internal */\nexport type DelegatedEventTarget = Window | Document | HTMLElement;\n\n/**\n * This is a \"shared\" event handler for the provided `eventType`. The event\n * listener will only be created once, but every single callback will be called\n * when the throttled event is triggered. This means that you will need to make\n * sure to remove the provided callback when it is no longer in use.\n *\n * @internal\n */\nexport interface DelegatedEventHandler {\n  /**\n   * Adds the provided callback to the throttled event listener.\n   */\n  add: (callback: EventListener) => void;\n\n  /**\n   * Attempts to remove the provided callback from the throttled event listener.\n   */\n  remove: (callback: EventListener) => void;\n}\n\n/** @internal */\nexport interface DelegableEvent {\n  type: string;\n  target: DelegatedEventTarget;\n  throttle: boolean;\n  handler: DelegatedEventHandler;\n  options?: boolean | AddEventListenerOptions;\n}\n\nconst delegatedEvents: DelegableEvent[] = [];\n\n/**\n * Creates the delegated event handler that will run all the callbacks once an\n * event happens. The callbacks' invocation can also be throttled for event\n * types that trigger rapidly for additional performance.\n *\n * The `<K extends keyof WindowEventMap` is a nice thing I found while looking\n * through the `lib.d.ts` implementation of `addEventListener` that will allow\n * you to get the \"correct\" event type when using the `add` and `remove`\n * functions once you have created this event handler. Otherwise there'd be ts\n * errors trying to do `MouseEvent` or `KeyboardEvent` in your listeners.\n */\nfunction createEventHandler(\n  throttle: boolean,\n  callbacks: readonly EventListener[]\n): (event: WindowEventMap[keyof WindowEventMap]) => void {\n  let running = false;\n  const runCallbacks = (event: WindowEventMap[keyof WindowEventMap]) => () => {\n    for (let i = 0; i < callbacks.length; i += 1) {\n      callbacks[i](event);\n    }\n\n    running = false;\n  };\n\n  return function eventHandler(event) {\n    if (!throttle) {\n      runCallbacks(event)();\n      return;\n    }\n\n    if (running) {\n      return;\n    }\n\n    running = true;\n    window.requestAnimationFrame(runCallbacks(event));\n  };\n}\n\n/**\n * Creates a throttled event handler for the provided event type and event\n * target.\n */\nfunction createDelegatedEventHandler(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = window,\n  throttle = false,\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  const callbacks: EventListener[] = [];\n  const handler = createEventHandler(throttle, callbacks);\n\n  return {\n    /**\n     * Attempts to add the provided callback to the list of callbacks for the\n     * throttled event. If this is the first callback to be added, the throttled\n     * event will also be started.\n     */\n    add: (callback: EventListener) => {\n      if (!callbacks.length) {\n        eventTarget.addEventListener(eventType, handler, options);\n      }\n\n      if (callbacks.indexOf(callback) === -1) {\n        callbacks.push(callback);\n      }\n    },\n\n    /**\n     * Attempts to remove the provided callback from the list of callbacks for\n     * the throttled event. If this is the last callback that was removed, the\n     * throttled event will also be stopped.\n     */\n    remove: (callback: EventListener) => {\n      const i = callbacks.indexOf(callback);\n      if (i >= 0) {\n        callbacks.splice(i, 1);\n\n        if (!callbacks.length) {\n          eventTarget.removeEventListener(eventType, handler, options);\n        }\n      }\n    },\n  };\n}\n\n/**\n * Creates a delegated event listener using custom events. Most of this code\n * comes from the MDN about resize listeners.\n *\n * This will return an object for adding or removing event handlers for the\n * provided `eventType` since only one base throttled event listener will be\n * created. Each callback that is added will be called with the event each time\n * the event is triggered. This does mean that you will manually need to remove\n * your callback like normal or else it can be called when no longer in use.\n * This also means that it doesn't \"hurt\" to call this function without\n * immediately calling the `add` function since the event won't start until\n * there is at least 1 callback.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#Examples\n * @param eventType - One of the event types that should be used to create a\n * delegated event for. This should be things like resize, click, scroll, etc.\n * @param eventTarget - The target that should have the delegated event handler\n * attached to. This is normally the window, but can be any element as needed.\n * @param throttle - Boolean if the event should be throttled or not. Normally\n * only event types like resize or scroll should be throttled for performance\n * boosts, but anything can be.\n * @returns The delegated event handler that allows you to add or remove\n * `EventListener`s to that event.\n * @internal\n */\nexport function delegateEvent(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = window,\n  throttle: boolean = eventType === \"resize\" || eventType === \"scroll\",\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  let index = delegatedEvents.findIndex(\n    (event) =>\n      event.type === eventType &&\n      event.target === eventTarget &&\n      event.options === options &&\n      event.throttle === throttle\n  );\n\n  if (index === -1) {\n    delegatedEvents.push({\n      type: eventType,\n      target: eventTarget,\n      options,\n      throttle,\n      handler: createDelegatedEventHandler(\n        eventType,\n        eventTarget,\n        throttle,\n        options\n      ),\n    });\n\n    index = delegatedEvents.length - 1;\n  }\n\n  return delegatedEvents[index].handler;\n}\n"],"names":["delegatedEvents","createEventHandler","throttle","callbacks","running","runCallbacks","event","i","length","eventHandler","window","requestAnimationFrame","createDelegatedEventHandler","eventType","eventTarget","options","handler","add","callback","addEventListener","indexOf","push","remove","splice","removeEventListener","delegateEvent","index","findIndex","type","target"],"mappings":"AAAA,cAAc,GAgCd,MAAMA,kBAAoC,EAAE;AAE5C;;;;;;;;;;CAUC,GACD,SAASC,mBACPC,QAAiB,EACjBC,SAAmC;IAEnC,IAAIC,UAAU;IACd,MAAMC,eAAe,CAACC,QAAgD;YACpE,IAAK,IAAIC,IAAI,GAAGA,IAAIJ,UAAUK,MAAM,EAAED,KAAK,EAAG;gBAC5CJ,SAAS,CAACI,EAAE,CAACD;YACf;YAEAF,UAAU;QACZ;IAEA,OAAO,SAASK,aAAaH,KAAK;QAChC,IAAI,CAACJ,UAAU;YACbG,aAAaC;YACb;QACF;QAEA,IAAIF,SAAS;YACX;QACF;QAEAA,UAAU;QACVM,OAAOC,qBAAqB,CAACN,aAAaC;IAC5C;AACF;AAEA;;;CAGC,GACD,SAASM,4BACPC,SAAiB,EACjBC,cAAoCJ,MAAM,EAC1CR,WAAW,KAAK,EAChBa,OAA2C;IAE3C,MAAMZ,YAA6B,EAAE;IACrC,MAAMa,UAAUf,mBAAmBC,UAAUC;IAE7C,OAAO;QACL;;;;KAIC,GACDc,KAAK,CAACC;YACJ,IAAI,CAACf,UAAUK,MAAM,EAAE;gBACrBM,YAAYK,gBAAgB,CAACN,WAAWG,SAASD;YACnD;YAEA,IAAIZ,UAAUiB,OAAO,CAACF,cAAc,CAAC,GAAG;gBACtCf,UAAUkB,IAAI,CAACH;YACjB;QACF;QAEA;;;;KAIC,GACDI,QAAQ,CAACJ;YACP,MAAMX,IAAIJ,UAAUiB,OAAO,CAACF;YAC5B,IAAIX,KAAK,GAAG;gBACVJ,UAAUoB,MAAM,CAAChB,GAAG;gBAEpB,IAAI,CAACJ,UAAUK,MAAM,EAAE;oBACrBM,YAAYU,mBAAmB,CAACX,WAAWG,SAASD;gBACtD;YACF;QACF;IACF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASU,cACdZ,SAAiB,EACjBC,cAAoCJ,MAAM,EAC1CR,WAAoBW,cAAc,YAAYA,cAAc,QAAQ,EACpEE,OAA2C;IAE3C,IAAIW,QAAQ1B,gBAAgB2B,SAAS,CACnC,CAACrB,QACCA,MAAMsB,IAAI,KAAKf,aACfP,MAAMuB,MAAM,KAAKf,eACjBR,MAAMS,OAAO,KAAKA,WAClBT,MAAMJ,QAAQ,KAAKA;IAGvB,IAAIwB,UAAU,CAAC,GAAG;QAChB1B,gBAAgBqB,IAAI,CAAC;YACnBO,MAAMf;YACNgB,QAAQf;YACRC;YACAb;YACAc,SAASJ,4BACPC,WACAC,aACAZ,UACAa;QAEJ;QAEAW,QAAQ1B,gBAAgBQ,MAAM,GAAG;IACnC;IAEA,OAAOR,eAAe,CAAC0B,MAAM,CAACV,OAAO;AACvC"}
+{"version":3,"sources":["../src/delegateEvent.ts"],"sourcesContent":["/** @internal */\nexport type DelegatedEventTarget = Window | Document | HTMLElement;\n\n/**\n * This is a \"shared\" event handler for the provided `eventType`. The event\n * listener will only be created once, but every single callback will be called\n * when the throttled event is triggered. This means that you will need to make\n * sure to remove the provided callback when it is no longer in use.\n *\n * @internal\n */\nexport interface DelegatedEventHandler {\n  /**\n   * Adds the provided callback to the throttled event listener.\n   */\n  add: (callback: EventListener) => void;\n\n  /**\n   * Attempts to remove the provided callback from the throttled event listener.\n   */\n  remove: (callback: EventListener) => void;\n}\n\n/** @internal */\nexport interface DelegableEvent {\n  type: string;\n  target: DelegatedEventTarget;\n  throttle: boolean;\n  handler: DelegatedEventHandler;\n  options?: boolean | AddEventListenerOptions;\n}\n\nconst delegatedEvents: DelegableEvent[] = [];\n\n/**\n * Creates the delegated event handler that will run all the callbacks once an\n * event happens. The callbacks' invocation can also be throttled for event\n * types that trigger rapidly for additional performance.\n *\n * The `<K extends keyof WindowEventMap` is a nice thing I found while looking\n * through the `lib.d.ts` implementation of `addEventListener` that will allow\n * you to get the \"correct\" event type when using the `add` and `remove`\n * functions once you have created this event handler. Otherwise there'd be ts\n * errors trying to do `MouseEvent` or `KeyboardEvent` in your listeners.\n */\nfunction createEventHandler(\n  throttle: boolean,\n  callbacks: readonly EventListener[]\n): (event: WindowEventMap[keyof WindowEventMap]) => void {\n  let running = false;\n  const runCallbacks = (event: WindowEventMap[keyof WindowEventMap]) => () => {\n    for (const callback of callbacks) {\n      callback(event);\n    }\n\n    running = false;\n  };\n\n  return function eventHandler(event) {\n    if (!throttle) {\n      runCallbacks(event)();\n      return;\n    }\n\n    if (running) {\n      return;\n    }\n\n    running = true;\n    globalThis.requestAnimationFrame(runCallbacks(event));\n  };\n}\n\n/**\n * Creates a throttled event handler for the provided event type and event\n * target.\n */\nfunction createDelegatedEventHandler(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = globalThis.window,\n  throttle = false,\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  const callbacks: EventListener[] = [];\n  const handler = createEventHandler(throttle, callbacks);\n\n  return {\n    /**\n     * Attempts to add the provided callback to the list of callbacks for the\n     * throttled event. If this is the first callback to be added, the throttled\n     * event will also be started.\n     */\n    add: (callback: EventListener) => {\n      if (callbacks.length === 0) {\n        eventTarget.addEventListener(eventType, handler, options);\n      }\n\n      if (!callbacks.includes(callback)) {\n        callbacks.push(callback);\n      }\n    },\n\n    /**\n     * Attempts to remove the provided callback from the list of callbacks for\n     * the throttled event. If this is the last callback that was removed, the\n     * throttled event will also be stopped.\n     */\n    remove: (callback: EventListener) => {\n      const i = callbacks.indexOf(callback);\n      if (i !== -1) {\n        callbacks.splice(i, 1);\n\n        if (callbacks.length === 0) {\n          eventTarget.removeEventListener(eventType, handler, options);\n        }\n      }\n    },\n  };\n}\n\n/**\n * Creates a delegated event listener using custom events. Most of this code\n * comes from the MDN about resize listeners.\n *\n * This will return an object for adding or removing event handlers for the\n * provided `eventType` since only one base throttled event listener will be\n * created. Each callback that is added will be called with the event each time\n * the event is triggered. This does mean that you will manually need to remove\n * your callback like normal or else it can be called when no longer in use.\n * This also means that it doesn't \"hurt\" to call this function without\n * immediately calling the `add` function since the event won't start until\n * there is at least 1 callback.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#Examples\n * @param eventType - One of the event types that should be used to create a\n * delegated event for. This should be things like resize, click, scroll, etc.\n * @param eventTarget - The target that should have the delegated event handler\n * attached to. This is normally the window, but can be any element as needed.\n * @param throttle - Boolean if the event should be throttled or not. Normally\n * only event types like resize or scroll should be throttled for performance\n * boosts, but anything can be.\n * @returns The delegated event handler that allows you to add or remove\n * `EventListener`s to that event.\n * @internal\n */\nexport function delegateEvent(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = globalThis.window,\n  throttle: boolean = eventType === \"resize\" || eventType === \"scroll\",\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  let index = delegatedEvents.findIndex(\n    (event) =>\n      event.type === eventType &&\n      event.target === eventTarget &&\n      event.options === options &&\n      event.throttle === throttle\n  );\n\n  if (index === -1) {\n    delegatedEvents.push({\n      type: eventType,\n      target: eventTarget,\n      options,\n      throttle,\n      handler: createDelegatedEventHandler(\n        eventType,\n        eventTarget,\n        throttle,\n        options\n      ),\n    });\n\n    index = delegatedEvents.length - 1;\n  }\n\n  return delegatedEvents[index].handler;\n}\n"],"names":["delegatedEvents","createEventHandler","throttle","callbacks","running","runCallbacks","event","callback","eventHandler","globalThis","requestAnimationFrame","createDelegatedEventHandler","eventType","eventTarget","window","options","handler","add","length","addEventListener","includes","push","remove","i","indexOf","splice","removeEventListener","delegateEvent","index","findIndex","type","target"],"mappings":"AAAA,cAAc,GAgCd,MAAMA,kBAAoC,EAAE;AAE5C;;;;;;;;;;CAUC,GACD,SAASC,mBACPC,QAAiB,EACjBC,SAAmC;IAEnC,IAAIC,UAAU;IACd,MAAMC,eAAe,CAACC,QAAgD;YACpE,KAAK,MAAMC,YAAYJ,UAAW;gBAChCI,SAASD;YACX;YAEAF,UAAU;QACZ;IAEA,OAAO,SAASI,aAAaF,KAAK;QAChC,IAAI,CAACJ,UAAU;YACbG,aAAaC;YACb;QACF;QAEA,IAAIF,SAAS;YACX;QACF;QAEAA,UAAU;QACVK,WAAWC,qBAAqB,CAACL,aAAaC;IAChD;AACF;AAEA;;;CAGC,GACD,SAASK,4BACPC,SAAiB,EACjBC,cAAoCJ,WAAWK,MAAM,EACrDZ,WAAW,KAAK,EAChBa,OAA2C;IAE3C,MAAMZ,YAA6B,EAAE;IACrC,MAAMa,UAAUf,mBAAmBC,UAAUC;IAE7C,OAAO;QACL;;;;KAIC,GACDc,KAAK,CAACV;YACJ,IAAIJ,UAAUe,MAAM,KAAK,GAAG;gBAC1BL,YAAYM,gBAAgB,CAACP,WAAWI,SAASD;YACnD;YAEA,IAAI,CAACZ,UAAUiB,QAAQ,CAACb,WAAW;gBACjCJ,UAAUkB,IAAI,CAACd;YACjB;QACF;QAEA;;;;KAIC,GACDe,QAAQ,CAACf;YACP,MAAMgB,IAAIpB,UAAUqB,OAAO,CAACjB;YAC5B,IAAIgB,MAAM,CAAC,GAAG;gBACZpB,UAAUsB,MAAM,CAACF,GAAG;gBAEpB,IAAIpB,UAAUe,MAAM,KAAK,GAAG;oBAC1BL,YAAYa,mBAAmB,CAACd,WAAWI,SAASD;gBACtD;YACF;QACF;IACF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASY,cACdf,SAAiB,EACjBC,cAAoCJ,WAAWK,MAAM,EACrDZ,WAAoBU,cAAc,YAAYA,cAAc,QAAQ,EACpEG,OAA2C;IAE3C,IAAIa,QAAQ5B,gBAAgB6B,SAAS,CACnC,CAACvB,QACCA,MAAMwB,IAAI,KAAKlB,aACfN,MAAMyB,MAAM,KAAKlB,eACjBP,MAAMS,OAAO,KAAKA,WAClBT,MAAMJ,QAAQ,KAAKA;IAGvB,IAAI0B,UAAU,CAAC,GAAG;QAChB5B,gBAAgBqB,IAAI,CAAC;YACnBS,MAAMlB;YACNmB,QAAQlB;YACRE;YACAb;YACAc,SAASL,4BACPC,WACAC,aACAX,UACAa;QAEJ;QAEAa,QAAQ5B,gBAAgBkB,MAAM,GAAG;IACnC;IAEA,OAAOlB,eAAe,CAAC4B,MAAM,CAACZ,OAAO;AACvC"}

package/dist/draggable/useDraggable.js

@@ -138,11 +138,11 @@ const noop = ()=>{
         const passive = isTouch ? {
             passive: false
         } : undefined;
-        window.addEventListener(updateKey, updatePosition, passive);
-        window.addEventListener(stopKey, stopDragging);
+        globalThis.addEventListener(updateKey, updatePosition, passive);
+        globalThis.addEventListener(stopKey, stopDragging);
         return ()=>{
-            window.removeEventListener(updateKey, updatePosition);
-            window.removeEventListener(stopKey, stopDragging);
+            globalThis.removeEventListener(updateKey, updatePosition);
+            globalThis.removeEventListener(stopKey, stopDragging);
         };
     }, [
         dragging,

package/dist/draggable/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/draggable/useDraggable.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type Ref,\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type NonNullRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { useHtmlClassName } from \"../useHtmlClassName.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n  isMouseDragStartEvent,\n  isTouchDragStartEvent,\n  updateDragPosition,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type DraggableTouchEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onTouchStart\" | \"onTouchMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableMouseEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onMouseDown\" | \"onMouseUp\" | \"onMouseMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableKeyboardEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onKeyDown\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableEventHandlers<E extends HTMLElement> =\n  DraggableTouchEventHandlers<E> &\n    DraggableMouseEventHandlers<E> &\n    DraggableKeyboardEventHandlers<E>;\n\n/**\n * @since 6.0.0\n */\nexport interface ControllableDraggableStateOptions {\n  value?: number;\n  setValue?: UseStateSetter<number>;\n  defaultValue?: UseStateInitializer<number>;\n  dragging?: boolean;\n  setDragging?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseDraggableOptions<E extends HTMLElement>\n  extends DraggableEventHandlers<E>, ControllableDraggableStateOptions {\n  /**\n   * An optional ref to merge with the returned\n   * {@link DraggableImplementation.draggableRef}.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * The minimum number of pixels allowed for the draggable element. This must\n   * be a number greater than or equal to 0.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the minimum value\n   * allowed instead of pixels.\n   */\n  min: number;\n\n  /**\n   * The maximum number of pixels allowed for the draggable element. This must\n   * be a number greater than the {@link min} and usually a number less than the\n   * viewport size.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the maximum value\n   * allowed instead of pixels.\n   */\n  max: number;\n\n  /**\n   * The amount to increment or decrement the value with arrow keys.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n\n  /**\n   * This was added to support range sliders where there are two (or more)\n   * draggable elements within the same container element and their values\n   * cannot pass each other. Without these overrides, the range would keep\n   * changing as the other values change, so the drag percentage would be\n   * incorrect.\n   *\n   * @example Range Slider\n   * ```ts\n   * const min = 0;\n   * const max = 100;\n   * const minValue = 3;\n   * const maxValue = 80;\n   *\n   * const minValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMax: maxValue,\n   * });\n   * const maxValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMin: minValue,\n   * });\n   * ```\n   *\n   * @defaultValue `min`\n   */\n  rangeMin?: number;\n\n  /**\n   * @see {@link rangeMin} for an explanation of this option.\n   * @defaultValue `max`\n   */\n  rangeMax?: number;\n\n  /**\n   * Set this to `true` to enable dragging vertically instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * The default drag behavior is to increase the value when:\n   *\n   * - dragging `\"right\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"left\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"upwards\"`\n   *\n   * When this is set to `true`, the value when increase when:\n   *\n   * - dragging `\"left\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"right\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"downwards\"`\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * Set this to `true` to disable all drag behavior. This will still call any\n   * of the provided {@link DraggableEventHandlers}.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the dragging calculations should be to the\n   * `draggableRef.current.offsetParent` instead of the entire window. The main\n   * use case for this is sliders.\n   *\n   * @defaultValue `false`\n   */\n  withinOffsetParent?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `document.documentElement` from gaining\n   * the `.rmd-dragging` class names while dragging.\n   *\n   * This should normally remain as `false` to improve performance and prevent\n   * other mouse events from firing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingClassName?: boolean;\n\n  /**\n   * Set this to `true` to prevent the vertical or horizontal cursor from\n   * appearing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingCursorClassName?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledDraggableOptions {\n  value?: never;\n  setValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledValueDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  defaultValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledDraggingDraggableOptions {\n  value?: never;\n  setValue?: never;\n  defaultValue?: never;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FullyControlledDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type DraggableStateOptions =\n  | UncontrolledDraggableOptions\n  | ControlledValueDraggableOptions\n  | ControlledDraggingDraggableOptions\n  | FullyControlledDraggableOptions;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableOptions<E extends HTMLElement = HTMLElement> =\n  BaseDraggableOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface DraggableImplementation<\n  E extends HTMLElement = HTMLElement,\n> extends Required<DraggableEventHandlers<E>> {\n  mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;\n  touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;\n  keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.min}.\n   */\n  minimum: () => void;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.max}.\n   */\n  maximum: () => void;\n\n  /**\n   * Increment the {@link value} by {@link DraggableOptions.step}.\n   */\n  increment: () => void;\n\n  /**\n   * Decrement the {@link value} by {@link DraggableOptions.step}.\n   */\n  decrement: () => void;\n\n  /**\n   * The current percentage the `value` is within the range.\n   *\n   * ```ts\n   * const percentage =\n   *   dragging && withinOffsetParent\n   *     ? : dragPercentage\n   *     : getPercentage({ min, max, value });\n   * ```\n   */\n  percentage: number;\n\n  /**\n   * A ref that **Must** be passed to the element that should be draggable.\n   */\n  draggableRef: RefCallback<E>;\n\n  /**\n   * This value will only update while dragging with a mouse or touch and should\n   * be used for the positioning styles while dragging.\n   *\n   * Note: The {@link percentage} will use this value while dragging.\n   */\n  dragPercentage: number;\n\n  /**\n   * Flag to determine if the user has dragged at least once. Used internally\n   * for manually persisting the value into local storage once the user has\n   * stopped dragging.\n   */\n  draggedOnce: NonNullRef<boolean>;\n\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * This is most likely an internal only hook that provides the functionality for\n * dragging an element through mouse, touch, and keyboard events. The main use\n * cases so far for this hook are:\n * - window splitters\n * - sliders\n *\n * NOTE: This requires `touch-action: none` to be applied to the draggable\n * element to help prevent page scrolling on mobile devices.\n *\n * @see {@link https://react-md.dev/components/use-draggable | useDraggable Demos}\n * @since 6.0.0\n */\nexport function useDraggable<E extends HTMLElement>(\n  options: DraggableOptions<E>\n): DraggableImplementation<E> {\n  const {\n    ref: propRef,\n    min,\n    max,\n    rangeMin = min,\n    rangeMax = max,\n    step = 1,\n    reversed = false,\n    vertical = false,\n    onKeyDown = noop,\n    onMouseUp = noop,\n    onMouseDown = noop,\n    onMouseMove = noop,\n    onTouchStart = noop,\n    onTouchMove = noop,\n    dragging: propDragging,\n    setDragging: propSetDragging,\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    withinOffsetParent = false,\n    disabled = false,\n    disableDraggingClassName = false,\n    disableDraggingCursorClassName = disableDraggingClassName,\n  } = options;\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const isTouch = useUserInteractionMode() === \"touch\";\n  const draggingRef = useRef(false);\n  const [dragPercentage, setDragPercentage] = useState(min);\n  const [value, setValue] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getRangeDefaultValue({\n      min,\n      max,\n      step: 1,\n      defaultValue,\n    }),\n  });\n  const [dragging, setDragging] = useEnsuredState({\n    value: propDragging,\n    setValue: propSetDragging,\n    defaultValue: false,\n  });\n\n  const isRTL = useDir().dir === \"rtl\";\n  const percentage =\n    dragging && withinOffsetParent\n      ? dragPercentage\n      : getPercentage({ min, max, value });\n  const maximum = useCallback(() => {\n    setValue(max);\n  }, [max, setValue]);\n  const minimum = useCallback(() => {\n    setValue(min);\n  }, [min, setValue]);\n  const increment = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue + step }));\n  }, [max, min, setValue, step]);\n  const decrement = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue - step }));\n  }, [max, min, setValue, step]);\n\n  const draggingClassName = dragging && !disableDraggingClassName;\n  useHtmlClassName(cnb(draggingClassName && \"rmd-dragging\"));\n  useHtmlClassName(\n    cnb(\n      !disableDraggingCursorClassName &&\n        draggingClassName &&\n        `rmd-dragging--${vertical ? \"v\" : \"h\"}`\n    )\n  );\n\n  const draggedOnce = useRef(false);\n  useEffect(() => {\n    if (!dragging) {\n      return;\n    }\n\n    draggedOnce.current = true;\n    const updatePosition = (event: MouseEvent | TouchEvent): void => {\n      if (!event.cancelable) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      updateDragPosition({\n        event,\n        nodeRef,\n        min,\n        max,\n        step,\n        rangeMin,\n        rangeMax,\n        isRTL,\n        isDragStart: false,\n        reversed,\n        vertical,\n        setValue,\n        setDragging,\n        setDragPercentage,\n        withinOffsetParent,\n      });\n    };\n\n    const stopDragging = (event: MouseEvent | TouchEvent): void => {\n      updatePosition(event);\n      setDragging(false);\n      draggingRef.current = false;\n      // blur the element so that it no longer maintains the `:focus-visible`\n      // styles if they were applied. pressing tab would re-focus this element\n      // so the tab order is preserved\n      nodeRef.current?.blur();\n    };\n\n    const updateKey = isTouch ? \"touchmove\" : \"mousemove\";\n    const stopKey = isTouch ? \"touchend\" : \"mouseup\";\n    const passive = isTouch ? { passive: false } : undefined;\n\n    window.addEventListener(updateKey, updatePosition, passive);\n    window.addEventListener(stopKey, stopDragging);\n    return () => {\n      window.removeEventListener(updateKey, updatePosition);\n      window.removeEventListener(stopKey, stopDragging);\n    };\n  }, [\n    dragging,\n    isRTL,\n    isTouch,\n    max,\n    min,\n    nodeRef,\n    rangeMax,\n    rangeMin,\n    reversed,\n    setDragging,\n    setValue,\n    step,\n    vertical,\n    withinOffsetParent,\n  ]);\n\n  const prevRange = useRef({ min, max, step });\n  useEffect(() => {\n    if (\n      prevRange.current.min === min &&\n      prevRange.current.max === max &&\n      prevRange.current.step === step\n    ) {\n      return;\n    }\n\n    prevRange.current = { min, max, step };\n    setValue((prevValue) =>\n      nearest({\n        min,\n        max,\n        steps: getRangeSteps({ min, max, step }),\n        value: prevValue,\n      })\n    );\n  }, [max, min, setValue, step]);\n\n  const mouseEventHandlers: Required<DraggableMouseEventHandlers<E>> = {\n    onMouseDown: useCallback(\n      (event) => {\n        onMouseDown(event);\n        if (disabled || isTouch || !isMouseDragStartEvent(event)) {\n          return;\n        }\n\n        // don't allow text to be selected\n        event.preventDefault();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n\n        // don't set dragging immediately so that click events can still happen\n        draggingRef.current = true;\n      },\n      [\n        disabled,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseDown,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseMove: useCallback(\n      (event) => {\n        onMouseMove(event);\n        if (disabled || isTouch || !draggingRef.current || dragging) {\n          return;\n        }\n\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n        setDragging(true);\n      },\n      [\n        disabled,\n        dragging,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseUp: useCallback(\n      (event) => {\n        onMouseUp(event);\n        if (disabled || isTouch) {\n          return;\n        }\n\n        draggingRef.current = false;\n      },\n      [disabled, isTouch, onMouseUp]\n    ),\n  };\n  const keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>> = {\n    onKeyDown: useCallback(\n      (event) => {\n        onKeyDown(event);\n        if (disabled) {\n          return;\n        }\n\n        const decrementKey = vertical ? \"ArrowDown\" : \"ArrowLeft\";\n        const incrementKey = vertical ? \"ArrowUp\" : \"ArrowRight\";\n\n        switch (event.key) {\n          case decrementKey:\n            event.preventDefault();\n            decrement();\n            break;\n          case incrementKey:\n            event.preventDefault();\n            increment();\n            break;\n          case \"Home\":\n            event.preventDefault();\n            minimum();\n            break;\n          case \"End\":\n            event.preventDefault();\n            maximum();\n            break;\n        }\n      },\n      [decrement, disabled, increment, maximum, minimum, onKeyDown, vertical]\n    ),\n  };\n\n  // touch devices are a bit weird and cause issues since the \"start\" event is\n  // also used for scrolling. If the user quickly grabs the draggable element\n  // and drags vertically, most of the time it will try to scroll instead of\n  // dragging the element. The workaround is to being the drag events\n  // immediately on touchstart and disable scroll behavior for the page.\n  //\n  // There are also some issues with calling `event.preventDefault()` within\n  // touch events even while `{ passive: false } is manually set, so need to\n  // also attach a touchmove event.\n  useScrollLock(isTouch && dragging);\n  const touchEventHandlers: Required<DraggableTouchEventHandlers<E>> = {\n    onTouchStart: useCallback(\n      (event) => {\n        onTouchStart(event);\n        if (disabled || !isTouchDragStartEvent(event)) {\n          return;\n        }\n\n        draggingRef.current = true;\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchStart,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onTouchMove: useCallback(\n      (event) => {\n        onTouchMove(event);\n        if (disabled || !draggingRef.current || !event.cancelable) {\n          return;\n        }\n\n        // prevent the document's touchmove event from also firing\n        event.stopPropagation();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n  };\n\n  return {\n    ...touchEventHandlers,\n    ...mouseEventHandlers,\n    ...keyboardEventHandlers,\n    value,\n    setValue,\n    dragging,\n    setDragging,\n    maximum,\n    minimum,\n    increment,\n    decrement,\n    draggedOnce,\n    draggableRef: ref,\n    percentage,\n    dragPercentage,\n    touchEventHandlers,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useRef","useState","useUserInteractionMode","useScrollLock","useDir","useEnsuredRef","useEnsuredState","useHtmlClassName","getPercentage","getRangeDefaultValue","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","isTouchDragStartEvent","updateDragPosition","noop","useDraggable","options","ref","propRef","min","max","rangeMin","rangeMax","step","reversed","vertical","onKeyDown","onMouseUp","onMouseDown","onMouseMove","onTouchStart","onTouchMove","dragging","propDragging","setDragging","propSetDragging","value","propValue","setValue","propSetValue","defaultValue","withinOffsetParent","disabled","disableDraggingClassName","disableDraggingCursorClassName","nodeRef","isTouch","draggingRef","dragPercentage","setDragPercentage","isRTL","dir","percentage","maximum","minimum","increment","prevValue","decrement","draggingClassName","draggedOnce","current","updatePosition","event","cancelable","preventDefault","stopPropagation","isDragStart","stopDragging","blur","updateKey","stopKey","passive","undefined","window","addEventListener","removeEventListener","prevRange","steps","mouseEventHandlers","keyboardEventHandlers","decrementKey","incrementKey","key","touchEventHandlers","draggableRef"],"mappings":"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gBAC7C;YACF;YAEAf,YAAYa,OAAO,GAAG;YACtB/C,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAf;YACAR;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHV,aAAanC,YACX,CAACkE;YACC/B,YAAY+B;YACZ,IAAIpB,YAAY,CAACK,YAAYa,OAAO,IAAI,CAACE,MAAMC,UAAU,EAAE;gBACzD;YACF;YAEA,0DAA0D;YAC1DD,MAAMG,eAAe;YACrBpD,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAd;YACAT;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;IAEL;IAEA,OAAO;QACL,GAAG0C,kBAAkB;QACrB,GAAGL,kBAAkB;QACrB,GAAGC,qBAAqB;QACxB3C;QACAE;QACAN;QACAE;QACAmB;QACAC;QACAC;QACAE;QACAE;QACAyB,cAAcnE;QACdmC;QACAJ;QACAmC;QACAL;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/draggable/useDraggable.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type Ref,\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type NonNullRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { useHtmlClassName } from \"../useHtmlClassName.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n  isMouseDragStartEvent,\n  isTouchDragStartEvent,\n  updateDragPosition,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type DraggableTouchEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onTouchStart\" | \"onTouchMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableMouseEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onMouseDown\" | \"onMouseUp\" | \"onMouseMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableKeyboardEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onKeyDown\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableEventHandlers<E extends HTMLElement> =\n  DraggableTouchEventHandlers<E> &\n    DraggableMouseEventHandlers<E> &\n    DraggableKeyboardEventHandlers<E>;\n\n/**\n * @since 6.0.0\n */\nexport interface ControllableDraggableStateOptions {\n  value?: number;\n  setValue?: UseStateSetter<number>;\n  defaultValue?: UseStateInitializer<number>;\n  dragging?: boolean;\n  setDragging?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseDraggableOptions<E extends HTMLElement>\n  extends DraggableEventHandlers<E>, ControllableDraggableStateOptions {\n  /**\n   * An optional ref to merge with the returned\n   * {@link DraggableImplementation.draggableRef}.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * The minimum number of pixels allowed for the draggable element. This must\n   * be a number greater than or equal to 0.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the minimum value\n   * allowed instead of pixels.\n   */\n  min: number;\n\n  /**\n   * The maximum number of pixels allowed for the draggable element. This must\n   * be a number greater than the {@link min} and usually a number less than the\n   * viewport size.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the maximum value\n   * allowed instead of pixels.\n   */\n  max: number;\n\n  /**\n   * The amount to increment or decrement the value with arrow keys.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n\n  /**\n   * This was added to support range sliders where there are two (or more)\n   * draggable elements within the same container element and their values\n   * cannot pass each other. Without these overrides, the range would keep\n   * changing as the other values change, so the drag percentage would be\n   * incorrect.\n   *\n   * @example Range Slider\n   * ```ts\n   * const min = 0;\n   * const max = 100;\n   * const minValue = 3;\n   * const maxValue = 80;\n   *\n   * const minValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMax: maxValue,\n   * });\n   * const maxValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMin: minValue,\n   * });\n   * ```\n   *\n   * @defaultValue `min`\n   */\n  rangeMin?: number;\n\n  /**\n   * @see {@link rangeMin} for an explanation of this option.\n   * @defaultValue `max`\n   */\n  rangeMax?: number;\n\n  /**\n   * Set this to `true` to enable dragging vertically instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * The default drag behavior is to increase the value when:\n   *\n   * - dragging `\"right\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"left\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"upwards\"`\n   *\n   * When this is set to `true`, the value when increase when:\n   *\n   * - dragging `\"left\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"right\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"downwards\"`\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * Set this to `true` to disable all drag behavior. This will still call any\n   * of the provided {@link DraggableEventHandlers}.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the dragging calculations should be to the\n   * `draggableRef.current.offsetParent` instead of the entire window. The main\n   * use case for this is sliders.\n   *\n   * @defaultValue `false`\n   */\n  withinOffsetParent?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `document.documentElement` from gaining\n   * the `.rmd-dragging` class names while dragging.\n   *\n   * This should normally remain as `false` to improve performance and prevent\n   * other mouse events from firing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingClassName?: boolean;\n\n  /**\n   * Set this to `true` to prevent the vertical or horizontal cursor from\n   * appearing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingCursorClassName?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledDraggableOptions {\n  value?: never;\n  setValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledValueDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  defaultValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledDraggingDraggableOptions {\n  value?: never;\n  setValue?: never;\n  defaultValue?: never;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FullyControlledDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type DraggableStateOptions =\n  | UncontrolledDraggableOptions\n  | ControlledValueDraggableOptions\n  | ControlledDraggingDraggableOptions\n  | FullyControlledDraggableOptions;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableOptions<E extends HTMLElement = HTMLElement> =\n  BaseDraggableOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface DraggableImplementation<\n  E extends HTMLElement = HTMLElement,\n> extends Required<DraggableEventHandlers<E>> {\n  mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;\n  touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;\n  keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.min}.\n   */\n  minimum: () => void;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.max}.\n   */\n  maximum: () => void;\n\n  /**\n   * Increment the {@link value} by {@link DraggableOptions.step}.\n   */\n  increment: () => void;\n\n  /**\n   * Decrement the {@link value} by {@link DraggableOptions.step}.\n   */\n  decrement: () => void;\n\n  /**\n   * The current percentage the `value` is within the range.\n   *\n   * ```ts\n   * const percentage =\n   *   dragging && withinOffsetParent\n   *     ? : dragPercentage\n   *     : getPercentage({ min, max, value });\n   * ```\n   */\n  percentage: number;\n\n  /**\n   * A ref that **Must** be passed to the element that should be draggable.\n   */\n  draggableRef: RefCallback<E>;\n\n  /**\n   * This value will only update while dragging with a mouse or touch and should\n   * be used for the positioning styles while dragging.\n   *\n   * Note: The {@link percentage} will use this value while dragging.\n   */\n  dragPercentage: number;\n\n  /**\n   * Flag to determine if the user has dragged at least once. Used internally\n   * for manually persisting the value into local storage once the user has\n   * stopped dragging.\n   */\n  draggedOnce: NonNullRef<boolean>;\n\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * This is most likely an internal only hook that provides the functionality for\n * dragging an element through mouse, touch, and keyboard events. The main use\n * cases so far for this hook are:\n * - window splitters\n * - sliders\n *\n * NOTE: This requires `touch-action: none` to be applied to the draggable\n * element to help prevent page scrolling on mobile devices.\n *\n * @see {@link https://react-md.dev/components/use-draggable | useDraggable Demos}\n * @since 6.0.0\n */\nexport function useDraggable<E extends HTMLElement>(\n  options: DraggableOptions<E>\n): DraggableImplementation<E> {\n  const {\n    ref: propRef,\n    min,\n    max,\n    rangeMin = min,\n    rangeMax = max,\n    step = 1,\n    reversed = false,\n    vertical = false,\n    onKeyDown = noop,\n    onMouseUp = noop,\n    onMouseDown = noop,\n    onMouseMove = noop,\n    onTouchStart = noop,\n    onTouchMove = noop,\n    dragging: propDragging,\n    setDragging: propSetDragging,\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    withinOffsetParent = false,\n    disabled = false,\n    disableDraggingClassName = false,\n    disableDraggingCursorClassName = disableDraggingClassName,\n  } = options;\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const isTouch = useUserInteractionMode() === \"touch\";\n  const draggingRef = useRef(false);\n  const [dragPercentage, setDragPercentage] = useState(min);\n  const [value, setValue] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getRangeDefaultValue({\n      min,\n      max,\n      step: 1,\n      defaultValue,\n    }),\n  });\n  const [dragging, setDragging] = useEnsuredState({\n    value: propDragging,\n    setValue: propSetDragging,\n    defaultValue: false,\n  });\n\n  const isRTL = useDir().dir === \"rtl\";\n  const percentage =\n    dragging && withinOffsetParent\n      ? dragPercentage\n      : getPercentage({ min, max, value });\n  const maximum = useCallback(() => {\n    setValue(max);\n  }, [max, setValue]);\n  const minimum = useCallback(() => {\n    setValue(min);\n  }, [min, setValue]);\n  const increment = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue + step }));\n  }, [max, min, setValue, step]);\n  const decrement = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue - step }));\n  }, [max, min, setValue, step]);\n\n  const draggingClassName = dragging && !disableDraggingClassName;\n  useHtmlClassName(cnb(draggingClassName && \"rmd-dragging\"));\n  useHtmlClassName(\n    cnb(\n      !disableDraggingCursorClassName &&\n        draggingClassName &&\n        `rmd-dragging--${vertical ? \"v\" : \"h\"}`\n    )\n  );\n\n  const draggedOnce = useRef(false);\n  useEffect(() => {\n    if (!dragging) {\n      return;\n    }\n\n    draggedOnce.current = true;\n    const updatePosition = (event: MouseEvent | TouchEvent): void => {\n      if (!event.cancelable) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      updateDragPosition({\n        event,\n        nodeRef,\n        min,\n        max,\n        step,\n        rangeMin,\n        rangeMax,\n        isRTL,\n        isDragStart: false,\n        reversed,\n        vertical,\n        setValue,\n        setDragging,\n        setDragPercentage,\n        withinOffsetParent,\n      });\n    };\n\n    const stopDragging = (event: MouseEvent | TouchEvent): void => {\n      updatePosition(event);\n      setDragging(false);\n      draggingRef.current = false;\n      // blur the element so that it no longer maintains the `:focus-visible`\n      // styles if they were applied. pressing tab would re-focus this element\n      // so the tab order is preserved\n      nodeRef.current?.blur();\n    };\n\n    const updateKey = isTouch ? \"touchmove\" : \"mousemove\";\n    const stopKey = isTouch ? \"touchend\" : \"mouseup\";\n    const passive = isTouch ? { passive: false } : undefined;\n\n    globalThis.addEventListener(updateKey, updatePosition, passive);\n    globalThis.addEventListener(stopKey, stopDragging);\n    return () => {\n      globalThis.removeEventListener(updateKey, updatePosition);\n      globalThis.removeEventListener(stopKey, stopDragging);\n    };\n  }, [\n    dragging,\n    isRTL,\n    isTouch,\n    max,\n    min,\n    nodeRef,\n    rangeMax,\n    rangeMin,\n    reversed,\n    setDragging,\n    setValue,\n    step,\n    vertical,\n    withinOffsetParent,\n  ]);\n\n  const prevRange = useRef({ min, max, step });\n  useEffect(() => {\n    if (\n      prevRange.current.min === min &&\n      prevRange.current.max === max &&\n      prevRange.current.step === step\n    ) {\n      return;\n    }\n\n    prevRange.current = { min, max, step };\n    setValue((prevValue) =>\n      nearest({\n        min,\n        max,\n        steps: getRangeSteps({ min, max, step }),\n        value: prevValue,\n      })\n    );\n  }, [max, min, setValue, step]);\n\n  const mouseEventHandlers: Required<DraggableMouseEventHandlers<E>> = {\n    onMouseDown: useCallback(\n      (event) => {\n        onMouseDown(event);\n        if (disabled || isTouch || !isMouseDragStartEvent(event)) {\n          return;\n        }\n\n        // don't allow text to be selected\n        event.preventDefault();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n\n        // don't set dragging immediately so that click events can still happen\n        draggingRef.current = true;\n      },\n      [\n        disabled,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseDown,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseMove: useCallback(\n      (event) => {\n        onMouseMove(event);\n        if (disabled || isTouch || !draggingRef.current || dragging) {\n          return;\n        }\n\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n        setDragging(true);\n      },\n      [\n        disabled,\n        dragging,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseUp: useCallback(\n      (event) => {\n        onMouseUp(event);\n        if (disabled || isTouch) {\n          return;\n        }\n\n        draggingRef.current = false;\n      },\n      [disabled, isTouch, onMouseUp]\n    ),\n  };\n  const keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>> = {\n    onKeyDown: useCallback(\n      (event) => {\n        onKeyDown(event);\n        if (disabled) {\n          return;\n        }\n\n        const decrementKey = vertical ? \"ArrowDown\" : \"ArrowLeft\";\n        const incrementKey = vertical ? \"ArrowUp\" : \"ArrowRight\";\n\n        switch (event.key) {\n          case decrementKey:\n            event.preventDefault();\n            decrement();\n            break;\n          case incrementKey:\n            event.preventDefault();\n            increment();\n            break;\n          case \"Home\":\n            event.preventDefault();\n            minimum();\n            break;\n          case \"End\":\n            event.preventDefault();\n            maximum();\n            break;\n        }\n      },\n      [decrement, disabled, increment, maximum, minimum, onKeyDown, vertical]\n    ),\n  };\n\n  // touch devices are a bit weird and cause issues since the \"start\" event is\n  // also used for scrolling. If the user quickly grabs the draggable element\n  // and drags vertically, most of the time it will try to scroll instead of\n  // dragging the element. The workaround is to being the drag events\n  // immediately on touchstart and disable scroll behavior for the page.\n  //\n  // There are also some issues with calling `event.preventDefault()` within\n  // touch events even while `{ passive: false } is manually set, so need to\n  // also attach a touchmove event.\n  useScrollLock(isTouch && dragging);\n  const touchEventHandlers: Required<DraggableTouchEventHandlers<E>> = {\n    onTouchStart: useCallback(\n      (event) => {\n        onTouchStart(event);\n        if (disabled || !isTouchDragStartEvent(event)) {\n          return;\n        }\n\n        draggingRef.current = true;\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchStart,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onTouchMove: useCallback(\n      (event) => {\n        onTouchMove(event);\n        if (disabled || !draggingRef.current || !event.cancelable) {\n          return;\n        }\n\n        // prevent the document's touchmove event from also firing\n        event.stopPropagation();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n  };\n\n  return {\n    ...touchEventHandlers,\n    ...mouseEventHandlers,\n    ...keyboardEventHandlers,\n    value,\n    setValue,\n    dragging,\n    setDragging,\n    maximum,\n    minimum,\n    increment,\n    decrement,\n    draggedOnce,\n    draggableRef: ref,\n    percentage,\n    dragPercentage,\n    touchEventHandlers,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useRef","useState","useUserInteractionMode","useScrollLock","useDir","useEnsuredRef","useEnsuredState","useHtmlClassName","getPercentage","getRangeDefaultValue","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","isTouchDragStartEvent","updateDragPosition","noop","useDraggable","options","ref","propRef","min","max","rangeMin","rangeMax","step","reversed","vertical","onKeyDown","onMouseUp","onMouseDown","onMouseMove","onTouchStart","onTouchMove","dragging","propDragging","setDragging","propSetDragging","value","propValue","setValue","propSetValue","defaultValue","withinOffsetParent","disabled","disableDraggingClassName","disableDraggingCursorClassName","nodeRef","isTouch","draggingRef","dragPercentage","setDragPercentage","isRTL","dir","percentage","maximum","minimum","increment","prevValue","decrement","draggingClassName","draggedOnce","current","updatePosition","event","cancelable","preventDefault","stopPropagation","isDragStart","stopDragging","blur","updateKey","stopKey","passive","undefined","globalThis","addEventListener","removeEventListener","prevRange","steps","mouseEventHandlers","keyboardEventHandlers","decrementKey","incrementKey","key","touchEventHandlers","draggableRef"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAIEC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,sBAAsB,QAAQ,gDAAgD;AACvF,SAASC,aAAa,QAAQ,6BAA6B;AAM3D,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SACEC,qBAAqB,EACrBC,qBAAqB,EACrBC,kBAAkB,QACb,aAAa;AAEpB,MAAMC,OAAO;AACX,aAAa;AACf;AAgTA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,aACdC,OAA4B;IAE5B,MAAM,EACJC,KAAKC,OAAO,EACZC,GAAG,EACHC,GAAG,EACHC,WAAWF,GAAG,EACdG,WAAWF,GAAG,EACdG,OAAO,CAAC,EACRC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAYZ,IAAI,EAChBa,YAAYb,IAAI,EAChBc,cAAcd,IAAI,EAClBe,cAAcf,IAAI,EAClBgB,eAAehB,IAAI,EACnBiB,cAAcjB,IAAI,EAClBkB,UAAUC,YAAY,EACtBC,aAAaC,eAAe,EAC5BC,OAAOC,SAAS,EAChBC,UAAUC,YAAY,EACtBC,YAAY,EACZC,qBAAqB,KAAK,EAC1BC,WAAW,KAAK,EAChBC,2BAA2B,KAAK,EAChCC,iCAAiCD,wBAAwB,EAC1D,GAAG3B;IAEJ,MAAM,CAAC6B,SAAS5B,IAAI,GAAGd,cAAce;IACrC,MAAM4B,UAAU9C,6BAA6B;IAC7C,MAAM+C,cAAcjD,OAAO;IAC3B,MAAM,CAACkD,gBAAgBC,kBAAkB,GAAGlD,SAASoB;IACrD,MAAM,CAACiB,OAAOE,SAAS,GAAGlC,gBAAgB;QACxCgC,OAAOC;QACPC,UAAUC;QACVC,cAAcjC,qBAAqB;YACjCY;YACAC;YACAG,MAAM;YACNiB;QACF;IACF;IACA,MAAM,CAACR,UAAUE,YAAY,GAAG9B,gBAAgB;QAC9CgC,OAAOH;QACPK,UAAUH;QACVK,cAAc;IAChB;IAEA,MAAMU,QAAQhD,SAASiD,GAAG,KAAK;IAC/B,MAAMC,aACJpB,YAAYS,qBACRO,iBACA1C,cAAc;QAAEa;QAAKC;QAAKgB;IAAM;IACtC,MAAMiB,UAAUzD,YAAY;QAC1B0C,SAASlB;IACX,GAAG;QAACA;QAAKkB;KAAS;IAClB,MAAMgB,UAAU1D,YAAY;QAC1B0C,SAASnB;IACX,GAAG;QAACA;QAAKmB;KAAS;IAClB,MAAMiB,YAAY3D,YAAY;QAC5B0C,SAAS,CAACkB,YAAc9C,YAAY;gBAAES;gBAAKC;gBAAKgB,OAAOoB,YAAYjC;YAAK;IAC1E,GAAG;QAACH;QAAKD;QAAKmB;QAAUf;KAAK;IAC7B,MAAMkC,YAAY7D,YAAY;QAC5B0C,SAAS,CAACkB,YAAc9C,YAAY;gBAAES;gBAAKC;gBAAKgB,OAAOoB,YAAYjC;YAAK;IAC1E,GAAG;QAACH;QAAKD;QAAKmB;QAAUf;KAAK;IAE7B,MAAMmC,oBAAoB1B,YAAY,CAACW;IACvCtC,iBAAiBV,IAAI+D,qBAAqB;IAC1CrD,iBACEV,IACE,CAACiD,kCACCc,qBACA,CAAC,cAAc,EAAEjC,WAAW,MAAM,KAAK;IAI7C,MAAMkC,cAAc7D,OAAO;IAC3BD,UAAU;QACR,IAAI,CAACmC,UAAU;YACb;QACF;QAEA2B,YAAYC,OAAO,GAAG;QACtB,MAAMC,iBAAiB,CAACC;YACtB,IAAI,CAACA,MAAMC,UAAU,EAAE;gBACrB;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YAErBpD,mBAAmB;gBACjBiD;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACAgB,aAAa;gBACb1C;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF;QAEA,MAAM0B,eAAe,CAACL;YACpBD,eAAeC;YACf5B,YAAY;YACZa,YAAYa,OAAO,GAAG;YACtB,uEAAuE;YACvE,wEAAwE;YACxE,gCAAgC;YAChCf,QAAQe,OAAO,EAAEQ;QACnB;QAEA,MAAMC,YAAYvB,UAAU,cAAc;QAC1C,MAAMwB,UAAUxB,UAAU,aAAa;QACvC,MAAMyB,UAAUzB,UAAU;YAAEyB,SAAS;QAAM,IAAIC;QAE/CC,WAAWC,gBAAgB,CAACL,WAAWR,gBAAgBU;QACvDE,WAAWC,gBAAgB,CAACJ,SAASH;QACrC,OAAO;YACLM,WAAWE,mBAAmB,CAACN,WAAWR;YAC1CY,WAAWE,mBAAmB,CAACL,SAASH;QAC1C;IACF,GAAG;QACDnC;QACAkB;QACAJ;QACA1B;QACAD;QACA0B;QACAvB;QACAD;QACAG;QACAU;QACAI;QACAf;QACAE;QACAgB;KACD;IAED,MAAMmC,YAAY9E,OAAO;QAAEqB;QAAKC;QAAKG;IAAK;IAC1C1B,UAAU;QACR,IACE+E,UAAUhB,OAAO,CAACzC,GAAG,KAAKA,OAC1ByD,UAAUhB,OAAO,CAACxC,GAAG,KAAKA,OAC1BwD,UAAUhB,OAAO,CAACrC,IAAI,KAAKA,MAC3B;YACA;QACF;QAEAqD,UAAUhB,OAAO,GAAG;YAAEzC;YAAKC;YAAKG;QAAK;QACrCe,SAAS,CAACkB,YACR/C,QAAQ;gBACNU;gBACAC;gBACAyD,OAAOrE,cAAc;oBAAEW;oBAAKC;oBAAKG;gBAAK;gBACtCa,OAAOoB;YACT;IAEJ,GAAG;QAACpC;QAAKD;QAAKmB;QAAUf;KAAK;IAE7B,MAAMuD,qBAA+D;QACnElD,aAAahC,YACX,CAACkE;YACClC,YAAYkC;YACZ,IAAIpB,YAAYI,WAAW,CAACnC,sBAAsBmD,QAAQ;gBACxD;YACF;YAEA,kCAAkC;YAClCA,MAAME,cAAc;YACpBnD,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;YAEA,uEAAuE;YACvEM,YAAYa,OAAO,GAAG;QACxB,GACA;YACElB;YACAQ;YACAJ;YACA1B;YACAD;YACA0B;YACAjB;YACAN;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHZ,aAAajC,YACX,CAACkE;YACCjC,YAAYiC;YACZ,IAAIpB,YAAYI,WAAW,CAACC,YAAYa,OAAO,IAAI5B,UAAU;gBAC3D;YACF;YAEAnB,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;YACAP,YAAY;QACd,GACA;YACEQ;YACAV;YACAkB;YACAJ;YACA1B;YACAD;YACA0B;YACAhB;YACAP;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHd,WAAW/B,YACT,CAACkE;YACCnC,UAAUmC;YACV,IAAIpB,YAAYI,SAAS;gBACvB;YACF;YAEAC,YAAYa,OAAO,GAAG;QACxB,GACA;YAAClB;YAAUI;YAASnB;SAAU;IAElC;IACA,MAAMoD,wBAAqE;QACzErD,WAAW9B,YACT,CAACkE;YACCpC,UAAUoC;YACV,IAAIpB,UAAU;gBACZ;YACF;YAEA,MAAMsC,eAAevD,WAAW,cAAc;YAC9C,MAAMwD,eAAexD,WAAW,YAAY;YAE5C,OAAQqC,MAAMoB,GAAG;gBACf,KAAKF;oBACHlB,MAAME,cAAc;oBACpBP;oBACA;gBACF,KAAKwB;oBACHnB,MAAME,cAAc;oBACpBT;oBACA;gBACF,KAAK;oBACHO,MAAME,cAAc;oBACpBV;oBACA;gBACF,KAAK;oBACHQ,MAAME,cAAc;oBACpBX;oBACA;YACJ;QACF,GACA;YAACI;YAAWf;YAAUa;YAAWF;YAASC;YAAS5B;YAAWD;SAAS;IAE3E;IAEA,4EAA4E;IAC5E,2EAA2E;IAC3E,0EAA0E;IAC1E,mEAAmE;IACnE,sEAAsE;IACtE,EAAE;IACF,0EAA0E;IAC1E,0EAA0E;IAC1E,iCAAiC;IACjCxB,cAAc6C,WAAWd;IACzB,MAAMmD,qBAA+D;QACnErD,cAAclC,YACZ,CAACkE;YACChC,aAAagC;YACb,IAAIpB,YAAY,CAAC9B,sBAAsBkD,QAAQ;gBAC7C;YACF;YAEAf,YAAYa,OAAO,GAAG;YACtB/C,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAf;YACAR;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHV,aAAanC,YACX,CAACkE;YACC/B,YAAY+B;YACZ,IAAIpB,YAAY,CAACK,YAAYa,OAAO,IAAI,CAACE,MAAMC,UAAU,EAAE;gBACzD;YACF;YAEA,0DAA0D;YAC1DD,MAAMG,eAAe;YACrBpD,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAd;YACAT;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;IAEL;IAEA,OAAO;QACL,GAAG0C,kBAAkB;QACrB,GAAGL,kBAAkB;QACrB,GAAGC,qBAAqB;QACxB3C;QACAE;QACAN;QACAE;QACAmB;QACAC;QACAC;QACAE;QACAE;QACAyB,cAAcnE;QACdmC;QACAJ;QACAmC;QACAL;QACAC;IACF;AACF"}

package/dist/draggable/utils.js

@@ -120,7 +120,7 @@ import { withinRange } from "../utils/withinRange.js";
  * @since 6.0.0
  */ export function deserializeDraggableValue(options) {
     const { item, min, max } = options;
-    const value = parseFloat(item);
+    const value = Number.parseFloat(item);
     if (Number.isNaN(item)) {
         return min;
     }

package/dist/draggable/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\n\nimport { type MinMaxRange } from \"../types.js\";\nimport {\n  type ClientPositionEvent,\n  type ClientPositionOptions,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/**\n * @internal\n */\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n  event.button === 0 &&\n  !event.altKey &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey;\n\n/**\n * @internal\n */\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n  event.changedTouches.length === 1;\n\n/**\n * @internal\n */\ninterface DragPositionOptions extends ClientPositionOptions {\n  isRTL: boolean;\n  reversed: boolean;\n  container: Element;\n}\n\n/**\n * @internal\n */\nexport const getDragPosition = (options: DragPositionOptions): number => {\n  const { isRTL, reversed, vertical, container } = options;\n\n  const clientPosition = getClientPosition(options);\n  const { left, right, top } = container.getBoundingClientRect();\n  if (vertical) {\n    if (reversed) {\n      return window.innerHeight - clientPosition;\n    }\n\n    // added `Math.max` since the `top` will be a negative number if rendered\n    // within a portal element like a dialog/sheet\n    return clientPosition - Math.max(0, top);\n  }\n\n  if (reversed ? !isRTL : isRTL) {\n    return right - clientPosition;\n  }\n\n  return clientPosition - left;\n};\n\n/**\n * @internal\n */\ninterface RelativeDragPositionOptions extends DragPositionOptions, MinMaxRange {\n  step: number;\n  rangeMin: number;\n  rangeMax: number;\n}\n\n/**\n * @internal\n */\ninterface RelativeDragPosition {\n  value: number;\n  dragPercentage: number;\n}\n\n/**\n * @internal\n */\nexport const getRelativeDragPosition = (\n  options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n    options;\n\n  const { height, width, left, top } = container.getBoundingClientRect();\n  const containerSize = vertical ? height : width;\n  const containerPosition = vertical ? top + height : left;\n  const clientPosition = getClientPosition(options);\n\n  const position = vertical\n    ? containerPosition - clientPosition\n    : clientPosition - containerPosition;\n  const distanceDragged = Math.min(Math.max(0, position), containerSize);\n  let dragPercentage = distanceDragged / containerSize;\n  if (isRTL && !vertical) {\n    dragPercentage = 1 - dragPercentage;\n  }\n\n  const range = rangeMax - rangeMin;\n  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n  const value = dragPercentage * range + rangeMin;\n  const nextValue = nearest({\n    min,\n    max,\n    steps,\n    range,\n    value,\n  });\n\n  return {\n    value: nextValue,\n    dragPercentage,\n  };\n};\n\n/**\n * @internal\n */\ninterface UpdateDragPositionOptions extends Omit<\n  RelativeDragPositionOptions,\n  \"container\"\n> {\n  event: ClientPositionEvent;\n  nodeRef: RefObject<HTMLElement>;\n  focus?: boolean;\n  isDragStart: boolean;\n  setValue: (value: number) => void;\n  setDragging: (dragging: boolean) => void;\n  setDragPercentage: (value: number) => void;\n  withinOffsetParent: boolean;\n}\n\n/**\n * @internal\n */\nexport const updateDragPosition = (\n  options: UpdateDragPositionOptions\n): void => {\n  const {\n    event,\n    nodeRef,\n    min,\n    max,\n    step,\n    rangeMin,\n    rangeMax,\n    isRTL,\n    reversed,\n    vertical,\n    isDragStart,\n    setValue,\n    setDragging,\n    setDragPercentage,\n    withinOffsetParent,\n  } = options;\n\n  const element = nodeRef.current;\n  if (!element) {\n    return;\n  }\n\n  if (isDragStart) {\n    // need to focus so that Chromium based browsers allow drag events. this\n    // really appeared while trying to create a DnD tree\n    element.focus({ preventScroll: true });\n\n    if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n      return;\n    }\n\n    // unlike the other flow, start dragging immediately so that you can trigger\n    // a mousedown or touchstart event on the container element and drag until\n    // the user lets go\n    setDragging(true);\n  }\n\n  // firefox defaults to `document.body` while chrome will return `null`\n  const container = element.offsetParent || document.body;\n  if (!withinOffsetParent) {\n    const dragPosition = getDragPosition({\n      event,\n      isRTL,\n      reversed,\n      vertical,\n      container,\n    });\n    const nextValue = withinRange({\n      min,\n      max,\n      value: dragPosition,\n    });\n    setValue(nextValue);\n\n    return;\n  }\n\n  const { value, dragPercentage } = getRelativeDragPosition({\n    min,\n    max,\n    rangeMin,\n    rangeMax,\n    step,\n    event,\n    isRTL,\n    reversed,\n    vertical,\n    container,\n  });\n\n  setValue(value);\n  setDragPercentage(dragPercentage);\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface DeserializeDraggableValueOptions extends MinMaxRange {\n  item: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function deserializeDraggableValue(\n  options: DeserializeDraggableValueOptions\n): number {\n  const { item, min, max } = options;\n\n  const value = parseFloat(item);\n  if (Number.isNaN(item)) {\n    return min;\n  }\n\n  return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"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"}
+{"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\n\nimport { type MinMaxRange } from \"../types.js\";\nimport {\n  type ClientPositionEvent,\n  type ClientPositionOptions,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/**\n * @internal\n */\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n  event.button === 0 &&\n  !event.altKey &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey;\n\n/**\n * @internal\n */\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n  event.changedTouches.length === 1;\n\n/**\n * @internal\n */\ninterface DragPositionOptions extends ClientPositionOptions {\n  isRTL: boolean;\n  reversed: boolean;\n  container: Element;\n}\n\n/**\n * @internal\n */\nexport const getDragPosition = (options: DragPositionOptions): number => {\n  const { isRTL, reversed, vertical, container } = options;\n\n  const clientPosition = getClientPosition(options);\n  const { left, right, top } = container.getBoundingClientRect();\n  if (vertical) {\n    if (reversed) {\n      return window.innerHeight - clientPosition;\n    }\n\n    // added `Math.max` since the `top` will be a negative number if rendered\n    // within a portal element like a dialog/sheet\n    return clientPosition - Math.max(0, top);\n  }\n\n  if (reversed ? !isRTL : isRTL) {\n    return right - clientPosition;\n  }\n\n  return clientPosition - left;\n};\n\n/**\n * @internal\n */\ninterface RelativeDragPositionOptions extends DragPositionOptions, MinMaxRange {\n  step: number;\n  rangeMin: number;\n  rangeMax: number;\n}\n\n/**\n * @internal\n */\ninterface RelativeDragPosition {\n  value: number;\n  dragPercentage: number;\n}\n\n/**\n * @internal\n */\nexport const getRelativeDragPosition = (\n  options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n    options;\n\n  const { height, width, left, top } = container.getBoundingClientRect();\n  const containerSize = vertical ? height : width;\n  const containerPosition = vertical ? top + height : left;\n  const clientPosition = getClientPosition(options);\n\n  const position = vertical\n    ? containerPosition - clientPosition\n    : clientPosition - containerPosition;\n  const distanceDragged = Math.min(Math.max(0, position), containerSize);\n  let dragPercentage = distanceDragged / containerSize;\n  if (isRTL && !vertical) {\n    dragPercentage = 1 - dragPercentage;\n  }\n\n  const range = rangeMax - rangeMin;\n  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n  const value = dragPercentage * range + rangeMin;\n  const nextValue = nearest({\n    min,\n    max,\n    steps,\n    range,\n    value,\n  });\n\n  return {\n    value: nextValue,\n    dragPercentage,\n  };\n};\n\n/**\n * @internal\n */\ninterface UpdateDragPositionOptions extends Omit<\n  RelativeDragPositionOptions,\n  \"container\"\n> {\n  event: ClientPositionEvent;\n  nodeRef: RefObject<HTMLElement>;\n  focus?: boolean;\n  isDragStart: boolean;\n  setValue: (value: number) => void;\n  setDragging: (dragging: boolean) => void;\n  setDragPercentage: (value: number) => void;\n  withinOffsetParent: boolean;\n}\n\n/**\n * @internal\n */\nexport const updateDragPosition = (\n  options: UpdateDragPositionOptions\n): void => {\n  const {\n    event,\n    nodeRef,\n    min,\n    max,\n    step,\n    rangeMin,\n    rangeMax,\n    isRTL,\n    reversed,\n    vertical,\n    isDragStart,\n    setValue,\n    setDragging,\n    setDragPercentage,\n    withinOffsetParent,\n  } = options;\n\n  const element = nodeRef.current;\n  if (!element) {\n    return;\n  }\n\n  if (isDragStart) {\n    // need to focus so that Chromium based browsers allow drag events. this\n    // really appeared while trying to create a DnD tree\n    element.focus({ preventScroll: true });\n\n    if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n      return;\n    }\n\n    // unlike the other flow, start dragging immediately so that you can trigger\n    // a mousedown or touchstart event on the container element and drag until\n    // the user lets go\n    setDragging(true);\n  }\n\n  // firefox defaults to `document.body` while chrome will return `null`\n  const container = element.offsetParent || document.body;\n  if (!withinOffsetParent) {\n    const dragPosition = getDragPosition({\n      event,\n      isRTL,\n      reversed,\n      vertical,\n      container,\n    });\n    const nextValue = withinRange({\n      min,\n      max,\n      value: dragPosition,\n    });\n    setValue(nextValue);\n\n    return;\n  }\n\n  const { value, dragPercentage } = getRelativeDragPosition({\n    min,\n    max,\n    rangeMin,\n    rangeMax,\n    step,\n    event,\n    isRTL,\n    reversed,\n    vertical,\n    container,\n  });\n\n  setValue(value);\n  setDragPercentage(dragPercentage);\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface DeserializeDraggableValueOptions extends MinMaxRange {\n  item: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function deserializeDraggableValue(\n  options: DeserializeDraggableValueOptions\n): number {\n  const { item, min, max } = options;\n\n  const value = Number.parseFloat(item);\n  if (Number.isNaN(item)) {\n    return min;\n  }\n\n  return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","Number","parseFloat","isNaN"],"mappings":"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"}

package/dist/expansion-panel/ExpansionPanel.js

@@ -57,7 +57,7 @@ import { expansionPanel } from "./styles.js";
         transitionIn: expanded
     });
     let header = propHeader;
-    if (typeof header === "undefined") {
+    if (header === undefined) {
         header = /*#__PURE__*/ _jsx(ExpansionPanelHeader, {
             style: headerStyle,
             className: headerClassName,

package/dist/expansion-panel/ExpansionPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { type CSSProperties, type ReactNode, forwardRef } from \"react\";\n\nimport { Card, type CardProps } from \"../card/Card.js\";\nimport { CardContent, type CardContentProps } from \"../card/CardContent.js\";\nimport { useCollapseTransition } from \"../transition/useCollapseTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  ExpansionPanelHeader,\n  type ExpansionPanelHeaderProps,\n} from \"./ExpansionPanelHeader.js\";\nimport { expansionPanel } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `disableSecondaryColor` convenience prop was removed in\n * favor of the new `contentProps` object.\n * @since 6.0.0 The `disableParagraphMargin` prop was removed since it no longer\n * exists on the `CardContent` component.\n * @since 6.0.0 Removed the `marginTop` prop since it is no longer needed.\n */\nexport interface ExpansionPanelProps extends CardProps {\n  /**\n   * Set this to `true` if the {@link children} should be visible. This should\n   * generally be provided by the `useExpansionPanels` hook.\n   */\n  expanded: boolean;\n\n  /**\n   * A function that should toggle the {@link expanded} state. This should\n   * generally be provided by the `useExpansionPanels` hook.\n   */\n  onExpandClick: () => void;\n\n  /**\n   * Set this to `true` to prevent the panel from toggling the {@link expanded}\n   * state. This should generally be provided by the `useExpansionPanels` hook.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * @defaultValue `true`\n   * @see {@link CardProps.fullWidth}\n   */\n  fullWidth?: boolean;\n\n  /**\n   * This can be used to implement a custom header implementation, but it\n   * probably shouldn't be needed.\n   *\n   * @since 6.0.0 This was renamed from `customHeader`\n   * @see {@link headerProps}\n   */\n  header?: ReactNode;\n\n  /**\n   * This can be used to apply additional props to the header element.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link headerStyle} and {@link headerClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <ExpansionPanel\n   *   {...props}\n   *   headerProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     icon: <MyCustomIcon />,\n   *     iconRotatorProps: {\n   *       className: \"another-custom-class-name\",\n   *     },\n   *   }}\n   * />\n   * ```\n   */\n  headerProps?: Omit<\n    ExpansionPanelHeaderProps,\n    \"id\" | \"aria-disabled\" | \"onClick\" | \"expanded\"\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `ExpansionPanelHeader`\n   * component.\n   */\n  headerStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `ExpansionPanelHeader`\n   * component.\n   */\n  headerClassName?: string;\n\n  /**\n   * Content to display within the header of the expansion panel that toggles\n   * the expanded state. This should generally contain some accessible text\n   * describing the expansion panel's content.\n   *\n   * @since 6.0.0 This was renamed from `header`\n   */\n  headerChildren?: ReactNode;\n\n  /**\n   * This can be used to apply additional props to the `CardContent` component\n   * if needed.\n   *\n   * Note: `disableSecondaryColor` and `disableLastChildPadding` default to\n   * `true` in this implementation.\n   *\n   * @example\n   * ```tsx\n   * contentProps={{\n   *   style: {},\n   *   className: \"some-class-name\",\n   *   disablePadding: true,\n   *   disableSecondaryColor: false,\n   *   disableLastChildPadding: false,\n   *   // whatever else\n   * }}\n   * ```\n   *\n   * @see {@link contentStyle}\n   * @see {@link contentClassName}\n   * @see {@link disableContentPadding}\n   */\n  contentProps?: PropsWithRef<Omit<CardContentProps, \"role\">>;\n\n  /**\n   * Convenience prop to apply custom style to the `CardContent` component.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `CardContent` component.\n   */\n  contentClassName?: string;\n\n  /**\n   * Set to `true` to disable the collapse transition for the card content\n   * whenever the {@link expanded} state changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link CardContentProps.disablePadding}\n   */\n  disableContentPadding?: boolean;\n\n  /**\n   * Set this to `true` to unmount the {@link children} when the\n   * {@link expanded} state is `false`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `persistent` to match the\n   * `useCollapseTransition` naming convention.\n   */\n  temporary?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * An expansion panel enables content to be either collapsed (hidden) or\n * expanded (visible) following the disclosure pattern.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ExpansionPanelGroupExample(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList style={{ width: \"100%\" }}>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @see `useExpansionPanels` for examples.\n * @since 6.0.0 The content will be persistent and invisible using `display: none`\n * instead of unmounting and also animate the `margin-top` style.\n */\nexport const ExpansionPanel = forwardRef<\n  HTMLHeadingElement,\n  ExpansionPanelProps\n>(function ExpansionPanel(props, ref) {\n  const {\n    id: propId,\n    className,\n    contentProps,\n    contentStyle,\n    contentClassName,\n    header: propHeader,\n    headerProps,\n    headerStyle,\n    headerClassName,\n    headerChildren,\n    children,\n    expanded,\n    onExpandClick,\n    disabled = false,\n    fullWidth = true,\n    temporary = false,\n    disableTransition = false,\n    disableContentPadding = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"expansion-panel\");\n  const { elementProps, rendered } = useCollapseTransition({\n    nodeRef: contentProps?.ref,\n    style: contentStyle,\n    className: contentClassName,\n    timeout: disableTransition ? 0 : undefined,\n    temporary,\n    transitionIn: expanded,\n  });\n\n  let header = propHeader;\n  if (typeof header === \"undefined\") {\n    header = (\n      <ExpansionPanelHeader\n        style={headerStyle}\n        className={headerClassName}\n        disableTransition={disableTransition}\n        {...headerProps}\n        aria-disabled={disabled || undefined}\n        id={id}\n        onClick={onExpandClick}\n        expanded={expanded}\n      >\n        {headerChildren}\n      </ExpansionPanelHeader>\n    );\n  }\n\n  return (\n    <Card\n      {...remaining}\n      id={`${id}-container`}\n      ref={ref}\n      fullWidth={fullWidth}\n      className={expansionPanel({\n        expanded,\n        disableTransition,\n        className,\n      })}\n    >\n      {header}\n      {rendered && (\n        <CardContent\n          id={`${id}-content`}\n          aria-labelledby={id}\n          disablePadding={disableContentPadding}\n          disableSecondaryColor\n          disableLastChildPadding\n          {...contentProps}\n          {...elementProps}\n          role=\"region\"\n        >\n          {children}\n        </CardContent>\n      )}\n    </Card>\n  );\n});\n"],"names":["forwardRef","Card","CardContent","useCollapseTransition","useEnsuredId","ExpansionPanelHeader","expansionPanel","ExpansionPanel","props","ref","id","propId","className","contentProps","contentStyle","contentClassName","header","propHeader","headerProps","headerStyle","headerClassName","headerChildren","children","expanded","onExpandClick","disabled","fullWidth","temporary","disableTransition","disableContentPadding","remaining","elementProps","rendered","nodeRef","style","timeout","undefined","transitionIn","aria-disabled","onClick","aria-labelledby","disablePadding","disableSecondaryColor","disableLastChildPadding","role"],"mappings":"AAAA;;AAEA,SAA6CA,UAAU,QAAQ,QAAQ;AAEvE,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,oBAAoB,QAEf,4BAA4B;AACnC,SAASC,cAAc,QAAQ,cAAc;AA0J7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,QAAQC,UAAU,EAClBC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBC,oBAAoB,KAAK,EACzBC,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEoB,YAAY,EAAEC,QAAQ,EAAE,GAAG7B,sBAAsB;QACvD8B,SAASpB,cAAcJ;QACvByB,OAAOpB;QACPF,WAAWG;QACXoB,SAASP,oBAAoB,IAAIQ;QACjCT;QACAU,cAAcd;IAChB;IAEA,IAAIP,SAASC;IACb,IAAI,OAAOD,WAAW,aAAa;QACjCA,uBACE,KAACX;YACC6B,OAAOf;YACPP,WAAWQ;YACXQ,mBAAmBA;YAClB,GAAGV,WAAW;YACfoB,iBAAeb,YAAYW;YAC3B1B,IAAIA;YACJ6B,SAASf;YACTD,UAAUA;sBAETF;;IAGP;IAEA,qBACE,MAACpB;QACE,GAAG6B,SAAS;QACbpB,IAAI,GAAGA,GAAG,UAAU,CAAC;QACrBD,KAAKA;QACLiB,WAAWA;QACXd,WAAWN,eAAe;YACxBiB;YACAK;YACAhB;QACF;;YAECI;YACAgB,0BACC,KAAC9B;gBACCQ,IAAI,GAAGA,GAAG,QAAQ,CAAC;gBACnB8B,mBAAiB9B;gBACjB+B,gBAAgBZ;gBAChBa,qBAAqB;gBACrBC,uBAAuB;gBACtB,GAAG9B,YAAY;gBACf,GAAGkB,YAAY;gBAChBa,MAAK;0BAEJtB;;;;AAKX,GAAG"}
+{"version":3,"sources":["../../src/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { type CSSProperties, type ReactNode, forwardRef } from \"react\";\n\nimport { Card, type CardProps } from \"../card/Card.js\";\nimport { CardContent, type CardContentProps } from \"../card/CardContent.js\";\nimport { useCollapseTransition } from \"../transition/useCollapseTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  ExpansionPanelHeader,\n  type ExpansionPanelHeaderProps,\n} from \"./ExpansionPanelHeader.js\";\nimport { expansionPanel } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `disableSecondaryColor` convenience prop was removed in\n * favor of the new `contentProps` object.\n * @since 6.0.0 The `disableParagraphMargin` prop was removed since it no longer\n * exists on the `CardContent` component.\n * @since 6.0.0 Removed the `marginTop` prop since it is no longer needed.\n */\nexport interface ExpansionPanelProps extends CardProps {\n  /**\n   * Set this to `true` if the {@link children} should be visible. This should\n   * generally be provided by the `useExpansionPanels` hook.\n   */\n  expanded: boolean;\n\n  /**\n   * A function that should toggle the {@link expanded} state. This should\n   * generally be provided by the `useExpansionPanels` hook.\n   */\n  onExpandClick: () => void;\n\n  /**\n   * Set this to `true` to prevent the panel from toggling the {@link expanded}\n   * state. This should generally be provided by the `useExpansionPanels` hook.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * @defaultValue `true`\n   * @see {@link CardProps.fullWidth}\n   */\n  fullWidth?: boolean;\n\n  /**\n   * This can be used to implement a custom header implementation, but it\n   * probably shouldn't be needed.\n   *\n   * @since 6.0.0 This was renamed from `customHeader`\n   * @see {@link headerProps}\n   */\n  header?: ReactNode;\n\n  /**\n   * This can be used to apply additional props to the header element.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link headerStyle} and {@link headerClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <ExpansionPanel\n   *   {...props}\n   *   headerProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     icon: <MyCustomIcon />,\n   *     iconRotatorProps: {\n   *       className: \"another-custom-class-name\",\n   *     },\n   *   }}\n   * />\n   * ```\n   */\n  headerProps?: Omit<\n    ExpansionPanelHeaderProps,\n    \"id\" | \"aria-disabled\" | \"onClick\" | \"expanded\"\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `ExpansionPanelHeader`\n   * component.\n   */\n  headerStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `ExpansionPanelHeader`\n   * component.\n   */\n  headerClassName?: string;\n\n  /**\n   * Content to display within the header of the expansion panel that toggles\n   * the expanded state. This should generally contain some accessible text\n   * describing the expansion panel's content.\n   *\n   * @since 6.0.0 This was renamed from `header`\n   */\n  headerChildren?: ReactNode;\n\n  /**\n   * This can be used to apply additional props to the `CardContent` component\n   * if needed.\n   *\n   * Note: `disableSecondaryColor` and `disableLastChildPadding` default to\n   * `true` in this implementation.\n   *\n   * @example\n   * ```tsx\n   * contentProps={{\n   *   style: {},\n   *   className: \"some-class-name\",\n   *   disablePadding: true,\n   *   disableSecondaryColor: false,\n   *   disableLastChildPadding: false,\n   *   // whatever else\n   * }}\n   * ```\n   *\n   * @see {@link contentStyle}\n   * @see {@link contentClassName}\n   * @see {@link disableContentPadding}\n   */\n  contentProps?: PropsWithRef<Omit<CardContentProps, \"role\">>;\n\n  /**\n   * Convenience prop to apply custom style to the `CardContent` component.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `CardContent` component.\n   */\n  contentClassName?: string;\n\n  /**\n   * Set to `true` to disable the collapse transition for the card content\n   * whenever the {@link expanded} state changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link CardContentProps.disablePadding}\n   */\n  disableContentPadding?: boolean;\n\n  /**\n   * Set this to `true` to unmount the {@link children} when the\n   * {@link expanded} state is `false`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `persistent` to match the\n   * `useCollapseTransition` naming convention.\n   */\n  temporary?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * An expansion panel enables content to be either collapsed (hidden) or\n * expanded (visible) following the disclosure pattern.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ExpansionPanelGroupExample(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList style={{ width: \"100%\" }}>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @see `useExpansionPanels` for examples.\n * @since 6.0.0 The content will be persistent and invisible using `display: none`\n * instead of unmounting and also animate the `margin-top` style.\n */\nexport const ExpansionPanel = forwardRef<\n  HTMLHeadingElement,\n  ExpansionPanelProps\n>(function ExpansionPanel(props, ref) {\n  const {\n    id: propId,\n    className,\n    contentProps,\n    contentStyle,\n    contentClassName,\n    header: propHeader,\n    headerProps,\n    headerStyle,\n    headerClassName,\n    headerChildren,\n    children,\n    expanded,\n    onExpandClick,\n    disabled = false,\n    fullWidth = true,\n    temporary = false,\n    disableTransition = false,\n    disableContentPadding = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"expansion-panel\");\n  const { elementProps, rendered } = useCollapseTransition({\n    nodeRef: contentProps?.ref,\n    style: contentStyle,\n    className: contentClassName,\n    timeout: disableTransition ? 0 : undefined,\n    temporary,\n    transitionIn: expanded,\n  });\n\n  let header = propHeader;\n  if (header === undefined) {\n    header = (\n      <ExpansionPanelHeader\n        style={headerStyle}\n        className={headerClassName}\n        disableTransition={disableTransition}\n        {...headerProps}\n        aria-disabled={disabled || undefined}\n        id={id}\n        onClick={onExpandClick}\n        expanded={expanded}\n      >\n        {headerChildren}\n      </ExpansionPanelHeader>\n    );\n  }\n\n  return (\n    <Card\n      {...remaining}\n      id={`${id}-container`}\n      ref={ref}\n      fullWidth={fullWidth}\n      className={expansionPanel({\n        expanded,\n        disableTransition,\n        className,\n      })}\n    >\n      {header}\n      {rendered && (\n        <CardContent\n          id={`${id}-content`}\n          aria-labelledby={id}\n          disablePadding={disableContentPadding}\n          disableSecondaryColor\n          disableLastChildPadding\n          {...contentProps}\n          {...elementProps}\n          role=\"region\"\n        >\n          {children}\n        </CardContent>\n      )}\n    </Card>\n  );\n});\n"],"names":["forwardRef","Card","CardContent","useCollapseTransition","useEnsuredId","ExpansionPanelHeader","expansionPanel","ExpansionPanel","props","ref","id","propId","className","contentProps","contentStyle","contentClassName","header","propHeader","headerProps","headerStyle","headerClassName","headerChildren","children","expanded","onExpandClick","disabled","fullWidth","temporary","disableTransition","disableContentPadding","remaining","elementProps","rendered","nodeRef","style","timeout","undefined","transitionIn","aria-disabled","onClick","aria-labelledby","disablePadding","disableSecondaryColor","disableLastChildPadding","role"],"mappings":"AAAA;;AAEA,SAA6CA,UAAU,QAAQ,QAAQ;AAEvE,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,oBAAoB,QAEf,4BAA4B;AACnC,SAASC,cAAc,QAAQ,cAAc;AA0J7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,QAAQC,UAAU,EAClBC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBC,oBAAoB,KAAK,EACzBC,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEoB,YAAY,EAAEC,QAAQ,EAAE,GAAG7B,sBAAsB;QACvD8B,SAASpB,cAAcJ;QACvByB,OAAOpB;QACPF,WAAWG;QACXoB,SAASP,oBAAoB,IAAIQ;QACjCT;QACAU,cAAcd;IAChB;IAEA,IAAIP,SAASC;IACb,IAAID,WAAWoB,WAAW;QACxBpB,uBACE,KAACX;YACC6B,OAAOf;YACPP,WAAWQ;YACXQ,mBAAmBA;YAClB,GAAGV,WAAW;YACfoB,iBAAeb,YAAYW;YAC3B1B,IAAIA;YACJ6B,SAASf;YACTD,UAAUA;sBAETF;;IAGP;IAEA,qBACE,MAACpB;QACE,GAAG6B,SAAS;QACbpB,IAAI,GAAGA,GAAG,UAAU,CAAC;QACrBD,KAAKA;QACLiB,WAAWA;QACXd,WAAWN,eAAe;YACxBiB;YACAK;YACAhB;QACF;;YAECI;YACAgB,0BACC,KAAC9B;gBACCQ,IAAI,GAAGA,GAAG,QAAQ,CAAC;gBACnB8B,mBAAiB9B;gBACjB+B,gBAAgBZ;gBAChBa,qBAAqB;gBACrBC,uBAAuB;gBACtB,GAAG9B,YAAY;gBACf,GAAGkB,YAAY;gBAChBa,MAAK;0BAEJtB;;;;AAKX,GAAG"}

package/dist/expansion-panel/useExpansionPanels.js

@@ -80,7 +80,7 @@ import { useReadonlySet } from "../useReadonlySet.js";
     const { value: expandedIds, setValue: setExpandedIds, toggleValue } = useReadonlySet({
         toggleType: multiple ? "multiple" : "single",
         defaultValue: ()=>{
-            if (typeof defaultExpandedIds === "undefined") {
+            if (defaultExpandedIds === undefined) {
                 const initialList = [];
                 if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
                     initialList.push(createId(defaultExpandedIndex ?? 0));

package/dist/expansion-panel/useExpansionPanels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\n\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @since 6.0.0 */\nexport interface ExpansionPanelHookOptions {\n  /**\n   * An optional id to prefix each panel with.\n   *\n   * @defaultValue `\"expansion-panel-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if multiple panels can be open at the same time.\n   *\n   * @defaultValue `false`\n   */\n  multiple?: boolean;\n\n  /**\n   * Set this to `true` to enforce that at least one panel must always be\n   * expanded.\n   *\n   * @defaultValue `false`\n   */\n  preventAllCollapsed?: boolean;\n\n  /**\n   * This is a convenience option to disable the expansion transition for all\n   * panels.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `preventAllCollapsed ? [\"expansion-panel-\" + useId() + \"-1\"] : []`\n   */\n  defaultExpandedIds?: UseStateInitializer<string[]>;\n\n  /**\n   * This can only be used if the {@link defaultExpandedIds} was not provided\n   * and using index based panels.\n   *\n   * @example\n   * ```tsx\n   * const { getPanelProps } = useExpansionPanels({\n   *   defaultExpandedIndex: 2,\n   * });\n   *\n   * return (\n   *   <ExpansionPanel {...getPanelProps(0)} />\n   *   <ExpansionPanel {...getPanelProps(1)} />\n   *   // expanded on first render\n   *   <ExpansionPanel {...getPanelProps(2)} />\n   *   <ExpansionPanel {...getPanelProps(3)} />\n   * );\n   * ```\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableContentPadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport type ProvidedExpansionPanelProps = Pick<\n  Required<ExpansionPanelProps>,\n  | \"disabled\"\n  | \"expanded\"\n  | \"onExpandClick\"\n  | \"disableTransition\"\n  | \"disableContentPadding\"\n> & { id?: string };\n\n/**\n * @param indexOrPanelId - This should either be a DOM id to use for the panel\n * or the panel's index.\n * @returns Props to pass to an `ExpansionPanel` for it to work correctly.\n * @since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @since 6.0.0 */\nexport interface ExpansionPanelImplementation {\n  /**\n   * The current set of expanded panel ids if you need this for some reason.\n   */\n  expandedIds: ReadonlySet<string>;\n\n  /**\n   * This can be used to manually control which panels are expanded if the\n   * default behavior does not work for your use case.\n   */\n  setExpandedIds: UseStateSetter<ReadonlySet<string>>;\n\n  /**\n   * @example Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example Custom Panel Ids\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(\"address-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"billing-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"confirmation-panel\")} />\n   * ```\n   */\n  getPanelProps: GetExpansionPanelProps;\n}\n\n/**\n * Use this hook to control the expanded state for a group of `ExpansionPanel`.\n *\n * @example Index Based Panels\n * ```tsx\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @example Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * const panel1Id = \"personal-information-panel\";\n * const panel2Id = \"billing-information-panel\";\n * const panel3Id = \"billing-address-panel\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels({\n *     multiple: true,\n *     defaultExpandedIds: () => [panel1Id, panel2Id, panel3Id],\n *   });\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(panel1Id)} headerChildren=\"Personal Information\">\n *         <PersonalInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel2Id)} headerChildren=\"Billing Information\">\n *         <BillingInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel3Id)} headerChildren=\"Billing Address\">\n *         <BillingAddress />\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,\n * the API changed to return `getPanelProps` instead of a generated list of\n * panel props based on the provided `count`, and the hook no longer supports\n * having all panels expanded by default.\n */\nexport function useExpansionPanels(\n  options: ExpansionPanelHookOptions = {}\n): ExpansionPanelImplementation {\n  const {\n    baseId: propBaseId,\n    multiple = false,\n    preventAllCollapsed = false,\n    disableTransition = false,\n    defaultExpandedIds,\n    defaultExpandedIndex,\n    disableContentPadding = false,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"expansion-panel\");\n  const createId = (index: number): string => `${baseId}-${index + 1}`;\n  const {\n    value: expandedIds,\n    setValue: setExpandedIds,\n    toggleValue,\n  } = useReadonlySet({\n    toggleType: multiple ? \"multiple\" : \"single\",\n    defaultValue: () => {\n      if (typeof defaultExpandedIds === \"undefined\") {\n        const initialList: string[] = [];\n        if (typeof defaultExpandedIndex === \"number\" || preventAllCollapsed) {\n          initialList.push(createId(defaultExpandedIndex ?? 0));\n        }\n\n        return new Set(initialList);\n      }\n\n      return typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    },\n  });\n\n  return {\n    expandedIds,\n    setExpandedIds,\n    getPanelProps(indexOrPanelId) {\n      let id: string | undefined;\n      let panelId: string;\n      if (typeof indexOrPanelId === \"number\") {\n        id = createId(indexOrPanelId);\n        panelId = id;\n      } else {\n        panelId = indexOrPanelId;\n      }\n\n      const expanded = expandedIds.has(panelId);\n      const disabled =\n        expanded && preventAllCollapsed && expandedIds.size === 1;\n      return {\n        id,\n        disabled,\n        expanded,\n        onExpandClick() {\n          if (disabled) {\n            return;\n          }\n\n          toggleValue(panelId);\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useEnsuredId","useReadonlySet","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllCollapsed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","value","expandedIds","setValue","setExpandedIds","toggleValue","toggleType","defaultValue","initialList","push","Set","getPanelProps","indexOrPanelId","id","panelId","expanded","has","disabled","size","onExpandClick"],"mappings":"AAAA;AAGA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,cAAc,QAAQ,uBAAuB;AAsHtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEC,GACD,OAAO,SAASC,mBACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,WAAW,KAAK,EAChBC,sBAAsB,KAAK,EAC3BC,oBAAoB,KAAK,EACzBC,kBAAkB,EAClBC,oBAAoB,EACpBC,wBAAwB,KAAK,EAC9B,GAAGR;IAEJ,MAAMC,SAASJ,aAAaK,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,GAAGT,OAAO,CAAC,EAAES,QAAQ,GAAG;IACpE,MAAM,EACJC,OAAOC,WAAW,EAClBC,UAAUC,cAAc,EACxBC,WAAW,EACZ,GAAGjB,eAAe;QACjBkB,YAAYb,WAAW,aAAa;QACpCc,cAAc;YACZ,IAAI,OAAOX,uBAAuB,aAAa;gBAC7C,MAAMY,cAAwB,EAAE;gBAChC,IAAI,OAAOX,yBAAyB,YAAYH,qBAAqB;oBACnEc,YAAYC,IAAI,CAACV,SAASF,wBAAwB;gBACpD;gBAEA,OAAO,IAAIa,IAAIF;YACjB;YAEA,OAAO,OAAOZ,uBAAuB,aACjCA,uBACAA;QACN;IACF;IAEA,OAAO;QACLM;QACAE;QACAO,eAAcC,cAAc;YAC1B,IAAIC;YACJ,IAAIC;YACJ,IAAI,OAAOF,mBAAmB,UAAU;gBACtCC,KAAKd,SAASa;gBACdE,UAAUD;YACZ,OAAO;gBACLC,UAAUF;YACZ;YAEA,MAAMG,WAAWb,YAAYc,GAAG,CAACF;YACjC,MAAMG,WACJF,YAAYrB,uBAAuBQ,YAAYgB,IAAI,KAAK;YAC1D,OAAO;gBACLL;gBACAI;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAZ,YAAYS;gBACd;gBACAnB;gBACAG;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\n\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @since 6.0.0 */\nexport interface ExpansionPanelHookOptions {\n  /**\n   * An optional id to prefix each panel with.\n   *\n   * @defaultValue `\"expansion-panel-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if multiple panels can be open at the same time.\n   *\n   * @defaultValue `false`\n   */\n  multiple?: boolean;\n\n  /**\n   * Set this to `true` to enforce that at least one panel must always be\n   * expanded.\n   *\n   * @defaultValue `false`\n   */\n  preventAllCollapsed?: boolean;\n\n  /**\n   * This is a convenience option to disable the expansion transition for all\n   * panels.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `preventAllCollapsed ? [\"expansion-panel-\" + useId() + \"-1\"] : []`\n   */\n  defaultExpandedIds?: UseStateInitializer<string[]>;\n\n  /**\n   * This can only be used if the {@link defaultExpandedIds} was not provided\n   * and using index based panels.\n   *\n   * @example\n   * ```tsx\n   * const { getPanelProps } = useExpansionPanels({\n   *   defaultExpandedIndex: 2,\n   * });\n   *\n   * return (\n   *   <ExpansionPanel {...getPanelProps(0)} />\n   *   <ExpansionPanel {...getPanelProps(1)} />\n   *   // expanded on first render\n   *   <ExpansionPanel {...getPanelProps(2)} />\n   *   <ExpansionPanel {...getPanelProps(3)} />\n   * );\n   * ```\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableContentPadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport type ProvidedExpansionPanelProps = Pick<\n  Required<ExpansionPanelProps>,\n  | \"disabled\"\n  | \"expanded\"\n  | \"onExpandClick\"\n  | \"disableTransition\"\n  | \"disableContentPadding\"\n> & { id?: string };\n\n/**\n * @param indexOrPanelId - This should either be a DOM id to use for the panel\n * or the panel's index.\n * @returns Props to pass to an `ExpansionPanel` for it to work correctly.\n * @since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @since 6.0.0 */\nexport interface ExpansionPanelImplementation {\n  /**\n   * The current set of expanded panel ids if you need this for some reason.\n   */\n  expandedIds: ReadonlySet<string>;\n\n  /**\n   * This can be used to manually control which panels are expanded if the\n   * default behavior does not work for your use case.\n   */\n  setExpandedIds: UseStateSetter<ReadonlySet<string>>;\n\n  /**\n   * @example Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example Custom Panel Ids\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(\"address-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"billing-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"confirmation-panel\")} />\n   * ```\n   */\n  getPanelProps: GetExpansionPanelProps;\n}\n\n/**\n * Use this hook to control the expanded state for a group of `ExpansionPanel`.\n *\n * @example Index Based Panels\n * ```tsx\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @example Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * const panel1Id = \"personal-information-panel\";\n * const panel2Id = \"billing-information-panel\";\n * const panel3Id = \"billing-address-panel\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels({\n *     multiple: true,\n *     defaultExpandedIds: () => [panel1Id, panel2Id, panel3Id],\n *   });\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(panel1Id)} headerChildren=\"Personal Information\">\n *         <PersonalInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel2Id)} headerChildren=\"Billing Information\">\n *         <BillingInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel3Id)} headerChildren=\"Billing Address\">\n *         <BillingAddress />\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,\n * the API changed to return `getPanelProps` instead of a generated list of\n * panel props based on the provided `count`, and the hook no longer supports\n * having all panels expanded by default.\n */\nexport function useExpansionPanels(\n  options: ExpansionPanelHookOptions = {}\n): ExpansionPanelImplementation {\n  const {\n    baseId: propBaseId,\n    multiple = false,\n    preventAllCollapsed = false,\n    disableTransition = false,\n    defaultExpandedIds,\n    defaultExpandedIndex,\n    disableContentPadding = false,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"expansion-panel\");\n  const createId = (index: number): string => `${baseId}-${index + 1}`;\n  const {\n    value: expandedIds,\n    setValue: setExpandedIds,\n    toggleValue,\n  } = useReadonlySet({\n    toggleType: multiple ? \"multiple\" : \"single\",\n    defaultValue: () => {\n      if (defaultExpandedIds === undefined) {\n        const initialList: string[] = [];\n        if (typeof defaultExpandedIndex === \"number\" || preventAllCollapsed) {\n          initialList.push(createId(defaultExpandedIndex ?? 0));\n        }\n\n        return new Set(initialList);\n      }\n\n      return typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    },\n  });\n\n  return {\n    expandedIds,\n    setExpandedIds,\n    getPanelProps(indexOrPanelId) {\n      let id: string | undefined;\n      let panelId: string;\n      if (typeof indexOrPanelId === \"number\") {\n        id = createId(indexOrPanelId);\n        panelId = id;\n      } else {\n        panelId = indexOrPanelId;\n      }\n\n      const expanded = expandedIds.has(panelId);\n      const disabled =\n        expanded && preventAllCollapsed && expandedIds.size === 1;\n      return {\n        id,\n        disabled,\n        expanded,\n        onExpandClick() {\n          if (disabled) {\n            return;\n          }\n\n          toggleValue(panelId);\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useEnsuredId","useReadonlySet","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllCollapsed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","value","expandedIds","setValue","setExpandedIds","toggleValue","toggleType","defaultValue","undefined","initialList","push","Set","getPanelProps","indexOrPanelId","id","panelId","expanded","has","disabled","size","onExpandClick"],"mappings":"AAAA;AAGA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,cAAc,QAAQ,uBAAuB;AAsHtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEC,GACD,OAAO,SAASC,mBACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,WAAW,KAAK,EAChBC,sBAAsB,KAAK,EAC3BC,oBAAoB,KAAK,EACzBC,kBAAkB,EAClBC,oBAAoB,EACpBC,wBAAwB,KAAK,EAC9B,GAAGR;IAEJ,MAAMC,SAASJ,aAAaK,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,GAAGT,OAAO,CAAC,EAAES,QAAQ,GAAG;IACpE,MAAM,EACJC,OAAOC,WAAW,EAClBC,UAAUC,cAAc,EACxBC,WAAW,EACZ,GAAGjB,eAAe;QACjBkB,YAAYb,WAAW,aAAa;QACpCc,cAAc;YACZ,IAAIX,uBAAuBY,WAAW;gBACpC,MAAMC,cAAwB,EAAE;gBAChC,IAAI,OAAOZ,yBAAyB,YAAYH,qBAAqB;oBACnEe,YAAYC,IAAI,CAACX,SAASF,wBAAwB;gBACpD;gBAEA,OAAO,IAAIc,IAAIF;YACjB;YAEA,OAAO,OAAOb,uBAAuB,aACjCA,uBACAA;QACN;IACF;IAEA,OAAO;QACLM;QACAE;QACAQ,eAAcC,cAAc;YAC1B,IAAIC;YACJ,IAAIC;YACJ,IAAI,OAAOF,mBAAmB,UAAU;gBACtCC,KAAKf,SAASc;gBACdE,UAAUD;YACZ,OAAO;gBACLC,UAAUF;YACZ;YAEA,MAAMG,WAAWd,YAAYe,GAAG,CAACF;YACjC,MAAMG,WACJF,YAAYtB,uBAAuBQ,YAAYiB,IAAI,KAAK;YAC1D,OAAO;gBACLL;gBACAI;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAb,YAAYU;gBACd;gBACApB;gBACAG;YACF;QACF;IACF;AACF"}

package/dist/files/FileInput.js

@@ -71,7 +71,7 @@ import { fileInput } from "./styles.js";
     });
     const icon = getIcon("upload", propIcon);
     let children = propChildren;
-    if (typeof propChildren === "undefined" && !props["aria-label"] && !props["aria-labelledby"]) {
+    if (propChildren === undefined && !props["aria-label"] && !props["aria-labelledby"]) {
         children = /*#__PURE__*/ _jsx(SrOnly, {
             phoneOnly: responsive,
             children: srOnlyLabel