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

package/src/dialog/_dialog.scss

@@ -1,273 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../box-shadows";
-@use "../transition/transition";
-@use "../interaction/interaction";
-@use "../theme/theme";
-
-$disable-everything: false !default;
-$disable-fixed: false !default;
-$disable-header: false !default;
-$disable-title: false !default;
-$disable-content: false !default;
-$disable-footer: false !default;
-$disable-focus-outline: false !default;
-$disable-footer-flex-vertical: false !default;
-$disable-footer-flex-start: false !default;
-$disable-footer-space-between: false !default;
-$disable-footer-flex-end: false !default;
-
-$elevation: 16 !default;
-$z-index: utils.$temporary-element-z-index !default;
-
-$background-color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(surface-color),
-  null
-) !default;
-$color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(text-primary-color),
-  null
-) !default;
-
-$min-width: 17.5rem !default;
-$horizontal-margin: 2.5rem !default;
-$vertical-margin: 1.5rem !default;
-$transition-distance: 1.875rem !default;
-
-$enter-duration: transition.$enter-duration !default;
-$enter-timing-function: transition.$deceleration-timing-function !default;
-$leave-timing-function: transition.$acceleration-timing-function !default;
-$leave-duration: transition.$leave-duration !default;
-
-$header-padding: 1.5rem !default;
-$header-padding-bottom: 1.25rem !default;
-
-$content-padding: 1.5rem !default;
-
-$footer-padding: 0.5rem !default;
-
-$variables: (
-  min-width,
-  horizontal-margin,
-  vertical-margin,
-  z-index,
-  header-padding,
-  header-padding-bottom,
-  content-padding,
-  footer-padding
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "dialog");
-
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "dialog")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(min-width, $min-width);
-    @include set-var(horizontal-margin, $horizontal-margin);
-    @include set-var(vertical-margin, $vertical-margin);
-    @include set-var(z-index, $z-index);
-
-    @if not $disable-header {
-      @include set-var(header-padding, $header-padding);
-      @include set-var(header-padding-bottom, $header-padding-bottom);
-    }
-
-    @if not $disable-content {
-      @include set-var(content-padding, $content-padding);
-    }
-    @if not $disable-footer {
-      @include set-var(footer-padding, $footer-padding);
-    }
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(dialog, $disable-layer) {
-      .rmd-dialog-container {
-        @include use-var(z-index);
-
-        align-items: center;
-        display: flex;
-        inset: 0;
-        justify-content: center;
-        margin: get-var(vertical-margin) get-var(horizontal-margin);
-        margin-right: calc(
-          #{get-var(horizontal-margin)} + #{utils.scrollbar-size()}
-        );
-        pointer-events: none;
-        position: fixed;
-      }
-
-      .rmd-dialog {
-        @include box-shadows.box-shadow($elevation);
-
-        background-color: $background-color;
-        color: $color;
-        display: flex;
-        flex-direction: column;
-        max-height: 100%;
-        max-width: 100%;
-        outline: none;
-
-        &--centered {
-          @include use-var(min-width);
-
-          pointer-events: auto;
-        }
-
-        &--full-page {
-          @include use-var(z-index);
-
-          height: 100%;
-          inset: 0;
-          overflow: auto;
-          position: fixed;
-          width: 100%;
-        }
-
-        @if not $disable-focus-outline {
-          // Note: Do not use the `interaction-outline` mixin +
-          // `interaction.set-var(interaction.$focus-color)` like normal focus
-          // elements since it'll make all focusable children update with the
-          // outline color as well
-          @if utils.$disable-focus-visible {
-            @include utils.keyboard-only {
-              &--outline:focus {
-                outline: interaction.get-var(focus-color) solid
-                  interaction.get-var(focus-width);
-              }
-            }
-          } @else {
-            &--outline:focus-visible {
-              outline: interaction.get-var(focus-color)
-                solid
-                interaction.get-var(focus-width);
-            }
-          }
-        }
-
-        &--enter {
-          transform: translateY($transition-distance);
-        }
-
-        &--enter-active {
-          transform: translateY(0);
-          transition: transform $enter-duration;
-          transition-timing-function: $enter-timing-function;
-        }
-
-        &--exit {
-          opacity: 1;
-          transform: translateY(0);
-          transition:
-            transform $leave-duration,
-            opacity $leave-duration;
-          transition-timing-function: $leave-timing-function;
-        }
-
-        &--exit-active {
-          opacity: 0;
-          transform: translateY($transition-distance);
-        }
-
-        @if not $disable-fixed {
-          &--fixed {
-            @include use-var(z-index);
-          }
-        }
-
-        @if not $disable-header {
-          &__header {
-            @include use-var(padding, header-padding);
-            @include use-var(padding-bottom, header-padding-bottom);
-
-            align-items: center;
-            display: flex;
-            flex: 0 0 auto;
-          }
-        }
-
-        @if not $disable-title {
-          &__title {
-            // this makes it so it's easy to add a close button after the title
-            flex: 1 1 auto;
-          }
-        }
-
-        @if not $disable-content {
-          &__content {
-            flex: 1 1 auto;
-            overflow: auto;
-
-            &--padded {
-              @include use-var(padding, content-padding);
-            }
-          }
-        }
-
-        @if not $disable-footer {
-          &__footer {
-            @include use-var(padding, footer-padding);
-
-            flex: 0 0 auto;
-
-            @if not
-              $disable-footer-flex-vertical or not
-              $disable-footer-flex-start or not
-              $disable-footer-space-between or not
-              $disable-footer-flex-end
-            {
-              &--flex {
-                display: flex;
-              }
-            }
-
-            @if not $disable-footer-flex-vertical {
-              &--flex-v {
-                flex-direction: column;
-              }
-            }
-
-            @if not $disable-footer-flex-start {
-              &--start {
-                justify-content: flex-start;
-              }
-            }
-
-            @if not $disable-footer-space-between {
-              &--between {
-                justify-content: space-between;
-              }
-            }
-
-            @if not $disable-footer-flex-end {
-              &--end {
-                justify-content: flex-end;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/divider/__tests__/Divider.tsx

@@ -1,36 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Divider } from "../Divider.js";
-import { divider } from "../styles.js";
-
-describe("Divider", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-
-    const { rerender } = render(<Divider ref={ref} />);
-    const divider = screen.getByRole("separator");
-    expect(ref.current).toBeInstanceOf(HTMLHRElement);
-    expect(ref.current).toBe(divider);
-    expect(divider).toMatchSnapshot();
-
-    rerender(
-      <Divider
-        ref={ref}
-        style={{ color: "blue" }}
-        className="custom-class-name"
-      />
-    );
-    expect(divider).toMatchSnapshot();
-
-    rerender(<Divider ref={ref} inset />);
-    expect(divider).toMatchSnapshot();
-  });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(divider()).toMatchSnapshot();
-    });
-  });
-});

