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

package/src/responsive-item/__tests__/__snapshots__/ResponsiveItemContainer.tsx.snap

@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResponsiveItemContainer should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<div>
-  <span
-    class="rmd-responsive-item-container rmd-responsive-item-container--auto"
-  >
-    <img
-      alt=""
-      src="/some-image.png"
-    />
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemContainer should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<div>
-  <span
-    class="rmd-responsive-item-container rmd-responsive-item-container--auto rmd-responsive-item-container--full-width"
-  >
-    <img
-      alt=""
-      src="/some-image.png"
-    />
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemContainer should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<div>
-  <span
-    class="rmd-responsive-item-container rmd-responsive-item-container--auto custom-class-name"
-    style="background-color: orange;"
-  >
-    <img
-      alt=""
-      src="/some-image.png"
-    />
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemContainer should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<div>
-  <span
-    class="rmd-responsive-item-container"
-    style=""
-  >
-    <img
-      alt=""
-      src="/some-image.png"
-    />
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemContainer should apply the correct styling, HTML attributes, and allow a ref 5`] = `
-<div>
-  <span
-    class="rmd-responsive-item-container rmd-responsive-item-container--auto rmd-responsive-item-container--auto-scale"
-    style=""
-  >
-    <img
-      alt=""
-      src="/some-image.png"
-    />
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemContainer should apply the correct styling, HTML attributes, and allow a ref 6`] = `
-<div>
-  <span
-    class="rmd-responsive-item-container rmd-responsive-item-container--auto rmd-responsive-item-container--aspect-ratio rmd-responsive-item-container--16-9"
-    style=""
-  >
-    <img
-      alt=""
-      src="/some-image.png"
-    />
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemContainer style utility function should be callable without any arguments 1`] = `"rmd-responsive-item-container rmd-responsive-item-container--auto"`;

package/src/responsive-item/__tests__/__snapshots__/ResponsiveItemOverlay.tsx.snap

@@ -1,151 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--bottom"
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--bottom"
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--bottom custom-class-name"
-    style="background-color: orange;"
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--top"
-    style=""
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 5`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--right rmd-responsive-item-overlay--horizontal"
-    style=""
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 6`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--bottom"
-    style=""
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 7`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--left rmd-responsive-item-overlay--horizontal"
-    style=""
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 8`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--middle"
-    style=""
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 9`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--center rmd-responsive-item-overlay--horizontal"
-    style=""
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay should apply the correct styling, HTML attributes, and allow a ref 10`] = `
-<div>
-  <span
-    class="rmd-responsive-item-overlay rmd-responsive-item-overlay--absolute-center rmd-responsive-item-overlay--horizontal"
-    style=""
-  >
-    <h5
-      class="rmd-typography rmd-typography--headline-5 rmd-no-margin"
-    >
-      Some description
-    </h5>
-  </span>
-</div>
-`;
-
-exports[`ResponsiveItemOverlay style utility function should be callable without any arguments 1`] = `"rmd-responsive-item-overlay rmd-responsive-item-overlay--bottom"`;

package/src/responsive-item/__tests__/__snapshots__/styles.ts.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`responsiveItem styles should return the correct class name 1`] = `"rmd-responsive-item custom-class-name"`;
-
-exports[`responsiveItem styles should return the correct class name 2`] = `"rmd-responsive-item rmd-responsive-item--scale"`;
-
-exports[`responsiveItem styles should return the correct class name 3`] = `"rmd-responsive-item rmd-responsive-item--aspect-ratio"`;
-
-exports[`responsiveItem styles should return the correct class name 4`] = `"rmd-responsive-item rmd-responsive-item--scale rmd-responsive-item--aspect-ratio custom-class-name"`;

package/src/responsive-item/__tests__/styles.ts

@@ -1,32 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { responsiveItem } from "../styles.js";
-
-describe("responsiveItem styles", () => {
-  it("should return the correct class name", () => {
-    expect(responsiveItem()).toBe("rmd-responsive-item");
-    expect(responsiveItem({})).toBe("rmd-responsive-item");
-
-    const result1 = responsiveItem({ className: "custom-class-name" });
-    const result2 = responsiveItem({ scaleToContainer: true });
-    const result3 = responsiveItem({ forcedAspectRatio: true });
-    const result4 = responsiveItem({
-      className: "custom-class-name",
-      scaleToContainer: true,
-      forcedAspectRatio: true,
-    });
-
-    expect(result1).toContain("custom-class-name");
-    expect(result1).toMatchSnapshot();
-
-    expect(result2).toContain("--scale");
-    expect(result2).toMatchSnapshot();
-
-    expect(result3).toContain("--aspect-ratio");
-    expect(result3).toMatchSnapshot();
-
-    expect(result4).toContain("--scale");
-    expect(result4).toContain("--aspect-ratio");
-    expect(result4).toContain("custom-class-name");
-    expect(result4).toMatchSnapshot();
-  });
-});

package/src/responsive-item/_responsive-item.scss

@@ -1,199 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "../utils";
-@use "../theme/theme";
-
-$disable-everything: false !default;
-$disable-item: false !default;
-$disable-scale-to-container: false !default;
-$disable-auto: false !default;
-$disable-auto-scale: false !default;
-$disable-full-width: false !default;
-$disable-overlay: false !default;
-$disable-overlay-top: false !default;
-$disable-overlay-right: false !default;
-$disable-overlay-bottom: false !default;
-$disable-overlay-left: false !default;
-$disable-overlay-middle: false !default;
-$disable-overlay-center: false !default;
-$disable-overlay-absolute-center: false !default;
-
-$background-color: rgba(#000, 0.54) !default;
-$color: theme.$dark-theme-text-primary-color !default;
-$z-index: 1 !default;
-
-$overlay-padding: 1rem !default;
-$selectors: (img ">svg" iframe video embed object) !default;
-
-$overlay-horizontal-width: 30% !default;
-
-$aspect-ratios: (
-  "16-9": 16 9,
-  "4-3": 4 3,
-  "1-1": 1 1,
-) !default;
-
-$disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
-
-@mixin forced-aspect-ratio {
-  height: 100%;
-  inset: 0;
-  position: absolute;
-  width: 100%;
-}
-
-@mixin responsive-item {
-  height: auto;
-  width: 100%;
-}
-
-@mixin scale-to-container {
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-}
-
-@mixin aspect-ratio($width, $height) {
-  padding-bottom: math.percentage(math.div($height, $width));
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(responsive-item, $disable-layer) {
-      @if not $disable-item {
-        .rmd-responsive-item {
-          @include responsive-item;
-
-          @if not $disable-scale-to-container {
-            &--scale {
-              @include scale-to-container;
-            }
-          }
-
-          @if not $disable-aspect-ratios {
-            &--aspect-ratio {
-              @include forced-aspect-ratio;
-            }
-          }
-        }
-      }
-
-      .rmd-responsive-item-container {
-        display: inline-block;
-        position: relative;
-
-        @if not $disable-auto {
-          &--auto {
-            @each $selector in $selectors {
-              #{$selector} {
-                @include responsive-item;
-              }
-            }
-          }
-
-          @if not $disable-auto-scale {
-            &--auto-scale {
-              @each $selector in $selectors {
-                #{$selector} {
-                  @include scale-to-container;
-                }
-              }
-            }
-          }
-        }
-
-        @if not $disable-full-width {
-          &--full-width {
-            display: block;
-            width: 100%;
-          }
-        }
-
-        @if not $disable-aspect-ratios {
-          &--aspect-ratio {
-            display: block;
-            height: 0;
-            overflow: hidden;
-            padding: 0;
-
-            @each $selector in $selectors {
-              #{$selector} {
-                @include forced-aspect-ratio;
-              }
-            }
-          }
-
-          @each $suffix, $ratio-list in $aspect-ratios {
-            &--#{$suffix} {
-              @include aspect-ratio(
-                list.nth($ratio-list, 1),
-                list.nth($ratio-list, 2)
-              );
-            }
-          }
-        }
-      }
-
-      @if not $disable-overlay {
-        .rmd-responsive-item-overlay {
-          background-color: $background-color;
-          color: $color;
-          padding: $overlay-padding;
-          position: absolute;
-          z-index: 0;
-
-          @if not $disable-overlay-top {
-            &--top {
-              inset: 0 0 auto;
-            }
-          }
-
-          @if not $disable-overlay-bottom {
-            &--bottom {
-              inset: auto 0 0;
-            }
-          }
-
-          &--horizontal {
-            inset: 0 auto;
-            width: $overlay-horizontal-width;
-          }
-
-          @if not $disable-overlay-left {
-            &--left {
-              @include utils.auto-rtl(left, 0);
-            }
-          }
-
-          @if not $disable-overlay-right {
-            &--right {
-              @include utils.auto-rtl(right, 0);
-            }
-          }
-
-          @if not $disable-overlay-middle {
-            &--middle {
-              inset: auto 0 50%;
-              transform: translate3d(0, 50%, 0);
-            }
-          }
-
-          @if not $disable-overlay-center {
-            &--center {
-              inset: 0 50% 0 auto;
-              transform: translate3d(50%, 0, 0);
-            }
-          }
-
-          @if not $disable-overlay-absolute-center {
-            &--absolute-center {
-              inset: auto 50% 50% auto;
-              transform: translate3d(50%, 50%, 0);
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/searching/__tests__/caseInsensitive.ts

@@ -1,165 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { caseInsensitiveSearch } from "../caseInsensitive.js";
-
-const FRUITS = ["Apple", "Banana", "Mango", "Orange"];
-
-describe("caseInsensitiveSearch", () => {
-  it("should return the list if it is empty or there is no query string", () => {
-    const list1: string[] = [];
-    const list2 = ["item1", "item2"];
-
-    expect(caseInsensitiveSearch({ query: "", list: list1 })).toBe(list1);
-    expect(caseInsensitiveSearch({ query: "", list: list2 })).toBe(list2);
-
-    expect(caseInsensitiveSearch({ query: "string", list: list1 })).toBe(list1);
-  });
-
-  it("should filter out all items that do not contain the query string ignoring case", () => {
-    const expected1 = ["Apple"];
-    expect(caseInsensitiveSearch({ query: "ap", list: FRUITS })).toEqual(
-      expected1
-    );
-    expect(caseInsensitiveSearch({ query: "aP", list: FRUITS })).toEqual(
-      expected1
-    );
-    expect(caseInsensitiveSearch({ query: "AP", list: FRUITS })).toEqual(
-      expected1
-    );
-
-    const expected2 = ["Banana", "Mango", "Orange"];
-    expect(caseInsensitiveSearch({ query: "an", list: FRUITS })).toEqual(
-      expected2
-    );
-    expect(caseInsensitiveSearch({ query: "AN", list: FRUITS })).toEqual(
-      expected2
-    );
-    expect(caseInsensitiveSearch({ query: "aN", list: FRUITS })).toEqual(
-      expected2
-    );
-  });
-
-  it("should allow for filtering by matches that start with the query string instead of contain only", () => {
-    expect(
-      caseInsensitiveSearch({
-        query: "ap",
-        list: FRUITS,
-        startsWith: true,
-      })
-    ).toEqual(["Apple"]);
-    expect(
-      caseInsensitiveSearch({
-        query: "an",
-        list: FRUITS,
-        startsWith: true,
-      })
-    ).toEqual([]);
-
-    const list = ["Item 1", "This is Item 1"];
-    expect(
-      caseInsensitiveSearch({
-        query: "item",
-        list,
-        startsWith: true,
-      })
-    ).toEqual(["Item 1"]);
-  });
-
-  it("should work on objects", () => {
-    const apple = { name: "Apple", value: 0 };
-    const banana = { name: "Banana", value: 1 };
-    const mango = { name: "Mango", value: 2 };
-    const orange = { name: "Orange", value: 3 };
-    const list = [apple, banana, mango, orange];
-
-    expect(
-      caseInsensitiveSearch({
-        query: "ap",
-        list,
-        extractor: (item) => item.name,
-      })
-    ).toEqual([apple]);
-    expect(
-      caseInsensitiveSearch({
-        query: "2",
-        list,
-        extractor: (item) => `${item.value}`,
-      })
-    ).toEqual([mango]);
-
-    expect(
-      caseInsensitiveSearch({
-        query: "an",
-        list,
-        extractor: (item) => item.name,
-      })
-    ).toEqual([banana, mango, orange]);
-  });
-
-  it("should allow whitespace to be trimmed", () => {
-    expect(
-      caseInsensitiveSearch({
-        list: FRUITS,
-        query: "   app",
-        whitespace: "trim",
-      })
-    ).toEqual(["Apple"]);
-    expect(
-      caseInsensitiveSearch({
-        list: FRUITS,
-        query: "   app   ",
-        whitespace: "trim",
-      })
-    ).toEqual(["Apple"]);
-  });
-
-  it("should throw an error if an extractor is not provided for a non-string list", () => {
-    expect(() =>
-      // @ts-expect-error
-      caseInsensitiveSearch({ query: "q", list: [0, 1, 2] })
-    ).toThrow(
-      "A `TextExtractor` must be provided to `caseInsensitiveSearch` for lists that do not contain strings"
-    );
-
-    expect(() =>
-      // @ts-expect-error
-      caseInsensitiveSearch({ query: "q", list: [null, undefined] })
-    ).toThrow(
-      "A `TextExtractor` must be provided to `caseInsensitiveSearch` for lists that do not contain strings"
-    );
-
-    expect(() =>
-      // @ts-expect-error
-      caseInsensitiveSearch({ query: "q", list: [{ name: "Qwerty" }] })
-    ).toThrow(
-      "A `TextExtractor` must be provided to `caseInsensitiveSearch` for lists that do not contain strings"
-    );
-  });
-
-  it("should find the first match when the type is set to search", () => {
-    const fruits = ["Banana", "Grape", "Apple", "Orange"];
-    expect(
-      caseInsensitiveSearch({
-        list: fruits,
-        query: "ap",
-        type: "search",
-      })
-    ).toBe("Grape");
-
-    expect(
-      caseInsensitiveSearch({
-        list: fruits,
-        query: "ap",
-        type: "search",
-        startsWith: true,
-      })
-    ).toBe("Apple");
-
-    expect(
-      caseInsensitiveSearch({
-        list: [],
-        query: "",
-        type: "search",
-      })
-    ).toBe(undefined);
-  });
-});