@react-md/core 1.0.0-next.15 → 1.0.0-next.17

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useExpansionList } from \"./useExpansionList.js\";\n\n/**\n * @since 6.0.0 No longer requires the `onKeyDown` prop.\n */\nexport interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is only used to implement the keyboard movement behavior for\n * the `ExpansionPanel` components.\n *\n * @see {@link useExpansionList} for a custom implementation example if you do\n * not want to use a `<div>` for this wrapper component.\n * @since 6.0.0 Uses the new keyboard movement API and does not\n * require the `onKeyDOwn` prop to be provided.\n */\nexport const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(\n  function ExpansionList(props, ref) {\n    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;\n\n    const { movementContext, movementProps } = useExpansionList({\n      onClick,\n      onFocus,\n      onKeyDown,\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div {...remaining} {...movementProps} ref={ref}>\n          {children}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","KeyboardMovementProvider","useExpansionList","ExpansionList","props","ref","onClick","onFocus","onKeyDown","children","remaining","movementContext","movementProps","value","div"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,8BAAgBH,WAC3B,SAASG,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEhE,MAAM,EAAEO,eAAe,EAAEC,aAAa,EAAE,GAAGV,iBAAiB;QAC1DI;QACAC;QACAC;IACF;IAEA,qBACE,KAACP;QAAyBY,OAAOF;kBAC/B,cAAA,KAACG;YAAK,GAAGJ,SAAS;YAAG,GAAGE,aAAa;YAAEP,KAAKA;sBACzCI;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useExpansionList } from \"./useExpansionList.js\";\n\n/**\n * @since 6.0.0 No longer requires the `onKeyDown` prop.\n */\nexport interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is only used to implement the keyboard movement behavior for\n * the `ExpansionPanel` components.\n *\n * @see {@link useExpansionList} for a custom implementation example if you do\n * not want to use a `<div>` for this wrapper component.\n * @since 6.0.0 Uses the new keyboard movement API and does not\n * require the `onKeyDown` prop to be provided.\n */\nexport const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(\n  function ExpansionList(props, ref) {\n    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;\n\n    const { movementContext, movementProps } = useExpansionList({\n      onClick,\n      onFocus,\n      onKeyDown,\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div {...remaining} {...movementProps} ref={ref}>\n          {children}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","KeyboardMovementProvider","useExpansionList","ExpansionList","props","ref","onClick","onFocus","onKeyDown","children","remaining","movementContext","movementProps","value","div"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,8BAAgBH,WAC3B,SAASG,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEhE,MAAM,EAAEO,eAAe,EAAEC,aAAa,EAAE,GAAGV,iBAAiB;QAC1DI;QACAC;QACAC;IACF;IAEA,qBACE,KAACP;QAAyBY,OAAOF;kBAC/B,cAAA,KAACG;YAAK,GAAGJ,SAAS;YAAG,GAAGE,aAAa;YAAEP,KAAKA;sBACzCI;;;AAIT,GACA"}

package/dist/expansion-panel/ExpansionPanel.d.ts

@@ -3,28 +3,12 @@ import { type CardProps } from "../card/Card.js";
 import { type CardContentProps } from "../card/CardContent.js";
 import { type PropsWithRef } from "../types.js";
 import { type ExpansionPanelHeaderProps } from "./ExpansionPanelHeader.js";
