@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/error-boundary/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @since 6.0.0
+ */
+export type ErrorBoundaryState = {
+    errored: false;
+    error: null;
+} | {
+    errored: true;
+    error: Error;
+};
+/**
+ * @since 6.0.0
+ */
+export type ErrorBoundaryContext = ErrorBoundaryState & {
+    reset: () => void;
+};

package/dist/error-boundary/types.js

@@ -0,0 +1,7 @@
+/**
+ * @since 6.0.0
+ */ /**
+ * @since 6.0.0
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/dist/error-boundary/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/error-boundary/types.ts"],"sourcesContent":["/**\n * @since 6.0.0\n */\nexport type ErrorBoundaryState =\n  | {\n      errored: false;\n      error: null;\n    }\n  | {\n      errored: true;\n      error: Error;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type ErrorBoundaryContext = ErrorBoundaryState & {\n  reset: () => void;\n};\n"],"names":[],"mappings":"AAAA;;CAEC,GAWD;;CAEC,GACD,WAEE"}

package/dist/error-boundary/useErrorBoundary.d.ts

@@ -0,0 +1,25 @@
+import { type ErrorBoundaryContext } from "./types.js";
+/**
+ * @example Fallback Example
+ * ```tsx
+ * "use client";
+ *
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useErrorBoundary } from "@react-md/core/error-boundary/useErrorBoundary";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ *
+ * function SomeFallbackComponent() {
+ *   const { error, errored, reset } = useErrorBoundary();
+ *
+ *   return (
+ *     <>
+ *       <Typography>Uh oh, something broke!</Typography>
+ *       <Button onClick={reset}>Try Again?</Button>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useErrorBoundary(): ErrorBoundaryContext;

package/dist/error-boundary/useErrorBoundary.js

@@ -0,0 +1,33 @@
+import { useContext } from "react";
+import { context } from "./context.js";
+/**
+ * @example Fallback Example
+ * ```tsx
+ * "use client";
+ *
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useErrorBoundary } from "@react-md/core/error-boundary/useErrorBoundary";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ *
+ * function SomeFallbackComponent() {
+ *   const { error, errored, reset } = useErrorBoundary();
+ *
+ *   return (
+ *     <>
+ *       <Typography>Uh oh, something broke!</Typography>
+ *       <Button onClick={reset}>Try Again?</Button>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */ export function useErrorBoundary() {
+    const value = useContext(context);
+    if (!value) {
+        throw new Error("ErrorBoundary has not been mounted");
+    }
+    return value;
+}
+
+//# sourceMappingURL=useErrorBoundary.js.map

package/dist/error-boundary/useErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/error-boundary/useErrorBoundary.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { context } from \"./context.js\";\nimport { type ErrorBoundaryContext } from \"./types.js\";\n\n/**\n * @example Fallback Example\n * ```tsx\n * \"use client\";\n *\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useErrorBoundary } from \"@react-md/core/error-boundary/useErrorBoundary\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function SomeFallbackComponent() {\n *   const { error, errored, reset } = useErrorBoundary();\n *\n *   return (\n *     <>\n *       <Typography>Uh oh, something broke!</Typography>\n *       <Button onClick={reset}>Try Again?</Button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useErrorBoundary(): ErrorBoundaryContext {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"ErrorBoundary has not been mounted\");\n  }\n\n  return value;\n}\n"],"names":["useContext","context","useErrorBoundary","value","Error"],"mappings":"AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,OAAO,QAAQ,eAAe;AAGvC;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC;IACd,MAAMC,QAAQH,WAAWC;IACzB,IAAI,CAACE,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT"}

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

