@react-md/core 6.5.2 → 7.0.0

package/dist/spinbutton/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/spinbutton/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type FocusEvent,\n  type FormEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type Ref,\n  type RefObject,\n} from \"react\";\n\nimport { type FormComponentStates } from \"../form/types.js\";\nimport { type MinMaxRange, type UseStateInitializer } from \"../types.js\";\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonEventHandlers<E extends HTMLElement = HTMLDivElement> =\n  Pick<\n    HTMLAttributes<E>,\n    \"onInput\" | \"onClick\" | \"onFocus\" | \"onBlur\" | \"onKeyDown\"\n  >;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonAriaAttributes = Pick<\n  AriaAttributes,\n  | \"aria-required\"\n  | \"aria-invalid\"\n  | \"aria-readonly\"\n  | \"aria-disabled\"\n  | \"aria-valuemin\"\n  | \"aria-valuemax\"\n  | \"aria-valuenow\"\n  | \"aria-valuetext\"\n>;\n\n/**\n * This is a way to map a single character to a value within a spinbutton and\n * was mostly added to support time inputs. The main example is:\n *\n * @example Day Period Mapping\n * ```ts\n * const AM_PM: SpinButtonCharacterValueMap = {\n *   a: 0,\n *   p: 1,\n * };\n * ```\n *\n * **If the mapping is provided, all other input events are ignored**.\n *\n * @since 6.4.0\n */\nexport type SpinButtonCharacterValueMap = Readonly<Record<string, number>>;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonValue = number | null;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonGetValueText = (\n  value: SpinButtonValue\n) => string | undefined;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonChangeEvent<E extends HTMLElement = HTMLDivElement> =\n  | FormEvent<E>\n  | KeyboardEvent<E>\n  | FocusEvent<E>;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonChangeReason =\n  | \"change\"\n  | \"type\"\n  | \"typed-to-completion\"\n  | \"cleared\";\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonChangeEventOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  event: SpinButtonChangeEvent<E>;\n  value: SpinButtonValue;\n  reason: SpinButtonChangeReason;\n}\n\n/**\n * This callback will be fired whenever the spinbutton value has changed.\n *\n * The `reason` will be \"typed-to-completion\"` when:\n * - the `value` is not `null` and:\n *   - the user uses the `ArrowUp`, `ArrowDown`, `Home`, `End`, `PageUp`, or\n *     `PageDown` keys to change the value\n *   - the user has typed the max amount of digits based on the `max` value\n *\n * Examples with: `min=0` and `max=12`\n * - `1` -> (1, false)\n *   - `Tab` or blur (1, true)\n *   - `1` ->  (11, true)\n * - `0` - (1, false)\n *   - `Tab` or blur (0, true)\n *   - `3` (3, true)\n * - `3` -> (3, true)\n *   - there are no more characters that could have been typed\n *\n *\n * @since 6.4.0\n */\nexport type SpinButtonValueChange<E extends HTMLElement = HTMLDivElement> = (\n  options: SpinButtonChangeEventOptions<E>\n) => void;\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonUnknownValueOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value?: SpinButtonValue;\n  defaultValue?: UseStateInitializer<SpinButtonValue>;\n  onValueChange?: SpinButtonValueChange<E>;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonControlledValueOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value: SpinButtonValue;\n  defaultValue?: never;\n  onValueChange: SpinButtonValueChange<E>;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonUncontrolledValueOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value?: never;\n  defaultValue?: UseStateInitializer<SpinButtonValue>;\n  onValueChange?: SpinButtonValueChange<E>;\n}\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonValueOptions<E extends HTMLElement = HTMLDivElement> =\n  | SpinButtonControlledValueOptions<E>\n  | SpinButtonUncontrolledValueOptions<E>;\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonDigitRangeOptions {\n  /**\n   * This is the minimum number of digits that should be shown in the spin\n   * button as the user is typing. If the current value is less than this\n   * value, the {@link placeholderChar} will be used as a `padStart` value.\n   *\n   * @example Get Text Content Example\n   * ```ts\n   * const textContent1 = getTextContent({\n   *   value: null,\n   *   fallback: \"HH\",\n   *   placeholderChar: \"0\",\n   * });\n   * // ^ textContent1 === \"HH\"\n   *\n   * const textContent2 = getTextContent({\n   *   value: 3,\n   *   fallback: \"HH\",\n   *   placeholderChar: \"0\",\n   * });\n   * // ^ textContent2 === \"03\"\n   *\n   * const textContent3 = getTextContent({\n   *   value: 12,\n   *   fallback: \"HH\",\n   *   placeholderChar: \"0\",\n   * });\n   * // ^ textContent3 === \"12\"\n   * ```\n   *\n   * @example Year Example\n   * ```ts\n   * const textContent1 = getTextContent({\n   *   value: null,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent1 === \"YYYY\"\n   *\n   * const textContent2 = getTextContent({\n   *   value: 2,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent2 === \"0002\"\n   *\n   * const textContent3 = getTextContent({\n   *   value: 200,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent3 === \"0200\"\n   *\n   * const textContent4 = getTextContent({\n   *   value: 2025,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent4 === \"2025\"\n   * ```\n   *\n   * @see {@link SpinButtonTextPlaceholderOptions.placeholderChar}\n   * @defaultValue `fallback?.length ?? getNumberOfDigits(min)`\n   */\n  minDigits?: number;\n\n  /**\n   * This is the maximum number of digits that should be shown in the spin\n   * button as the user is typing and is used to determine if the user has\n   * `\"typed-to-completion\"`.\n   *\n   * @example Year Example\n   * ```tsx\n   * // this _could_ also be 9999\n   * const max = undefined;\n   * const maxDigits = 4;\n   *\n   * // if the current value is `null` and the user types `2`\n   * onValueChange({\n   *   event,\n   *   reason: \"change\",\n   *   nextValue: 2,\n   * });\n   *\n   * // if the current value is `2` and the user types `0`\n   * onValueChange({\n   *   event,\n   *   reason: \"change\",\n   *   nextValue: 20,\n   * });\n   *\n   * // if the current value is `20` and the user types `2`\n   * onValueChange({\n   *   event,\n   *   reason: \"change\",\n   *   nextValue: 202,\n   * });\n   *\n   * // if the current value is `202` and the user types `5`:\n   * onValueChange({\n   *   event,\n   *   reason: \"typed-to-completion\",\n   *   nextValue: 2025,\n   * });\n   * ```\n   *\n   * @defaultValue `getNumberOfDigits(max)`\n   */\n  maxDigits?: number;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonRangeOptions\n  extends Partial<MinMaxRange>, SpinButtonDigitRangeOptions {}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonTextPlaceholderOptions extends SpinButtonRangeOptions {\n  /**\n   * An optional fallback value to display when the spin button's value is\n   * `null`. For example: if the spin button is used to set the specific hour\n   * in a time field, set the fallback to `\"HH\"` to show that until the user\n   * has typed a value.\n   */\n  fallback?: string;\n\n  /**\n   * This is the character to use to fill the remaining number of digits to\n   * display in the spin button.\n   *\n   * @see {@link minDigits}\n   * @defaultValue `\"0\"`\n   */\n  placeholderChar?: string;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface GetSpinButtonTextContentOptions extends SpinButtonTextPlaceholderOptions {\n  /**\n   * The current value in the spin button to convert to text. **This will be\n   * called with numbers outside of the allowed range**.\n   */\n  value: SpinButtonValue;\n}\n\n/**\n * @since 6.4.0\n */\nexport type GetSpinButtonTextContent = (\n  options: GetSpinButtonTextContentOptions\n) => string;\n\n/**\n * @since 6.4.0\n */\nexport type GetSpinButtonValueText = (\n  value: SpinButtonValue\n) => string | undefined;\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonFormStates extends Omit<\n  FormComponentStates,\n  \"active\"\n> {\n  required?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonOptions<E extends HTMLElement = HTMLDivElement>\n  extends\n    SpinButtonEventHandlers<E>,\n    SpinButtonUnknownValueOptions<E>,\n    SpinButtonFormStates,\n    SpinButtonTextPlaceholderOptions {\n  /**\n   * @defaultValue `\"spinbutton-\" + useId()`\n   */\n  id?: string;\n  ref?: Ref<E>;\n  form?: string;\n\n  /**\n   * The default value to use when the increment or decrement action is fired\n   * from the spinbutton through keyboard events before a value has been set.\n   * So when the increment action is fired, this will be\n   * `defaultKeyboardValue + 1`.\n   *\n   * @defaultValue `min ?? max ?? 0`\n   */\n  defaultKeyboardValue?: UseStateInitializer<number>;\n\n  /**\n   * NOTE: This isn't actually supported yet\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n\n  /** @see {@link SpinButtonCharacterValueMap} */\n  mappings?: SpinButtonCharacterValueMap;\n\n  /**\n   * Used to provide an `aria-valuenow` string for a specific value in the\n   * `SpinButton`.\n   *\n   * @defaultValue `(value) => value === null ? \"No value selected\" : undefined`\n   */\n  getValueText?: GetSpinButtonValueText;\n\n  getTextContent?: GetSpinButtonTextContent;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface ProvidedSpinButtonProps<E extends HTMLElement = HTMLDivElement>\n  extends Required<SpinButtonEventHandlers<E>>, SpinButtonAriaAttributes {\n  id: string;\n  ref: Ref<E>;\n  role: \"spinbutton\";\n  inputMode: \"numeric\";\n  spellCheck: boolean;\n  autoCapitalize: \"none\";\n  autoCorrect: \"off\";\n  tabIndex: number | undefined;\n  contentEditable: boolean | undefined;\n  suppressContentEditableWarning: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonImplementation<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value: SpinButtonValue;\n  setValue: (value: SpinButtonValue) => void;\n  spinButtonRef: RefObject<E>;\n  spinButtonProps: Readonly<ProvidedSpinButtonProps<E>>;\n}\n"],"names":[],"mappings":"AAkZA;;CAEC,GACD,WAOC"}
+{"version":3,"sources":["../../src/spinbutton/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type FocusEvent,\n  type FormEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type Ref,\n  type RefObject,\n} from \"react\";\n\nimport { type FormComponentStates } from \"../form/types.js\";\nimport { type MinMaxRange, type UseStateInitializer } from \"../types.js\";\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonEventHandlers<E extends HTMLElement = HTMLDivElement> =\n  Pick<\n    HTMLAttributes<E>,\n    \"onInput\" | \"onClick\" | \"onFocus\" | \"onBlur\" | \"onKeyDown\"\n  >;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonAriaAttributes = Pick<\n  AriaAttributes,\n  | \"aria-required\"\n  | \"aria-invalid\"\n  | \"aria-readonly\"\n  | \"aria-disabled\"\n  | \"aria-valuemin\"\n  | \"aria-valuemax\"\n  | \"aria-valuenow\"\n  | \"aria-valuetext\"\n>;\n\n/**\n * This is a way to map a single character to a value within a spinbutton and\n * was mostly added to support time inputs. The main example is:\n *\n * @example Day Period Mapping\n * ```ts\n * const AM_PM: SpinButtonCharacterValueMap = {\n *   a: 0,\n *   p: 1,\n * };\n * ```\n *\n * **If the mapping is provided, all other input events are ignored**.\n *\n * @since 6.4.0\n */\nexport type SpinButtonCharacterValueMap = Readonly<Record<string, number>>;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonValue = number | null;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonGetValueText = (\n  value: SpinButtonValue\n) => string | undefined;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonChangeEvent<E extends HTMLElement = HTMLDivElement> =\n  | FormEvent<E>\n  | KeyboardEvent<E>\n  | FocusEvent<E>;\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonChangeReason =\n  | \"change\"\n  | \"type\"\n  | \"typed-to-completion\"\n  | \"cleared\";\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonChangeEventOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  event: SpinButtonChangeEvent<E>;\n  value: SpinButtonValue;\n  reason: SpinButtonChangeReason;\n}\n\n/**\n * This callback will be fired whenever the spinbutton value has changed.\n *\n * The `reason` will be \"typed-to-completion\"` when:\n * - the `value` is not `null` and:\n *   - the user uses the `ArrowUp`, `ArrowDown`, `Home`, `End`, `PageUp`, or\n *     `PageDown` keys to change the value\n *   - the user has typed the max amount of digits based on the `max` value\n *\n * Examples with: `min=0` and `max=12`\n * - `1` -> (1, false)\n *   - `Tab` or blur (1, true)\n *   - `1` ->  (11, true)\n * - `0` - (1, false)\n *   - `Tab` or blur (0, true)\n *   - `3` (3, true)\n * - `3` -> (3, true)\n *   - there are no more characters that could have been typed\n *\n *\n * @since 6.4.0\n */\nexport type SpinButtonValueChange<E extends HTMLElement = HTMLDivElement> = (\n  options: SpinButtonChangeEventOptions<E>\n) => void;\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonUnknownValueOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value?: SpinButtonValue;\n  defaultValue?: UseStateInitializer<SpinButtonValue>;\n  onValueChange?: SpinButtonValueChange<E>;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonControlledValueOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value: SpinButtonValue;\n  defaultValue?: never;\n  onValueChange: SpinButtonValueChange<E>;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonUncontrolledValueOptions<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value?: never;\n  defaultValue?: UseStateInitializer<SpinButtonValue>;\n  onValueChange?: SpinButtonValueChange<E>;\n}\n\n/**\n * @since 6.4.0\n */\nexport type SpinButtonValueOptions<E extends HTMLElement = HTMLDivElement> =\n  | SpinButtonControlledValueOptions<E>\n  | SpinButtonUncontrolledValueOptions<E>;\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonDigitRangeOptions {\n  /**\n   * This is the minimum number of digits that should be shown in the spin\n   * button as the user is typing. If the current value is less than this\n   * value, the {@link placeholderChar} will be used as a `padStart` value.\n   *\n   * @example Get Text Content Example\n   * ```ts\n   * const textContent1 = getTextContent({\n   *   value: null,\n   *   fallback: \"HH\",\n   *   placeholderChar: \"0\",\n   * });\n   * // ^ textContent1 === \"HH\"\n   *\n   * const textContent2 = getTextContent({\n   *   value: 3,\n   *   fallback: \"HH\",\n   *   placeholderChar: \"0\",\n   * });\n   * // ^ textContent2 === \"03\"\n   *\n   * const textContent3 = getTextContent({\n   *   value: 12,\n   *   fallback: \"HH\",\n   *   placeholderChar: \"0\",\n   * });\n   * // ^ textContent3 === \"12\"\n   * ```\n   *\n   * @example Year Example\n   * ```ts\n   * const textContent1 = getTextContent({\n   *   value: null,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent1 === \"YYYY\"\n   *\n   * const textContent2 = getTextContent({\n   *   value: 2,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent2 === \"0002\"\n   *\n   * const textContent3 = getTextContent({\n   *   value: 200,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent3 === \"0200\"\n   *\n   * const textContent4 = getTextContent({\n   *   value: 2025,\n   *   fallback: \"YYYY\",\n   *   minDigits: 4,\n   * });\n   * // ^ textContent4 === \"2025\"\n   * ```\n   *\n   * @see {@link SpinButtonTextPlaceholderOptions.placeholderChar}\n   * @defaultValue `fallback?.length ?? getNumberOfDigits(min)`\n   */\n  minDigits?: number;\n\n  /**\n   * This is the maximum number of digits that should be shown in the spin\n   * button as the user is typing and is used to determine if the user has\n   * `\"typed-to-completion\"`.\n   *\n   * @example Year Example\n   * ```tsx\n   * // this _could_ also be 9999\n   * const max = undefined;\n   * const maxDigits = 4;\n   *\n   * // if the current value is `null` and the user types `2`\n   * onValueChange({\n   *   event,\n   *   reason: \"change\",\n   *   nextValue: 2,\n   * });\n   *\n   * // if the current value is `2` and the user types `0`\n   * onValueChange({\n   *   event,\n   *   reason: \"change\",\n   *   nextValue: 20,\n   * });\n   *\n   * // if the current value is `20` and the user types `2`\n   * onValueChange({\n   *   event,\n   *   reason: \"change\",\n   *   nextValue: 202,\n   * });\n   *\n   * // if the current value is `202` and the user types `5`:\n   * onValueChange({\n   *   event,\n   *   reason: \"typed-to-completion\",\n   *   nextValue: 2025,\n   * });\n   * ```\n   *\n   * @defaultValue `getNumberOfDigits(max)`\n   */\n  maxDigits?: number;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonRangeOptions\n  extends Partial<MinMaxRange>, SpinButtonDigitRangeOptions {}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonTextPlaceholderOptions extends SpinButtonRangeOptions {\n  /**\n   * An optional fallback value to display when the spin button's value is\n   * `null`. For example: if the spin button is used to set the specific hour\n   * in a time field, set the fallback to `\"HH\"` to show that until the user\n   * has typed a value.\n   */\n  fallback?: string;\n\n  /**\n   * This is the character to use to fill the remaining number of digits to\n   * display in the spin button.\n   *\n   * @see {@link minDigits}\n   * @defaultValue `\"0\"`\n   */\n  placeholderChar?: string;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface GetSpinButtonTextContentOptions extends SpinButtonTextPlaceholderOptions {\n  /**\n   * The current value in the spin button to convert to text. **This will be\n   * called with numbers outside of the allowed range**.\n   */\n  value: SpinButtonValue;\n}\n\n/**\n * @since 6.4.0\n */\nexport type GetSpinButtonTextContent = (\n  options: GetSpinButtonTextContentOptions\n) => string;\n\n/**\n * @since 6.4.0\n */\nexport type GetSpinButtonValueText = (\n  value: SpinButtonValue\n) => string | undefined;\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonFormStates extends Omit<\n  FormComponentStates,\n  \"active\"\n> {\n  required?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonOptions<E extends HTMLElement = HTMLDivElement>\n  extends\n    SpinButtonEventHandlers<E>,\n    SpinButtonUnknownValueOptions<E>,\n    SpinButtonFormStates,\n    SpinButtonTextPlaceholderOptions {\n  /**\n   * @defaultValue `\"spinbutton-\" + useId()`\n   */\n  id?: string;\n  ref?: Ref<E>;\n  form?: string;\n\n  /**\n   * The default value to use when the increment or decrement action is fired\n   * from the spinbutton through keyboard events before a value has been set.\n   * So when the increment action is fired, this will be\n   * `defaultKeyboardValue + 1`.\n   *\n   * @defaultValue `min ?? max ?? 0`\n   */\n  defaultKeyboardValue?: UseStateInitializer<number>;\n\n  /**\n   * NOTE: This isn't actually supported yet\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n\n  /** @see {@link SpinButtonCharacterValueMap} */\n  mappings?: SpinButtonCharacterValueMap;\n\n  /**\n   * Used to provide an `aria-valuenow` string for a specific value in the\n   * `SpinButton`.\n   *\n   * @defaultValue `(value) => value === null ? \"No value selected\" : undefined`\n   */\n  getValueText?: GetSpinButtonValueText;\n\n  getTextContent?: GetSpinButtonTextContent;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface ProvidedSpinButtonProps<E extends HTMLElement = HTMLDivElement>\n  extends Required<SpinButtonEventHandlers<E>>, SpinButtonAriaAttributes {\n  id: string;\n  ref: Ref<E>;\n  role: \"spinbutton\";\n  inputMode: \"numeric\";\n  spellCheck: boolean;\n  autoCapitalize: \"none\";\n  autoCorrect: \"off\";\n  tabIndex: number | undefined;\n  contentEditable: boolean | undefined;\n  suppressContentEditableWarning: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface SpinButtonImplementation<\n  E extends HTMLElement = HTMLDivElement,\n> {\n  value: SpinButtonValue;\n  setValue: (value: SpinButtonValue) => void;\n  spinButtonRef: RefObject<E | null>;\n  spinButtonProps: Readonly<ProvidedSpinButtonProps<E>>;\n}\n"],"names":[],"mappings":"AAkZA;;CAEC,GACD,WAOC"}

