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

package/src/searching/utils.ts

@@ -0,0 +1,53 @@
+import { type TextExtractor } from "../types.js";
+import { toSearchQuery } from "./toSearchQuery.js";
+import { type BaseSearchOptions } from "./types.js";
+
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export const defaultExtractor =
+  <T>(name: string) =>
+  (item: T): string => {
+    if (typeof item === "string") {
+      return item;
+    }
+
+    throw new Error(
+      `A \`TextExtractor\` must be provided to \`${name}\` for lists that do not contain strings`
+    );
+  };
+
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export interface SearchOptions<T> extends BaseSearchOptions<T> {
+  type: "search" | "filter";
+  filter(query: string, value: string): boolean;
+  extractor: TextExtractor<T>;
+}
+
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export function search<T>(
+  options: SearchOptions<T>
+): readonly T[] | T | undefined {
+  const { list, type, query, filter, extractor, whitespace = "keep" } = options;
+  const fallback = type === "search" ? undefined : list;
+  if (!list.length) {
+    return fallback;
+  }
+
+  const q = toSearchQuery(query, whitespace);
+  if (!q) {
+    return fallback;
+  }
+
+  const fn = type === "search" ? "find" : "filter";
+  return list[fn]((item) =>
+    filter(q, toSearchQuery(extractor(item), whitespace))
+  );
+}

package/src/segmented-button/_segmented-button.scss