@@ -11,6 +11,7 @@ export interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {
  * This component is only used to implement the keyboard movement behavior for
  * the `ExpansionPanel` components.
  *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @see {@link useExpansionList} for a custom implementation example if you do
  * not want to use a `<div>` for this wrapper component.
  * @since 6.0.0 Uses the new keyboard movement API and does not

package/dist/expansion-panel/ExpansionList.js

@@ -9,6 +9,7 @@ import { useExpansionList } from "./useExpansionList.js";
  * This component is only used to implement the keyboard movement behavior for
  * the `ExpansionPanel` components.
  *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @see {@link useExpansionList} for a custom implementation example if you do
  * not want to use a `<div>` for this wrapper component.
  * @since 6.0.0 Uses the new keyboard movement API and does not

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\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;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,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\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\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 https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}\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;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;;CAWC,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

@@ -140,6 +140,38 @@ export interface ExpansionPanelProps extends CardProps {
 /**
  * **Client Component**
  *
+ * An expansion panel enables content to be either collapsed (hidden) or
+ * expanded (visible) following the disclosure pattern.
+ *
+ * @example Simple Example
+ * ```tsx
+ * "use client";
+ *
+ * import { ExpansionList } from "@react-md/core/expansion-panel/ExpansionList";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ExpansionPanelGroupExample(): ReactElement {
+ *   const { getPanelProps } = useExpansionPanels();
+ *
+ *   return (
+ *     <ExpansionList style={{ width: "100%" }}>
+ *       <ExpansionPanel {...getPanelProps(0)} headerChildren="Panel 1">
+ *         Panel 1 Contents
+ *       </ExpansionPanel>
+ *       <ExpansionPanel {...getPanelProps(1)} headerChildren="Panel 2">
+ *         Panel 2 Contents
+ *       </ExpansionPanel>
+ *       <ExpansionPanel {...getPanelProps(2)} headerChildren="Panel 3">
+ *         Panel 3 Contents
+ *       </ExpansionPanel>
+ *     </ExpansionList>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @see `useExpansionPanels` for examples.
  * @since 6.0.0 The content will be persistent and invisible using `display: none`
  * instead of unmounting and also animate the `margin-top` style.

package/dist/expansion-panel/ExpansionPanel.js

@@ -10,6 +10,38 @@ import { expansionPanel } from "./expansionPanelStyles.js";
 /**
  * **Client Component**
  *
+ * An expansion panel enables content to be either collapsed (hidden) or
+ * expanded (visible) following the disclosure pattern.
+ *
+ * @example Simple Example
+ * ```tsx
+ * "use client";
+ *
+ * import { ExpansionList } from "@react-md/core/expansion-panel/ExpansionList";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ExpansionPanelGroupExample(): ReactElement {
+ *   const { getPanelProps } = useExpansionPanels();
+ *
+ *   return (
+ *     <ExpansionList style={{ width: "100%" }}>
+ *       <ExpansionPanel {...getPanelProps(0)} headerChildren="Panel 1">
+ *         Panel 1 Contents
+ *       </ExpansionPanel>
+ *       <ExpansionPanel {...getPanelProps(1)} headerChildren="Panel 2">
+ *         Panel 2 Contents
+ *       </ExpansionPanel>
+ *       <ExpansionPanel {...getPanelProps(2)} headerChildren="Panel 3">
+ *         Panel 3 Contents
+ *       </ExpansionPanel>
+ *     </ExpansionList>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @see `useExpansionPanels` for examples.
  * @since 6.0.0 The content will be persistent and invisible using `display: none`
  * instead of unmounting and also animate the `margin-top` style.

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 \"./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;;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,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"}
+{"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 \"./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 * 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://next.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,4BAA4B;AA0J3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -68,13 +68,9 @@ export interface ExpansionPanelHeaderProps extends ButtonHTMLAttributes<HTMLButt
  *
  * @example Custom Header
  * ```tsx
- * import type { ExpansionPanelProps } from "@react-md/core";
- * import {
- *   ExpansionPanel,
- *   ExpansionPanelHeader,
- * } from "@react-md/core";
- * import type { ReactElement } from "react";
- * const { useId } from "react";
+ * import { ExpansionPanel, type ExpansionPanelProps } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { ExpansionPanelHeader } from "@react-md/core/expansion-panel/ExpansionPanelHeader";
+ * import { type ReactElement, useId } from "react";
  *
  * export type CustomExpansionPanelProps = ExpansionPanelProps & { id: string; };
  *
@@ -108,6 +104,7 @@ export interface ExpansionPanelHeaderProps extends ButtonHTMLAttributes<HTMLButt
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @since 6.0.0 Updated to be wrapped by the {@link Typography}
  * component and rendered as an `<h6>`.
  */

package/dist/expansion-panel/ExpansionPanelHeader.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
 import { IconRotator } from "../icon/IconRotator.js";
 import { getIcon } from "../icon/config.js";
 import { Typography } from "../typography/Typography.js";
+import { expansionPanelButton, expansionPanelHeading } from "./expansionPanelStyles.js";
 /**
  * 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
@@ -12,13 +12,9 @@ import { Typography } from "../typography/Typography.js";
  *
  * @example Custom Header
  * ```tsx
- * import type { ExpansionPanelProps } from "@react-md/core";
- * import {
- *   ExpansionPanel,
- *   ExpansionPanelHeader,
- * } from "@react-md/core";
- * import type { ReactElement } from "react";
- * const { useId } from "react";
+ * import { ExpansionPanel, type ExpansionPanelProps } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { ExpansionPanelHeader } from "@react-md/core/expansion-panel/ExpansionPanelHeader";
+ * import { type ReactElement, useId } from "react";
  *
  * export type CustomExpansionPanelProps = ExpansionPanelProps & { id: string; };
  *
@@ -52,6 +48,7 @@ import { Typography } from "../typography/Typography.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @since 6.0.0 Updated to be wrapped by the {@link Typography}
  * component and rendered as an `<h6>`.
  */ export const ExpansionPanelHeader = /*#__PURE__*/ forwardRef(function ExpansionPanelHeader(props, ref) {
@@ -62,14 +59,16 @@ import { Typography } from "../typography/Typography.js";
         type: headingType,
         margin: "none",
         ...headingProps,
-        className: cnb("rmd-expansion-panel__heading", headingProps?.className),
+        className: expansionPanelHeading(headingProps),
         children: [
             beforeChildren,
             /*#__PURE__*/ _jsxs(ButtonUnstyled, {
                 ...remaining,
                 "aria-expanded": expanded,
                 id: id,
-                className: cnb("rmd-expansion-panel__button", className),
+                className: expansionPanelButton({
+                    className
+                }),
                 children: [
                     children,
                     icon && /*#__PURE__*/ _jsx(IconRotator, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionPanelHeader.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.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,SAIEC,UAAU,QACL,QAAQ;AAEf,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,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"}
+{"version":3,"sources":["../../src/expansion-panel/ExpansionPanelHeader.tsx"],"sourcesContent":["import {\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport {\n  expansionPanelButton,\n  expansionPanelHeading,\n} from \"./expansionPanelStyles.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 { ExpansionPanel, type ExpansionPanelProps } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { ExpansionPanelHeader } from \"@react-md/core/expansion-panel/ExpansionPanelHeader\";\n * import { type ReactElement, 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 * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}\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={expansionPanelHeading(headingProps)}\n    >\n      {beforeChildren}\n      <ButtonUnstyled\n        {...remaining}\n        aria-expanded={expanded}\n        id={id}\n        className={expansionPanelButton({ 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":["forwardRef","ButtonUnstyled","IconRotator","getIcon","Typography","expansionPanelButton","expansionPanelHeading","ExpansionPanelHeader","props","ref","id","headingType","headingProps","iconRotatorProps","icon","propIcon","expanded","className","children","beforeChildren","afterChildren","disableTransition","remaining","type","margin","aria-expanded","rotated"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SACEC,oBAAoB,EACpBC,qBAAqB,QAChB,4BAA4B;AAsEnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,MAAMC,qCAAuBP,WAGlC,SAASO,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,OAAOX,QAAQ,YAAYY;IAEjC,qBACE,MAACX;QACCK,KAAKA;QACLc,MAAMZ;QACNa,QAAO;QACN,GAAGZ,YAAY;QAChBK,WAAWX,sBAAsBM;;YAEhCO;0BACD,MAAClB;gBACE,GAAGqB,SAAS;gBACbG,iBAAeT;gBACfN,IAAIA;gBACJO,WAAWZ,qBAAqB;oBAAEY;gBAAU;;oBAE3CC;oBACAJ,sBACC,KAACZ;wBACE,GAAGW,gBAAgB;wBACpBa,SAASV;wBACTK,mBAAmBA;kCAElBP;;;;YAINM;;;AAGP,GAAG"}

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

@@ -1,21 +1,66 @@
+////
+/// @group expansion-panel
+////
+
 @use "../utils";
 @use "../transition/transition";
 @use "../icon/icon";
 @use "../button/button";
 @use "../theme/theme";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the transition when panels are expanded in a
+/// group.
+///
+/// @type Boolean
 $disable-margin-top-transition: false !default;
 
+/// The amount of padding to apply to the clickable area in the
+/// `ExpansionPanel`.
+///
+/// @type Number
 $padding: 1rem !default;
+
+/// The `margin-top` to apply between expanded expansion panels
+///
+/// @type Number
 $spacing: 1rem !default;
+
+/// The `gap` to apply between elements in the clickable area in the
+/// `ExpansionPanel`.
+///
+/// @type Number
 $button-spacing: icon.$spacing !default;
+
+/// The degrees to start the rotation animation for the expansion panel icon.
+///
+/// @type Number
 $rotate-from: icon.$rotate-from !default;
+
+/// The degrees to end the rotation animation for the expansion panel icon.
+///
+/// @type Number
 $rotate-to: icon.$rotate-to !default;
 
+/// Change this value if borders/box-shadow are visible while the
+/// `ExpansionPanel` component is collapsed in a group.
+///
+/// @type Number
 $box-shadow-overlay-height: 10px !default;
+
+/// Change this value if borders/box-shadow are visible while the
+/// `ExpansionPanel` component is collapsed in a group.
+///
+/// @type Number
 $box-shadow-overlay-bottom: -6px !default;
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(expansion-panel, $disable-layer) {

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

@@ -17,3 +17,23 @@ export interface ExpansionPanelClassNameOptions {
  * @since 6.0.0
  */
 export declare function expansionPanel(options?: ExpansionPanelClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface ExpansionPanelHeadingClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function expansionPanelHeading(options?: ExpansionPanelHeadingClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface ExpansionPanelButtonClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function expansionPanelButton(options?: ExpansionPanelButtonClassNameOptions): string;

package/dist/expansion-panel/expansionPanelStyles.js

@@ -10,5 +10,17 @@ const styles = bem("rmd-expansion-panel");
         animate: !disableTransition
     }), className);
 }
+/**
+ * @since 6.0.0
+ */ export function expansionPanelHeading(options = {}) {
+    const { className } = options;
+    return cnb(styles("heading"), className);
+}
+/**
+ * @since 6.0.0
+ */ export function expansionPanelButton(options = {}) {
+    const { className } = options;
+    return cnb(styles("button"), className);
+}
 
 //# sourceMappingURL=expansionPanelStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/expansionPanelStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\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;AAEhC,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"}
+{"version":3,"sources":["../../src/expansion-panel/expansionPanelStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\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\n/**\n * @since 6.0.0\n */\nexport interface ExpansionPanelHeadingClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function expansionPanelHeading(\n  options: ExpansionPanelHeadingClassNameOptions = {}\n): string {\n  const { className } = options;\n  return cnb(styles(\"heading\"), className);\n}\n/**\n * @since 6.0.0\n */\nexport interface ExpansionPanelButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function expansionPanelButton(\n  options: ExpansionPanelButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n  return cnb(styles(\"button\"), className);\n}\n"],"names":["cnb","bem","styles","expansionPanel","options","className","expanded","disableTransition","animate","expansionPanelHeading","expansionPanelButton"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,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;AASA;;CAEC,GACD,OAAO,SAASI,sBACdL,UAAiD,CAAC,CAAC;IAEnD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,OAAOJ,IAAIE,OAAO,YAAYG;AAChC;AAQA;;CAEC,GACD,OAAO,SAASK,qBACdN,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,OAAOJ,IAAIE,OAAO,WAAWG;AAC/B"}

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

@@ -11,14 +11,12 @@ export type ExpansionListImplementation<E extends HTMLElement> = KeyboardMovemen
 /**
  * @example Custom Implementation
  * ```tsx
- * import {
- *   ExpansionPanel,
- *   Form,
- *   KeyboardMovementProvider,
- *   useExpansionList,
- *   useExpansionPanels,
- * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionList } from "@react-md/core/expansion-panel/useExpansionList";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
+ * import { KeyboardMovementProvider } from "@react-md/core/movement/useKeyboardMovementProvider";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { type ReactElement } from "react";
  *
  * import { BillingAddress } from "./BillingAddress";
  * import { BillingInformation } from "./BillingInformation";
@@ -46,6 +44,7 @@ export type ExpansionListImplementation<E extends HTMLElement> = KeyboardMovemen
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @since 6.0.0
  */
 export declare function useExpansionList<E extends HTMLElement>(options?: ExpansionListHookOptions<E>): ExpansionListImplementation<E>;

package/dist/expansion-panel/useExpansionList.js

@@ -9,14 +9,12 @@ import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProv
 /**
  * @example Custom Implementation
  * ```tsx
- * import {
- *   ExpansionPanel,
- *   Form,
- *   KeyboardMovementProvider,
- *   useExpansionList,
- *   useExpansionPanels,
- * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionList } from "@react-md/core/expansion-panel/useExpansionList";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
+ * import { KeyboardMovementProvider } from "@react-md/core/movement/useKeyboardMovementProvider";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { type ReactElement } from "react";
  *
  * import { BillingAddress } from "./BillingAddress";
  * import { BillingInformation } from "./BillingInformation";
@@ -44,6 +42,7 @@ import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProv
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @since 6.0.0
  */ export function useExpansionList(options = {}) {
     return useKeyboardMovementProvider({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/useExpansionList.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>(\".rmd-expansion-panel__button\"),\n];\n\n/** @since 6.0.0 */\nexport interface ExpansionListHookOptions<E extends HTMLElement> {\n  onClick?: MouseEventHandler<E>;\n  onFocus?: FocusEventHandler<E>;\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/** @since 6.0.0 */\nexport type ExpansionListImplementation<E extends HTMLElement> =\n  KeyboardMovementProviderImplementation<E>;\n\n/**\n * @example Custom Implementation\n * ```tsx\n * import {\n *   ExpansionPanel,\n *   Form,\n *   KeyboardMovementProvider,\n *   useExpansionList,\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 * function Example(): ReactElement {\n *   const { movementContext, movementProps } = useExpansionList();\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <Form {...movementProps}>\n *         <ExpansionPanel {...getPanelProps(\"personal-information-panel\")}>\n *           <PersonalInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-information-panel\")}>\n *           <BillingInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-address-panel\")}>\n *           <BillingAddress />\n *         </ExpansionPanel>\n *       </Form>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useExpansionList<E extends HTMLElement>(\n  options: ExpansionListHookOptions<E> = {}\n): ExpansionListImplementation<E> {\n  return useKeyboardMovementProvider({\n    ...options,\n    loopable: true,\n    includeDisabled: true,\n    getFocusableElements: getPanelsOnly,\n  });\n}\n"],"names":["useKeyboardMovementProvider","getPanelsOnly","container","querySelectorAll","useExpansionList","options","loopable","includeDisabled","getFocusableElements"],"mappings":"AAAA;AASA,SAASA,2BAA2B,QAAQ,6CAA6C;AAEzF;;;CAGC,GACD,MAAMC,gBAAgB,CAACC,YAAmD;WACrEA,UAAUC,gBAAgB,CAAc;KAC5C;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASC,iBACdC,UAAuC,CAAC,CAAC;IAEzC,OAAOL,4BAA4B;QACjC,GAAGK,OAAO;QACVC,UAAU;QACVC,iBAAiB;QACjBC,sBAAsBP;IACxB;AACF"}
+{"version":3,"sources":["../../src/expansion-panel/useExpansionList.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>(\".rmd-expansion-panel__button\"),\n];\n\n/** @since 6.0.0 */\nexport interface ExpansionListHookOptions<E extends HTMLElement> {\n  onClick?: MouseEventHandler<E>;\n  onFocus?: FocusEventHandler<E>;\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/** @since 6.0.0 */\nexport type ExpansionListImplementation<E extends HTMLElement> =\n  KeyboardMovementProviderImplementation<E>;\n\n/**\n * @example Custom Implementation\n * ```tsx\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionList } from \"@react-md/core/expansion-panel/useExpansionList\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { KeyboardMovementProvider } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * function Example(): ReactElement {\n *   const { movementContext, movementProps } = useExpansionList();\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <Form {...movementProps}>\n *         <ExpansionPanel {...getPanelProps(\"personal-information-panel\")}>\n *           <PersonalInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-information-panel\")}>\n *           <BillingInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-address-panel\")}>\n *           <BillingAddress />\n *         </ExpansionPanel>\n *       </Form>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @since 6.0.0\n */\nexport function useExpansionList<E extends HTMLElement>(\n  options: ExpansionListHookOptions<E> = {}\n): ExpansionListImplementation<E> {\n  return useKeyboardMovementProvider({\n    ...options,\n    loopable: true,\n    includeDisabled: true,\n    getFocusableElements: getPanelsOnly,\n  });\n}\n"],"names":["useKeyboardMovementProvider","getPanelsOnly","container","querySelectorAll","useExpansionList","options","loopable","includeDisabled","getFocusableElements"],"mappings":"AAAA;AASA,SAASA,2BAA2B,QAAQ,6CAA6C;AAEzF;;;CAGC,GACD,MAAMC,gBAAgB,CAACC,YAAmD;WACrEA,UAAUC,gBAAgB,CAAc;KAC5C;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,iBACdC,UAAuC,CAAC,CAAC;IAEzC,OAAOL,4BAA4B;QACjC,GAAGK,OAAO;QACVC,UAAU;QACVC,iBAAiB;QACjBC,sBAAsBP;IACxB;AACF"}

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

@@ -101,11 +101,9 @@ export interface ExpansionPanelImplementation {
  *
  * @example Index Based Panels
  * ```tsx
- * import {
- *   ExpansionList,
- *   ExpansionPanel,
- *   useExpansionPanels,
- * } from "@react-md/core";
+ * import { ExpansionList } from "@react-md/core/expansion-panel/ExpansionList";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -129,11 +127,9 @@ export interface ExpansionPanelImplementation {
  *
  * @example Custom Panel Ids and Expand All Panels by Default
  * ```tsx
- * import {
- *   ExpansionList,
- *   ExpansionPanel,
- *   useExpansionPanels,
- * } from "@react-md/core";
+ * import { ExpansionList } from "@react-md/core/expansion-panel/ExpansionList";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
  * import { type ReactElement } from "react";
  *
  * import { BillingAddress } from "./BillingAddress";
@@ -167,6 +163,7 @@ export interface ExpansionPanelImplementation {
  * ```
  *
  *
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
  * @since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,
  * the API changed to return `getPanelProps` instead of a generated list of
  * panel props based on the provided `count`, and the hook no longer supports