@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCellContent, type SortOrder } from \"./TableCellContent.js\";\nimport {\n  useTableConfig,\n  type TableCellConfig,\n  type TableCellHorizontalAlignment,\n  type TableCellVerticalAlignment,\n} from \"./TableConfigurationProvider.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  checkbox?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  contentProps?: PropsWithRef<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @remarks \\@since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import type { SortOrder } from \"@react-md/core\";\n   * import { Button, Dialog, TableCell } from \"@react-md/core\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/** @remarks \\@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  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  isInTableHeader: boolean;\n\n  /** @defaultValue `false` */\n  grow?: boolean;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /** @defaultValue `false` */\n  checkbox?: 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 * @remarks \\@since 6.0.0\n */\nexport function tableCell(options: TableCellClassNameOptions): string {\n  const {\n    grow,\n    sticky,\n    header,\n    checkbox,\n    hAlign,\n    vAlign,\n    lineWrap = true,\n    padding = \"horizontal\",\n    isInTableHeader,\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    checkbox && `${p}checkbox`,\n    sticky && (!isInTableHeader || checkbox) && `${p}sticky-cell`,\n    sticky && isInTableHeader && `${p}sticky-header`,\n    sticky && isInTableHeader && checkbox && `${p}header-cell`,\n    hAlign && hAlign !== \"left\" && `${p}${hAlign}`,\n    vAlign && vAlign !== \"middle\" && `${p}${vAlign}`,\n    !lineWrap && `${p}no-wrap`,\n    padding === \"vertical\" && `${p}v-padding`,\n    padding === \"none\" && `${p}no-padding`,\n    className\n  );\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox column in the `TableHeader` without any labels,\n * you will need to manually set the `header={false}` prop for that cell since\n * it is invalid to have a `<th>` without any readable content for screen\n * readers.\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      checkbox,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          checkbox,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","options","grow","sticky","header","checkbox","hAlign","vAlign","lineWrap","padding","isInTableHeader","className","p","TableCell","props","ref","sortOrder","scope","propScope","propHAlign","propVAlign","propHeader","propDisableLineWrap","children","beforeChildren","afterChildren","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","icon","iconAfter","rotated"],"mappings":"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"}
+{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type SortOrder,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport {\n  useTableConfig,\n  type TableCellConfig,\n} from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  inputToggle?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  contentProps?: PropsWithRef<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @remarks \\@since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import type { SortOrder } from \"@react-md/core\";\n   * import { Button, Dialog, TableCell } from \"@react-md/core\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox/radio column in the `TableHeader` without any\n * labels, you will need to manually set the `header={false}` prop for that cell\n * since it is invalid to have a `<th>` without any readable content for screen\n * readers.\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      inputToggle,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      iconRotatorProps,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          inputToggle,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          iconRotatorProps={iconRotatorProps}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","TableCell","props","ref","sortOrder","className","grow","scope","propScope","hAlign","propHAlign","vAlign","propVAlign","header","propHeader","lineWrap","propDisableLineWrap","inputToggle","children","beforeChildren","afterChildren","sticky","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","iconRotatorProps","padding","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","isInTableHeader","icon","iconAfter","rotated"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SACEC,gBAAgB,QAGX,wBAAwB;AAC/B,SACEC,cAAc,QAET,kCAAkC;AACzC,SAASC,SAAS,QAAQ,uBAAuB;AAuLjD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJ,aAAaC,SAAS,EACtBC,SAAS,EACTC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,mBAAmB,EAC7BC,WAAW,EACXC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,MAAM,EACNC,UAAUC,YAAY,EACtBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,gBAAgB,EAChBC,UAAU,YAAY,EACtBC,YAAY,EACZ,GAAGC,WACJ,GAAG3B;IAEJ,MAAMoB,WAAWzB,QAAQ,QAAQ0B;IAEjC,sEAAsE;IACtE,wEAAwE;IACxE,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,EACJV,QAAQiB,eAAe,EACvBrB,MAAM,EACNE,MAAM,EACNI,QAAQ,EACT,GAAGhB,eAAe;QACjBU,QAAQC;QACRC,QAAQC;QACRG,UAAUC;IACZ;IACA,MAAMH,SAASC,cAAcgB;IAE7B,IAAIvB,QAAQC;IACZ,IAAI,CAACD,SAASM,QAAQ;QACpBN,QAAQ,CAACuB,mBAAmBhB,aAAa,QAAQ;IACnD;IAEA,MAAMiB,YAAYlB,SAAS,OAAO;IAClC,qBACE,MAACkB;QACE,GAAGF,SAAS;QACb1B,KAAKA;QACL6B,aAAW5B,cAAc,SAAS6B,YAAY7B;QAC9CC,WAAWL,UAAU;YACnBK;YACAC;YACAO;YACAQ;YACAJ;YACAR;YACAE;YACAI,UAAU,CAACX,aAAaW;YACxBY,SAASL,YAAYlB,YAAY,SAASuB;YAC1CO,iBAAiBJ;QACnB;QACAvB,OAAOA;;YAENY;0BACD,KAACrB;gBACE,GAAG8B,YAAY;gBAChBO,MAAMb;gBACNc,WAAWZ;gBACXE,kBAAkBA;gBAClBtB,WAAWA;gBACXK,QAAQA;gBACR4B,SAASZ;0BAERP;;YAEFE;;;AAGP,GACA"}

package/dist/table/TableCellContent.d.ts

@@ -1,6 +1,11 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type IconRotatorProps } from "../icon/IconRotator.js";
 import { type TableCellHorizontalAlignment } from "./TableConfigurationProvider.js";
 export type SortOrder = "ascending" | "descending" | "none" | "other";
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableCellContentsIconRotatorProps = Omit<IconRotatorProps, "children" | "rotated">;
 /**
  * @remarks \@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props
  * can be passed to the `ButtonUnstyled`
@@ -22,6 +27,10 @@ export interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonEl
      * Boolean if the icon should be rotated.
      */
     rotated?: boolean;
