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

package/src/table/__tests__/__snapshots__/TableBody.tsx.snap

@@ -9,7 +9,7 @@ exports[`TableBody should apply the correct styling, HTML attributes, and allow
     class="rmd-tr rmd-tr--bordered rmd-tr--hoverable"
   >
     <td
-      class="rmd-table-cell rmd-table-cell--no-wrap"
+      class="rmd-table-cell rmd-table-cell--no-wrap rmd-align-left"
     >
       Cell 1
     </td>
@@ -27,7 +27,7 @@ exports[`TableBody should apply the correct styling, HTML attributes, and allow
     class="rmd-tr rmd-tr--bordered rmd-tr--hoverable"
   >
     <td
-      class="rmd-table-cell rmd-table-cell--no-wrap"
+      class="rmd-table-cell rmd-table-cell--no-wrap rmd-align-left"
     >
       Cell 1
     </td>
@@ -45,7 +45,7 @@ exports[`TableBody should apply the correct styling, HTML attributes, and allow
     class="rmd-tr"
   >
     <td
-      class="rmd-table-cell rmd-table-cell--no-wrap"
+      class="rmd-table-cell rmd-table-cell--no-wrap rmd-align-left"
     >
       Cell 1
     </td>

package/src/table/__tests__/__snapshots__/TableCheckbox.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`TableCheckbox should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <td
-  class="rmd-table-cell rmd-table-cell--checkbox rmd-table-cell--no-wrap"
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left"
 >
   <label
     class="rmd-label rmd-label--gap rmd-label--reversed"
@@ -37,7 +37,7 @@ exports[`TableCheckbox should apply the correct styling, HTML attributes, and al
 
 exports[`TableCheckbox should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <td
-  class="rmd-table-cell rmd-table-cell--checkbox rmd-table-cell--no-wrap custom-class-name"
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left custom-class-name"
   style="pointer-events: none;"
 >
   <label
@@ -73,7 +73,7 @@ exports[`TableCheckbox should apply the correct styling, HTML attributes, and al
 
 exports[`TableCheckbox should handle the aria-label/aria-labelledby props correctly 1`] = `
 <td
-  class="rmd-table-cell rmd-table-cell--checkbox rmd-table-cell--no-wrap"
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left"
 >
   <label
     class="rmd-label rmd-label--gap rmd-label--reversed"
@@ -108,7 +108,7 @@ exports[`TableCheckbox should handle the aria-label/aria-labelledby props correc
 
 exports[`TableCheckbox should handle the aria-label/aria-labelledby props correctly 2`] = `
 <td
-  class="rmd-table-cell rmd-table-cell--checkbox rmd-table-cell--no-wrap"
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left"
 >
   <label
     class="rmd-label rmd-label--gap rmd-label--reversed"

package/src/table/__tests__/__snapshots__/TableRadio.tsx.snap

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableRadio should apply the correct styling, HTML attributes, and allow a ref 1`] = `
+<td
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left"
+>
+  <label
+    class="rmd-label rmd-label--gap rmd-label--reversed"
+  >
+    <span
+      class="rmd-radio rmd-input-toggle rmd-input-toggle--em rmd-input-toggle--normal rmd-input-toggle--uncontrolled"
+    >
+      <input
+        aria-label="Select Row"
+        class="rmd-hidden-input"
+        id="radio-:r0:"
+        type="radio"
+        value=""
+      />
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_unchecked
+      </span>
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_checked
+      </span>
+    </span>
+  </label>
+</td>
+`;
+
+exports[`TableRadio should apply the correct styling, HTML attributes, and allow a ref 2`] = `
+<td
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left custom-class-name"
+  style="pointer-events: none;"
+>
+  <label
+    class="rmd-label rmd-label--gap rmd-label--reversed"
+  >
+    <span
+      class="rmd-radio rmd-input-toggle rmd-input-toggle--em rmd-input-toggle--normal rmd-input-toggle--uncontrolled"
+    >
+      <input
+        aria-label="Select Row"
+        class="rmd-hidden-input"
+        id="radio-:r0:"
+        type="radio"
+        value=""
+      />
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_unchecked
+      </span>
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_checked
+      </span>
+    </span>
+  </label>
+</td>
+`;
+
+exports[`TableRadio should handle the aria-label/aria-labelledby props correctly 1`] = `
+<td
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left"
+>
+  <label
+    class="rmd-label rmd-label--gap rmd-label--reversed"
+  >
+    <span
+      class="rmd-radio rmd-input-toggle rmd-input-toggle--em rmd-input-toggle--normal rmd-input-toggle--uncontrolled"
+    >
+      <input
+        aria-label="Custom Label"
+        class="rmd-hidden-input"
+        id="radio-:r3:"
+        type="radio"
+        value=""
+      />
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_unchecked
+      </span>
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_checked
+      </span>
+    </span>
+  </label>
+</td>
+`;
+
+exports[`TableRadio should handle the aria-label/aria-labelledby props correctly 2`] = `
+<td
+  class="rmd-table-cell rmd-table-cell--input-toggle rmd-table-cell--no-wrap rmd-align-left"
+>
+  <label
+    class="rmd-label rmd-label--gap rmd-label--reversed"
+  >
+    <span
+      class="rmd-radio rmd-input-toggle rmd-input-toggle--em rmd-input-toggle--normal rmd-input-toggle--uncontrolled"
+    >
+      <input
+        aria-labelledby="another-id"
+        class="rmd-hidden-input"
+        id="radio-:r3:"
+        type="radio"
+        value=""
+      />
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_unchecked
+      </span>
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        radio_button_checked
+      </span>
+    </span>
+  </label>
+</td>
+`;

package/src/table/__tests__/__snapshots__/TableRow.tsx.snap

@@ -6,7 +6,7 @@ exports[`TableRow should apply the correct styling, HTML attributes, and allow a
   data-testid="row"
 >
   <td
-    class="rmd-table-cell rmd-table-cell--no-wrap"
+    class="rmd-table-cell rmd-table-cell--no-wrap rmd-align-left"
   >
     Content
   </td>
@@ -20,7 +20,7 @@ exports[`TableRow should apply the correct styling, HTML attributes, and allow a
   style="cursor: pointer;"
 >
   <td
-    class="rmd-table-cell rmd-table-cell--no-wrap"
+    class="rmd-table-cell rmd-table-cell--no-wrap rmd-align-left"
   >
     Content
   </td>
@@ -34,7 +34,7 @@ exports[`TableRow should apply the correct styling, HTML attributes, and allow a
   style=""
 >
   <td
-    class="rmd-table-cell rmd-table-cell--no-wrap"
+    class="rmd-table-cell rmd-table-cell--no-wrap rmd-align-left"
   >
     Content
   </td>
@@ -48,11 +48,9 @@ exports[`TableRow should apply the correct styling, HTML attributes, and allow a
   style=""
 >
   <td
-    class="rmd-table-cell rmd-table-cell--no-wrap"
+    class="rmd-table-cell rmd-table-cell--no-wrap rmd-align-left"
   >
     Content
   </td>
 </tr>
 `;
-
-exports[`TableRow styling utility class should be callable without any arguments 1`] = `"rmd-tr rmd-tr--bordered rmd-tr--hoverable"`;

package/src/table/__tests__/__snapshots__/tableContainerStyles.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tableContainer should be callable without any arguments 1`] = `"rmd-table-container"`;

package/src/table/__tests__/__snapshots__/tableRowStyles.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tableRow should be callable without any arguments 1`] = `"rmd-tr rmd-tr--bordered rmd-tr--hoverable"`;

package/src/table/__tests__/__snapshots__/tableStyles.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`table should be callable without any arguments 1`] = `"rmd-table"`;

package/src/table/__tests__/tableContainerStyles.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "@jest/globals";
+import { tableContainer } from "../tableContainerStyles.js";
+
+describe("tableContainer", () => {
+  it("should be callable without any arguments", () => {
+    expect(tableContainer()).toMatchSnapshot();
+  });
+});

package/src/table/__tests__/tableRowStyles.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "@jest/globals";
+import { tableRow } from "../tableRowStyles.js";
+
+describe("tableRow", () => {
+  it("should be callable without any arguments", () => {
+    expect(tableRow()).toMatchSnapshot();
+  });
+});

package/src/table/__tests__/tableStyles.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "@jest/globals";
+import { table } from "../tableStyles.js";
+
+describe("table", () => {
+  it("should be callable without any arguments", () => {
+    expect(table()).toMatchSnapshot();
+  });
+});

package/src/table/_table.scss

@@ -12,9 +12,6 @@ $disable-everything: false !default;
 $disable-container: false !default;
 $disable-dense: false !default;
 $disable-full-width: false !default;
-$disable-cell-header-align-left: false !default;
-$disable-cell-align-center: false !default;
-$disable-cell-align-right: false !default;
 $disable-cell-align-top: false !default;
 $disable-cell-align-bottom: false !default;
 $disable-bordered: false !default;
@@ -28,7 +25,7 @@ $disable-sticky: false !default;
 $disable-sticky-cell: $disable-sticky !default;
 $disable-sticky-header: $disable-sticky !default;
 $disable-sticky-footer: $disable-sticky !default;
-$disable-checkbox: false !default;
+$disable-input-toggle: false !default;
 $disable-cell-no-wrap: false !default;
 $disable-cell-grow: false !default;
 $disable-cell-no-padding: false !default;
@@ -72,7 +69,7 @@ $cell-header-height: 3.5rem !default;
 $cell-header-dense-height: 2.125rem !default;
 $cell-horizontal-padding: 1rem !default;
 $cell-vertical-padding: 0.375rem !default;
-$cell-checkbox-horizontal-padding: 0.5rem !default;
+$cell-input-toggle-horizontal-padding: 0.5rem !default;
 $cell-content-gap: icon.$spacing !default;
 
 $sticky-cell-position: 0 !default;
@@ -353,17 +350,18 @@ $row-selected-styles: (
         @if $cell-color != $cell-header-color {
           @include set-var(cell-color, $cell-header-color);
         }
-        @if not $disable-cell-header-align-left {
-          @include utils.rtl {
-            text-align: right;
-          }
+      }
 
-          text-align: left;
+      @if not $disable-cell-align-top {
+        &--top {
+          vertical-align: top;
         }
       }
 
-      &--top {
-        vertical-align: top;
+      @if not $disable-cell-align-bottom {
+        &--bottom {
+          vertical-align: bottom;
+        }
       }
 
       @if not $disable-sticky-cell {
@@ -388,11 +386,11 @@ $row-selected-styles: (
               transition.$linear-timing-function;
 
             .rmd-tr--hoverable:hover & {
-              @include use-var(background-color, hover-color);
+              @include utils.map-to-styles($row-hover-styles);
             }
 
             .rmd-tr--selected & {
-              @include use-var(background-color, selected-color);
+              @include utils.map-to-styles($row-selected-styles);
             }
           }
         }
@@ -405,18 +403,18 @@ $row-selected-styles: (
           }
         }
 
-        @if not $disable-checkbox and not $disable-sticky-header {
+        @if not $disable-input-toggle and not $disable-sticky-header {
           &--sticky-header-cell {
             z-index: $sticky-header-cell-z-index;
           }
         }
       }
 
-      @if not $disable-checkbox {
-        &--checkbox {
+      @if not $disable-input-toggle {
+        &--input-toggle {
           @include set-var(
             cell-horizontal-padding,
-            $cell-checkbox-horizontal-padding
+            $cell-input-toggle-horizontal-padding
           );
         }
       }

package/src/table/tableCellStyles.ts

@@ -0,0 +1,83 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import {
+  type TableCellHorizontalAlignment,
+  type TableCellVerticalAlignment,
+} from "./TableConfigurationProvider.jsx";
+
+/** @remarks \@since 6.0.0 */
+export interface TableCellClassNameOptions {
+  className?: string;
+
+  /**
+   * Set this to `true` if the cell is rendered as a `<th>` so that the correct
+   * sticky styles can be applied.
+   */
+  header: boolean;
+
+  /**
+   * Set this to true if the cell is rendered in a `<thead>` so that the correct
+   * sticky styles can be applied.
+   */
+  isInTableHeader: boolean;
+
+  /** @defaultValue `false` */
+  grow?: boolean;
+
+  /** @defaultValue `false` */
+  sticky?: boolean;
+
+  /** @defaultValue `false` */
+  inputToggle?: boolean;
+
+  hAlign?: TableCellHorizontalAlignment;
+  vAlign?: TableCellVerticalAlignment;
+
+  /** @defaultValue `true` */
+  lineWrap?: boolean;
+
+  /**
+   * @defaultValue `"horizontal"`
+   */
+  padding?: "horizontal" | "vertical" | "none";
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function tableCell(options: TableCellClassNameOptions): string {
+  const {
+    grow,
+    sticky,
+    header,
+    inputToggle,
+    hAlign,
+    vAlign,
+    lineWrap = true,
+    padding = "horizontal",
+    isInTableHeader,
+    className,
+  } = options;
+
+  // using `&&` instead of `bem` since the latest version of typescript does not
+  // support setting the same object key (empty string)
+  const p = "rmd-table-cell--";
+  return cnb(
+    "rmd-table-cell",
+    grow && `${p}grow`,
+    header && `${p}header`,
+    sticky && `${p}sticky`,
+    inputToggle && `${p}input-toggle`,
+    sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`,
+    sticky && isInTableHeader && `${p}sticky-header`,
+    sticky && isInTableHeader && inputToggle && `${p}header-cell`,
+    vAlign && vAlign !== "middle" && `${p}${vAlign}`,
+    !lineWrap && `${p}no-wrap`,
+    padding === "vertical" && `${p}v-padding`,
+    padding === "none" && `${p}no-padding`,
+    cssUtils({
+      textAlign: hAlign,
+    }),
+    className
+  );
+}

package/src/table/tableContainerStyles.ts

@@ -0,0 +1,19 @@
+import { cnb } from "cnbuilder";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TableContainerClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function tableContainer(
+  options: TableContainerClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb("rmd-table-container", className);
+}

package/src/table/tableFooterStyles.ts

@@ -0,0 +1,27 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-tfoot");
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TableFooterClassNameOptions {
+  className?: string;
+  sticky?: boolean;
+  stickyActive?: boolean;
+  stickyActiveClassName?: string;
+}
+
+export function tableFooter(options: TableFooterClassNameOptions = {}): string {
+  const { className, sticky, stickyActive, stickyActiveClassName } = options;
+
+  return cnb(
+    styles({
+      sticky,
+      "sticky-active": stickyActive,
+    }),
+    stickyActive && stickyActiveClassName,
+    className
+  );
+}

package/src/table/tableHeaderStyles.ts

@@ -0,0 +1,29 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-thead");
+
+/** @remarks \@since 6.0.0 */
+export interface TableHeaderClassNameOptions {
+  className?: string;
+  dense?: boolean;
+  sticky?: boolean;
+  stickyActive?: boolean;
+  stickyActiveClassName?: string;
+}
+
+/** @remarks \@since 6.0.0 */
+export function tableHeader(options: TableHeaderClassNameOptions = {}): string {
+  const { dense, sticky, stickyActive, stickyActiveClassName, className } =
+    options;
+
+  return cnb(
+    styles({
+      dense,
+      sticky,
+      "sticky-active": stickyActive,
+    }),
+    stickyActive && stickyActiveClassName,
+    className
+  );
+}

package/src/table/tableRowStyles.ts

@@ -0,0 +1,28 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-tr");
+
+/** @remarks \@since 6.0.0 */
+export interface TableRowClassNameOptions {
+  className?: string;
+  disableHover?: boolean;
+  disableBorders?: boolean;
+  selected?: boolean;
+  clickable?: boolean;
+}
+
+/** @remarks \@since 6.0.0 */
+export function tableRow(options: TableRowClassNameOptions = {}): string {
+  const { disableHover, disableBorders, selected, clickable, className } =
+    options;
+  return cnb(
+    styles({
+      bordered: !disableBorders,
+      hoverable: !disableHover,
+      clickable,
+      selected,
+    }),
+    className
+  );
+}

package/src/table/tableStyles.ts

@@ -0,0 +1,24 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-table");
+
+/** @remarks \@since 6.0.0 */
+export interface TableClassNameOptions {
+  className?: string;
+
+  /** @defaultValue `false` */
+  dense?: boolean;
+
+  /** @defaultValue `false` */
+  fullWidth?: boolean;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function table(options: TableClassNameOptions = {}): string {
+  const { dense = false, fullWidth = false, className } = options;
+
+  return cnb(styles({ dense, "full-width": fullWidth }), className);
+}

package/src/table/types.ts

@@ -6,6 +6,29 @@ export type TableStickySectionOptions = Pick<
   "disabled" | "getThreshold" | "getRootMargin"
 >;
 
+/**
+ * This **should be wrapped in `useCallback`** to increase performance.
+ *
+ * The default behavior is to enable the "active" state for sticky headers is:
+ *
+ * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
+ *   after the `<thead>` and enable the active state once 1px overlaps with
+ *   the container.
+ * - otherwise, assume the `TableHeader` is fixed within the viewport and
+ *   parse the `top` CSS style as `px`. enable the active state once 1px
+ *   overlaps with this value AND the `TableHeader` exists within the
+ *   viewport.
+ *   - Note: This really only works with `px` and `rem` units.
+ *
+ * @see {@link TableStickySectionProps.stickyOptions} for an example usage with custom threshold and
+ * margin.
+ * @remarks \@since 6.0.0
+ */
+export type IsStickyTableSectionActive = (
+  entry: IntersectionObserverEntry,
+  isInTableContainer: boolean
+) => boolean;
+
 /** @remarks \@since 6.0.0 */
 export interface TableStickySectionProps {
   /**
@@ -50,25 +73,20 @@ export interface TableStickySectionProps {
   stickyOptions?: TableStickySectionOptions;
 
   /**
-   * This **should be wrapped in `useCallback`** to increase performance.
-   *
-   * The default behavior is to enable the "active" state for sticky headers is:
-   *
-   * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
-   *   after the `<thead>` and enable the active state once 1px overlaps with
-   *   the container.
-   * - otherwise, assume the `TableHeader` is fixed within the viewport and
-   *   parse the `top` CSS style as `px`. enable the active state once 1px
-   *   overlaps with this value AND the `TableHeader` exists within the
-   *   viewport.
-   *   - Note: This really only works with `px` and `rem` units.
-   *
-   *
+   * An optional className to use when the sticky section is covering other rows
+   * (`active`). When this is defined, the default
+   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be
+   * applied.
+   */
+  stickyActiveClassName?: string;
+
+  /**
+   * @see {@link IsStickyTableSectionActive} for a description.
    * @see {@link stickyOptions} for an example usage with custom threshold and
    * margin.
    * @remarks \@since 6.0.0
    */
-  isStickyActive?(entry: IntersectionObserverEntry): boolean;
+  isStickyActive?: IsStickyTableSectionActive;
 
   /**
    * Set this to `true` when the {@link sticky} prop is `true` to disable the

package/src/tabs/__tests__/Tab.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { FontIcon } from "../../icon/FontIcon.js";
 import { Tab, type TabProps } from "../Tab.js";
@@ -12,8 +12,8 @@ describe("Tab", () => {
       children: "Tab",
     };
 
-    const { getByRole, rerender } = render(<Tab {...props} />);
-    const tab = getByRole("tab", { name: "Tab" });
+    const { rerender } = render(<Tab {...props} />);
+    const tab = screen.getByRole("tab", { name: "Tab" });
     expect(tab).toMatchSnapshot();
 
     rerender(<Tab {...props} stacked />);