package/dist/table/StickyTableSection.d.ts

@@ -1,7 +1,8 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type TableSectionConfiguration, type TableStickySectionConfiguration } from "./types.js";
 /** @since 6.0.0 */
 export interface StickyTableSectionProps extends HTMLAttributes<HTMLTableSectionElement>, TableStickySectionConfiguration, TableSectionConfiguration {
+    ref?: Ref<HTMLTableSectionElement>;
     type: "header" | "footer";
     /**
      * An optional className to use when the sticky section is covering other rows
@@ -22,4 +23,4 @@ export interface StickyTableSectionProps extends HTMLAttributes<HTMLTableSection
  * @see {@link https://react-md.dev/components/table#sticky-tables | Sticky Table Demos}
  * @since 6.0.0
  */
-export declare const StickyTableSection: import("react").ForwardRefExoticComponent<StickyTableSectionProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare function StickyTableSection(props: StickyTableSectionProps): ReactElement;

package/dist/table/StickyTableSection.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableFooter } from "./tableFooterStyles.js";
 import { tableHeader } from "./tableHeaderStyles.js";
@@ -16,8 +15,8 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
  * @see {@link https://react-md.dev/components/table | Table Demos}
  * @see {@link https://react-md.dev/components/table#sticky-tables | Sticky Table Demos}
  * @since 6.0.0
- */ export const StickyTableSection = /*#__PURE__*/ forwardRef(function StickyTableSection(props, ref) {
-    const { type, className, hoverable, lineWrap, children, stickyOptions, isStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
+ */ export function StickyTableSection(props) {
+    const { ref, type, className, hoverable, lineWrap, children, stickyOptions, isStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
     const isHeader = type === "header";
     const Section = isHeader ? "thead" : "tfoot";
     const styles = isHeader ? tableHeader : tableFooter;
@@ -53,6 +52,6 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
             isHeader && tbody
         ]
     });
-});
+}
 
 //# sourceMappingURL=StickyTableSection.js.map

package/dist/table/StickyTableSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/StickyTableSection.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport {\n  type TableSectionConfiguration,\n  type TableStickySectionConfiguration,\n} from \"./types.js\";\nimport { useStickyTableSection } from \"./useStickyTableSection.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\n/** @since 6.0.0 */\nexport interface StickyTableSectionProps\n  extends\n    HTMLAttributes<HTMLTableSectionElement>,\n    TableStickySectionConfiguration,\n    TableSectionConfiguration {\n  type: \"header\" | \"footer\";\n\n  /**\n   * An optional className to use when the sticky section is covering other rows\n   * (`active`). When this is defined, the default\n   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be\n   * applied.\n   */\n  stickyActiveClassName?: string;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a sticky `<thead>`/`<tfoot>` that\n * dynamically applies styles whenever the `<thead>`/`<tfoot>` are covering\n * content in the table.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @see {@link https://react-md.dev/components/table#sticky-tables | Sticky Table Demos}\n * @since 6.0.0\n */\nexport const StickyTableSection = forwardRef<\n  HTMLTableSectionElement,\n  StickyTableSectionProps\n>(function StickyTableSection(props, ref) {\n  const {\n    type,\n    className,\n    hoverable,\n    lineWrap,\n    children,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles = false,\n    stickyActiveClassName,\n    ...remaining\n  } = props;\n\n  const isHeader = type === \"header\";\n  const Section = isHeader ? \"thead\" : \"tfoot\";\n  const styles = isHeader ? tableHeader : tableFooter;\n  const { tbody, sectionRef, stickyActive } = useStickyTableSection({\n    ref,\n    type,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles,\n    stickyActiveClassName,\n  });\n  const config = useTableSectionConfig({\n    type,\n    lineWrap,\n    hoverable,\n  });\n\n  return (\n    <TableConfigProvider value={config}>\n      {!isHeader && tbody}\n      <Section\n        {...remaining}\n        ref={sectionRef}\n        className={styles({\n          className,\n          dense: config.dense,\n          sticky: true,\n          stickyActive,\n          stickyActiveClassName,\n        })}\n      >\n        {children}\n      </Section>\n      {isHeader && tbody}\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableFooter","tableHeader","useStickyTableSection","useTableSectionConfig","StickyTableSection","props","ref","type","className","hoverable","lineWrap","children","stickyOptions","isStickyActive","disableStickyStyles","stickyActiveClassName","remaining","isHeader","Section","styles","tbody","sectionRef","stickyActive","config","value","dense","sticky"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAKrD,SAASC,qBAAqB,QAAQ,6BAA6B;AACnE,SAASC,qBAAqB,QAAQ,6BAA6B;AAmBnE;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,mCAAqBN,WAGhC,SAASM,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,cAAc,EACdC,sBAAsB,KAAK,EAC3BC,qBAAqB,EACrB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,WAAWV,SAAS;IAC1B,MAAMW,UAAUD,WAAW,UAAU;IACrC,MAAME,SAASF,WAAWhB,cAAcD;IACxC,MAAM,EAAEoB,KAAK,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGpB,sBAAsB;QAChEI;QACAC;QACAK;QACAC;QACAC;QACAC;IACF;IACA,MAAMQ,SAASpB,sBAAsB;QACnCI;QACAG;QACAD;IACF;IAEA,qBACE,MAACV;QAAoByB,OAAOD;;YACzB,CAACN,YAAYG;0BACd,KAACF;gBACE,GAAGF,SAAS;gBACbV,KAAKe;gBACLb,WAAWW,OAAO;oBAChBX;oBACAiB,OAAOF,OAAOE,KAAK;oBACnBC,QAAQ;oBACRJ;oBACAP;gBACF;0BAECJ;;YAEFM,YAAYG;;;AAGnB,GAAG"}
+{"version":3,"sources":["../../src/table/StickyTableSection.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport {\n  type TableSectionConfiguration,\n  type TableStickySectionConfiguration,\n} from \"./types.js\";\nimport { useStickyTableSection } from \"./useStickyTableSection.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\n/** @since 6.0.0 */\nexport interface StickyTableSectionProps\n  extends\n    HTMLAttributes<HTMLTableSectionElement>,\n    TableStickySectionConfiguration,\n    TableSectionConfiguration {\n  ref?: Ref<HTMLTableSectionElement>;\n\n  type: \"header\" | \"footer\";\n\n  /**\n   * An optional className to use when the sticky section is covering other rows\n   * (`active`). When this is defined, the default\n   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be\n   * applied.\n   */\n  stickyActiveClassName?: string;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a sticky `<thead>`/`<tfoot>` that\n * dynamically applies styles whenever the `<thead>`/`<tfoot>` are covering\n * content in the table.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @see {@link https://react-md.dev/components/table#sticky-tables | Sticky Table Demos}\n * @since 6.0.0\n */\nexport function StickyTableSection(\n  props: StickyTableSectionProps\n): ReactElement {\n  const {\n    ref,\n    type,\n    className,\n    hoverable,\n    lineWrap,\n    children,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles = false,\n    stickyActiveClassName,\n    ...remaining\n  } = props;\n\n  const isHeader = type === \"header\";\n  const Section = isHeader ? \"thead\" : \"tfoot\";\n  const styles = isHeader ? tableHeader : tableFooter;\n  const { tbody, sectionRef, stickyActive } = useStickyTableSection({\n    ref,\n    type,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles,\n    stickyActiveClassName,\n  });\n  const config = useTableSectionConfig({\n    type,\n    lineWrap,\n    hoverable,\n  });\n\n  return (\n    <TableConfigProvider value={config}>\n      {!isHeader && tbody}\n      <Section\n        {...remaining}\n        ref={sectionRef}\n        className={styles({\n          className,\n          dense: config.dense,\n          sticky: true,\n          stickyActive,\n          stickyActiveClassName,\n        })}\n      >\n        {children}\n      </Section>\n      {isHeader && tbody}\n    </TableConfigProvider>\n  );\n}\n"],"names":["TableConfigProvider","tableFooter","tableHeader","useStickyTableSection","useTableSectionConfig","StickyTableSection","props","ref","type","className","hoverable","lineWrap","children","stickyOptions","isStickyActive","disableStickyStyles","stickyActiveClassName","remaining","isHeader","Section","styles","tbody","sectionRef","stickyActive","config","value","dense","sticky"],"mappings":"AAAA;;AAIA,SAASA,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAKrD,SAASC,qBAAqB,QAAQ,6BAA6B;AACnE,SAASC,qBAAqB,QAAQ,6BAA6B;AAqBnE;;;;;;;;;;CAUC,GACD,OAAO,SAASC,mBACdC,KAA8B;IAE9B,MAAM,EACJC,GAAG,EACHC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,cAAc,EACdC,sBAAsB,KAAK,EAC3BC,qBAAqB,EACrB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,WAAWV,SAAS;IAC1B,MAAMW,UAAUD,WAAW,UAAU;IACrC,MAAME,SAASF,WAAWhB,cAAcD;IACxC,MAAM,EAAEoB,KAAK,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGpB,sBAAsB;QAChEI;QACAC;QACAK;QACAC;QACAC;QACAC;IACF;IACA,MAAMQ,SAASpB,sBAAsB;QACnCI;QACAG;QACAD;IACF;IAEA,qBACE,MAACV;QAAoByB,OAAOD;;YACzB,CAACN,YAAYG;0BACd,KAACF;gBACE,GAAGF,SAAS;gBACbV,KAAKe;gBACLb,WAAWW,OAAO;oBAChBX;oBACAiB,OAAOF,OAAOE,KAAK;oBACnBC,QAAQ;oBACRJ;oBACAP;gBACF;0BAECJ;;YAEFM,YAAYG;;;AAGnB"}

package/dist/table/Table.d.ts

@@ -1,4 +1,4 @@
-import { type TableHTMLAttributes } from "react";
+import { type ReactElement, type Ref, type TableHTMLAttributes } from "react";
 import { type TableConfiguration } from "./types.js";
 declare module "react" {
     interface CSSProperties {
@@ -20,6 +20,7 @@ declare module "react" {
     }
 }
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement>, TableConfiguration {
+    ref?: Ref<HTMLTableElement>;
 }
 /**
  * **Client Component**
@@ -70,4 +71,4 @@ export interface TableProps extends TableHTMLAttributes<HTMLTableElement>, Table
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+export declare function Table(props: TableProps): ReactElement;

package/dist/table/Table.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { table } from "./tableStyles.js";
 /**
@@ -51,8 +51,8 @@ import { table } from "./tableStyles.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
- */ export const Table = /*#__PURE__*/ forwardRef(function Table(props, ref) {
-    const { className, children, dense = false, hAlign = "left", vAlign = "middle", lineWrap = false, fullWidth = false, disableHover = false, disableBorders = false, ...remaining } = props;
+ */ export function Table(props) {
+    const { ref, className, children, dense = false, hAlign = "left", vAlign = "middle", lineWrap = false, fullWidth = false, disableHover = false, disableBorders = false, ...remaining } = props;
     const configuration = useMemo(()=>({
             dense,
             header: false,
@@ -82,6 +82,6 @@ import { table } from "./tableStyles.js";
             children: children
         })
     });
-});
+}
 
 //# sourceMappingURL=Table.js.map

package/dist/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TableHTMLAttributes, forwardRef, useMemo } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { table } from \"./tableStyles.js\";\nimport { type TableConfigContext, type TableConfiguration } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-table-background-color\"?: string;\n    \"--rmd-table-border-size\"?: string | number;\n    \"--rmd-table-border-color\"?: string;\n    \"--rmd-table-header-background-color\"?: string;\n    \"--rmd-table-cell-color\"?: string;\n    \"--rmd-table-cell-height\"?: string | number;\n    \"--rmd-table-cell-horizontal-padding\"?: string | number;\n    \"--rmd-table-cell-vertical-padding\"?: string | number;\n    \"--rmd-table-header-cell-height\"?: string | number;\n    \"--rmd-table-hover-color\"?: string;\n    \"--rmd-table-selected-color\"?: string;\n    \"--rmd-table-sticky-cell\"?: string | number;\n    \"--rmd-table-sticky-header\"?: string | number;\n    \"--rmd-table-sticky-footer\"?: string | number;\n    \"--rmd-table-sticky-background-color\"?: string;\n  }\n}\n\nexport interface TableProps\n  extends TableHTMLAttributes<HTMLTableElement>, TableConfiguration {}\n\n/**\n * **Client Component**\n *\n * @example Responsive Example\n * ```tsx\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 { TableRow } from \"@react-md/core/table/TableRow\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell>Header 1</TableCell>\n *             <TableCell>Header 2</TableCell>\n *             <TableCell>Header 3</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           <TableRow>\n *             <TableCell>Row 1 Cell 1</TableCell>\n *             <TableCell>Row 1 Cell 2</TableCell>\n *             <TableCell>Row 1 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 2 Cell 1</TableCell>\n *             <TableCell>Row 2 Cell 2</TableCell>\n *             <TableCell>Row 2 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 3 Cell 1</TableCell>\n *             <TableCell>Row 3 Cell 2</TableCell>\n *             <TableCell>Row 3 Cell 3</TableCell>\n *           </TableRow>\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  function Table(props, ref) {\n    const {\n      className,\n      children,\n      dense = false,\n      hAlign = \"left\",\n      vAlign = \"middle\",\n      lineWrap = false,\n      fullWidth = false,\n      disableHover = false,\n      disableBorders = false,\n      ...remaining\n    } = props;\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        dense,\n        header: false,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableHover,\n        disableBorders,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <table\n          {...remaining}\n          ref={ref}\n          className={table({ dense, fullWidth, className })}\n        >\n          {children}\n        </table>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useMemo","TableConfigProvider","table","Table","props","ref","className","children","dense","hAlign","vAlign","lineWrap","fullWidth","disableHover","disableBorders","remaining","configuration","header","value"],"mappings":"AAAA;;AAEA,SAAmCA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAEtE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,KAAK,QAAQ,mBAAmB;AA0BzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,MAAMC,sBAAQJ,WACnB,SAASI,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,QAAQ,KAAK,EACbC,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,gBAAgBhB,QACpB,IAAO,CAAA;YACLQ;YACAS,QAAQ;YACRR;YACAC;YACAC;YACAE;YACAC;QACF,CAAA,GACA;QAACN;QAAOC;QAAQC;QAAQC;QAAUE;QAAcC;KAAe;IAGjE,qBACE,KAACb;QAAoBiB,OAAOF;kBAC1B,cAAA,KAACd;YACE,GAAGa,SAAS;YACbV,KAAKA;YACLC,WAAWJ,MAAM;gBAAEM;gBAAOI;gBAAWN;YAAU;sBAE9CC;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/table/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type Ref,\n  type TableHTMLAttributes,\n  useMemo,\n} from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { table } from \"./tableStyles.js\";\nimport { type TableConfigContext, type TableConfiguration } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-table-background-color\"?: string;\n    \"--rmd-table-border-size\"?: string | number;\n    \"--rmd-table-border-color\"?: string;\n    \"--rmd-table-header-background-color\"?: string;\n    \"--rmd-table-cell-color\"?: string;\n    \"--rmd-table-cell-height\"?: string | number;\n    \"--rmd-table-cell-horizontal-padding\"?: string | number;\n    \"--rmd-table-cell-vertical-padding\"?: string | number;\n    \"--rmd-table-header-cell-height\"?: string | number;\n    \"--rmd-table-hover-color\"?: string;\n    \"--rmd-table-selected-color\"?: string;\n    \"--rmd-table-sticky-cell\"?: string | number;\n    \"--rmd-table-sticky-header\"?: string | number;\n    \"--rmd-table-sticky-footer\"?: string | number;\n    \"--rmd-table-sticky-background-color\"?: string;\n  }\n}\n\nexport interface TableProps\n  extends TableHTMLAttributes<HTMLTableElement>, TableConfiguration {\n  ref?: Ref<HTMLTableElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example Responsive Example\n * ```tsx\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 { TableRow } from \"@react-md/core/table/TableRow\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell>Header 1</TableCell>\n *             <TableCell>Header 2</TableCell>\n *             <TableCell>Header 3</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           <TableRow>\n *             <TableCell>Row 1 Cell 1</TableCell>\n *             <TableCell>Row 1 Cell 2</TableCell>\n *             <TableCell>Row 1 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 2 Cell 1</TableCell>\n *             <TableCell>Row 2 Cell 2</TableCell>\n *             <TableCell>Row 2 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 3 Cell 1</TableCell>\n *             <TableCell>Row 3 Cell 2</TableCell>\n *             <TableCell>Row 3 Cell 3</TableCell>\n *           </TableRow>\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport function Table(props: TableProps): ReactElement {\n  const {\n    ref,\n    className,\n    children,\n    dense = false,\n    hAlign = \"left\",\n    vAlign = \"middle\",\n    lineWrap = false,\n    fullWidth = false,\n    disableHover = false,\n    disableBorders = false,\n    ...remaining\n  } = props;\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: false,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableHover,\n      disableBorders,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]\n  );\n\n  return (\n    <TableConfigProvider value={configuration}>\n      <table\n        {...remaining}\n        ref={ref}\n        className={table({ dense, fullWidth, className })}\n      >\n        {children}\n      </table>\n    </TableConfigProvider>\n  );\n}\n"],"names":["useMemo","TableConfigProvider","table","Table","props","ref","className","children","dense","hAlign","vAlign","lineWrap","fullWidth","disableHover","disableBorders","remaining","configuration","header","value"],"mappings":"AAAA;;AAEA,SAIEA,OAAO,QACF,QAAQ;AAEf,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,KAAK,QAAQ,mBAAmB;AA4BzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQ,KAAK,EACbC,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,gBAAgBhB,QACpB,IAAO,CAAA;YACLQ;YACAS,QAAQ;YACRR;YACAC;YACAC;YACAE;YACAC;QACF,CAAA,GACA;QAACN;QAAOC;QAAQC;QAAQC;QAAUE;QAAcC;KAAe;IAGjE,qBACE,KAACb;QAAoBiB,OAAOF;kBAC1B,cAAA,KAACd;YACE,GAAGa,SAAS;YACbV,KAAKA;YACLC,WAAWJ,MAAM;gBAAEM;gBAAOI;gBAAWN;YAAU;sBAE9CC;;;AAIT"}