-/** @since 6.0.0 */
-export interface ExpansionPanelClassNameOptions {
-    className?: string;
-    /**
-     * @defaultValue `false`
-     */
-    expanded?: boolean;
-    /**
-     * Set this to `true` to disable the `margin-top` transition between multiple
-     * panels
-     *
-     * @defaultValue `false`
-     */
-    disableTransition?: boolean;
-}
-/**
- * @since 6.0.0
- */
-export declare function expansionPanel(options?: ExpansionPanelClassNameOptions): string;
 /**
- * @since 6.0.0 Renamed some card props and updated for the latest
- * API.
+ * @since 6.0.0 The `disableSecondaryColor` convenience prop was removed in
+ * favor of the new `contentProps` object.
+ * @since 6.0.0 The `disableParagraphMargin` prop was removed since it no longer
+ * exists on the `CardContent` component.
+ * @since 6.0.0 Removed the `marginTop` prop since it is no longer needed.
  */
 export interface ExpansionPanelProps extends CardProps {
     /**
@@ -36,7 +20,7 @@ export interface ExpansionPanelProps extends CardProps {
      * A function that should toggle the {@link expanded} state. This should
      * generally be provided by the `useExpansionPanels` hook.
      */
-    onExpandClick(): void;
+    onExpandClick: () => void;
     /**
      * Set this to `true` to prevent the panel from toggling the {@link expanded}
      * state. This should generally be provided by the `useExpansionPanels` hook.
@@ -103,8 +87,8 @@ export interface ExpansionPanelProps extends CardProps {
      * This can be used to apply additional props to the `CardContent` component
      * if needed.
      *
-     * Note: The `disableLastChildPadding` defaults to `true` in this
-     * implementation.
+     * Note: `disableSecondaryColor` and `disableLastChildPadding` default to
+     * `true` in this implementation.
      *
      * @example
      * ```tsx
@@ -112,7 +96,7 @@ export interface ExpansionPanelProps extends CardProps {
      *   style: {},
      *   className: "some-class-name",
      *   disablePadding: true,
-     *   disableSecondaryColor: true,
+     *   disableSecondaryColor: false,
      *   disableLastChildPadding: false,
      *   // whatever else
      * }}

package/dist/expansion-panel/ExpansionPanel.js

@@ -1,23 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { Card } from "../card/Card.js";
 import { CardContent } from "../card/CardContent.js";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import { ExpansionPanelHeader } from "./ExpansionPanelHeader.js";
-const styles = bem("rmd-expansion-panel");
-/**
- * @since 6.0.0
- */ export function expansionPanel(options = {}) {
-    const { className, expanded = false, disableTransition = false } = options;
-    return cnb(styles({
-        expanded,
-        animate: !disableTransition
-    }), className);
-}
+import { expansionPanel } from "./expansionPanelStyles.js";
 /**
  * **Client Component**
  *

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type CSSProperties, type ReactNode } from \"react\";\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 { bem } from \"../utils/bem.js\";\nimport {\n  ExpansionPanelHeader,\n  type ExpansionPanelHeaderProps,\n} from \"./ExpansionPanelHeader.js\";\n\nconst styles = bem(\"rmd-expansion-panel\");\n\n/** @since 6.0.0 */\nexport interface ExpansionPanelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  expanded?: boolean;\n\n  /**\n   * Set this to `true` to disable the `margin-top` transition between multiple\n   * panels\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function expansionPanel(\n  options: ExpansionPanelClassNameOptions = {}\n): string {\n  const { className, expanded = false, disableTransition = false } = options;\n\n  return cnb(styles({ expanded, animate: !disableTransition }), className);\n}\n\n/**\n * @since 6.0.0 Renamed some card props and updated for the latest\n * API.\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: The `disableLastChildPadding` defaults to `true` in this\n   * implementation.\n   *\n   * @example\n   * ```tsx\n   * contentProps={{\n   *   style: {},\n   *   className: \"some-class-name\",\n   *   disablePadding: true,\n   *   disableSecondaryColor: true,\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\">, HTMLDivElement>;\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 * @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":["cnb","forwardRef","Card","CardContent","useCollapseTransition","useEnsuredId","bem","ExpansionPanelHeader","styles","expansionPanel","options","className","expanded","disableTransition","animate","ExpansionPanel","props","ref","id","propId","contentProps","contentStyle","contentClassName","header","propHeader","headerProps","headerStyle","headerClassName","headerChildren","children","onExpandClick","disabled","fullWidth","temporary","disableContentPadding","remaining","elementProps","rendered","nodeRef","style","timeout","undefined","transitionIn","aria-disabled","onClick","aria-labelledby","disablePadding","disableSecondaryColor","disableLastChildPadding","role"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA4C,QAAQ;AACvE,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,oBAAoB,QAEf,4BAA4B;AAEnC,MAAMC,SAASF,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASG,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAE,GAAGH;IAEnE,OAAOV,IAAIQ,OAAO;QAAEI;QAAUE,SAAS,CAACD;IAAkB,IAAIF;AAChE;AAuJA;;;;;;CAMC,GACD,OAAO,MAAMI,+BAAiBd,WAG5B,SAASc,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVR,SAAS,EACTS,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,QAAQC,UAAU,EAClBC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,cAAc,EACdC,QAAQ,EACRjB,QAAQ,EACRkB,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBpB,oBAAoB,KAAK,EACzBqB,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKb,aAAac,QAAQ;IAChC,MAAM,EAAEiB,YAAY,EAAEC,QAAQ,EAAE,GAAGjC,sBAAsB;QACvDkC,SAASlB,cAAcH;QACvBsB,OAAOlB;QACPV,WAAWW;QACXkB,SAAS3B,oBAAoB,IAAI4B;QACjCR;QACAS,cAAc9B;IAChB;IAEA,IAAIW,SAASC;IACb,IAAI,OAAOD,WAAW,aAAa;QACjCA,uBACE,KAAChB;YACCgC,OAAOb;YACPf,WAAWgB;YACXd,mBAAmBA;YAClB,GAAGY,WAAW;YACfkB,iBAAeZ,YAAYU;YAC3BvB,IAAIA;YACJ0B,SAASd;YACTlB,UAAUA;sBAETgB;;IAGP;IAEA,qBACE,MAAC1B;QACE,GAAGiC,SAAS;QACbjB,IAAI,CAAC,EAAEA,GAAG,UAAU,CAAC;QACrBD,KAAKA;QACLe,WAAWA;QACXrB,WAAWF,eAAe;YACxBG;YACAC;YACAF;QACF;;YAECY;YACAc,0BACC,KAAClC;gBACCe,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;gBACnB2B,mBAAiB3B;gBACjB4B,gBAAgBZ;gBAChBa,qBAAqB;gBACrBC,uBAAuB;gBACtB,GAAG5B,YAAY;gBACf,GAAGgB,YAAY;gBAChBa,MAAK;0BAEJpB;;;;AAKX,GAAG"}
+{"version":3,"sources":["../../src/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type CSSProperties, type ReactNode } from \"react\";\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 \"./expansionPanelStyles.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\">, HTMLDivElement>;\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 * @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;;AACA,SAASA,UAAU,QAA4C,QAAQ;AACvE,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,4BAA4B;AA0J3D;;;;;;CAMC,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"}

package/dist/expansion-panel/ExpansionPanelHeader.d.ts

@@ -62,7 +62,6 @@ export interface ExpansionPanelHeaderProps extends ButtonHTMLAttributes<HTMLButt
     disableTransition?: boolean;
 }
 /**
- * **Server Component**
  * This is mostly an internal component, but can also be used to implement a
  * custom header implementation if needed. This might really be a client
  * component in practice since the `onClick` prop must be provided.

package/dist/expansion-panel/ExpansionPanelHeader.js

@@ -6,7 +6,6 @@ import { IconRotator } from "../icon/IconRotator.js";
 import { getIcon } from "../icon/iconConfig.js";
 import { Typography } from "../typography/Typography.js";
 /**
- * **Server Component**
  * This is mostly an internal component, but can also be used to implement a
  * custom header implementation if needed. This might really be a client
  * component in practice since the `onClick` prop must be provided.

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionPanelHeader.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\n\n/**\n * @since 6.0.0 Updated to include additional heading/Typography\n * props.\n */\nexport interface ExpansionPanelHeaderProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  id: string;\n\n  /**\n   * This should be a function that toggles the expansion state for the parent\n   * `ExpansionPanel`.\n   */\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  expanded: boolean;\n\n  /**\n   * @defaultValue `\"h3\"`\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * @defaultValue `\"subtitle-1\"`\n   */\n  headingType?: TypographyType;\n\n  /**\n   * Any additional props to provide to the heading element that wraps the\n   * expansion panel button.\n   */\n  headingProps?: PropsWithRef<TypographyProps, HTMLHeadingElement>;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\" | \"disableTransition\">;\n\n  /**\n   * Any children to display **before** the button in the heading element. This\n   * should really only be used if you need to add additional clickable elements\n   * within the header.\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Any children to display **after** the button in the heading element.This\n   * should really only be used if you need to add additional clickable elements\n   * within the header.\n   *\n   * @example\n   * ```tsx\n   * afterChildren={\n   *   <DropdownMenu buttonType=\"icon\" ButtonChildren={<MoreVertSVGIcon />}>\n   *     <MenuItem>Item 1</MenuItem>\n   *     <MenuItem>Item 2</MenuItem>\n   *     <MenuItem>Item 3</MenuItem>\n   *   </DropdownMenu>\n   * }\n   * ```\n   */\n  afterChildren?: ReactNode;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Server Component**\n * This is mostly an internal component, but can also be used to implement a\n * custom header implementation if needed. This might really be a client\n * component in practice since the `onClick` prop must be provided.\n *\n * @example Custom Header\n * ```tsx\n * import type { ExpansionPanelProps } from \"@react-md/core\";\n * import {\n *   ExpansionPanel,\n *   ExpansionPanelHeader,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * const { useId } from \"react\";\n *\n * export type CustomExpansionPanelProps = ExpansionPanelProps & { id: string; };\n *\n * export function CustomExpansionPanel(props: CustomExpansionPanelProps): ReactElement {\n *   const {\n *     id,\n *     disabled,\n *     onExpandClick,\n *     expanded,\n *     disableTransition,\n *     headerChildren,\n *   } = props;\n *\n *   return (\n *     <ExpansionPanel\n *       {...props}\n *       header={(\n *         <ExpansionPanelHeader\n *           aria-disabled={disabled || undefined}\n *           id={id}\n *           onClick={onExpandClick}\n *           expanded={expanded}\n *           disableTransition={disableTransition}\n *           // whatever props and any custom implementation\n *         >\n *           {headerChildren}\n *         </ExpansionPanelHeader>\n *       )}\n *     />\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Updated to be wrapped by the {@link Typography}\n * component and rendered as an `<h6>`.\n */\nexport const ExpansionPanelHeader = forwardRef<\n  HTMLHeadingElement,\n  ExpansionPanelHeaderProps\n>(function ExpansionPanelHeader(props, ref) {\n  const {\n    id,\n    headingType = \"subtitle-1\",\n    headingProps,\n    iconRotatorProps,\n    icon: propIcon,\n    expanded,\n    className,\n    children,\n    beforeChildren,\n    afterChildren,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const icon = getIcon(\"expander\", propIcon);\n\n  return (\n    <Typography\n      ref={ref}\n      type={headingType}\n      margin=\"none\"\n      {...headingProps}\n      className={cnb(\"rmd-expansion-panel__heading\", headingProps?.className)}\n    >\n      {beforeChildren}\n      <ButtonUnstyled\n        {...remaining}\n        aria-expanded={expanded}\n        id={id}\n        className={cnb(\"rmd-expansion-panel__button\", className)}\n      >\n        {children}\n        {icon && (\n          <IconRotator\n            {...iconRotatorProps}\n            rotated={expanded}\n            disableTransition={disableTransition}\n          >\n            {icon}\n          </IconRotator>\n        )}\n      </ButtonUnstyled>\n      {afterChildren}\n    </Typography>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","getIcon","Typography","ExpansionPanelHeader","props","ref","id","headingType","headingProps","iconRotatorProps","icon","propIcon","expanded","className","children","beforeChildren","afterChildren","disableTransition","remaining","type","margin","aria-expanded","rotated"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,UAAU,QAA8B,8BAA8B;AAuE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,EAAE,EACFC,cAAc,YAAY,EAC1BC,YAAY,EACZC,gBAAgB,EAChBC,MAAMC,QAAQ,EACdC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGd;IAEJ,MAAMM,OAAOT,QAAQ,YAAYU;IAEjC,qBACE,MAACT;QACCG,KAAKA;QACLc,MAAMZ;QACNa,QAAO;QACN,GAAGZ,YAAY;QAChBK,WAAWhB,IAAI,gCAAgCW,cAAcK;;YAE5DE;0BACD,MAAChB;gBACE,GAAGmB,SAAS;gBACbG,iBAAeT;gBACfN,IAAIA;gBACJO,WAAWhB,IAAI,+BAA+BgB;;oBAE7CC;oBACAJ,sBACC,KAACV;wBACE,GAAGS,gBAAgB;wBACpBa,SAASV;wBACTK,mBAAmBA;kCAElBP;;;;YAINM;;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/expansion-panel/ExpansionPanelHeader.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\n\n/**\n * @since 6.0.0 Updated to include additional heading/Typography\n * props.\n */\nexport interface ExpansionPanelHeaderProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  id: string;\n\n  /**\n   * This should be a function that toggles the expansion state for the parent\n   * `ExpansionPanel`.\n   */\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  expanded: boolean;\n\n  /**\n   * @defaultValue `\"h3\"`\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * @defaultValue `\"subtitle-1\"`\n   */\n  headingType?: TypographyType;\n\n  /**\n   * Any additional props to provide to the heading element that wraps the\n   * expansion panel button.\n   */\n  headingProps?: PropsWithRef<TypographyProps, HTMLHeadingElement>;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\" | \"disableTransition\">;\n\n  /**\n   * Any children to display **before** the button in the heading element. This\n   * should really only be used if you need to add additional clickable elements\n   * within the header.\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Any children to display **after** the button in the heading element.This\n   * should really only be used if you need to add additional clickable elements\n   * within the header.\n   *\n   * @example\n   * ```tsx\n   * afterChildren={\n   *   <DropdownMenu buttonType=\"icon\" ButtonChildren={<MoreVertSVGIcon />}>\n   *     <MenuItem>Item 1</MenuItem>\n   *     <MenuItem>Item 2</MenuItem>\n   *     <MenuItem>Item 3</MenuItem>\n   *   </DropdownMenu>\n   * }\n   * ```\n   */\n  afterChildren?: ReactNode;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * This is mostly an internal component, but can also be used to implement a\n * custom header implementation if needed. This might really be a client\n * component in practice since the `onClick` prop must be provided.\n *\n * @example Custom Header\n * ```tsx\n * import type { ExpansionPanelProps } from \"@react-md/core\";\n * import {\n *   ExpansionPanel,\n *   ExpansionPanelHeader,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * const { useId } from \"react\";\n *\n * export type CustomExpansionPanelProps = ExpansionPanelProps & { id: string; };\n *\n * export function CustomExpansionPanel(props: CustomExpansionPanelProps): ReactElement {\n *   const {\n *     id,\n *     disabled,\n *     onExpandClick,\n *     expanded,\n *     disableTransition,\n *     headerChildren,\n *   } = props;\n *\n *   return (\n *     <ExpansionPanel\n *       {...props}\n *       header={(\n *         <ExpansionPanelHeader\n *           aria-disabled={disabled || undefined}\n *           id={id}\n *           onClick={onExpandClick}\n *           expanded={expanded}\n *           disableTransition={disableTransition}\n *           // whatever props and any custom implementation\n *         >\n *           {headerChildren}\n *         </ExpansionPanelHeader>\n *       )}\n *     />\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Updated to be wrapped by the {@link Typography}\n * component and rendered as an `<h6>`.\n */\nexport const ExpansionPanelHeader = forwardRef<\n  HTMLHeadingElement,\n  ExpansionPanelHeaderProps\n>(function ExpansionPanelHeader(props, ref) {\n  const {\n    id,\n    headingType = \"subtitle-1\",\n    headingProps,\n    iconRotatorProps,\n    icon: propIcon,\n    expanded,\n    className,\n    children,\n    beforeChildren,\n    afterChildren,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const icon = getIcon(\"expander\", propIcon);\n\n  return (\n    <Typography\n      ref={ref}\n      type={headingType}\n      margin=\"none\"\n      {...headingProps}\n      className={cnb(\"rmd-expansion-panel__heading\", headingProps?.className)}\n    >\n      {beforeChildren}\n      <ButtonUnstyled\n        {...remaining}\n        aria-expanded={expanded}\n        id={id}\n        className={cnb(\"rmd-expansion-panel__button\", className)}\n      >\n        {children}\n        {icon && (\n          <IconRotator\n            {...iconRotatorProps}\n            rotated={expanded}\n            disableTransition={disableTransition}\n          >\n            {icon}\n          </IconRotator>\n        )}\n      </ButtonUnstyled>\n      {afterChildren}\n    </Typography>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","getIcon","Typography","ExpansionPanelHeader","props","ref","id","headingType","headingProps","iconRotatorProps","icon","propIcon","expanded","className","children","beforeChildren","afterChildren","disableTransition","remaining","type","margin","aria-expanded","rotated"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,UAAU,QAA8B,8BAA8B;AAuE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,EAAE,EACFC,cAAc,YAAY,EAC1BC,YAAY,EACZC,gBAAgB,EAChBC,MAAMC,QAAQ,EACdC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGd;IAEJ,MAAMM,OAAOT,QAAQ,YAAYU;IAEjC,qBACE,MAACT;QACCG,KAAKA;QACLc,MAAMZ;QACNa,QAAO;QACN,GAAGZ,YAAY;QAChBK,WAAWhB,IAAI,gCAAgCW,cAAcK;;YAE5DE;0BACD,MAAChB;gBACE,GAAGmB,SAAS;gBACbG,iBAAeT;gBACfN,IAAIA;gBACJO,WAAWhB,IAAI,+BAA+BgB;;oBAE7CC;oBACAJ,sBACC,KAACV;wBACE,GAAGS,gBAAgB;wBACpBa,SAASV;wBACTK,mBAAmBA;kCAElBP;;;;YAINM;;;AAGP,GAAG"}

package/dist/expansion-panel/_expansion-panel.scss

@@ -72,7 +72,6 @@ $box-shadow-overlay-bottom: -6px !default;
         @if button.$disable-unstyled-utility-class {
           @include button.unstyled;
         }
-        @include utils.auto-rtl(text-align, left);
 
         align-items: center;
         color: inherit;
@@ -81,6 +80,7 @@ $box-shadow-overlay-bottom: -6px !default;
         justify-content: space-between;
         letter-spacing: inherit;
         padding: $padding;
+        text-align: left;
         width: 100%;
 
         &[aria-disabled="true"] {
@@ -101,6 +101,10 @@ $box-shadow-overlay-bottom: -6px !default;
             }
           }
         }