@@ -59,29 +59,33 @@ $selected-background-color: theme.get-default-color(
 
 $typography-styles: typography.$button-styles !default;
 
-$var-lookup: (
-  outline-width: (
-    var: --rmd-segmented-button-outline-width,
-    value: $outline-width,
-  ),
-  outline-color: (
-    var: --rmd-segmented-button-outline-color,
-    value: $outline-color,
-  ),
-  color: (
-    var: --rmd-segmented-button-color,
-    value: currentcolor,
-  ),
-  selected-background-color: (
-    var: --rmd-segmented-button-selected-background-color,
-    value: $selected-background-color,
-  ),
-  selected-color: (
-    var: --rmd-segmented-button-selected-color,
-    value: $selected-color,
-  ),
+$variables: (
+  outline-width,
+  outline-color,
+  color,
+  selected-background-color,
+  selected-color
 );
 
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "segmented-button");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  @if $value {
+    #{utils.get-var-name($variables, $name, "segmented-button")}: #{$value};
+  }
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
 @mixin use-light-theme {
   @if not $disable-everything {
     @if $light-theme-outline-color != $dark-theme-outline-color {
@@ -124,90 +128,80 @@ $var-lookup: (
   }
 }
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "segmented button var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(outline-width, $outline-width);
+    @include set-var(outline-color, $outline-color);
+    @include set-var(color, currentcolor);
+    @include set-var(selected-background-color, $selected-background-color);
+    @include set-var(selected-color, $selected-color);
   }
-
-  @return var(#{$var});
 }
 
-@mixin set-var($name, $value) {
-  $var: map.get(
-    utils.validate($var-lookup, $name, "segmented button var"),
-    var
-  );
-
-  #{$var}: #{$value};
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-segmented-button-container {
-      display: grid;
-      grid-auto-columns: 1fr;
-      grid-auto-flow: column;
-
-      &--full-width {
-        width: 100%;
-      }
-    }
-
-    .rmd-segmented-button {
-      @include theme.theme-use-var(color, text-primary-color);
-      @include icon.set-var(color, currentcolor);
-      @include icon.set-var(size, 1.125rem);
-      @include utils.map-to-styles($typography-styles);
-
-      align-items: center;
-      background-color: transparent;
-      border: 0;
-      box-shadow: inset 0 0 0 get-var(outline-width) get-var(outline-color);
-      display: inline-flex;
-      gap: $gap;
-      justify-content: center;
-      min-height: $min-height;
-      min-width: $min-width;
-      padding: $vertical-padding $horizontal-padding;
-
-      &:first-child {
-        @include utils.rtl {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: $border-radius;
-          border-top-left-radius: 0;
-          border-top-right-radius: $border-radius;
+    @include utils.optional-layer(segmented-button, $disable-layer) {
+      .rmd-segmented-button-container {
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+
+        &--full-width {
+          width: 100%;
         }
-
-        border-bottom-left-radius: $border-radius;
-        border-top-left-radius: $border-radius;
       }
 
-      &:last-child {
-        @include utils.rtl {
+      .rmd-segmented-button {
+        @include theme.theme-use-var(color, text-primary-color);
+        @include icon.set-var(color, currentcolor);
+        @include icon.set-var(size, 1.125rem);
+        @include utils.map-to-styles($typography-styles);
+
+        align-items: center;
+        background-color: transparent;
+        border: 0;
+        box-shadow: inset 0 0 0 get-var(outline-width) get-var(outline-color);
+        display: inline-flex;
+        gap: $gap;
+        justify-content: center;
+        min-height: $min-height;
+        min-width: $min-width;
+        padding: $vertical-padding $horizontal-padding;
+
+        &:first-child {
+          @include utils.rtl {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: $border-radius;
+            border-top-left-radius: 0;
+            border-top-right-radius: $border-radius;
+          }
+
           border-bottom-left-radius: $border-radius;
-          border-bottom-right-radius: 0;
           border-top-left-radius: $border-radius;
-          border-top-right-radius: 0;
         }
 
-        border-bottom-right-radius: $border-radius;
-        border-top-right-radius: $border-radius;
-      }
+        &:last-child {
+          @include utils.rtl {
+            border-bottom-left-radius: $border-radius;
+            border-bottom-right-radius: 0;
+            border-top-left-radius: $border-radius;
+            border-top-right-radius: 0;
+          }
+
+          border-bottom-right-radius: $border-radius;
+          border-top-right-radius: $border-radius;
+        }
 
-      &--selected {
-        @if not $disable-selected-icon {
-          @include transition.transition-set-var(max-width, icon.get-var(size));
+        &--selected {
+          @if not $disable-selected-icon {
+            @include transition.transition-set-var(
+              max-width,
+              icon.get-var(size)
+            );
+          }
+          @include use-var(background-color, selected-background-color);
+          @include use-var(color, selected-color);
         }
-        @include use-var(background-color, selected-background-color);
-        @include use-var(color, selected-color);
       }
     }
   }

package/src/sheet/_sheet.scss

@@ -30,175 +30,159 @@ $touch-max-height: calc(100% - #{$touch-margin}) !default;
 $recommended-min-height: 3.5rem !default;
 $recommended-max-height: 50% !default;
 
-$var-lookup: (
-  height: (
-    var: --rmd-sheet-height,
-    value: null,
-  ),
-  width: (
-    var: --rmd-sheet-width,
-    value: null,
-  ),
-  max-height: (
-    var: --rmd-sheet-max-height,
-    value: null,
-  ),
-  touch-width: (
-    var: --rmd-sheet-touch-width,
-    value: $touch-width,
-  ),
-  touch-max-height: (
-    var: --rmd-sheet-touch-max-height,
-    value: $touch-max-height,
-  ),
-  static-width: (
-    var: --rmd-sheet-static-width,
-    value: $static-width,
-  ),
-  transform-offscreen: (
-    var: --rmd-sheet-transform-offscreen,
-    value: null,
-  ),
-  z-index: (
-    var: --rmd-sheet-z-index,
-    value: $z-index,
-  ),
+$variables: (
+  height,
+  width,
+  max-height,
+  touch-width,
+  touch-max-height,
+  static-width,
+  transform-offscreen,
+  z-index
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "sheet 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, "sheet");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "sheet var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "sheet")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-sheet {
-      @include box-shadows.box-shadow($elevation);
-      @include use-var(height);
-      @include use-var(max-height);
-      @include use-var(width);
-      @include use-var(z-index);
-
-      overflow: auto;
-      position: fixed;
+    @include set-var(touch-width, $touch-width);
+    @include set-var(touch-max-height, $touch-max-height);
+    @include set-var(static-width, $static-width);
+    @include set-var(z-index, $z-index);
+  }
+}
 
-      @if not $disable-position-left or not $disable-position-right {
-        &--horizontal {
-          bottom: 0;
-          top: 0;
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(sheet, $disable-layer) {
+      .rmd-sheet {
+        @include box-shadows.box-shadow($elevation);
+        @include use-var(height);
+        @include use-var(max-height);
+        @include use-var(width);
+        @include use-var(z-index);
+
+        overflow: auto;
+        position: fixed;
+
+        @if not $disable-position-left or not $disable-position-right {
+          &--horizontal {
+            bottom: 0;
+            top: 0;
+          }
         }
-      }
 
-      @if not $disable-position-bottom or not $disable-position-top {
-        &--vertical {
-          left: 0;
-          right: 0;
+        @if not $disable-position-bottom or not $disable-position-top {
+          &--vertical {
+            left: 0;
+            right: 0;
+          }
         }
-      }
 
-      &--raised {
-        @include set-var(z-index, $raised-z-index);
-        @include box-shadows.box-shadow($raised-elevation);
-      }
+        &--raised {
+          @include set-var(z-index, $raised-z-index);
+          @include box-shadows.box-shadow($raised-elevation);
+        }
 
-      @if not $disable-position-left {
-        &--left {
-          @include utils.auto-rtl(left, 0) {
-            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+        @if not $disable-position-left {
+          &--left {
+            @include utils.auto-rtl(left, 0) {
+              @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+            }
+            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
           }
-          @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
         }
-      }
 
-      @if not $disable-position-right {
-        &--right {
-          @include utils.auto-rtl(right, 0) {
-            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+        @if not $disable-position-right {
+          &--right {
+            @include utils.auto-rtl(right, 0) {
+              @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+            }
+            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
           }
-          @include set-var(transform-offscreen, translate3d(100%, 0, 0));
         }
-      }
 
-      @if not $disable-position-bottom {
-        &--bottom {
-          @include set-var(transform-offscreen, translate3d(0, 100%, 0));
+        @if not $disable-position-bottom {
+          &--bottom {
+            @include set-var(transform-offscreen, translate3d(0, 100%, 0));
 
-          bottom: 0;
+            bottom: 0;
+          }
         }
-      }
 
-      @if not $disable-position-top {
-        &--top {
-          @include set-var(transform-offscreen, translate3d(0, -100%, 0));
+        @if not $disable-position-top {
+          &--top {
+            @include set-var(transform-offscreen, translate3d(0, -100%, 0));
 
-          top: 0;
+            top: 0;
+          }
         }
-      }
-
-      &--touch-width {
-        @include set-var(width, get-var(touch-width));
-      }
 
-      &--static-width {
-        @include set-var(width, get-var(static-width));
-      }
+        &--touch-width {
+          @include set-var(width, get-var(touch-width));
+        }
 
-      &--media-width {
-        @include media-queries.tablet-media {
+        &--static-width {
           @include set-var(width, get-var(static-width));
         }
 
-        @include set-var(width, get-var(touch-width));
-      }
+        &--media-width {
+          @include media-queries.tablet-media {
+            @include set-var(width, get-var(static-width));
+          }
 
-      &--viewport-height {
-        @include set-var(max-height, $max-height);
-      }
+          @include set-var(width, get-var(touch-width));
+        }
 
-      &--touchable-height {
-        @include set-var(max-height, get-var(touch-max-height));
-      }
+        &--viewport-height {
+          @include set-var(max-height, $max-height);
+        }
 
-      &--recommended-height {
-        max-height: $recommended-max-height;
-        min-height: $recommended-min-height;
-      }
+        &--touchable-height {
+          @include set-var(max-height, get-var(touch-max-height));
+        }
 
-      &--offscreen {
-        @include use-var(transform, transform-offscreen);
-      }
+        &--recommended-height {
+          max-height: $recommended-max-height;
+          min-height: $recommended-min-height;
+        }
 
-      &--hidden {
-        box-shadow: none;
-      }
+        &--offscreen {
+          @include use-var(transform, transform-offscreen);
+        }
 
-      &--visible {
-        transform: translate3d(0, 0, 0);
-      }
+        &--hidden {
+          box-shadow: none;
+        }
 
-      &--enter {
-        transition: transform $enter-duration $enter-timing-function;
-      }
+        &--visible {
+          transform: translate3d(0, 0, 0);
+        }
 
-      &--exit {
-        transition: transform $leave-duration $leave-timing-function;
+        &--enter {
+          transition: transform $enter-duration $enter-timing-function;
+        }
+
+        &--exit {
+          transition: transform $leave-duration $leave-timing-function;
+        }
       }
     }
   }

package/src/sheet/styles.ts

@@ -12,16 +12,15 @@ export type SheetPosition = "top" | "right" | "bottom" | "left";
  * The size to use for sheets that have been positioned left or right. The
  * default supported values are:
  *
- * - none - the size is based on content, but is still limited to the viewport
- *   width so that the horizontal scrolling will not occur within the page. No
- *   limits added to sizing.
- * - touch - the `min-width` is set to be the entire viewport width minus a
- *   touchable area and `max-width` is set to `20rem` and is normally
- *   recommended for mobile devices.
- * - static - the width is set to a static `16rem` and generally used for
+ * - `"none"` - the size is based on content, but is still limited to the
+ *   viewport width so that the horizontal scrolling will not occur within the
+ *   page. No limits added to sizing.
+ * - `"touch"` - the `width` is set to be the entire viewport width minus a
+ *   touchable area and is normally recommended for mobile devices.
+ * - `"static"` - the `width` is set to a static `16rem` and generally used for
  *   landscape tablets and desktops.
- * - media - automatically switches between "touch" and "static" based on css
- *   media queries. (this is the default)
+ * - `"media"` - automatically switches between "touch" and "static" based on
+ *   css media queries. (this is the default)
  */
 export type SheetHorizontalSize = "none" | "media" | "touch" | "static";
 
@@ -29,12 +28,12 @@ export type SheetHorizontalSize = "none" | "media" | "touch" | "static";
  * The size to use for sheets that have been positioned top or bottom. The
  * supported sizes are:
  *
- * - none - the size is based on content and is limited to the viewport
- *   height.
- * - touch - the size is based on content and is limited to the viewport
- *   height with a touchable area to close the sheet.
- * - recommended - the material design recommended sizing that forces a
- *   max-height of 50vh and min-height of 3.5rem
+ * - `"none"` - the size is based on content and is limited to the viewport
+ *   height
+ * - `"touch"` - the size is based on content and is limited to the viewport
+ *   height minus a small touchable area
+ * - `"recommended"` - the material design recommended sizing that forces a
+ *   `max-height` of 50vh and `min-height` of 3.5rem
  */
 export type SheetVerticalSize = "none" | "touch" | "recommended";
 

package/src/snackbar/DefaultToastRenderer.tsx

@@ -61,7 +61,7 @@ export function DefaultToastRenderer(props: ToastRendererProps): ReactElement {
   } = props;
   const {
     closeButtonProps,
-    closeButton = !!closeButtonProps,
+    closeButton = !!closeButtonProps || !!remaining.closeButtonProps,
     onEntered: defaultEntered = noop,
     onExited: defaultExited = noop,
     onMouseEnter: defaultMouseEnter = noop,