package/dist/table/TableBody.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type TableConfig } from "./types.js";
 export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement>, Omit<TableConfig, "header"> {
+    ref?: Ref<HTMLTableSectionElement>;
 }
 /**
  * **Client Component**
@@ -10,4 +11,4 @@ export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement>,
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare function TableBody(props: TableBodyProps): ReactElement;

package/dist/table/TableBody.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvider.js";
 /**
  * **Client Component**
@@ -10,8 +10,8 @@ import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvide
  * `TableCell` components with additional styling behavior.
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
- */ export const TableBody = /*#__PURE__*/ forwardRef(function TableBody(props, ref) {
-    const { className, children, hAlign: propHAlign, vAlign: propVAlign, lineWrap: propLineWrap, disableHover: propDisableHover, disableBorders: propDisableBorders, ...remaining } = props;
+ */ export function TableBody(props) {
+    const { ref, className, children, hAlign: propHAlign, vAlign: propVAlign, lineWrap: propLineWrap, disableHover: propDisableHover, disableBorders: propDisableBorders, ...remaining } = props;
     // update the table configuration with the custom overrides for the `<thead>`
     const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } = useTableConfig({
         hAlign: propHAlign,
@@ -45,6 +45,6 @@ import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvide
             children: children
         })
     });
-});
+}
 
 //# sourceMappingURL=TableBody.js.map