+
+        @include utils.rtl {
+          text-align: right;
+        }
       }
     }
   }

package/dist/expansion-panel/expansionPanelStyles.d.ts

@@ -0,0 +1,19 @@
+/** @since 6.0.0 */
+export interface ExpansionPanelClassNameOptions {
+    className?: string;
+    /**
+     * @defaultValue `false`
+     */
+    expanded?: boolean;
+    /**
+     * Set this to `true` to disable the `margin-top` transition between multiple
+     * panels
+     *
+     * @defaultValue `false`
+     */
+    disableTransition?: boolean;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function expansionPanel(options?: ExpansionPanelClassNameOptions): string;

package/dist/expansion-panel/expansionPanelStyles.js

@@ -0,0 +1,14 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-expansion-panel");
+/**
+ * @since 6.0.0
+ */ export function expansionPanel(options = {}) {
+    const { className, expanded = false, disableTransition = false } = options;
+    return cnb(styles({
+        expanded,
+        animate: !disableTransition
+    }), className);
+}
+
+//# sourceMappingURL=expansionPanelStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/expansion-panel/expansionPanelStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-expansion-panel\");\n\n/** @since 6.0.0 */\nexport interface ExpansionPanelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  expanded?: boolean;\n\n  /**\n   * Set this to `true` to disable the `margin-top` transition between multiple\n   * panels\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function expansionPanel(\n  options: ExpansionPanelClassNameOptions = {}\n): string {\n  const { className, expanded = false, disableTransition = false } = options;\n\n  return cnb(styles({ expanded, animate: !disableTransition }), className);\n}\n"],"names":["cnb","bem","styles","expansionPanel","options","className","expanded","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAE,GAAGH;IAEnE,OAAOJ,IAAIE,OAAO;QAAEI;QAAUE,SAAS,CAACD;IAAkB,IAAIF;AAChE"}

package/dist/expansion-panel/useExpansionPanels.js

@@ -1,6 +1,6 @@
 "use client";
-import { useState } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useReadonlySet } from "../useReadonlySet.js";
 /**
  * Use this hook to control the expanded state for a group of `ExpansionPanel`.
  *
@@ -80,16 +80,18 @@ import { useEnsuredId } from "../useEnsuredId.js";
     const { baseId: propBaseId, multiple = false, preventAllCollapsed = false, disableTransition = false, defaultExpandedIds, defaultExpandedIndex, disableContentPadding = false } = options;
     const baseId = useEnsuredId(propBaseId, "expansion-panel");
     const createId = (index)=>`${baseId}-${index + 1}`;
-    const [expandedIds, setExpandedIds] = useState(()=>{
-        if (typeof defaultExpandedIds === "undefined") {
-            const initialList = [];
-            if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
-                initialList.push(createId(defaultExpandedIndex ?? 0));
+    const { value: expandedIds, setValue: setExpandedIds, toggleValue } = useReadonlySet({
+        toggleType: multiple ? "multiple" : "single",
+        defaultValue: ()=>{
+            if (typeof defaultExpandedIds === "undefined") {
+                const initialList = [];
+                if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
+                    initialList.push(createId(defaultExpandedIndex ?? 0));
+                }
+                return new Set(initialList);
             }
-            return new Set(initialList);
+            return typeof defaultExpandedIds === "function" ? defaultExpandedIds() : defaultExpandedIds;
         }
-        const ids = typeof defaultExpandedIds === "function" ? defaultExpandedIds() : defaultExpandedIds;
-        return new Set(ids);
     });
     return {
         expandedIds,
@@ -113,21 +115,7 @@ import { useEnsuredId } from "../useEnsuredId.js";
                     if (disabled) {
                         return;
                     }
-                    setExpandedIds((prevIds)=>{
-                        const expanded = prevIds.has(panelId);
-                        if (!multiple) {
-                            return new Set(expanded ? [] : [
-                                panelId
-                            ]);
-                        }
-                        const nextIds = new Set(prevIds);
-                        if (expanded) {
-                            nextIds.delete(panelId);
-                        } else {
-                            nextIds.add(panelId);
-                        }
-                        return nextIds;
-                    });
+                    toggleValue(panelId);
                 },
                 disableTransition,
                 disableContentPadding

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.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 {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\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 {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\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 * @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 [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {\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    const ids =\n      typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    return new Set(ids);\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          setExpandedIds((prevIds) => {\n            const expanded = prevIds.has(panelId);\n            if (!multiple) {\n              return new Set(expanded ? [] : [panelId]);\n            }\n\n            const nextIds = new Set(prevIds);\n            if (expanded) {\n              nextIds.delete(panelId);\n            } else {\n              nextIds.add(panelId);\n            }\n\n            return nextIds;\n          });\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useState","useEnsuredId","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllCollapsed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","expandedIds","setExpandedIds","initialList","push","Set","ids","getPanelProps","indexOrPanelId","id","panelId","expanded","has","disabled","size","onExpandClick","prevIds","nextIds","delete","add"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,YAAY,QAAQ,qBAAqB;AAsHlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,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,SAASH,aAAaI,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,CAAC,EAAET,OAAO,CAAC,EAAES,QAAQ,EAAE,CAAC;IACpE,MAAM,CAACC,aAAaC,eAAe,GAAGf,SAA8B;QAClE,IAAI,OAAOS,uBAAuB,aAAa;YAC7C,MAAMO,cAAwB,EAAE;YAChC,IAAI,OAAON,yBAAyB,YAAYH,qBAAqB;gBACnES,YAAYC,IAAI,CAACL,SAASF,wBAAwB;YACpD;YAEA,OAAO,IAAIQ,IAAIF;QACjB;QAEA,MAAMG,MACJ,OAAOV,uBAAuB,aAC1BA,uBACAA;QACN,OAAO,IAAIS,IAAIC;IACjB;IAEA,OAAO;QACLL;QACAC;QACAK,eAAcC,cAAc;YAC1B,IAAIC;YACJ,IAAIC;YACJ,IAAI,OAAOF,mBAAmB,UAAU;gBACtCC,KAAKV,SAASS;gBACdE,UAAUD;YACZ,OAAO;gBACLC,UAAUF;YACZ;YAEA,MAAMG,WAAWV,YAAYW,GAAG,CAACF;YACjC,MAAMG,WACJF,YAAYjB,uBAAuBO,YAAYa,IAAI,KAAK;YAC1D,OAAO;gBACLL;gBACAI;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAX,eAAe,CAACc;wBACd,MAAML,WAAWK,QAAQJ,GAAG,CAACF;wBAC7B,IAAI,CAACjB,UAAU;4BACb,OAAO,IAAIY,IAAIM,WAAW,EAAE,GAAG;gCAACD;6BAAQ;wBAC1C;wBAEA,MAAMO,UAAU,IAAIZ,IAAIW;wBACxB,IAAIL,UAAU;4BACZM,QAAQC,MAAM,CAACR;wBACjB,OAAO;4BACLO,QAAQE,GAAG,CAACT;wBACd;wBAEA,OAAOO;oBACT;gBACF;gBACAtB;gBACAG;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\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 {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\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 {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\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 * @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;AAEA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,cAAc,QAAQ,uBAAuB;AAsHtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,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"}

package/dist/{form → files}/FileInput.d.ts

@@ -1,17 +1,14 @@
 import { type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
-import { type ButtonClassNameOptions, type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
+import { type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type PropsWithRef } from "../types.js";
 /** @since 6.0.0 */
