@react-md/core 1.0.0-next.15 → 1.0.0-next.16

package/src/table/_table.scss

@@ -1,447 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../box-shadows";
-@use "../theme/theme";
-@use "../icon/icon";
-@use "../interaction/interaction";
-@use "../typography/typography";
-@use "../transition/transition";
-@use "../divider/divider";
-
-$disable-everything: false !default;
-$disable-container: false !default;
-$disable-dense: false !default;
-$disable-full-width: false !default;
-$disable-cell-align-top: false !default;
-$disable-cell-align-bottom: false !default;
-$disable-bordered: false !default;
-$disable-bordered-except-last: false !default;
-$disable-selected: false !default;
-$disable-clickable: false !default;
-$disable-hoverable: false !default;
-// convenience variable to disable all sticky behavior
-$disable-sticky: false !default;
-// disable the sticky cells (within tbody)
-$disable-sticky-cell: $disable-sticky !default;
-$disable-sticky-header: $disable-sticky !default;
-$disable-sticky-footer: $disable-sticky !default;
-$disable-input-toggle: false !default;
-$disable-cell-no-wrap: false !default;
-$disable-cell-grow: false !default;
-$disable-cell-no-padding: false !default;
-$disable-cell-sort: false !default;
-$disable-cell-grow: false !default;
-$disable-cell-vertical-padding: false !default;
-
-// defaults to `null` so it just inherits the background color
-$light-theme-background-color: null !default;
-$dark-theme-background-color: null !default;
-$background-color: theme.get-default-color(
-  $light-theme-background-color,
-  $dark-theme-background-color
-) !default;
-$light-theme-border-color: #e0e0e0 !default;
-$dark-theme-border-color: #2f2f2f !default;
-$border-color: theme.get-default-color(
-  $light-theme-border-color,
-  $dark-theme-border-color
-) !default;
-$border-size: divider.$size !default;
-
-$light-theme-header-background-color: null !default;
-$dark-theme-header-background-color: null !default;
-$header-background-color: theme.get-default-color(
-  $light-theme-header-background-color,
-  $dark-theme-header-background-color
-) !default;
-
-$cell-typography: typography.$body-2-styles !default;
-$cell-color: theme.theme-get-var(text-primary-color) !default;
-$cell-height: 3.25rem !default;
-$cell-dense-height: 2rem !default;
-$cell-header-color: $cell-color !default;
-$cell-header-typography: (
-  font-weight: map.get(typography.$subtitle-2-styles, font-weight),
-  letter-spacing: map.get(typography.$subtitle-2-styles, letter-spacing),
-  line-height: map.get(typography.$subtitle-2-styles, line-height),
-) !default;
-$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-input-toggle-horizontal-padding: 0.5rem !default;
-$cell-content-gap: icon.$spacing !default;
-
-$sticky-cell-position: 0 !default;
-$sticky-header-position: 0 !default;
-$sticky-header-z-index: 2 !default;
-$sticky-header-cell-z-index: $sticky-header-z-index + 1 !default;
-$sticky-cell-z-index: $sticky-header-z-index - 1 !default;
-$sticky-footer-position: 0 !default;
-$sticky-footer-z-index: $sticky-header-z-index - 1 !default;
-$sticky-background-color: theme.theme-get-var(background-color) !default;
-$sticky-header-inactive-styles: (
-  transition: background transition.$linear-duration
-    transition.$linear-timing-function,
-  "&::after": (
-    box-shadow: box-shadows.box-shadow(4),
-    content: "",
-    inset: 0,
-    pointer-events: none,
-    opacity: 0,
-    position: absolute,
-    transition: opacity transition.$linear-duration
-      transition.$linear-timing-function,
-    z-index: 0,
-  ),
-) !default;
-$sticky-header-active-styles: (
-  "--rmd-background-color": theme.get-dark-elevation-color(4),
-  background-color: theme.theme-get-var(background-color),
-  "&::after": (
-    opacity: 1,
-  ),
-) !default;
-$sticky-footer-inactive-styles: $sticky-header-inactive-styles !default;
-$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;
-
-$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) {
-  $var: utils.get-var-name($variables, $name, "table");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "table")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-// these have to be initialized after the css-var stuff to work
-$row-hover-styles: (
-  background-color: get-var(hover-color),
-) !default;
-$row-selected-styles: (
-  background-color: get-var(selected-color),
-) !default;
-
-@mixin use-light-theme {
-  @if not $disable-everything {
-    @include set-var(border-color, $light-theme-border-color);
-    @if $light-theme-background-color {
-      @include set-var(background-color, $light-theme-background-color);
-    }
-
-    @if $light-theme-header-background-color {
-      @include set-var(header-color, $light-theme-header-background-color);
-    }
-  }
-}
-
-@mixin use-dark-theme {
-  @if not $disable-everything {
-    @include set-var(border-color, $dark-theme-border-color);
-    @if $dark-theme-background-color {
-      @include set-var(background-color, $dark-theme-background-color);
-    }
-
-    @if $dark-theme-header-background-color {
-      @include set-var(header-color, $dark-theme-header-background-color);
-    }
-  }
-}
-
-@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($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(table, $disable-layer) {
-      @if not $disable-container {
-        .rmd-table-container {
-          max-width: 100%;
-          overflow: auto;
-        }
-      }
-
-      .rmd-table {
-        @include use-var(background-color);
-
-        // NOTE: Switched from `border-collapse: collapse` to `border-spacing: 0`
-        // since enabling sticky headers removed the borders for some reason in
-        // firefox. all I really wanted was the spacing to be removed from each
-        // cell, so border-spacing seems better.
-        border-spacing: 0;
-        max-width: 100%;
-
-        @if not $disable-full-width {
-          &--full-width {
-            width: 100%;
-          }
-        }
-      }
-
-      .rmd-thead {
-        @include use-var(background-color, header-background-color);
-        @if $cell-height != $cell-header-height {
-          @include set-var(cell-height, $cell-header-height);
-        }
-
-        @if not $disable-dense and $cell-dense-height {
-          &--dense {
-            @include set-var(cell-height, $cell-header-dense-height);
-          }
-        }
-
-        @if not $disable-sticky-header {
-          &--sticky {
-            @include use-var(background-color, sticky-background-color);
-            @include use-var(top, sticky-header);
-            @include utils.map-to-styles($sticky-header-inactive-styles);
-
-            position: sticky;
-            z-index: $sticky-header-z-index;
-          }
-
-          &--sticky-active {
-            @include utils.map-to-styles($sticky-header-active-styles);
-          }
-        }
-      }
-
-      .rmd-tfoot {
-        @if not $disable-sticky-footer {
-          &--sticky {
-            @include use-var(background-color, sticky-background-color);
-            @include use-var(bottom, sticky-footer);
-            @include utils.map-to-styles($sticky-footer-inactive-styles);
-
-            position: sticky;
-            z-index: $sticky-footer-z-index;
-          }
-
-          &--sticky-active {
-            @include utils.map-to-styles($sticky-footer-active-styles);
-          }
-        }
-      }
-
-      .rmd-tr {
-        @if not $disable-clickable {
-          &--clickable:hover {
-            cursor: pointer;
-          }
-        }
-
-        @if not $disable-selected {
-          &--selected {
-            @include utils.map-to-styles($row-selected-styles);
-          }
-        }
-
-        @if not $disable-bordered {
-          &--bordered {
-            border-bottom: get-var(border-size) solid get-var(border-color);
-
-            @if not $disable-bordered-except-last {
-              &:last-child {
-                border-bottom-width: 0;
-              }
-            }
-          }
-        }
-
-        @if not $disable-hoverable {
-          &--hoverable {
-            @include utils.mouse-hover(false) {
-              transition: background transition.$linear-duration
-                transition.$linear-timing-function;
-
-              &:hover {
-                @include utils.map-to-styles($row-hover-styles);
-              }
-            }
-          }
-        }
-      }
-
-      .rmd-table-cell {
-        @include utils.map-to-styles($cell-typography);
-        @include use-var(color, cell-color);
-        @include use-var(height, cell-height);
-
-        border: inherit;
-        padding: 0 get-var(cell-horizontal-padding);
-
-        &--header {
-          @include utils.map-to-styles($cell-header-typography);
-          @if $cell-color != $cell-header-color {
-            @include set-var(cell-color, $cell-header-color);
-          }
-        }
-
-        @if not $disable-cell-align-top {
-          &--top {
-            vertical-align: top;
-          }
-        }
-
-        @if not $disable-cell-align-bottom {
-          &--bottom {
-            vertical-align: bottom;
-          }
-        }
-
-        @if not $disable-sticky-cell {
-          &--sticky {
-            position: sticky;
-            will-change: transform;
-          }
-
-          &--sticky-cell {
-            @include utils.auto-rtl(left, get-var(sticky-cell));
-            @include theme.theme-use-var(background-color);
-
-            transition: background-color transition.$linear-duration;
-            z-index: $sticky-cell-z-index;
-
-            &::after {
-              @include utils.pseudo-element;
-
-              background-color: transparent;
-              transition: background
-                transition.$linear-duration
-                transition.$linear-timing-function;
-
-              .rmd-tr--hoverable:hover & {
-                @include utils.map-to-styles($row-hover-styles);
-              }
-
-              .rmd-tr--selected & {
-                @include utils.map-to-styles($row-selected-styles);
-              }
-            }
-          }
-
-          @if not $disable-sticky-header {
-            &--sticky-header {
-              @include use-var(top, sticky-header);
-
-              z-index: $sticky-header-z-index;
-            }
-          }
-
-          @if not $disable-input-toggle and not $disable-sticky-header {
-            &--sticky-header-cell {
-              z-index: $sticky-header-cell-z-index;
-            }
-          }
-        }
-
-        @if not $disable-input-toggle {
-          &--input-toggle {
-            @include set-var(
-              cell-horizontal-padding,
-              $cell-input-toggle-horizontal-padding
-            );
-          }
-        }
-
-        @if not $disable-cell-grow {
-          &--grow {
-            width: 100%;
-          }
-        }
-
-        @if not $disable-cell-no-wrap {
-          &--no-wrap {
-            @include typography.text-overflow;
-          }
-        }
-
-        @if not $disable-cell-vertical-padding {
-          &--v-padding {
-            @include use-var(padding-bottom, cell-vertical-padding);
-            @include use-var(padding-top, cell-vertical-padding);
-          }
-        }
-
-        @if not $disable-cell-sort {
-          &--no-padding {
-            padding: 0;
-          }
-
-          &__content {
-            @include use-var(padding-left, cell-horizontal-padding);
-            @include use-var(padding-right, cell-horizontal-padding);
-
-            align-items: center;
-            color: inherit;
-            font: inherit;
-            gap: $cell-content-gap;
-            height: 100%;
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-}

package/src/tabs/__tests__/Tab.tsx

@@ -1,51 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { FontIcon } from "../../icon/FontIcon.js";
-import { render, screen } from "../../test-utils/index.js";
-import { Tab, type TabProps } from "../Tab.js";
-
-describe("Tab", () => {
-  it("should support rendering an icon in different positions around the children", () => {
-    const props: TabProps = {
-      active: false,
-      icon: <FontIcon>favorite</FontIcon>,
-      children: "Tab",
-    };
-
-    const { rerender } = render(<Tab {...props} />);
-    const tab = screen.getByRole("tab", { name: "Tab" });
-    expect(tab).toMatchSnapshot();
-
-    rerender(<Tab {...props} stacked />);
-    expect(tab).toMatchSnapshot();
-
-    rerender(<Tab {...props} iconAfter />);
-    expect(tab).toMatchSnapshot();
-
-    rerender(<Tab {...props} iconAfter stacked />);
-    expect(tab).toMatchSnapshot();
-  });
-
-  it("should render as a button", () => {
-    const { rerender } = render(<Tab active={false}>Tab</Tab>);
-    let tab = screen.getByRole("tab", { name: "Tab" });
-    expect(tab).toBeInstanceOf(HTMLButtonElement);
-
-    rerender(
-      <Tab as="button" active={false}>
-        Tab
-      </Tab>
-    );
-    tab = screen.getByRole("tab", { name: "Tab" });
-    expect(tab).toBeInstanceOf(HTMLButtonElement);
-  });
-
-  it("should be able to render as a link using the as prop", () => {
-    render(
-      <Tab as="a" href="#tab" active={false}>
-        Tab
-      </Tab>
-    );
-    const tab = screen.getByRole("tab", { name: "Tab" });
-    expect(tab).toBeInstanceOf(HTMLAnchorElement);
-  });
-});