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

package/dist/table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    TableSectionConfiguration {\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tfoot>` element with some basic styles. This component will\n * disable the hover effect and line wrapping by default, but the hover effect\n * and line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n */\nexport const TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  TableFooterProps\n>(function TableFooter(props, propRef) {\n  const { className, hoverable, lineWrap, children, ...remaining } = props;\n\n  const config = useTableSectionConfig({\n    type: \"footer\",\n    lineWrap,\n    hoverable,\n  });\n\n  return (\n    <TableConfigProvider value={config}>\n      <tfoot\n        {...remaining}\n        ref={propRef}\n        className={tableFooter({ className })}\n      >\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableFooter","useTableSectionConfig","TableFooter","props","propRef","className","hoverable","lineWrap","children","remaining","config","type","value","tfoot","ref"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAiBnE;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAAcJ,WAGzB,SAASI,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEnE,MAAMO,SAAST,sBAAsB;QACnCU,MAAM;QACNJ;QACAD;IACF;IAEA,qBACE,KAACP;QAAoBa,OAAOF;kBAC1B,cAAA,KAACG;YACE,GAAGJ,SAAS;YACbK,KAAKV;YACLC,WAAWL,YAAY;gBAAEK;YAAU;sBAElCG;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    TableSectionConfiguration {\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tfoot>` element with some basic styles. This component will\n * disable the hover effect and line wrapping by default, but the hover effect\n * and line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n *\n * @see {@link https://next.react-md.dev/components/table | Table Demos}\n */\nexport const TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  TableFooterProps\n>(function TableFooter(props, propRef) {\n  const { className, hoverable, lineWrap, children, ...remaining } = props;\n\n  const config = useTableSectionConfig({\n    type: \"footer\",\n    lineWrap,\n    hoverable,\n  });\n\n  return (\n    <TableConfigProvider value={config}>\n      <tfoot\n        {...remaining}\n        ref={propRef}\n        className={tableFooter({ className })}\n      >\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableFooter","useTableSectionConfig","TableFooter","props","propRef","className","hoverable","lineWrap","children","remaining","config","type","value","tfoot","ref"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAiBnE;;;;;;;;;CASC,GACD,OAAO,MAAMC,4BAAcJ,WAGzB,SAASI,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEnE,MAAMO,SAAST,sBAAsB;QACnCU,MAAM;QACNJ;QACAD;IACF;IAEA,qBACE,KAACP;QAAoBa,OAAOF;kBAC1B,cAAA,KAACG;YACE,GAAGJ,SAAS;YACbK,KAAKV;YACLC,WAAWL,YAAY;gBAAEK;YAAU;sBAElCG;;;AAIT,GAAG"}

package/dist/table/TableHeader.d.ts

@@ -21,5 +21,7 @@ export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement
  * disabling the hover effect and line wrapping. The hover effect and
  * line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/table/TableHeader.js

@@ -13,6 +13,8 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
  * disabling the hover effect and line wrapping. The hover effect and
  * line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */ export const TableHeader = /*#__PURE__*/ forwardRef(function TableHeader(props, propRef) {
     const { className, sticky, lineWrap, hoverable, children, ...remaining } = props;
     const config = useTableSectionConfig({

package/dist/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    TableSectionConfiguration {\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<thead>` element with some basic styles. This component will also\n * update the table configuration so that all the `TableCell` children will\n * automatically become `<th>` elements instead of the normal `<td>` as well as\n * disabling the hover effect and line wrapping. The hover effect and\n * line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n */\nexport const TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  TableHeaderProps\n>(function TableHeader(props, propRef) {\n  const { className, sticky, lineWrap, hoverable, children, ...remaining } =\n    props;\n\n  const config = useTableSectionConfig({\n    type: \"header\",\n    lineWrap,\n    hoverable,\n  });\n  const { dense } = config;\n\n  return (\n    <TableConfigProvider value={config}>\n      <thead\n        {...remaining}\n        ref={propRef}\n        className={tableHeader({\n          className,\n          dense,\n          sticky,\n        })}\n      >\n        {children}\n      </thead>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableHeader","useTableSectionConfig","TableHeader","props","propRef","className","sticky","lineWrap","hoverable","children","remaining","config","type","dense","value","thead","ref"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAiBnE;;;;;;;;;CASC,GACD,OAAO,MAAMC,4BAAcJ,WAGzB,SAASI,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GACtEP;IAEF,MAAMQ,SAASV,sBAAsB;QACnCW,MAAM;QACNL;QACAC;IACF;IACA,MAAM,EAAEK,KAAK,EAAE,GAAGF;IAElB,qBACE,KAACZ;QAAoBe,OAAOH;kBAC1B,cAAA,KAACI;YACE,GAAGL,SAAS;YACbM,KAAKZ;YACLC,WAAWL,YAAY;gBACrBK;gBACAQ;gBACAP;YACF;sBAECG;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    TableSectionConfiguration {\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<thead>` element with some basic styles. This component will also\n * update the table configuration so that all the `TableCell` children will\n * automatically become `<th>` elements instead of the normal `<td>` as well as\n * disabling the hover effect and line wrapping. The hover effect and\n * line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n *\n * @see {@link https://next.react-md.dev/components/table | Table Demos}\n */\nexport const TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  TableHeaderProps\n>(function TableHeader(props, propRef) {\n  const { className, sticky, lineWrap, hoverable, children, ...remaining } =\n    props;\n\n  const config = useTableSectionConfig({\n    type: \"header\",\n    lineWrap,\n    hoverable,\n  });\n  const { dense } = config;\n\n  return (\n    <TableConfigProvider value={config}>\n      <thead\n        {...remaining}\n        ref={propRef}\n        className={tableHeader({\n          className,\n          dense,\n          sticky,\n        })}\n      >\n        {children}\n      </thead>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableHeader","useTableSectionConfig","TableHeader","props","propRef","className","sticky","lineWrap","hoverable","children","remaining","config","type","dense","value","thead","ref"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAiBnE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,4BAAcJ,WAGzB,SAASI,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GACtEP;IAEF,MAAMQ,SAASV,sBAAsB;QACnCW,MAAM;QACNL;QACAC;IACF;IACA,MAAM,EAAEK,KAAK,EAAE,GAAGF;IAElB,qBACE,KAACZ;QAAoBe,OAAOH;kBAC1B,cAAA,KAACI;YACE,GAAGL,SAAS;YACbM,KAAKZ;YACLC,WAAWL,YAAY;gBACrBK;gBACAQ;gBACAP;YACF;sBAECG;;;AAIT,GAAG"}

package/dist/table/TableRadio.d.ts

@@ -20,14 +20,14 @@ export interface TableRadioProps extends TableRadioTdHTMLAttributes, TableRadioS
     /** @defaultValue `false` */
     sticky?: boolean;
     /**
-     * This allows you to override any props for the checkbox that are not
+     * This allows you to override any props for the radio that are not
      * configurable as top-level props.
      *
      * @example Simple Example
      * ```tsx
-     * checkboxProps={{
+     * radioProps={{
      *   id: "some-custom-id",
-     *   ref: checkboxRef,
+     *   ref: radioRef,
      * }}
      * ```
      *
@@ -43,16 +43,14 @@ export interface TableRadioProps extends TableRadioTdHTMLAttributes, TableRadioS
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Table,
- *   TableBody,
- *   TableCell,
- *   TableRadio,
- *   TableContainer,
- *   TableHeader,
- *   TableRow,
- *   useRadioGroup,
- * } from "@react-md/core";
+ * import { useRadioGroup } from "@react-md/core/form/useRadioGroup";
+ * import { Table } from "@react-md/core/table/Table";
+ * import { TableBody } from "@react-md/core/table/TableBody";
+ * import { TableCell } from "@react-md/core/table/TableCell";
+ * import { TableContainer } from "@react-md/core/table/TableContainer";
+ * import { TableHeader } from "@react-md/core/table/TableHeader";
+ * import { TableRadio } from "@react-md/core/table/TableRadio";
+ * import { TableRow } from "@react-md/core/table/TableRow";
  * import type { ReactElement } from "react";
  *
  * const rows = [
@@ -100,6 +98,8 @@ export interface TableRadioProps extends TableRadioTdHTMLAttributes, TableRadioS
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  * @since 6.0.0
  */
 export declare const TableRadio: import("react").ForwardRefExoticComponent<TableRadioProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/table/TableRadio.js

@@ -13,16 +13,14 @@ const noop = ()=>{
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Table,
- *   TableBody,
- *   TableCell,
- *   TableRadio,
- *   TableContainer,
- *   TableHeader,
- *   TableRow,
- *   useRadioGroup,
- * } from "@react-md/core";
+ * import { useRadioGroup } from "@react-md/core/form/useRadioGroup";
+ * import { Table } from "@react-md/core/table/Table";
+ * import { TableBody } from "@react-md/core/table/TableBody";
+ * import { TableCell } from "@react-md/core/table/TableCell";
+ * import { TableContainer } from "@react-md/core/table/TableContainer";
+ * import { TableHeader } from "@react-md/core/table/TableHeader";
+ * import { TableRadio } from "@react-md/core/table/TableRadio";
+ * import { TableRow } from "@react-md/core/table/TableRow";
  * import type { ReactElement } from "react";
  *
  * const rows = [
@@ -70,6 +68,8 @@ const noop = ()=>{
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  * @since 6.0.0
  */ export const TableRadio = /*#__PURE__*/ forwardRef(function TableRadio(props, ref) {
     const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined, "aria-controls": ariaControls, name, icon, iconProps, iconStyle, iconClassName, checkedIcon, value, checked, onChange, defaultChecked, radioProps, onClick = noop, error, required, onInvalid, ...remaining } = props;

package/dist/table/TableRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\nimport { type RadioProps } from \"../form/InputToggle.js\";\nimport { Radio } from \"../form/Radio.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\" | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioSupportedRadioProps = Pick<\n  RadioProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"error\"\n  | \"required\"\n  | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableRadioProps\n  extends TableRadioTdHTMLAttributes,\n    TableRadioSupportedRadioProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the checkbox that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableRadioSupportedRadioProps}\n   * @since 6.0.0\n   */\n  radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;\n}\n\n/**\n * **Client Component**\n * The `TableRadio` is used to render a `Radio` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableRadio,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n *   useRadioGroup,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getRadioProps } = useRadioGroup({\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell header={false} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const radioProps = getRadioProps(name);\n *             const { checked, onChange } = radioProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableRadio {...radioProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(\n  function TableRadio(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n      \"aria-controls\": ariaControls,\n      name,\n      icon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      checkedIcon,\n      value,\n      checked,\n      onChange,\n      defaultChecked,\n      radioProps,\n      onClick = noop,\n      error,\n      required,\n      onInvalid,\n      ...remaining\n    } = props;\n\n    return (\n      <TableCell\n        {...remaining}\n        ref={ref}\n        header={false}\n        inputToggle\n        onClick={(event) => {\n          event.stopPropagation();\n          onClick(event);\n        }}\n      >\n        <Radio\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-controls={ariaControls}\n          name={name}\n          icon={icon}\n          iconProps={iconProps}\n          iconStyle={iconStyle}\n          iconClassName={iconClassName}\n          checkedIcon={checkedIcon}\n          value={value}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          error={error}\n          required={required}\n          onChange={onChange}\n          onInvalid={onInvalid}\n          {...radioProps}\n        />\n      </TableCell>\n    );\n  }\n);\n"],"names":["forwardRef","Radio","TableCell","noop","TableRadio","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","value","checked","onChange","defaultChecked","radioProps","onClick","error","required","onInvalid","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAG1D,SAASC,KAAK,QAAQ,mBAAmB;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA8DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,MAAMC,2BAAaJ,WACxB,SAASI,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,UAAU,EACVC,UAAUnB,IAAI,EACdoB,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGrB;IAEJ,qBACE,KAACH;QACE,GAAGwB,SAAS;QACbpB,KAAKA;QACLqB,QAAQ;QACRC,WAAW;QACXN,SAAS,CAACO;YACRA,MAAMC,eAAe;YACrBR,QAAQO;QACV;kBAEA,cAAA,KAAC5B;YACC8B,cAAYvB;YACZwB,mBAAiBzB;YACjB0B,iBAAevB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBG,OAAOA;YACPC,UAAUA;YACVL,UAAUA;YACVM,WAAWA;YACV,GAAGJ,UAAU;;;AAItB,GACA"}
+{"version":3,"sources":["../../src/table/TableRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\nimport { type RadioProps } from \"../form/InputToggle.js\";\nimport { Radio } from \"../form/Radio.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\" | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioSupportedRadioProps = Pick<\n  RadioProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"error\"\n  | \"required\"\n  | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableRadioProps\n  extends TableRadioTdHTMLAttributes,\n    TableRadioSupportedRadioProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the radio that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * radioProps={{\n   *   id: \"some-custom-id\",\n   *   ref: radioRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableRadioSupportedRadioProps}\n   * @since 6.0.0\n   */\n  radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;\n}\n\n/**\n * **Client Component**\n * The `TableRadio` is used to render a `Radio` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import { useRadioGroup } from \"@react-md/core/form/useRadioGroup\";\n * import { Table } from \"@react-md/core/table/Table\";\n * import { TableBody } from \"@react-md/core/table/TableBody\";\n * import { TableCell } from \"@react-md/core/table/TableCell\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\n * import { TableRadio } from \"@react-md/core/table/TableRadio\";\n * import { TableRow } from \"@react-md/core/table/TableRow\";\n * import type { ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getRadioProps } = useRadioGroup({\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell header={false} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const radioProps = getRadioProps(name);\n *             const { checked, onChange } = radioProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableRadio {...radioProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/table | Table Demos}\n * @since 6.0.0\n */\nexport const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(\n  function TableRadio(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n      \"aria-controls\": ariaControls,\n      name,\n      icon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      checkedIcon,\n      value,\n      checked,\n      onChange,\n      defaultChecked,\n      radioProps,\n      onClick = noop,\n      error,\n      required,\n      onInvalid,\n      ...remaining\n    } = props;\n\n    return (\n      <TableCell\n        {...remaining}\n        ref={ref}\n        header={false}\n        inputToggle\n        onClick={(event) => {\n          event.stopPropagation();\n          onClick(event);\n        }}\n      >\n        <Radio\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-controls={ariaControls}\n          name={name}\n          icon={icon}\n          iconProps={iconProps}\n          iconStyle={iconStyle}\n          iconClassName={iconClassName}\n          checkedIcon={checkedIcon}\n          value={value}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          error={error}\n          required={required}\n          onChange={onChange}\n          onInvalid={onInvalid}\n          {...radioProps}\n        />\n      </TableCell>\n    );\n  }\n);\n"],"names":["forwardRef","Radio","TableCell","noop","TableRadio","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","value","checked","onChange","defaultChecked","radioProps","onClick","error","required","onInvalid","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAG1D,SAASC,KAAK,QAAQ,mBAAmB;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA8DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,MAAMC,2BAAaJ,WACxB,SAASI,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,UAAU,EACVC,UAAUnB,IAAI,EACdoB,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGrB;IAEJ,qBACE,KAACH;QACE,GAAGwB,SAAS;QACbpB,KAAKA;QACLqB,QAAQ;QACRC,WAAW;QACXN,SAAS,CAACO;YACRA,MAAMC,eAAe;YACrBR,QAAQO;QACV;kBAEA,cAAA,KAAC5B;YACC8B,cAAYvB;YACZwB,mBAAiBzB;YACjB0B,iBAAevB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBG,OAAOA;YACPC,UAAUA;YACVL,UAAUA;YACVM,WAAWA;YACV,GAAGJ,UAAU;;;AAItB,GACA"}

package/dist/table/TableRow.d.ts

@@ -21,5 +21,7 @@ export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement>, Tabl
  *
  * Creates a `<tr>` element with some general styles that are inherited from the
  * base table configuration.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/table/TableRow.js

@@ -8,6 +8,8 @@ import { tableRow } from "./tableRowStyles.js";
  *
  * Creates a `<tr>` element with some general styles that are inherited from the
  * base table configuration.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */ export const TableRow = /*#__PURE__*/ forwardRef(function TableRow(props, ref) {
     const { className, disableHover: propDisableHover, disableBorders: propDisableBorders, children, selected = false, clickable = false, ...remaining } = props;
     const { disableHover, disableBorders } = useTableConfig({

package/dist/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableRow.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableRow } from \"./tableRowStyles.js\";\nimport { type TableRowConfiguration } from \"./types.js\";\n\nexport interface TableRowProps\n  extends HTMLAttributes<HTMLTableRowElement>,\n    TableRowConfiguration {\n  /**\n   * Boolean if the current row has been selected and should apply the selected\n   * background-color.\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /**\n   * Boolean if the row should be clickable and update the cursor while hovered\n   * to be a pointer.\n   *\n   * @defaultValue `false`\n   */\n  clickable?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tr>` element with some general styles that are inherited from the\n * base table configuration.\n */\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n  function TableRow(props, ref) {\n    const {\n      className,\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n      children,\n      selected = false,\n      clickable = false,\n      ...remaining\n    } = props;\n\n    const { disableHover, disableBorders } = useTableConfig({\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n    });\n\n    return (\n      <tr\n        {...remaining}\n        ref={ref}\n        className={tableRow({\n          selected,\n          clickable,\n          disableHover,\n          disableBorders,\n          className,\n        })}\n      >\n        {children}\n      </tr>\n    );\n  }\n);\n"],"names":["forwardRef","useTableConfig","tableRow","TableRow","props","ref","className","disableHover","propDisableHover","disableBorders","propDisableBorders","children","selected","clickable","remaining","tr"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,QAAQ,QAAQ,sBAAsB;AAuB/C;;;;;CAKC,GACD,OAAO,MAAMC,yBAAWH,WACtB,SAASG,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,QAAQ,EACRC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjB,GAAGC,WACJ,GAAGV;IAEJ,MAAM,EAAEG,YAAY,EAAEE,cAAc,EAAE,GAAGR,eAAe;QACtDM,cAAcC;QACdC,gBAAgBC;IAClB;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbT,KAAKA;QACLC,WAAWJ,SAAS;YAClBU;YACAC;YACAN;YACAE;YACAH;QACF;kBAECK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/table/TableRow.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableRow } from \"./tableRowStyles.js\";\nimport { type TableRowConfiguration } from \"./types.js\";\n\nexport interface TableRowProps\n  extends HTMLAttributes<HTMLTableRowElement>,\n    TableRowConfiguration {\n  /**\n   * Boolean if the current row has been selected and should apply the selected\n   * background-color.\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /**\n   * Boolean if the row should be clickable and update the cursor while hovered\n   * to be a pointer.\n   *\n   * @defaultValue `false`\n   */\n  clickable?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tr>` element with some general styles that are inherited from the\n * base table configuration.\n *\n * @see {@link https://next.react-md.dev/components/table | Table Demos}\n */\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n  function TableRow(props, ref) {\n    const {\n      className,\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n      children,\n      selected = false,\n      clickable = false,\n      ...remaining\n    } = props;\n\n    const { disableHover, disableBorders } = useTableConfig({\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n    });\n\n    return (\n      <tr\n        {...remaining}\n        ref={ref}\n        className={tableRow({\n          selected,\n          clickable,\n          disableHover,\n          disableBorders,\n          className,\n        })}\n      >\n        {children}\n      </tr>\n    );\n  }\n);\n"],"names":["forwardRef","useTableConfig","tableRow","TableRow","props","ref","className","disableHover","propDisableHover","disableBorders","propDisableBorders","children","selected","clickable","remaining","tr"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,QAAQ,QAAQ,sBAAsB;AAuB/C;;;;;;;CAOC,GACD,OAAO,MAAMC,yBAAWH,WACtB,SAASG,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,QAAQ,EACRC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjB,GAAGC,WACJ,GAAGV;IAEJ,MAAM,EAAEG,YAAY,EAAEE,cAAc,EAAE,GAAGR,eAAe;QACtDM,cAAcC;QACdC,gBAAgBC;IAClB;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbT,KAAKA;QACLC,WAAWJ,SAAS;YAClBU;YACAC;YACAN;YACAE;YACAH;QACF;kBAECK;;AAGP,GACA"}

package/dist/table/_table.scss

@@ -1,3 +1,7 @@
+////
+/// @group table
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../box-shadows";
@@ -8,43 +12,126 @@
 @use "../transition/transition";
 @use "../divider/divider";
 
+/// Set to `true` to disable all the styles.
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the `TableContainer` styles.
+/// @type Boolean
 $disable-container: false !default;
+
+/// Set to `true` to disable the dense `Table` styles.
+/// @type Boolean
 $disable-dense: false !default;
+
+/// Set to `true` to disable the `fullWidth` behavior for the `Table`
+/// component.
+///
+/// @type Boolean
 $disable-full-width: false !default;
+
+/// Set to `true` to disable the `align="top"` styles for the `TableCell`.
+/// @type Boolean
 $disable-cell-align-top: false !default;
+
+/// Set to `true` to disable the `align="bottom"` styles for the `TableCell`.
+/// @type Boolean
 $disable-cell-align-bottom: false !default;
+
+/// Set to `true` to disable border styles for the `TableRow`.
+/// @type Boolean
 $disable-bordered: false !default;
+
+/// Set to `true` to allow the last `TableRow` to also gain the border styles.
+/// @type Boolean
 $disable-bordered-except-last: false !default;
+
+/// Set to `true` to disable the `TableRow` selected styles.
+///
+/// @see $row-selected-styles
+/// @type Boolean
 $disable-selected: false !default;
+
+/// Set to `true` to disable the clickable `TableRow` styles.
+/// @type Boolean
 $disable-clickable: false !default;
+
+/// Set to `true` to disable the hoverable `TableRow` styles.
+/// @type Boolean
 $disable-hoverable: false !default;
-// convenience variable to disable all sticky behavior
+
+/// Set to `true` to disable all sticky table styles.
+/// @type Boolean
 $disable-sticky: false !default;
-// disable the sticky cells (within tbody)
+
+/// Set to `true` to disable all the sticky cell styles within the `TableBody`.
+/// @type Boolean
 $disable-sticky-cell: $disable-sticky !default;
+
+/// Set to `true` to disable the sticky `TableHeader` styles.
+/// @type Boolean
 $disable-sticky-header: $disable-sticky !default;
+
+/// Set to `true` to disable the sticky `TableFooter` styles.
+/// @type Boolean
 $disable-sticky-footer: $disable-sticky !default;
+
+/// Set to `true` to disable the `TableCheckbox` and `TableRadio` styles.
+/// @type Boolean
 $disable-input-toggle: false !default;
-$disable-cell-no-wrap: false !default;
+
+/// Set to `true` to disable the `TableCell` `grow` styles.
+/// @type Boolean
 $disable-cell-grow: false !default;
+
+/// Set to `true` to disable the `padding="none"` `TableCell` styles.
+/// @type Boolean
 $disable-cell-no-padding: false !default;
+
+/// Set to `true` to disable the `TableCell` sort behavior styles.
+/// @type Boolean
 $disable-cell-sort: false !default;
+
+/// Set to `true` to disable the `padding="vertical"` `TableCell` styles.
+/// @type Boolean
 $disable-cell-vertical-padding: false !default;
 
-// defaults to `null` so it just inherits the background color
+/// An optional light theme background color to apply to the `Table`. This
+/// defaults to `null` so it just inherits the background color.
+///
+/// @type Color
 $light-theme-background-color: null !default;
+
+/// An optional dark theme background color to apply to the `Table`. This
+/// defaults to `null` so it just inherits the background color.
+///
+/// @type Color
 $dark-theme-background-color: null !default;
+
+/// The default `background-color` to apply to the `Table` component.
+/// @type Color
 $background-color: theme.get-default-color(
   $light-theme-background-color,
   $dark-theme-background-color
 ) !default;
+
+/// The light theme border-color to apply to each `TableRow`.
+/// @type Color
 $light-theme-border-color: #e0e0e0 !default;
+
+/// The dark theme border-color to apply to each `TableRow`.
+/// @type Color
 $dark-theme-border-color: #2f2f2f !default;
+
+/// The default border-color to apply to each `TableRow`.
+/// @type Color
 $border-color: theme.get-default-color(
   $light-theme-border-color,
   $dark-theme-border-color
 ) !default;
+
+/// The default border-width to apply to each `TableRow`.
+/// @type Number
 $border-size: divider.$size !default;
 
 $light-theme-header-background-color: null !default;
@@ -54,31 +141,97 @@ $header-background-color: theme.get-default-color(
   $dark-theme-header-background-color
 ) !default;
 
+/// The default `TableCell` typography styles.
+/// @type Map
 $cell-typography: typography.$body-2-styles !default;
+
+/// The default `TableCell` text color.
+/// @type Color
 $cell-color: theme.theme-get-var(text-primary-color) !default;
+
+/// The default `TableCell` height.
+/// @type Number
 $cell-height: 3.25rem !default;
+
+/// The default dense `TableCell` height.
+/// @type Number
 $cell-dense-height: 2rem !default;
+
+/// The default header (th) `TableCell` text color.
+/// @type Color
 $cell-header-color: $cell-color !default;
+
+/// The default header (th) `TableCell` typography styles.
+/// @type Map
 $cell-header-typography: (
   font-weight: map.get(typography.$subtitle-2-styles, font-weight),
   letter-spacing: map.get(typography.$subtitle-2-styles, letter-spacing),
   line-height: map.get(typography.$subtitle-2-styles, line-height),
 ) !default;
+
+/// The default header (th) `TableCell` height.
+/// @type Number
 $cell-header-height: 3.5rem !default;
+
+/// The default header (th) dense `TableCell` height.
+/// @type Number
 $cell-header-dense-height: 2.125rem !default;
+
+/// The default `TableCell` horizontal padding.
+/// @type Number
 $cell-horizontal-padding: 1rem !default;
+
+/// The default `TableCell` vertical padding.
+/// @type Number
 $cell-vertical-padding: 0.375rem !default;
+
+/// The default `TableCheckbox` and `TableRadio` horizontal padding.
+/// @type Number
+///
 $cell-input-toggle-horizontal-padding: 0.5rem !default;
+
+/// The default `gap` between items in a sortable `TableCell`.
+/// @type Number
 $cell-content-gap: icon.$spacing !default;
 
+/// This is the default position of a row based sticky `TableCell`.
+/// @type Number
 $sticky-cell-position: 0 !default;
+
+/// This is the default position of a column based sticky `TableCell`.
+/// @type Number
 $sticky-header-position: 0 !default;
+
+/// The default z-index for a sticky header (th) `TableCell`.
+/// @type Number
 $sticky-header-z-index: 2 !default;
+
+/// The default z-index for a `TableCheckbox` or `TableRadio` that is acting as
+/// a sticky table header for a column.
+/// @type Number
 $sticky-header-cell-z-index: $sticky-header-z-index + 1 !default;
+
+/// The default z-index for a sticky row-based `TableCell`.
+/// @type Number
 $sticky-cell-z-index: $sticky-header-z-index - 1 !default;
+
+/// The default position for a sticky `TableFooter`.
+/// @type Number
 $sticky-footer-position: 0 !default;
+
+/// The default z-index for a sticky `TableFooter`.
+/// @type Number
 $sticky-footer-z-index: $sticky-header-z-index - 1 !default;
+
+/// The background color to apply to a sticky table cell. This is required so
+/// that the other cells will not be visible below the cell.
+/// @type Color
 $sticky-background-color: theme.theme-get-var(background-color) !default;
+
+/// A map of styles to apply when using the `StickyTableSection` component with
+/// `type="header"`.
+///
+/// @type Map
 $sticky-header-inactive-styles: (
   transition: background transition.$linear-duration
     transition.$linear-timing-function,
@@ -94,6 +247,13 @@ $sticky-header-inactive-styles: (
     z-index: 0,
   ),
 ) !default;
+
+/// A map of styles to apply when using the `StickyTableSection` component with
+/// `type="header"`. These are the styles that are applied once the
+/// `IntersectionObserver` considers the `StickyTableSection` to be covering
+/// other content within the table due to scrolling.
+///
+/// @type Map
 $sticky-header-active-styles: (
   "--rmd-background-color": theme.get-dark-elevation-color(4),
   background-color: theme.theme-get-var(background-color),
@@ -101,12 +261,32 @@ $sticky-header-active-styles: (
     opacity: 1,
   ),
 ) !default;
+
+/// A map of styles to apply when using the `StickyTableSection` component with
+/// `type="footer"`.
+///
+/// @type Map
 $sticky-footer-inactive-styles: $sticky-header-inactive-styles !default;
+
+/// A map of styles to apply when using the `StickyTableSection` component with
+/// `type="footer"`. These are the styles that are applied once the
+/// `IntersectionObserver` considers the `StickyTableSection` to be covering
+/// other content within the table due to scrolling.
+///
+/// @type Map
 $sticky-footer-active-styles: $sticky-header-active-styles !default;
 
+/// The default `TableRow` hover background-color.
+/// @type Color
 $row-hover-color: interaction.get-var(hover-background-color) !default;
+
+/// The default `TableRow` selected background-color.
+/// @type Color
 $row-selected-color: interaction.get-var(selected-background-color) !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   background-color,
   border-size,
@@ -125,6 +305,9 @@ $variables: (
   sticky-background-color
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "table");
   @if $fallback {
@@ -134,24 +317,39 @@ $variables: (
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "table")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-// these have to be initialized after the css-var stuff to work
+/// The default `TableRow` hover styles.
+///
+/// @ignore These have to be initialized after the css-var stuff to work
+/// @type Map
 $row-hover-styles: (
   background-color: get-var(hover-color),
 ) !default;
+
+/// The default `TableRow` selected styles.
+///
+/// @type Map
 $row-selected-styles: (
   background-color: get-var(selected-color),
 ) !default;
 
+/// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $disable-everything {
     @include set-var(border-color, $light-theme-border-color);
@@ -165,6 +363,7 @@ $row-selected-styles: (
   }
 }
 
+/// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-everything {
     @include set-var(border-color, $dark-theme-border-color);
@@ -178,6 +377,7 @@ $row-selected-styles: (
   }
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -211,6 +411,10 @@ $row-selected-styles: (
   }
 }
 
+/// 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(table, $disable-layer) {
@@ -412,12 +616,6 @@ $row-selected-styles: (
           }
         }
 
-        @if not $disable-cell-no-wrap {
-          &--no-wrap {
-            @include typography.text-overflow;
-          }
-        }
-
         @if not $disable-cell-vertical-padding {
           &--v-padding {
             @include use-var(padding-bottom, cell-vertical-padding);

package/dist/table/tableCellStyles.js

@@ -7,8 +7,9 @@ import { cssUtils } from "../cssUtils.js";
     // using `&&` instead of `bem` since the latest version of typescript does not
     // support setting the same object key (empty string)
     const p = "rmd-table-cell--";
-    return cnb("rmd-table-cell", grow && `${p}grow`, header && `${p}header`, sticky && `${p}sticky`, inputToggle && `${p}input-toggle`, sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`, sticky && isInTableHeader && `${p}sticky-header`, sticky && isInTableHeader && inputToggle && `${p}header-cell`, vAlign && vAlign !== "middle" && `${p}${vAlign}`, !lineWrap && `${p}no-wrap`, padding === "vertical" && `${p}v-padding`, padding === "none" && `${p}no-padding`, cssUtils({
-        textAlign: hAlign
+    return cnb("rmd-table-cell", grow && `${p}grow`, header && `${p}header`, sticky && `${p}sticky`, inputToggle && `${p}input-toggle`, sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`, sticky && isInTableHeader && `${p}sticky-header`, sticky && isInTableHeader && inputToggle && `${p}header-cell`, vAlign && vAlign !== "middle" && `${p}${vAlign}`, padding === "vertical" && `${p}v-padding`, padding === "none" && `${p}no-padding`, cssUtils({
+        textAlign: hAlign,
+        textOverflow: lineWrap ? undefined : "ellipsis"
     }), className);
 }
 

package/dist/table/tableCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/tableCellStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport {\n  type TableCellHorizontalAlignment,\n  type TableCellVerticalAlignment,\n} from \"./types.js\";\n\n/** @since 6.0.0 */\nexport interface TableCellClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the cell is rendered as a `<th>` so that the correct\n   * sticky styles can be applied.\n   *\n   * @defaultValue `false`\n   */\n  header?: boolean;\n\n  /**\n   * Set this to true if the cell is rendered in a `<thead>` so that the correct\n   * sticky styles can be applied.\n   *\n   * @defaultValue `header`\n   */\n  isInTableHeader?: boolean;\n\n  /** @defaultValue `false` */\n  grow?: boolean;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /** @defaultValue `false` */\n  inputToggle?: boolean;\n\n  hAlign?: TableCellHorizontalAlignment;\n  vAlign?: TableCellVerticalAlignment;\n\n  /** @defaultValue `true` */\n  lineWrap?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n}\n\n/**\n * @since 6.0.0\n */\nexport function tableCell(options: TableCellClassNameOptions = {}): string {\n  const {\n    grow,\n    sticky,\n    header,\n    inputToggle,\n    hAlign = \"left\",\n    vAlign = \"middle\",\n    lineWrap = true,\n    padding = \"horizontal\",\n    isInTableHeader = header,\n    className,\n  } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  const p = \"rmd-table-cell--\";\n  return cnb(\n    \"rmd-table-cell\",\n    grow && `${p}grow`,\n    header && `${p}header`,\n    sticky && `${p}sticky`,\n    inputToggle && `${p}input-toggle`,\n    sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`,\n    sticky && isInTableHeader && `${p}sticky-header`,\n    sticky && isInTableHeader && inputToggle && `${p}header-cell`,\n    vAlign && vAlign !== \"middle\" && `${p}${vAlign}`,\n    !lineWrap && `${p}no-wrap`,\n    padding === \"vertical\" && `${p}v-padding`,\n    padding === \"none\" && `${p}no-padding`,\n    cssUtils({\n      textAlign: hAlign,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","tableCell","options","grow","sticky","header","inputToggle","hAlign","vAlign","lineWrap","padding","isInTableHeader","className","p","textAlign"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AA+C1C;;CAEC,GACD,OAAO,SAASC,UAAUC,UAAqC,CAAC,CAAC;IAC/D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,WAAW,EACXC,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,IAAI,EACfC,UAAU,YAAY,EACtBC,kBAAkBN,MAAM,EACxBO,SAAS,EACV,GAAGV;IAEJ,8EAA8E;IAC9E,qDAAqD;IACrD,MAAMW,IAAI;IACV,OAAOd,IACL,kBACAI,QAAQ,GAAGU,EAAE,IAAI,CAAC,EAClBR,UAAU,GAAGQ,EAAE,MAAM,CAAC,EACtBT,UAAU,GAAGS,EAAE,MAAM,CAAC,EACtBP,eAAe,GAAGO,EAAE,YAAY,CAAC,EACjCT,UAAW,CAAA,CAACO,mBAAmBL,WAAU,KAAM,GAAGO,EAAE,WAAW,CAAC,EAChET,UAAUO,mBAAmB,GAAGE,EAAE,aAAa,CAAC,EAChDT,UAAUO,mBAAmBL,eAAe,GAAGO,EAAE,WAAW,CAAC,EAC7DL,UAAUA,WAAW,YAAY,GAAGK,IAAIL,QAAQ,EAChD,CAACC,YAAY,GAAGI,EAAE,OAAO,CAAC,EAC1BH,YAAY,cAAc,GAAGG,EAAE,SAAS,CAAC,EACzCH,YAAY,UAAU,GAAGG,EAAE,UAAU,CAAC,EACtCb,SAAS;QACPc,WAAWP;IACb,IACAK;AAEJ"}
+{"version":3,"sources":["../../src/table/tableCellStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport {\n  type TableCellHorizontalAlignment,\n  type TableCellVerticalAlignment,\n} from \"./types.js\";\n\n/** @since 6.0.0 */\nexport interface TableCellClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the cell is rendered as a `<th>` so that the correct\n   * sticky styles can be applied.\n   *\n   * @defaultValue `false`\n   */\n  header?: boolean;\n\n  /**\n   * Set this to true if the cell is rendered in a `<thead>` so that the correct\n   * sticky styles can be applied.\n   *\n   * @defaultValue `header`\n   */\n  isInTableHeader?: boolean;\n\n  /** @defaultValue `false` */\n  grow?: boolean;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /** @defaultValue `false` */\n  inputToggle?: boolean;\n\n  hAlign?: TableCellHorizontalAlignment;\n  vAlign?: TableCellVerticalAlignment;\n\n  /** @defaultValue `true` */\n  lineWrap?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n}\n\n/**\n * @since 6.0.0\n */\nexport function tableCell(options: TableCellClassNameOptions = {}): string {\n  const {\n    grow,\n    sticky,\n    header,\n    inputToggle,\n    hAlign = \"left\",\n    vAlign = \"middle\",\n    lineWrap = true,\n    padding = \"horizontal\",\n    isInTableHeader = header,\n    className,\n  } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  const p = \"rmd-table-cell--\";\n  return cnb(\n    \"rmd-table-cell\",\n    grow && `${p}grow`,\n    header && `${p}header`,\n    sticky && `${p}sticky`,\n    inputToggle && `${p}input-toggle`,\n    sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`,\n    sticky && isInTableHeader && `${p}sticky-header`,\n    sticky && isInTableHeader && inputToggle && `${p}header-cell`,\n    vAlign && vAlign !== \"middle\" && `${p}${vAlign}`,\n    padding === \"vertical\" && `${p}v-padding`,\n    padding === \"none\" && `${p}no-padding`,\n    cssUtils({\n      textAlign: hAlign,\n      textOverflow: lineWrap ? undefined : \"ellipsis\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","tableCell","options","grow","sticky","header","inputToggle","hAlign","vAlign","lineWrap","padding","isInTableHeader","className","p","textAlign","textOverflow","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AA+C1C;;CAEC,GACD,OAAO,SAASC,UAAUC,UAAqC,CAAC,CAAC;IAC/D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,WAAW,EACXC,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,IAAI,EACfC,UAAU,YAAY,EACtBC,kBAAkBN,MAAM,EACxBO,SAAS,EACV,GAAGV;IAEJ,8EAA8E;IAC9E,qDAAqD;IACrD,MAAMW,IAAI;IACV,OAAOd,IACL,kBACAI,QAAQ,GAAGU,EAAE,IAAI,CAAC,EAClBR,UAAU,GAAGQ,EAAE,MAAM,CAAC,EACtBT,UAAU,GAAGS,EAAE,MAAM,CAAC,EACtBP,eAAe,GAAGO,EAAE,YAAY,CAAC,EACjCT,UAAW,CAAA,CAACO,mBAAmBL,WAAU,KAAM,GAAGO,EAAE,WAAW,CAAC,EAChET,UAAUO,mBAAmB,GAAGE,EAAE,aAAa,CAAC,EAChDT,UAAUO,mBAAmBL,eAAe,GAAGO,EAAE,WAAW,CAAC,EAC7DL,UAAUA,WAAW,YAAY,GAAGK,IAAIL,QAAQ,EAChDE,YAAY,cAAc,GAAGG,EAAE,SAAS,CAAC,EACzCH,YAAY,UAAU,GAAGG,EAAE,UAAU,CAAC,EACtCb,SAAS;QACPc,WAAWP;QACXQ,cAAcN,WAAWO,YAAY;IACvC,IACAJ;AAEJ"}

package/dist/tabs/SimpleTabPanel.d.ts

@@ -12,6 +12,8 @@ export interface SimpleTabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>
  *
  * This should generally be used along with the `SimpleTabPanels` component.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */
 export declare const SimpleTabPanel: import("react").ForwardRefExoticComponent<SimpleTabPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tabs/SimpleTabPanel.js

@@ -8,6 +8,8 @@ import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
  *
  * This should generally be used along with the `SimpleTabPanels` component.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */ export const SimpleTabPanel = /*#__PURE__*/ forwardRef(function SimpleTabPanel(props, ref) {
     const { active, className, ...remaining } = props;