-export type FileInputClassNameOptions = ButtonClassNameOptions;
-/** @since 6.0.0 */
-export declare function fileInput(options?: FileInputClassNameOptions): string;
-/** @since 6.0.0 */
 export type FileInputHTMLAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
 /**
  * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no
  * longer required.
  */
-export interface FileInputProps extends ButtonClassNameThemeOptions, FileInputHTMLAttributes {
+export interface FileInputProps extends ButtonClassNameThemeOptions, FileInputHTMLAttributes, ComponentWithRippleProps {
     /**
      * This is the label text for icon-only file inputs.
      *

package/dist/{form → files}/FileInput.js

@@ -1,15 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { button } from "../button/buttonStyles.js";
 import { getIcon } from "../icon/iconConfig.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { SrOnly } from "../typography/SrOnly.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-/** @since 6.0.0 */ export function fileInput(options = {}) {
-    return cnb("rmd-file-input", button(options));
-}
+import { fileInput } from "./styles.js";
 /**
  * **Client Component**
  * This might be able to become a server component if I remove the getIcon hook
@@ -59,10 +55,11 @@ import { useEnsuredId } from "../useEnsuredId.js";
  * `responsive`. Also removed the `disableIconSpacing` prop since it is no
  * longer required.
  */ export const FileInput = /*#__PURE__*/ forwardRef(function FileInput(props, ref) {
-    const { id: propId, className, children: propChildren, icon: propIcon, iconAfter = false, srOnlyLabel = "Upload", disableRepeatableFiles = false, labelProps, theme = "primary", themeType = "contained", buttonType = propChildren ? "text" : "icon", disabled = false, iconSize, responsive, multiple = false, ...remaining } = props;
+    const { id: propId, className, children: propChildren, icon: propIcon, iconAfter = false, srOnlyLabel = "Upload", disableRepeatableFiles = false, labelProps, theme = "primary", themeType = "contained", buttonType = propChildren ? "text" : "icon", disabled = false, iconSize, responsive, multiple = false, disableRipple, ...remaining } = props;
     const id = useEnsuredId(propId, "file-input");
     const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
         ...labelProps,
+        mode: disableRipple ? "none" : undefined,
         onClick (event) {
             labelProps?.onClick?.(event);
             // stop propagation so 2 ripples are not created

package/dist/files/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/files/FileInput.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { SrOnly } from \"../typography/SrOnly.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { fileInput } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type FileInputHTMLAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport interface FileInputProps\n  extends ButtonClassNameThemeOptions,\n    FileInputHTMLAttributes,\n    ComponentWithRippleProps {\n  /**\n   * This is the label text for icon-only file inputs.\n   *\n   * @defaultValue `\"Upload\"`\n   */\n  srOnlyLabel?: ReactNode;\n\n  /**\n   * Any additional props to provide to the container `<label>` element since\n   * most props get passed to the `<input type=\"file\">`. So this would be useful\n   * for inline style or click handlers.\n   */\n  labelProps?: PropsWithRef<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\n\n  /**\n   * An optional icon to display for the file input.\n   *\n   * @defaultValue `getIcon(\"upload\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the children in the label.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the file input should no longer allow the same file to be\n   * selected multiple times and trigger the `onChange` each time it is\n   * selected.\n   *\n   * @defaultValue `false`\n   */\n  disableRepeatableFiles?: boolean;\n\n  /**\n   * Children should generally be provided when the {@link buttonType} is\n   * set to `\"text\"`. This defaults to a screen-reader only accessible text.\n   *\n   * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the getIcon hook\n *\n * @example Simple Example\n * ```tsx\n * import { FileInput, Form } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const extensions = [\n *   \"svg\",\n *   \"jpeg\",\n *   \"jpg\",\n *   \"png\",\n *   \"apng\",\n *   \"mkv\",\n *   \"mp4\",\n *   \"mpeg\",\n *   \"mpg\",\n *   \"webm\",\n *   \"mov\",\n * ] as const;\n *\n * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;\n * const maxFiles = 10;\n *\n * function Example(): ReactElement {\n *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =\n *     useFileUpload({\n *       maxFiles,\n *       maxFileSize: FOUR_HUNDRED_MB,\n *       extensions,\n *     });\n *\n *   return (\n *     <Form>\n *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />\n *       <Button onClick={reset} disabled={!stats.length}>\n *         Remove all files\n *       </Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Added additional support for `iconSize` and\n * `responsive`. Also removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n  function FileInput(props, ref) {\n    const {\n      id: propId,\n      className,\n      children: propChildren,\n      icon: propIcon,\n      iconAfter = false,\n      srOnlyLabel = \"Upload\",\n      disableRepeatableFiles = false,\n      labelProps,\n      theme = \"primary\",\n      themeType = \"contained\",\n      buttonType = propChildren ? \"text\" : \"icon\",\n      disabled = false,\n      iconSize,\n      responsive,\n      multiple = false,\n      disableRipple,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"file-input\");\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        ...labelProps,\n        mode: disableRipple ? \"none\" : undefined,\n        onClick(event) {\n          labelProps?.onClick?.(event);\n\n          // stop propagation so 2 ripples are not created\n          event.stopPropagation();\n        },\n        disabled,\n      });\n\n    const icon = getIcon(\"upload\", propIcon);\n    let children = propChildren;\n    if (\n      typeof propChildren === \"undefined\" &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      children = <SrOnly phoneOnly={responsive}>{srOnlyLabel}</SrOnly>;\n    }\n\n    return (\n      <label\n        {...labelProps}\n        {...handlers}\n        className={fileInput({\n          theme,\n          themeType,\n          buttonType,\n          disabled,\n          iconSize,\n          pressed,\n          responsive,\n          pressedClassName,\n          className: className || labelProps?.className,\n        })}\n      >\n        {!iconAfter && icon}\n        {children}\n        {iconAfter && icon}\n        <input\n          {...remaining}\n          id={id}\n          ref={ref}\n          value={\n            disableRepeatableFiles || !props.onChange ? remaining.value : \"\"\n          }\n          type=\"file\"\n          className=\"rmd-hidden-input\"\n          disabled={disabled}\n          multiple={multiple}\n        />\n        {ripples}\n      </label>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useElementInteraction","SrOnly","useEnsuredId","fileInput","FileInput","props","ref","id","propId","className","children","propChildren","icon","propIcon","iconAfter","srOnlyLabel","disableRepeatableFiles","labelProps","theme","themeType","buttonType","disabled","iconSize","responsive","multiple","disableRipple","remaining","pressed","pressedClassName","ripples","handlers","mode","undefined","onClick","event","stopPropagation","phoneOnly","label","input","value","onChange","type"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,MAAM,QAAQ,0BAA0B;AACjD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAiExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,cAAc,QAAQ,EACtBC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,QAAQ,SAAS,EACjBC,YAAY,WAAW,EACvBC,aAAaT,eAAe,SAAS,MAAM,EAC3CU,WAAW,KAAK,EAChBC,QAAQ,EACRC,UAAU,EACVC,WAAW,KAAK,EAChBC,aAAa,EACb,GAAGC,WACJ,GAAGrB;IACJ,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAM,EAAEmB,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD9B,sBAAsB;QACpB,GAAGiB,UAAU;QACbc,MAAMN,gBAAgB,SAASO;QAC/BC,SAAQC,KAAK;YACXjB,YAAYgB,UAAUC;YAEtB,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAd;IACF;IAEF,MAAMT,OAAOb,QAAQ,UAAUc;IAC/B,IAAIH,WAAWC;IACf,IACE,OAAOA,iBAAiB,eACxB,CAACN,KAAK,CAAC,aAAa,IACpB,CAACA,KAAK,CAAC,kBAAkB,EACzB;QACAK,yBAAW,KAACT;YAAOmC,WAAWb;sBAAaR;;IAC7C;IAEA,qBACE,MAACsB;QACE,GAAGpB,UAAU;QACb,GAAGa,QAAQ;QACZrB,WAAWN,UAAU;YACnBe;YACAC;YACAC;YACAC;YACAC;YACAK;YACAJ;YACAK;YACAnB,WAAWA,aAAaQ,YAAYR;QACtC;;YAEC,CAACK,aAAaF;YACdF;YACAI,aAAaF;0BACd,KAAC0B;gBACE,GAAGZ,SAAS;gBACbnB,IAAIA;gBACJD,KAAKA;gBACLiC,OACEvB,0BAA0B,CAACX,MAAMmC,QAAQ,GAAGd,UAAUa,KAAK,GAAG;gBAEhEE,MAAK;gBACLhC,WAAU;gBACVY,UAAUA;gBACVG,UAAUA;;YAEXK;;;AAGP,GACA"}

package/dist/files/_files.scss

@@ -0,0 +1,22 @@
+@use "../utils";
+@use "../interaction/interaction";
+
+$disable-everything: false !default;
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(files, $disable-layer) {
+      @if utils.$disable-has-selectors or utils.$disable-focus-visible {
+        .rmd-file-input:focus-within::before {
+          @include utils.keyboard-only {
+            @include interaction.focus-styles;
+          }
+        }
+      } @else {
+        .rmd-file-input:has(:focus-visible)::before {
+          @include interaction.focus-styles;
+        }
+      }
+    }
+  }
+}

package/dist/files/styles.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonClassNameOptions } from "../button/buttonStyles.js";
+/** @since 6.0.0 */
+export type FileInputClassNameOptions = ButtonClassNameOptions;
+/** @since 6.0.0 */
+export declare function fileInput(options?: FileInputClassNameOptions): string;

package/dist/files/styles.js

@@ -0,0 +1,7 @@
+import { cnb } from "cnbuilder";
+import { button } from "../button/buttonStyles.js";
+/** @since 6.0.0 */ export function fileInput(options = {}) {
+    return cnb("rmd-file-input", button(options));
+}
+
+//# sourceMappingURL=styles.js.map

package/dist/files/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/files/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ButtonClassNameOptions, button } from \"../button/buttonStyles.js\";\n\n/** @since 6.0.0 */\nexport type FileInputClassNameOptions = ButtonClassNameOptions;\n\n/** @since 6.0.0 */\nexport function fileInput(options: FileInputClassNameOptions = {}): string {\n  return cnb(\"rmd-file-input\", button(options));\n}\n"],"names":["cnb","button","fileInput","options"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAAsCC,MAAM,QAAQ,4BAA4B;AAKhF,iBAAiB,GACjB,OAAO,SAASC,UAAUC,UAAqC,CAAC,CAAC;IAC/D,OAAOH,IAAI,kBAAkBC,OAAOE;AACtC"}

package/dist/{form → files}/useFileUpload.d.ts

@@ -1,4 +1,5 @@
-import { type FileUploadHandlers, type FileUploadStats, type FileValidationError, type FileValidationOptions, type FilesValidator, type GetFileParser } from "./fileUtils.js";
+import { type FileUploadHandlers, type FileUploadStats, type GetFileParser } from "./utils.js";
+import { type FileValidationError, type FileValidationOptions, type FilesValidator } from "./validation.js";
 /**
  *
  * @typeParam CustomError - An optional error type that gets returned from the
@@ -70,12 +71,12 @@ export interface FileUploadActions {
      * Reset everything related to uploads ensuring that all file readers have
      * been aborted.
      */
-    reset(): void;
+    reset: () => void;
     /**
-     * Removes all the errors that exist in state without cancelling any of the
+     * Removes all the errors that exist in state without canceling any of the
      * uploads already in progress.
      */
-    clearErrors(): void;
+    clearErrors: () => void;
     /**
      * This function is used to cancel pending and uploading files or removing
      * completed files.
@@ -83,7 +84,7 @@ export interface FileUploadActions {
      * @param keyOrKeys - A single or list of {@link BaseFileUploadStats.key} to
      * remove from state.
      */
-    remove(keyOrKeys: string | readonly string[]): void;
+    remove: (keyOrKeys: string | readonly string[]) => void;
 }
 /**
  *
@@ -134,9 +135,6 @@ export interface FileUploadHookReturnValue<E extends HTMLElement = HTMLElement,
  * can also be used to upload the files as an `ArrayBuffer` and then uploaded to
  * a server.
  *
- * Note: If using the `aws-sdk` to upload files directly to S3, **do not use
- * this hook** since it uses its own upload process.
- *
  * @typeParam E - An optional HTMLElement type that is used for the
  * {@link FileUploadHandlers}.
  * @typeParam CustomError - An optional error type that gets returned from the
@@ -145,4 +143,4 @@ export interface FileUploadHookReturnValue<E extends HTMLElement = HTMLElement,
  * @returns the {@link FileUploadHookReturnValue}
  * @since 2.9.0
  */