package/dist/table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableBody.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef, useMemo } from \"react\";\n\nimport {\n  TableConfigProvider,\n  useTableConfig,\n} from \"./TableConfigurationProvider.js\";\nimport { type TableConfig, type TableConfigContext } from \"./types.js\";\n\nexport interface TableBodyProps\n  extends\n    HTMLAttributes<HTMLTableSectionElement>,\n    Omit<TableConfig, \"header\"> {}\n\n/**\n * **Client Component**\n *\n * Creates a `<tbody>` element that also allows for overriding all the child\n * `TableCell` components with additional styling behavior.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  function TableBody(props, ref) {\n    const {\n      className,\n      children,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propLineWrap,\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\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        hAlign: propHAlign,\n        vAlign: propVAlign,\n        lineWrap: propLineWrap,\n        disableHover: propDisableHover,\n        disableBorders: propDisableBorders,\n      });\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        header: false,\n        dense,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableBorders,\n        disableHover,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <tbody {...remaining} ref={ref} className={cnb(\"rmd-tbody\", className)}>\n          {children}\n        </tbody>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useMemo","TableConfigProvider","useTableConfig","TableBody","props","ref","className","children","hAlign","propHAlign","vAlign","propVAlign","lineWrap","propLineWrap","disableHover","propDisableHover","disableBorders","propDisableBorders","remaining","dense","configuration","header","value","tbody"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAEjE,SACEC,mBAAmB,EACnBC,cAAc,QACT,kCAAkC;AAQzC;;;;;;;CAOC,GACD,OAAO,MAAMC,0BAAYJ,WACvB,SAASI,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,YAAY,EACtBC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,WACJ,GAAGd;IAEJ,6EAA6E;IAC7E,MAAM,EAAEe,KAAK,EAAEX,MAAM,EAAEE,MAAM,EAAEE,QAAQ,EAAEE,YAAY,EAAEE,cAAc,EAAE,GACrEd,eAAe;QACbM,QAAQC;QACRC,QAAQC;QACRC,UAAUC;QACVC,cAAcC;QACdC,gBAAgBC;IAClB;IAEF,MAAMG,gBAAgBpB,QACpB,IAAO,CAAA;YACLqB,QAAQ;YACRF;YACAX;YACAE;YACAE;YACAI;YACAF;QACF,CAAA,GACA;QAACK;QAAOX;QAAQE;QAAQE;QAAUI;QAAgBF;KAAa;IAGjE,qBACE,KAACb;QAAoBqB,OAAOF;kBAC1B,cAAA,KAACG;YAAO,GAAGL,SAAS;YAAEb,KAAKA;YAAKC,WAAWR,IAAI,aAAaQ;sBACzDC;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/table/TableBody.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  useMemo,\n} from \"react\";\n\nimport {\n  TableConfigProvider,\n  useTableConfig,\n} from \"./TableConfigurationProvider.js\";\nimport { type TableConfig, type TableConfigContext } from \"./types.js\";\n\nexport interface TableBodyProps\n  extends HTMLAttributes<HTMLTableSectionElement>, Omit<TableConfig, \"header\"> {\n  ref?: Ref<HTMLTableSectionElement>;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tbody>` element that also allows for overriding all the child\n * `TableCell` components with additional styling behavior.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport function TableBody(props: TableBodyProps): ReactElement {\n  const {\n    ref,\n    className,\n    children,\n    hAlign: propHAlign,\n    vAlign: propVAlign,\n    lineWrap: propLineWrap,\n    disableHover: propDisableHover,\n    disableBorders: propDisableBorders,\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      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propLineWrap,\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      header: false,\n      dense,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  return (\n    <TableConfigProvider value={configuration}>\n      <tbody {...remaining} ref={ref} className={cnb(\"rmd-tbody\", className)}>\n        {children}\n      </tbody>\n    </TableConfigProvider>\n  );\n}\n"],"names":["cnb","useMemo","TableConfigProvider","useTableConfig","TableBody","props","ref","className","children","hAlign","propHAlign","vAlign","propVAlign","lineWrap","propLineWrap","disableHover","propDisableHover","disableBorders","propDisableBorders","remaining","dense","configuration","header","value","tbody"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAIEC,OAAO,QACF,QAAQ;AAEf,SACEC,mBAAmB,EACnBC,cAAc,QACT,kCAAkC;AAQzC;;;;;;;CAOC,GACD,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,YAAY,EACtBC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,WACJ,GAAGd;IAEJ,6EAA6E;IAC7E,MAAM,EAAEe,KAAK,EAAEX,MAAM,EAAEE,MAAM,EAAEE,QAAQ,EAAEE,YAAY,EAAEE,cAAc,EAAE,GACrEd,eAAe;QACbM,QAAQC;QACRC,QAAQC;QACRC,UAAUC;QACVC,cAAcC;QACdC,gBAAgBC;IAClB;IAEF,MAAMG,gBAAgBpB,QACpB,IAAO,CAAA;YACLqB,QAAQ;YACRF;YACAX;YACAE;YACAE;YACAI;YACAF;QACF,CAAA,GACA;QAACK;QAAOX;QAAQE;QAAQE;QAAUI;QAAgBF;KAAa;IAGjE,qBACE,KAACb;QAAoBqB,OAAOF;kBAC1B,cAAA,KAACG;YAAO,GAAGL,SAAS;YAAEb,KAAKA;YAAKC,WAAWP,IAAI,aAAaO;sBACzDC;;;AAIT"}

package/dist/table/TableCell.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode, type Ref, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type TableCellContentsIconRotatorProps } from "./TableCellContent.js";
 import { type SortOrder, type TableCellConfig } from "./types.js";