+    /**
+     * Any additional props to pass to the `IconRotator`.
+     */
+    iconRotatorProps?: TableCellContentsIconRotatorProps;
     /**
      * @remarks \@since 4.0.3
      * @see {@link TableCellHorizontalAlignment}

package/dist/table/TableCellContent.js

@@ -16,7 +16,7 @@ const styles = bem("rmd-table-cell");
  *
  * @internal
  */ export const TableCellContent = /*#__PURE__*/ forwardRef(function TableCellContent(props, ref) {
-    const { icon: propIcon, style, className, sortOrder, children, rotated: propRotated, hAlign = "left", iconAfter, ...remaining } = props;
+    const { icon: propIcon, style, className, sortOrder, children, rotated: propRotated, hAlign = "left", iconAfter, iconRotatorProps, ...remaining } = props;
     if (!sortOrder || propIcon === null) {
         return /*#__PURE__*/ _jsx(_Fragment, {
             children: children
@@ -26,6 +26,7 @@ const styles = bem("rmd-table-cell");
     if (sortOrder !== "none") {
         const rotated = propRotated ?? sortOrder === "descending";
         icon = /*#__PURE__*/ _jsx(IconRotator, {
+            ...iconRotatorProps,
             rotated: rotated,
             children: propIcon
         });

package/dist/table/TableCellContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type TableCellHorizontalAlignment } from \"./TableConfigurationProvider.js\";\n\nexport type SortOrder = \"ascending\" | \"descending\" | \"none\" | \"other\";\n\n/**\n * @remarks \\@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * @remarks \\@since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = <IconRotator rotated={rotated}>{propIcon}</IconRotator>;\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,GAAG,QAAQ,kBAAkB;AAsCtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACT,GAAGC,WACJ,GAAGZ;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBAAO,KAACN;YAAYY,SAASA;sBAAUL;;IACzC;IAEA,qBACE,MAACR;QACE,GAAGiB,SAAS;QACbX,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}
+{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type TableCellHorizontalAlignment } from \"./TableConfigurationProvider.js\";\n\nexport type SortOrder = \"ascending\" | \"descending\" | \"none\" | \"other\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * Any additional props to pass to the `IconRotator`.\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * @remarks \\@since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    iconRotatorProps,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = (\n      <IconRotator {...iconRotatorProps} rotated={rotated}>\n        {propIcon}\n      </IconRotator>\n    );\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","iconRotatorProps","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAmDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACJ,GAAGb;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBACE,KAACN;YAAa,GAAGgB,gBAAgB;YAAEJ,SAASA;sBACzCL;;IAGP;IAEA,qBACE,MAACR;QACE,GAAGkB,SAAS;QACbZ,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}

package/dist/table/TableCheckbox.d.ts

@@ -44,13 +44,13 @@ export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, Table
     checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;
 }
 /**
- * **Server Component**
- * This might actually be a client component.
+ * **Client Component**
+ * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying
+ * some minimal styles.
  *
  * @example
  * Simple Example
  * ```tsx
- * import { useCheckboxGroup } from "@react-md/core";
  * import {
  *   Table,
  *   TableBody,
@@ -59,8 +59,9 @@ export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, Table
  *   TableContainer,
  *   TableHeader,
  *   TableRow,
+ *   useCheckboxGroup
  * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * const rows = [
  *   { name: "Frozen Yogurt", type: "Ice Cream" },

package/dist/table/TableCheckbox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Checkbox } from "../form/Checkbox.js";
@@ -6,13 +7,13 @@ const noop = ()=>{
 // do nothing
 };
 /**
- * **Server Component**
- * This might actually be a client component.
+ * **Client Component**
+ * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying
+ * some minimal styles.
  *
  * @example
  * Simple Example
  * ```tsx
- * import { useCheckboxGroup } from "@react-md/core";
  * import {
  *   Table,
  *   TableBody,
@@ -21,8 +22,9 @@ const noop = ()=>{
  *   TableContainer,
  *   TableHeader,
  *   TableRow,
+ *   useCheckboxGroup
  * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * const rows = [
  *   { name: "Frozen Yogurt", type: "Ice Cream" },
@@ -84,7 +86,7 @@ const noop = ()=>{
         ...remaining,
         ref: ref,
         header: false,
-        checkbox: true,
+        inputToggle: true,
         onClick: (event)=>{
             event.stopPropagation();
             onClick(event);

package/dist/table/TableCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["import { forwardRef, type TdHTMLAttributes } from \"react\";\nimport { Checkbox } from \"../form/Checkbox.js\";\nimport { type CheckboxProps } from \"../form/InputToggle.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableCheckboxSupportedCheckboxProps = Pick<\n  CheckboxProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"indeterminateIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"indeterminate\"\n  | \"aria-controls\"\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * \\@since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * \\@since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport interface TableCheckboxProps\n  extends TableCheckboxTdHTMLAttributes,\n    TableCheckboxSupportedCheckboxProps {\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\n   * Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @remarks \\@since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;\n}\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useCheckboxGroup } from \"@react-md/core\";\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableCheckbox,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\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 { getCheckboxProps, getIndeterminateProps } = useCheckboxGroup({\n *     values: rows.map(({ name }) => name),\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCheckbox {...getIndeterminateProps()} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const checkboxProps = getCheckboxProps(name);\n *             const { checked, onChange } = checkboxProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableCheckbox {...checkboxProps} />\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 * @remarks\n * \\@since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * \\@since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * \\@since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport const TableCheckbox = forwardRef<\n  HTMLTableCellElement,\n  TableCheckboxProps\n>(function TableCheckbox(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    indeterminateIcon,\n    value,\n    checked,\n    onChange,\n    defaultChecked,\n    indeterminate,\n    checkboxProps,\n    onClick = noop,\n    ...remaining\n  } = props;\n\n  return (\n    <TableCell\n      {...remaining}\n      ref={ref}\n      header={false}\n      checkbox\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick(event);\n      }}\n    >\n      <Checkbox\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        indeterminateIcon={indeterminateIcon}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        indeterminate={indeterminate}\n        {...checkboxProps}\n      />\n    </TableCell>\n  );\n});\n"],"names":["forwardRef","Checkbox","TableCell","noop","TableCheckbox","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","indeterminateIcon","value","checked","onChange","defaultChecked","indeterminate","checkboxProps","onClick","remaining","header","checkbox","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":";AAAA,SAASA,UAAU,QAA+B,QAAQ;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAqEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEC,GACD,OAAO,MAAMC,8BAAgBJ,WAG3B,SAASI,cAAcC,KAAK,EAAEC,GAAG;IACjC,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,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,UAAUrB,IAAI,EACd,GAAGsB,WACJ,GAAGpB;IAEJ,qBACE,KAACH;QACE,GAAGuB,SAAS;QACbnB,KAAKA;QACLoB,QAAQ;QACRC,QAAQ;QACRH,SAAS,CAACI;YACRA,MAAMC,eAAe;YACrBL,QAAQI;QACV;kBAEA,cAAA,KAAC3B;YACC6B,cAAYtB;YACZuB,mBAAiBxB;YACjByB,iBAAetB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,mBAAmBA;YACnBC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBD,UAAUA;YACVE,eAAeA;YACd,GAAGC,aAAa;;;AAIzB,GAAG"}
+{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type TdHTMLAttributes } from \"react\";\nimport { Checkbox } from \"../form/Checkbox.js\";\nimport { type CheckboxProps } from \"../form/InputToggle.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableCheckboxSupportedCheckboxProps = Pick<\n  CheckboxProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"indeterminateIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"indeterminate\"\n  | \"aria-controls\"\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * \\@since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * \\@since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport interface TableCheckboxProps\n  extends TableCheckboxTdHTMLAttributes,\n    TableCheckboxSupportedCheckboxProps {\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\n   * Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @remarks \\@since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;\n}\n\n/**\n * **Client Component**\n * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableCheckbox,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n *   useCheckboxGroup\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 { getCheckboxProps, getIndeterminateProps } = useCheckboxGroup({\n *     values: rows.map(({ name }) => name),\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCheckbox {...getIndeterminateProps()} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const checkboxProps = getCheckboxProps(name);\n *             const { checked, onChange } = checkboxProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableCheckbox {...checkboxProps} />\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 * @remarks\n * \\@since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * \\@since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * \\@since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport const TableCheckbox = forwardRef<\n  HTMLTableCellElement,\n  TableCheckboxProps\n>(function TableCheckbox(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    indeterminateIcon,\n    value,\n    checked,\n    onChange,\n    defaultChecked,\n    indeterminate,\n    checkboxProps,\n    onClick = noop,\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      <Checkbox\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        indeterminateIcon={indeterminateIcon}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        indeterminate={indeterminate}\n        {...checkboxProps}\n      />\n    </TableCell>\n  );\n});\n"],"names":["forwardRef","Checkbox","TableCell","noop","TableCheckbox","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","indeterminateIcon","value","checked","onChange","defaultChecked","indeterminate","checkboxProps","onClick","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA+B,QAAQ;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAqEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EC,GACD,OAAO,MAAMC,8BAAgBJ,WAG3B,SAASI,cAAcC,KAAK,EAAEC,GAAG;IACjC,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,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,UAAUrB,IAAI,EACd,GAAGsB,WACJ,GAAGpB;IAEJ,qBACE,KAACH;QACE,GAAGuB,SAAS;QACbnB,KAAKA;QACLoB,QAAQ;QACRC,WAAW;QACXH,SAAS,CAACI;YACRA,MAAMC,eAAe;YACrBL,QAAQI;QACV;kBAEA,cAAA,KAAC3B;YACC6B,cAAYtB;YACZuB,mBAAiBxB;YACjByB,iBAAetB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,mBAAmBA;YACnBC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBD,UAAUA;YACVE,eAAeA;YACd,GAAGC,aAAa;;;AAIzB,GAAG"}

package/dist/table/TableContainer.d.ts

@@ -1,10 +1,4 @@
 import { type HTMLAttributes } from "react";
-/**
- * @remarks \@since 6.0.0
- */
-export declare function tableContainer({ className }: {
-    className?: string;
-}): string;
 export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
 /**
  * **Client Component**

package/dist/table/TableContainer.js

@@ -1,14 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useMemo } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { TableContainerProvider } from "./TableContainerProvider.js";
-/**
- * @remarks \@since 6.0.0
- */ export function tableContainer({ className }) {
-    return cnb("rmd-table-container", className);
-}
+import { tableContainer } from "./tableContainerStyles.js";
 /**
  * **Client Component**
  *

package/dist/table/TableContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableContainer.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  TableContainerProvider,\n  type TableContainerContext,\n} from \"./TableContainerProvider.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tableContainer({ className }: { className?: string }): string {\n  return cnb(\"rmd-table-container\", className);\n}\n\nexport type TableContainerProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * **Client Component**\n *\n * An extremely \"useful\" component that should be used with the `Table`\n * component if you want to make a responsive table within the page. If you\n * don't want to use this component, you can just apply `overflow: auto` to a\n * parent element of the table.\n */\nexport const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(\n  function TableContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n    const [nodeRef, refCallback] = useEnsuredRef(ref);\n\n    const value = useMemo<TableContainerContext>(\n      () => ({\n        exists: true,\n        containerRef: nodeRef,\n      }),\n      [nodeRef]\n    );\n\n    return (\n      <TableContainerProvider value={value}>\n        <div\n          {...remaining}\n          ref={refCallback}\n          className={tableContainer({ className })}\n        >\n          {children}\n        </div>\n      </TableContainerProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useMemo","useEnsuredRef","TableContainerProvider","tableContainer","className","TableContainer","props","ref","children","remaining","nodeRef","refCallback","value","exists","containerRef","div"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,OAAO,QAA6B,QAAQ;AACjE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SACEC,sBAAsB,QAEjB,8BAA8B;AAErC;;CAEC,GACD,OAAO,SAASC,eAAe,EAAEC,SAAS,EAA0B;IAClE,OAAON,IAAI,uBAAuBM;AACpC;AAIA;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAAiBN,WAC5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEH,SAAS,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAC9C,MAAM,CAACI,SAASC,YAAY,GAAGV,cAAcM;IAE7C,MAAMK,QAAQZ,QACZ,IAAO,CAAA;YACLa,QAAQ;YACRC,cAAcJ;QAChB,CAAA,GACA;QAACA;KAAQ;IAGX,qBACE,KAACR;QAAuBU,OAAOA;kBAC7B,cAAA,KAACG;YACE,GAAGN,SAAS;YACbF,KAAKI;YACLP,WAAWD,eAAe;gBAAEC;YAAU;sBAErCI;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/table/TableContainer.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  TableContainerProvider,\n  type TableContainerContext,\n} from \"./TableContainerProvider.js\";\nimport { tableContainer } from \"./tableContainerStyles.js\";\n\nexport type TableContainerProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * **Client Component**\n *\n * An extremely \"useful\" component that should be used with the `Table`\n * component if you want to make a responsive table within the page. If you\n * don't want to use this component, you can just apply `overflow: auto` to a\n * parent element of the table.\n */\nexport const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(\n  function TableContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n    const [nodeRef, refCallback] = useEnsuredRef(ref);\n\n    const value = useMemo<TableContainerContext>(\n      () => ({\n        exists: true,\n        containerRef: nodeRef,\n      }),\n      [nodeRef]\n    );\n\n    return (\n      <TableContainerProvider value={value}>\n        <div\n          {...remaining}\n          ref={refCallback}\n          className={tableContainer({ className })}\n        >\n          {children}\n        </div>\n      </TableContainerProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useMemo","useEnsuredRef","TableContainerProvider","tableContainer","TableContainer","props","ref","className","children","remaining","nodeRef","refCallback","value","exists","containerRef","div"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAA6B,QAAQ;AACjE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SACEC,sBAAsB,QAEjB,8BAA8B;AACrC,SAASC,cAAc,QAAQ,4BAA4B;AAI3D;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAAiBL,WAC5B,SAASK,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,MAAM,CAACK,SAASC,YAAY,GAAGV,cAAcK;IAE7C,MAAMM,QAAQZ,QACZ,IAAO,CAAA;YACLa,QAAQ;YACRC,cAAcJ;QAChB,CAAA,GACA;QAACA;KAAQ;IAGX,qBACE,KAACR;QAAuBU,OAAOA;kBAC7B,cAAA,KAACG;YACE,GAAGN,SAAS;YACbH,KAAKK;YACLJ,WAAWJ,eAAe;gBAAEI;YAAU;sBAErCC;;;AAIT,GACA"}

package/dist/table/TableFooter.d.ts

@@ -1,6 +1,10 @@
 import { type HTMLAttributes } from "react";
 import { type TableCellConfig } from "./TableConfigurationProvider.js";
-import { type TableStickySectionProps } from "./types.js";
+import { type IsStickyTableSectionActive, type TableStickySectionProps } from "./types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare const isTableFooterStickyActive: IsStickyTableSectionActive;
 /**
  * @remarks \@since 6.0.0 Added support for "sticky-active" state.
  */
@@ -13,6 +17,8 @@ export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement
      * @defaultValue `false`
      */
     hoverable?: boolean;
+    /** @defaultValue {@link isTableFooterStickyActive} */
+    isStickyActive?: IsStickyTableSectionActive;
 }
 /**
  * **Client Component**

package/dist/table/TableFooter.js

@@ -1,13 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { bem } from "../utils/bem.js";
 import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvider.js";
 import { useTableContainer } from "./TableContainerProvider.js";
-const styles = bem("rmd-tfoot");
+import { tableFooter } from "./tableFooterStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ */ export const isTableFooterStickyActive = (entry, isInTableContainer)=>{
+    const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
+    if (isInTableContainer) {
+        return !isIntersecting;
+    }
+    return intersectionRatio < 1 && boundingClientRect.top >= 0;
+};
 /**
  * **Client Component**
  * TODO: Create separate useStickyTableFooter + StickyTableFooter component
@@ -17,7 +24,7 @@ const styles = bem("rmd-tfoot");
  * and line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
  */ export const TableFooter = /*#__PURE__*/ forwardRef(function TableFooter(props, propRef) {
-    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive, disableStickyStyles = false, ...remaining } = props;
+    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive = isTableFooterStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
     // update the table configuration with the custom overrides for the `<tfoot>`
     const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } = useTableConfig({
         lineWrap: propLineWrap,
@@ -55,15 +62,7 @@ const styles = bem("rmd-tfoot");
             tfootRef
         ]),
         onUpdate: useCallback(([entry])=>{
-            if (typeof isStickyActive === "function") {
-                return isStickyActive(entry);
-            }
-            const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
-            if (exists) {
-                setStickyActive(!isIntersecting);
-                return;
-            }
-            setStickyActive(intersectionRatio < 1 && boundingClientRect.top >= 0);
+            setStickyActive(isStickyActive(entry, exists));
         }, [
             exists,
             isStickyActive
@@ -83,10 +82,12 @@ const styles = bem("rmd-tfoot");
             /*#__PURE__*/ _jsx("tfoot", {
                 ...remaining,
                 ref: exists ? tfootRefCallback : targetRef,
-                className: cnb(styles({
+                className: tableFooter({
+                    className,
                     sticky,
-                    "sticky-active": stickyActive
-                }), className),
+                    stickyActive,
+                    stickyActiveClassName
+                }),
                 children: children
             })
         ]

package/dist/table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { type TableStickySectionProps } from \"./types.js\";\n\nconst styles = bem(\"rmd-tfoot\");\n\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * footers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table footers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n}\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableFooter + StickyTableFooter 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 {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles = false,\n    ...remaining\n  } = props;\n\n  // update the table configuration with the custom overrides for the `<tfoot>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: false,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [tfootRef, tfootRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver<\n    HTMLTableSectionElement | HTMLElement\n  >({\n    ref: exists ? undefined : tfootRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const topOffset =\n        exists && tfootRef.current ? tfootRef.current.offsetHeight - 1 : 1;\n\n      return `0px 0px -${topOffset}px 0px`;\n    }, [exists, tfootRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        if (typeof isStickyActive === \"function\") {\n          return isStickyActive(entry);\n        }\n\n        const { intersectionRatio, boundingClientRect, isIntersecting } = entry;\n        if (exists) {\n          setStickyActive(!isIntersecting);\n          return;\n        }\n\n        setStickyActive(intersectionRatio < 1 && boundingClientRect.top >= 0);\n      },\n      [exists, isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n      <tfoot\n        {...remaining}\n        ref={exists ? tfootRefCallback : targetRef}\n        className={cnb(\n          styles({\n            sticky,\n            \"sticky-active\": stickyActive,\n          }),\n          className\n        )}\n      >\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n});\n"],"names":["cnb","forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","bem","TableConfigProvider","useTableConfig","useTableContainer","styles","TableFooter","props","propRef","className","hoverable","lineWrap","propLineWrap","children","sticky","stickyOptions","isStickyActive","disableStickyStyles","remaining","dense","hAlign","vAlign","disableHover","disableBorders","configuration","header","tfootRef","tfootRefCallback","exists","containerRef","stickyActive","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","topOffset","current","offsetHeight","onUpdate","entry","intersectionRatio","boundingClientRect","isIntersecting","top","value","tbody","aria-hidden","tfoot"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AACzC,SAASC,iBAAiB,QAAQ,8BAA8B;AAGhE,MAAMC,SAASJ,IAAI;AAmBnB;;;;;;;;CAQC,GACD,OAAO,MAAMK,4BAAcX,WAGzB,SAASW,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,SAAS,KAAK,EACdC,aAAa,EACbC,cAAc,EACdC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGX;IAEJ,6EAA6E;IAC7E,MAAM,EAAEY,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEV,QAAQ,EAAEW,YAAY,EAAEC,cAAc,EAAE,GACrEpB,eAAe;QACbQ,UAAUC;QACVU,cAAc,CAACZ;IACjB;IAEF,MAAMc,gBAAgB3B,QACpB,IAAO,CAAA;YACLsB;YACAM,QAAQ;YACRL;YACAC;YACAV;YACAY;YACAD;QACF,CAAA,GACA;QAACH;QAAOC;QAAQC;QAAQV;QAAUY;QAAgBD;KAAa;IAGjE,MAAM,CAACI,UAAUC,iBAAiB,GAAG5B,cAAcS;IACnD,MAAM,EAAEoB,MAAM,EAAEC,YAAY,EAAE,GAAGzB;IACjC,MAAM,CAAC0B,cAAcC,gBAAgB,GAAGjC,SAAS;IACjD,MAAMkC,YAAYhC,wBAEhB;QACAiC,KAAKL,SAASM,YAAYP;QAC1BQ,MAAMN;QACNO,UAAU,CAACtB,UAAUG;QACrBoB,WAAWT,SAAS,IAAI;QACxBU,eAAe1C,YAAY;YACzB,MAAM2C,YACJX,UAAUF,SAASc,OAAO,GAAGd,SAASc,OAAO,CAACC,YAAY,GAAG,IAAI;YAEnE,OAAO,CAAC,SAAS,EAAEF,UAAU,MAAM,CAAC;QACtC,GAAG;YAACX;YAAQF;SAAS;QACrBgB,UAAU9C,YACR,CAAC,CAAC+C,MAAM;YACN,IAAI,OAAO3B,mBAAmB,YAAY;gBACxC,OAAOA,eAAe2B;YACxB;YAEA,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,cAAc,EAAE,GAAGH;YAClE,IAAIf,QAAQ;gBACVG,gBAAgB,CAACe;gBACjB;YACF;YAEAf,gBAAgBa,oBAAoB,KAAKC,mBAAmBE,GAAG,IAAI;QACrE,GACA;YAACnB;YAAQZ;SAAe;QAE1B,yEAAyE;QACzE,GAAGD,aAAa;IAClB;IAEA,qBACE,MAACb;QAAoB8C,OAAOxB;;YACzBI,UAAUd,UAAU,CAACG,uBACpB,oEAAoE;YACpE,uEAAuE;0BACvE,KAACgC;gBAAMC,aAAW;gBAACjB,KAAKD;;0BAE1B,KAACmB;gBACE,GAAGjC,SAAS;gBACbe,KAAKL,SAASD,mBAAmBK;gBACjCvB,WAAWf,IACTW,OAAO;oBACLS;oBACA,iBAAiBgB;gBACnB,IACArB;0BAGDI;;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport {\n  type IsStickyTableSectionActive,\n  type TableStickySectionProps,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const isTableFooterStickyActive: IsStickyTableSectionActive = (\n  entry,\n  isInTableContainer\n) => {\n  const { intersectionRatio, boundingClientRect, isIntersecting } = entry;\n  if (isInTableContainer) {\n    return !isIntersecting;\n  }\n\n  return intersectionRatio < 1 && boundingClientRect.top >= 0;\n};\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * footers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table footers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n\n  /** @defaultValue {@link isTableFooterStickyActive} */\n  isStickyActive?: IsStickyTableSectionActive;\n}\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableFooter + StickyTableFooter 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 {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive = isTableFooterStickyActive,\n    disableStickyStyles = false,\n    stickyActiveClassName,\n    ...remaining\n  } = props;\n\n  // update the table configuration with the custom overrides for the `<tfoot>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: false,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [tfootRef, tfootRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver<\n    HTMLTableSectionElement | HTMLElement\n  >({\n    ref: exists ? undefined : tfootRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const topOffset =\n        exists && tfootRef.current ? tfootRef.current.offsetHeight - 1 : 1;\n\n      return `0px 0px -${topOffset}px 0px`;\n    }, [exists, tfootRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        setStickyActive(isStickyActive(entry, exists));\n      },\n      [exists, isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n      <tfoot\n        {...remaining}\n        ref={exists ? tfootRefCallback : targetRef}\n        className={tableFooter({\n          className,\n          sticky,\n          stickyActive,\n          stickyActiveClassName,\n        })}\n      >\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","TableConfigProvider","useTableConfig","useTableContainer","tableFooter","isTableFooterStickyActive","entry","isInTableContainer","intersectionRatio","boundingClientRect","isIntersecting","top","TableFooter","props","propRef","className","hoverable","lineWrap","propLineWrap","children","sticky","stickyOptions","isStickyActive","disableStickyStyles","stickyActiveClassName","remaining","dense","hAlign","vAlign","disableHover","disableBorders","configuration","header","tfootRef","tfootRefCallback","exists","containerRef","stickyActive","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","topOffset","current","offsetHeight","onUpdate","value","tbody","aria-hidden","tfoot"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AACzC,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,WAAW,QAAQ,yBAAyB;AAMrD;;CAEC,GACD,OAAO,MAAMC,4BAAwD,CACnEC,OACAC;IAEA,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,cAAc,EAAE,GAAGJ;IAClE,IAAIC,oBAAoB;QACtB,OAAO,CAACG;IACV;IAEA,OAAOF,oBAAoB,KAAKC,mBAAmBE,GAAG,IAAI;AAC5D,EAAE;AAqBF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAAcjB,WAGzB,SAASiB,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,SAAS,KAAK,EACdC,aAAa,EACbC,iBAAiBjB,yBAAyB,EAC1CkB,sBAAsB,KAAK,EAC3BC,qBAAqB,EACrB,GAAGC,WACJ,GAAGZ;IAEJ,6EAA6E;IAC7E,MAAM,EAAEa,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEX,QAAQ,EAAEY,YAAY,EAAEC,cAAc,EAAE,GACrE5B,eAAe;QACbe,UAAUC;QACVW,cAAc,CAACb;IACjB;IAEF,MAAMe,gBAAgBlC,QACpB,IAAO,CAAA;YACL6B;YACAM,QAAQ;YACRL;YACAC;YACAX;YACAa;YACAD;QACF,CAAA,GACA;QAACH;QAAOC;QAAQC;QAAQX;QAAUa;QAAgBD;KAAa;IAGjE,MAAM,CAACI,UAAUC,iBAAiB,GAAGnC,cAAce;IACnD,MAAM,EAAEqB,MAAM,EAAEC,YAAY,EAAE,GAAGjC;IACjC,MAAM,CAACkC,cAAcC,gBAAgB,GAAGxC,SAAS;IACjD,MAAMyC,YAAYvC,wBAEhB;QACAwC,KAAKL,SAASM,YAAYP;QAC1BQ,MAAMN;QACNO,UAAU,CAACvB,UAAUG;QACrBqB,WAAWT,SAAS,IAAI;QACxBU,eAAejD,YAAY;YACzB,MAAMkD,YACJX,UAAUF,SAASc,OAAO,GAAGd,SAASc,OAAO,CAACC,YAAY,GAAG,IAAI;YAEnE,OAAO,CAAC,SAAS,EAAEF,UAAU,MAAM,CAAC;QACtC,GAAG;YAACX;YAAQF;SAAS;QACrBgB,UAAUrD,YACR,CAAC,CAACU,MAAM;YACNgC,gBAAgBhB,eAAehB,OAAO6B;QACxC,GACA;YAACA;YAAQb;SAAe;QAE1B,yEAAyE;QACzE,GAAGD,aAAa;IAClB;IAEA,qBACE,MAACpB;QAAoBiD,OAAOnB;;YACzBI,UAAUf,UAAU,CAACG,uBACpB,oEAAoE;YACpE,uEAAuE;0BACvE,KAAC4B;gBAAMC,aAAW;gBAACZ,KAAKD;;0BAE1B,KAACc;gBACE,GAAG5B,SAAS;gBACbe,KAAKL,SAASD,mBAAmBK;gBACjCxB,WAAWX,YAAY;oBACrBW;oBACAK;oBACAiB;oBACAb;gBACF;0BAECL;;;;AAIT,GAAG"}

package/dist/table/TableHeader.d.ts

@@ -1,15 +1,10 @@
 import { type HTMLAttributes } from "react";
 import { type TableCellConfig } from "./TableConfigurationProvider.js";
-import { type TableStickySectionProps } from "./types.js";
-/** @remarks \@since 6.0.0 */
-export interface TableHeaderClassNameOptions {
-    className?: string;
-    dense?: boolean;
-    sticky?: boolean;
-    stickyActive?: boolean;
-}
-/** @remarks \@since 6.0.0 */
-export declare function tableHeader(options?: TableHeaderClassNameOptions): string;
+import { type IsStickyTableSectionActive, type TableStickySectionProps } from "./types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare const isTableHeaderStickyActive: IsStickyTableSectionActive;
 /**
  * @remarks \@since 6.0.0 Added support for "sticky-active" state.
  */
@@ -22,11 +17,9 @@ export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement
      * @defaultValue `false`
      */
     hoverable?: boolean;
+    /** @defaultValue {@link isTableHeaderStickyActive} */
+    isStickyActive?: IsStickyTableSectionActive;
 }
-/**
- * @remarks \@since 6.0.0
- */
-export declare const isTableHeaderStickyActive: (entry: IntersectionObserverEntry) => boolean;
 /**
  * **Client Component**
  * TODO: Create separate useStickyTableHeader + StickyTableHeader component

package/dist/table/TableHeader.js

@@ -1,21 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { bem } from "../utils/bem.js";
 import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvider.js";
 import { useTableContainer } from "./TableContainerProvider.js";
-const styles = bem("rmd-thead");
-/** @remarks \@since 6.0.0 */ export function tableHeader(options = {}) {
-    const { dense, sticky, stickyActive, className } = options;
-    return cnb(styles({
-        dense,
-        sticky,
-        "sticky-active": stickyActive
-    }), className);
-}
+import { tableHeader } from "./tableHeaderStyles.js";
 /**
  * @remarks \@since 6.0.0
  */ export const isTableHeaderStickyActive = (entry)=>{
@@ -32,7 +22,7 @@ const styles = bem("rmd-thead");
  * line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
  */ export const TableHeader = /*#__PURE__*/ forwardRef(function TableHeader(props, propRef) {
-    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive = isTableHeaderStickyActive, disableStickyStyles = false, ...remaining } = props;
+    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive = isTableHeaderStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
     // update the table configuration with the custom overrides for the `<thead>`
     const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } = useTableConfig({
         lineWrap: propLineWrap,
@@ -80,8 +70,9 @@ const styles = bem("rmd-thead");
             theadRef
         ]),
         onUpdate: useCallback(([entry])=>{
-            setStickyActive(isStickyActive(entry));
+            setStickyActive(isStickyActive(entry, exists));
         }, [
+            exists,
             isStickyActive
         ]),
         // allow the user defined sticky options to override the default behavior
@@ -94,10 +85,11 @@ const styles = bem("rmd-thead");
                 ...remaining,
                 ref: exists ? theadRefCallback : targetRef,
                 className: tableHeader({
+                    className,
                     dense,
                     sticky,
                     stickyActive,
-                    className
+                    stickyActiveClassName
                 }),
                 children: children
             }),

package/dist/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { type TableStickySectionProps } from \"./types.js\";\n\nconst styles = bem(\"rmd-thead\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableHeaderClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  sticky?: boolean;\n  stickyActive?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableHeader(options: TableHeaderClassNameOptions = {}): string {\n  const { dense, sticky, stickyActive, className } = options;\n\n  return cnb(\n    styles({\n      dense,\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * headers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table headers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const isTableHeaderStickyActive = (\n  entry: IntersectionObserverEntry\n): boolean => {\n  return (\n    entry.intersectionRatio < 1 &&\n    entry.boundingClientRect.bottom <= window.innerHeight\n  );\n};\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableHeader + StickyTableHeader 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 {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive = isTableHeaderStickyActive,\n    disableStickyStyles = false,\n    ...remaining\n  } = props;\n\n  // update the table configuration with the custom overrides for the `<thead>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: true,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [theadRef, theadRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver({\n    ref: exists ? undefined : theadRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const thead = theadRef.current;\n      if (!thead) {\n        return;\n      }\n\n      let topOffset: number;\n      if (exists) {\n        topOffset = thead.offsetHeight - 1;\n      } else {\n        const top = parseFloat(window.getComputedStyle(thead).top);\n        topOffset = Number.isNaN(top) ? 1 : top + 1;\n      }\n\n      return `-${topOffset}px 0px 0px`;\n    }, [exists, theadRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        setStickyActive(isStickyActive(entry));\n      },\n      [isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      <thead\n        {...remaining}\n        ref={exists ? theadRefCallback : targetRef}\n        className={tableHeader({\n          dense,\n          sticky,\n          stickyActive,\n          className,\n        })}\n      >\n        {children}\n      </thead>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n    </TableConfigProvider>\n  );\n});\n"],"names":["cnb","forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","bem","TableConfigProvider","useTableConfig","useTableContainer","styles","tableHeader","options","dense","sticky","stickyActive","className","isTableHeaderStickyActive","entry","intersectionRatio","boundingClientRect","bottom","window","innerHeight","TableHeader","props","propRef","hoverable","lineWrap","propLineWrap","children","stickyOptions","isStickyActive","disableStickyStyles","remaining","hAlign","vAlign","disableHover","disableBorders","configuration","header","theadRef","theadRefCallback","exists","containerRef","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","thead","current","topOffset","offsetHeight","top","parseFloat","getComputedStyle","Number","isNaN","onUpdate","value","tbody","aria-hidden"],"mappings":"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"}
+{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport {\n  type IsStickyTableSectionActive,\n  type TableStickySectionProps,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const isTableHeaderStickyActive: IsStickyTableSectionActive = (\n  entry\n) => {\n  return (\n    entry.intersectionRatio < 1 &&\n    entry.boundingClientRect.bottom <= window.innerHeight\n  );\n};\n\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * headers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table headers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n\n  /** @defaultValue {@link isTableHeaderStickyActive} */\n  isStickyActive?: IsStickyTableSectionActive;\n}\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableHeader + StickyTableHeader 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 {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive = isTableHeaderStickyActive,\n    disableStickyStyles = false,\n    stickyActiveClassName,\n    ...remaining\n  } = props;\n\n  // update the table configuration with the custom overrides for the `<thead>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: true,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [theadRef, theadRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver({\n    ref: exists ? undefined : theadRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const thead = theadRef.current;\n      if (!thead) {\n        return;\n      }\n\n      let topOffset: number;\n      if (exists) {\n        topOffset = thead.offsetHeight - 1;\n      } else {\n        const top = parseFloat(window.getComputedStyle(thead).top);\n        topOffset = Number.isNaN(top) ? 1 : top + 1;\n      }\n\n      return `-${topOffset}px 0px 0px`;\n    }, [exists, theadRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        setStickyActive(isStickyActive(entry, exists));\n      },\n      [exists, isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      <thead\n        {...remaining}\n        ref={exists ? theadRefCallback : targetRef}\n        className={tableHeader({\n          className,\n          dense,\n          sticky,\n          stickyActive,\n          stickyActiveClassName,\n        })}\n      >\n        {children}\n      </thead>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","TableConfigProvider","useTableConfig","useTableContainer","tableHeader","isTableHeaderStickyActive","entry","intersectionRatio","boundingClientRect","bottom","window","innerHeight","TableHeader","props","propRef","className","hoverable","lineWrap","propLineWrap","children","sticky","stickyOptions","isStickyActive","disableStickyStyles","stickyActiveClassName","remaining","dense","hAlign","vAlign","disableHover","disableBorders","configuration","header","theadRef","theadRefCallback","exists","containerRef","stickyActive","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","thead","current","topOffset","offsetHeight","top","parseFloat","getComputedStyle","Number","isNaN","onUpdate","value","tbody","aria-hidden"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AACzC,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,WAAW,QAAQ,yBAAyB;AAMrD;;CAEC,GACD,OAAO,MAAMC,4BAAwD,CACnEC;IAEA,OACEA,MAAMC,iBAAiB,GAAG,KAC1BD,MAAME,kBAAkB,CAACC,MAAM,IAAIC,OAAOC,WAAW;AAEzD,EAAE;AAsBF;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcjB,WAGzB,SAASiB,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,SAAS,KAAK,EACdC,aAAa,EACbC,iBAAiBjB,yBAAyB,EAC1CkB,sBAAsB,KAAK,EAC3BC,qBAAqB,EACrB,GAAGC,WACJ,GAAGZ;IAEJ,6EAA6E;IAC7E,MAAM,EAAEa,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEX,QAAQ,EAAEY,YAAY,EAAEC,cAAc,EAAE,GACrE5B,eAAe;QACbe,UAAUC;QACVW,cAAc,CAACb;IACjB;IAEF,MAAMe,gBAAgBlC,QACpB,IAAO,CAAA;YACL6B;YACAM,QAAQ;YACRL;YACAC;YACAX;YACAa;YACAD;QACF,CAAA,GACA;QAACH;QAAOC;QAAQC;QAAQX;QAAUa;QAAgBD;KAAa;IAGjE,MAAM,CAACI,UAAUC,iBAAiB,GAAGnC,cAAce;IACnD,MAAM,EAAEqB,MAAM,EAAEC,YAAY,EAAE,GAAGjC;IACjC,MAAM,CAACkC,cAAcC,gBAAgB,GAAGxC,SAAS;IACjD,MAAMyC,YAAYvC,wBAAwB;QACxCwC,KAAKL,SAASM,YAAYP;QAC1BQ,MAAMN;QACNO,UAAU,CAACvB,UAAUG;QACrBqB,WAAWT,SAAS,IAAI;QACxBU,eAAejD,YAAY;YACzB,MAAMkD,QAAQb,SAASc,OAAO;YAC9B,IAAI,CAACD,OAAO;gBACV;YACF;YAEA,IAAIE;YACJ,IAAIb,QAAQ;gBACVa,YAAYF,MAAMG,YAAY,GAAG;YACnC,OAAO;gBACL,MAAMC,MAAMC,WAAWzC,OAAO0C,gBAAgB,CAACN,OAAOI,GAAG;gBACzDF,YAAYK,OAAOC,KAAK,CAACJ,OAAO,IAAIA,MAAM;YAC5C;YAEA,OAAO,CAAC,CAAC,EAAEF,UAAU,UAAU,CAAC;QAClC,GAAG;YAACb;YAAQF;SAAS;QACrBsB,UAAU3D,YACR,CAAC,CAACU,MAAM;YACNgC,gBAAgBhB,eAAehB,OAAO6B;QACxC,GACA;YAACA;YAAQb;SAAe;QAE1B,yEAAyE;QACzE,GAAGD,aAAa;IAClB;IAEA,qBACE,MAACpB;QAAoBuD,OAAOzB;;0BAC1B,KAACe;gBACE,GAAGrB,SAAS;gBACbe,KAAKL,SAASD,mBAAmBK;gBACjCxB,WAAWX,YAAY;oBACrBW;oBACAW;oBACAN;oBACAiB;oBACAb;gBACF;0BAECL;;YAEFgB,UAAUf,UAAU,CAACG,uBACpB,oEAAoE;YACpE,uEAAuE;0BACvE,KAACkC;gBAAMC,aAAW;gBAAClB,KAAKD;;;;AAIhC,GAAG"}