package/src/divider/__tests__/__snapshots__/Divider.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Divider should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<hr
-  class="rmd-divider"
-  role="separator"
-/>
-`;
-
-exports[`Divider should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<hr
-  class="rmd-divider custom-class-name"
-  role="separator"
-  style="color: blue;"
-/>
-`;
-
-exports[`Divider should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<hr
-  class="rmd-divider rmd-divider--inset"
-  role="separator"
-  style=""
-/>
-`;
-
-exports[`Divider styling utility class should be callable without any arguments 1`] = `"rmd-divider"`;

package/src/divider/_divider.scss

@@ -1,124 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../theme/theme";
-@use "../theme/colors";
-
-$disable-everything: false !default;
-$disable-vertical: false !default;
-$disable-inset: false !default;
-
-$size: 0.0625em !default;
-$border-size: $size * 2 !default;
-$max-size: 100% !default;
-$inset: 4rem !default;
-$spacing: 0.25rem auto !default;
-$vertical-spacing: auto 0.25rem !default;
-
-$light-theme-color: rgba(colors.$black, 0.12) !default;
-$dark-theme-color: rgba(colors.$white, 0.12) !default;
-
-$color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
-
-$variables: (
-  size,
-  border-size,
-  color,
-  spacing,
-  vertical-spacing,
-  inset,
-  max-size
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "divider");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "divider")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin use-light-theme {
-  @if not $disable-everything {
-    @include set-var(color, $light-theme-color);
-  }
-}
-
-@mixin use-dark-theme {
-  @if not $disable-everything {
-    @include set-var(color, $dark-theme-color);
-  }
-}
-
-@mixin border-style($position: null) {
-  $property: if(not $position, border, "border-#{$position}");
-  $var-name: if(not $position, size, border-size);
-
-  #{$property}: get-var($var-name) solid get-var(color);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(size, $size);
-    @include set-var(border-size, $border-size);
-    @include set-var(color, $color);
-    @include set-var(spacing, $spacing);
-    @include set-var(max-size, $max-size);
-
-    @if not $disable-inset {
-      @include set-var(inset, $inset);
-    }
-
-    @if not $disable-vertical {
-      @include set-var(vertical-spacing, $vertical-spacing);
-    }
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(divider, $disable-layer) {
-      @include theme.default-system-theme {
-        @include use-dark-theme;
-      }
-
-      .rmd-divider {
-        @include use-var(margin, spacing);
-        @include use-var(width, max-size);
-
-        border: get-var(size) solid get-var(color);
-        display: block;
-        flex-shrink: 0;
-
-        @if not $disable-inset {
-          &--inset {
-            @include utils.auto-rtl(margin-left, get-var(inset), auto);
-
-            width: calc(get-var(max-size) - get-var(inset));
-          }
-        }
-
-        @if not $disable-vertical {
-          &--vertical {
-            @include border-style(left);
-            @include use-var(height, max-size);
-            @include use-var(width, size);
-            @include use-var(margin, vertical-spacing);
-
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
-}

package/src/draggable/__tests__/__snapshots__/useDraggable.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useDraggable should allow for the value and dragging state to be controlled 1`] = `
-<button
-  aria-valuenow="20"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  type="button"
->
-  <span>
-    Button
-  </span>
-</button>
-`;
-
-exports[`useDraggable should work correctly for keyboard events 1`] = `
-<button
-  aria-valuenow="50"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  type="button"
->
-  <span>
-    Button
-  </span>
-</button>
-`;
-
-exports[`useDraggable should work correctly with mouse events 1`] = `
-<button
-  aria-valuenow="50"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  type="button"
->
-  <span>
-    Button
-  </span>
-</button>
-`;
-
-exports[`useDraggable should work correctly with touch event handlers 1`] = `
-<button
-  aria-valuenow="50"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  type="button"
->
-  <span>
-    Button
-  </span>
-</button>
-`;