@@ -44,6 +44,7 @@ export interface TableCellOptions extends TableCellConfig {
  * @since 6.0.0 Removed `disablePadding` in favor of `padding`.
  */
 export interface TableCellProps extends TableCellAttributes, TableCellOptions {
+    ref?: Ref<HTMLTableCellElement>;
     /**
      * If you want to apply a sort icon for a header cell, set this prop to either
      * `"ascending"` or `"descending"`. When you change the sort order, this prop
@@ -179,4 +180,4 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare function TableCell(props: TableCellProps): ReactElement;

package/dist/table/TableCell.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { getIcon } from "../icon/config.js";
 import { TableCellContent } from "./TableCellContent.js";
 import { useTableConfig } from "./TableConfigurationProvider.js";
@@ -18,8 +17,8 @@ import { tableCell } from "./tableCellStyles.js";
  * readers.
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
- */ export const TableCell = /*#__PURE__*/ forwardRef(function TableCell(props, ref) {
-    const { "aria-sort": sortOrder, className, grow = false, scope: propScope, hAlign: propHAlign, vAlign: propVAlign, header: propHeader, lineWrap: propDisableLineWrap, inputToggle, children, beforeChildren, afterChildren, sticky, sortIcon: propSortIcon, sortIconAfter = false, sortIconRotated, iconRotatorProps, padding = "horizontal", contentProps, ...remaining } = props;
+ */ export function TableCell(props) {
+    const { ref, "aria-sort": sortOrder, className, grow = false, scope: propScope, hAlign: propHAlign, vAlign: propVAlign, header: propHeader, lineWrap: propDisableLineWrap, inputToggle, children, beforeChildren, afterChildren, sticky, sortIcon: propSortIcon, sortIconAfter = false, sortIconRotated, iconRotatorProps, padding = "horizontal", contentProps, ...remaining } = props;
     const sortIcon = getIcon("sort", propSortIcon);
     // Note: unlike the other usages of `useTableConfig`, the `propHeader`
     // is not provided. This is so that `TableCheckbox` components can still
@@ -68,6 +67,6 @@ import { tableCell } from "./tableCellStyles.js";
             afterChildren
         ]
     });
-});
+}
 
 //# sourceMappingURL=TableCell.js.map

