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

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;
@@ -111,85 +108,37 @@ $sticky-footer-active-styles: $sticky-header-active-styles !default;
 $row-hover-color: interaction.get-var(hover-background-color) !default;
 $row-selected-color: interaction.get-var(selected-background-color) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-table-background-color,
-    value: $background-color,
-  ),
-  border-size: (
-    var: --rmd-table-border-size,
-    value: $border-size,
-  ),
-  border-color: (
-    var: --rmd-table-border-color,
-    value: $border-color,
-  ),
-  header-background-color: (
-    var: --rmd-table-header-background-color,
-    value: $header-background-color,
-  ),
-  cell-color: (
-    var: --rmd-table-cell-color,
-    value: $cell-color,
-  ),
-  cell-height: (
-    var: --rmd-table-cell-height,
-    value: $cell-height,
-  ),
-  cell-horizontal-padding: (
-    var: --rmd-table-cell-horizontal-padding,
-    value: $cell-horizontal-padding,
-  ),
-  cell-vertical-padding: (
-    var: --rmd-table-cell-vertical-padding,
-    value: $cell-vertical-padding,
-  ),
-  header-cell-height: (
-    var: --rmd-table-header-cell-height,
-    value: $cell-header-height,
-  ),
-  hover-color: (
-    var: --rmd-table-hover-color,
-    value: $row-hover-color,
-  ),
-  selected-color: (
-    var: --rmd-table-selected-color,
-    value: $row-selected-color,
-  ),
-  sticky-cell: (
-    var: --rmd-table-sticky-cell,
-    value: $sticky-cell-position,
-  ),
-  sticky-header: (
-    var: --rmd-table-sticky-header,
-    value: $sticky-header-position,
-  ),
-  sticky-footer: (
-    var: --rmd-table-sticky-footer,
-    value: $sticky-footer-position,
-  ),
-  sticky-background-color: (
-    var: --rmd-table-sticky-background-color,
-    value: $sticky-background-color,
-  ),
+$variables: (
+  background-color,
+  border-size,
+  border-color,
+  header-background-color,
+  cell-color,
+  cell-height,
+  cell-horizontal-padding,
+  cell-vertical-padding,
+  header-cell-height,
+  hover-color,
+  selected-color,
+  sticky-cell,
+  sticky-header,
+  sticky-footer,
+  sticky-background-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "table var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "table");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "table var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "table")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -230,6 +179,39 @@ $row-selected-styles: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(header-background-color, $header-background-color);
+    @include set-var(cell-color, $cell-color);
+    @include set-var(cell-height, $cell-height);
+    @include set-var(cell-horizontal-padding, $cell-horizontal-padding);
+    @include set-var(cell-vertical-padding, $cell-vertical-padding);
+    @include set-var(header-cell-height, $cell-header-height);
+    @include set-var(selected-color, $row-selected-color);
+
+    @if not $disable-bordered {
+      @include set-var(border-size, $border-size);
+      @include set-var(border-color, $border-color);
+    }
+    @if not $disable-hoverable {
+      @include set-var(hover-color, $row-hover-color);
+    }
+    @if not $disable-sticky-cell {
+      @include set-var(sticky-cell, $sticky-cell-position);
+    }
+    @if not $disable-sticky-header {
+      @include set-var(sticky-header, $sticky-header-position);
+    }
+    @if not $disable-sticky-footer {
+      @include set-var(sticky-footer, $sticky-footer-position);
+    }
+    @if not $disable-sticky-header or not $disable-sticky-footer {
+      @include set-var(sticky-background-color, $sticky-background-color);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @if not $disable-container {
@@ -353,17 +335,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 +371,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 +388,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
+  );
+}