-export declare function useFileUpload<E extends HTMLElement, CustomError = never>({ maxFiles, extensions, minFileSize, maxFileSize, totalFileSize, concurrency, onDrop: propOnDrop, onChange: propOnChange, validateFiles, getFileParser, isValidFileName, }?: FileUploadOptions<E, CustomError>): Readonly<FileUploadHookReturnValue<E, CustomError>>;
+export declare function useFileUpload<E extends HTMLElement, CustomError = never>(options?: FileUploadOptions<E, CustomError>): Readonly<FileUploadHookReturnValue<E, CustomError>>;

package/dist/{form → files}/useFileUpload.js

@@ -1,7 +1,8 @@
 "use client";
 import { nanoid } from "nanoid";
 import { useCallback, useEffect, useReducer } from "react";
-import { FileAccessError, getFileParser as defaultGetFileParser, isValidFileName as defaultIsValidFileName, validateFiles as defaultValidateFiles } from "./fileUtils.js";
+import { getFileParser as defaultGetFileParser } from "./utils.js";
+import { FileAccessError, isValidFileName as defaultIsValidFileName, validateFiles as defaultValidateFiles } from "./validation.js";
 const noop = ()=>{
 // do nothing
 };
@@ -13,9 +14,6 @@ const noop = ()=>{
  * can also be used to upload the files as an `ArrayBuffer` and then uploaded to
  * a server.
  *
- * Note: If using the `aws-sdk` to upload files directly to S3, **do not use
- * this hook** since it uses its own upload process.
- *
  * @typeParam E - An optional HTMLElement type that is used for the
  * {@link FileUploadHandlers}.
  * @typeParam CustomError - An optional error type that gets returned from the
@@ -23,7 +21,8 @@ const noop = ()=>{
  * @param options - All the {@link FileUploadOptions}
  * @returns the {@link FileUploadHookReturnValue}
  * @since 2.9.0
- */ export function useFileUpload({ maxFiles = -1, extensions = EMPTY_LIST, minFileSize = -1, maxFileSize = -1, totalFileSize = -1, concurrency = -1, onDrop: propOnDrop = noop, onChange: propOnChange = noop, validateFiles = defaultValidateFiles, getFileParser = defaultGetFileParser, isValidFileName = defaultIsValidFileName } = {}) {
+ */ export function useFileUpload(options = {}) {
+    const { maxFiles = -1, extensions = EMPTY_LIST, minFileSize = -1, maxFileSize = -1, totalFileSize = -1, concurrency = -1, onDrop: propOnDrop = noop, onChange: propOnChange = noop, validateFiles = defaultValidateFiles, getFileParser = defaultGetFileParser, isValidFileName = defaultIsValidFileName } = options;
     const [state, dispatch] = useReducer(function reducer(state, action) {
         switch(action.type){
             case "reset":
@@ -291,8 +290,7 @@ const noop = ()=>{
             /* istanbul ignore next */ if (process.env.NODE_ENV !== "production" && ![
                 "readAsText",
                 "readAsDataURL",
-                "readAsArrayBuffer",
-                "readAsBinaryString"
+                "readAsArrayBuffer"
             ].includes(parser)) {
                 throw new Error("Invalid file reader parser");
             }