package/dist/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\nimport { type SortOrder, type TableCellConfig } from \"./types.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @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   * @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 * @since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n * @since 6.0.0 Removed `disablePadding` in favor of `padding`.\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   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>>;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @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   * @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 { Button } from \"@react-md/core/button/Button\";\n   * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n   * import { TableCell } from \"@react-md/core/table/TableCell\";\n   * import { type SortOrder } from \"@react-md/core/table/types\";\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   * @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 *\n * @see {@link https://react-md.dev/components/table | Table Demos}\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;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SACEC,gBAAgB,QAEX,wBAAwB;AAC/B,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,SAAS,QAAQ,uBAAuB;AAwLjD;;;;;;;;;;;;;CAaC,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"}
+{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\nimport { type SortOrder, type TableCellConfig } from \"./types.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @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   * @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 * @since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n * @since 6.0.0 Removed `disablePadding` in favor of `padding`.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  ref?: Ref<HTMLTableCellElement>;\n\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   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>>;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @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   * @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 { Button } from \"@react-md/core/button/Button\";\n   * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n   * import { TableCell } from \"@react-md/core/table/TableCell\";\n   * import { type SortOrder } from \"@react-md/core/table/types\";\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   * @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 *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport function TableCell(props: TableCellProps): ReactElement {\n  const {\n    ref,\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"],"names":["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;;AAWA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,SACEC,gBAAgB,QAEX,wBAAwB;AAC/B,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,SAAS,QAAQ,uBAAuB;AA0LjD;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EACJC,GAAG,EACH,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"}

package/dist/table/TableCellContent.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type IconRotatorProps } from "../icon/IconRotator.js";
 import { type SortOrder, type TableCellHorizontalAlignment } from "./types.js";
 /**
@@ -11,6 +11,7 @@ export type TableCellContentsIconRotatorProps = Omit<IconRotatorProps, "children
  * @internal
  */
 export interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
     /**
      * The current sort order for this cell. Setting this to `null` will prevent
      * the button from being rendered.
@@ -44,4 +45,4 @@ export interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonEl
  *
  * @internal
  */
-export declare const TableCellContent: import("react").ForwardRefExoticComponent<TableCellContentProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function TableCellContent(props: TableCellContentProps): ReactElement;

package/dist/table/TableCellContent.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
 import { IconRotator } from "../icon/IconRotator.js";
 import { bem } from "../utils/bem.js";
@@ -12,8 +11,8 @@ const styles = bem("rmd-table-cell");
  * with sort behavior within headers.
  *
  * @internal
- */ export const TableCellContent = /*#__PURE__*/ forwardRef(function TableCellContent(props, ref) {
-    const { icon: propIcon, style, className, sortOrder, children, rotated: propRotated, hAlign = "left", iconAfter, iconRotatorProps, ...remaining } = props;
+ */ export function TableCellContent(props) {
+    const { ref, icon: propIcon, style, className, sortOrder, children, rotated: propRotated, hAlign = "left", iconAfter, iconRotatorProps, ...remaining } = props;
     if (!sortOrder || propIcon === null) {
         return /*#__PURE__*/ _jsx(_Fragment, {
             children: children
@@ -41,6 +40,6 @@ const styles = bem("rmd-table-cell");
             iconAfter && icon
         ]
     });
-});
+}
 
 //# sourceMappingURL=TableCellContent.js.map

package/dist/table/TableCellContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ButtonHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type SortOrder, type TableCellHorizontalAlignment } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps 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   * @since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\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,SAAoDC,UAAU,QAAQ,QAAQ;AAE9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAgDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;CAOC,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"}
+{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type SortOrder, type TableCellHorizontalAlignment } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n\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   * @since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\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 function TableCellContent(props: TableCellContentProps): ReactElement {\n  const {\n    ref,\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","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;AAQhC,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAkDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;CAOC,GACD,OAAO,SAASE,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,GAAG,EACHC,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,WAAWX,IACTI,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB"}

package/dist/table/TableCheckbox.d.ts

@@ -1,4 +1,4 @@
-import { type TdHTMLAttributes } from "react";
+import { type ReactElement, type Ref, type TdHTMLAttributes } from "react";
 import { type CheckboxProps } from "../form/InputToggle.js";
 import { type PropsWithRef } from "../types.js";
 /**
@@ -18,6 +18,7 @@ export type TableCheckboxSupportedCheckboxProps = Pick<CheckboxProps, "name" | "
  * `"Toggle Row Selection"` to `"Select Row"`.
  */
 export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, TableCheckboxSupportedCheckboxProps {
+    ref?: Ref<HTMLTableCellElement>;
     /**
      * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
      */
@@ -113,4 +114,4 @@ export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, Table
  * @since 6.0.0 The default `aria-label` was changed from
  * `"Toggle Row Selection"` to `"Select Row"`.
  */
-export declare const TableCheckbox: import("react").ForwardRefExoticComponent<TableCheckboxProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare function TableCheckbox(props: TableCheckboxProps): ReactElement;

package/dist/table/TableCheckbox.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Checkbox } from "../form/Checkbox.js";
 import { TableCell } from "./TableCell.js";
 const noop = ()=>{
@@ -77,8 +76,8 @@ const noop = ()=>{
  * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.
  * @since 6.0.0 The default `aria-label` was changed from
  * `"Toggle Row Selection"` to `"Select Row"`.
- */ export const TableCheckbox = /*#__PURE__*/ forwardRef(function TableCheckbox(props, ref) {
-    const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined, "aria-controls": ariaControls, name, icon, iconProps, iconStyle, iconClassName, checkedIcon, indeterminateIcon, value, checked, onChange, defaultChecked, indeterminate, checkboxProps, onClick = noop, ...remaining } = props;
+ */ export function TableCheckbox(props) {
+    const { ref, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined, "aria-controls": ariaControls, name, icon, iconProps, iconStyle, iconClassName, checkedIcon, indeterminateIcon, value, checked, onChange, defaultChecked, indeterminate, checkboxProps, onClick = noop, ...remaining } = props;
     return /*#__PURE__*/ _jsx(TableCell, {
         ...remaining,
         ref: ref,
@@ -107,6 +106,6 @@ const noop = ()=>{
             ...checkboxProps
         })
     });
-});
+}
 
 //# sourceMappingURL=TableCheckbox.js.map

package/dist/table/TableCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\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 * @since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @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 * @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, 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 Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps>;\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 Simple Example\n * ```tsx\n * import { useCheckboxGroup } from \"@react-md/core/form/useCheckboxGroup\";\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 { TableCheckbox } from \"@react-md/core/table/TableCheckbox\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\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 { 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 * @see {@link https://react-md.dev/components/table | Table Demos}\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;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAE1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAkEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,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"}
+{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type Ref, type TdHTMLAttributes } from \"react\";\n\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 * @since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @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 * @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, TableCheckboxSupportedCheckboxProps {\n  ref?: Ref<HTMLTableCellElement>;\n\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 TableCheckboxSupportedCheckboxProps}\n   * @since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps>;\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 Simple Example\n * ```tsx\n * import { useCheckboxGroup } from \"@react-md/core/form/useCheckboxGroup\";\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 { TableCheckbox } from \"@react-md/core/table/TableCheckbox\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\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 { 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 * @see {@link https://react-md.dev/components/table | Table Demos}\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 function TableCheckbox(props: TableCheckboxProps): ReactElement {\n  const {\n    ref,\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":["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;;AAIA,SAASA,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,GAAG,EACH,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"}

package/dist/table/TableContainer.d.ts

@@ -1,5 +1,7 @@
-import { type HTMLAttributes } from "react";
-export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
+export interface TableContainerProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
 /**
  * **Client Component**
  *
@@ -10,4 +12,4 @@ export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export declare const TableContainer: import("react").ForwardRefExoticComponent<TableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TableContainer(props: TableContainerProps): ReactElement;

package/dist/table/TableContainer.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { TableContainerProvider } from "./TableContainerProvider.js";
 import { tableContainer } from "./tableContainerStyles.js";
@@ -13,8 +13,8 @@ import { tableContainer } from "./tableContainerStyles.js";
  * parent element of the table.
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
- */ export const TableContainer = /*#__PURE__*/ forwardRef(function TableContainer(props, ref) {
-    const { className, children, ...remaining } = props;
+ */ export function TableContainer(props) {
+    const { ref, className, children, ...remaining } = props;
     const [nodeRef, refCallback] = useEnsuredRef(ref);
     const value = useMemo(()=>({
             exists: true,
@@ -33,6 +33,6 @@ import { tableContainer } from "./tableContainerStyles.js";
             children: children
         })
     });
-});
+}
 
 //# sourceMappingURL=TableContainer.js.map

package/dist/table/TableContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableContainer.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useMemo } from \"react\";\n\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  type TableContainerContext,\n  TableContainerProvider,\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 *\n * @see {@link https://react-md.dev/components/table | Table Demos}\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;;AAEA,SAA8BA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAEjE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAEEC,sBAAsB,QACjB,8BAA8B;AACrC,SAASC,cAAc,QAAQ,4BAA4B;AAI3D;;;;;;;;;CASC,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"}
+{"version":3,"sources":["../../src/table/TableContainer.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  useMemo,\n} from \"react\";\n\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  type TableContainerContext,\n  TableContainerProvider,\n} from \"./TableContainerProvider.js\";\nimport { tableContainer } from \"./tableContainerStyles.js\";\n\nexport interface TableContainerProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\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 *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport function TableContainer(props: TableContainerProps): ReactElement {\n  const { ref, 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"],"names":["useMemo","useEnsuredRef","TableContainerProvider","tableContainer","TableContainer","props","ref","className","children","remaining","nodeRef","refCallback","value","exists","containerRef","div"],"mappings":"AAAA;;AAEA,SAIEA,OAAO,QACF,QAAQ;AAEf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAEEC,sBAAsB,QACjB,8BAA8B;AACrC,SAASC,cAAc,QAAQ,4BAA4B;AAM3D;;;;;;;;;CASC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,GAAG,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IACnD,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"}