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

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/responsive-item/styles.ts

@@ -1,58 +0,0 @@
-import { cnb } from "cnbuilder";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-responsive-item");
-
-/** @since 6.0.0 */
-export interface ResponsiveItemClassNameOptions {
-  className?: string;
-
-  /**
-   * Set this to `true` to apply the following styles:
-   * ```scss
-   * max-height: 100%;
-   * max-width: 100%;
-   * object-fit: contain;
-   * ```
-   *
-   * This is useful for displaying images in a full page dialog so that scroll
-   * bars do not appear while maintaining the correct aspect ratio for the item.
-   *
-   * @defaultValue `false`
-   */
-  scaleToContainer?: boolean;
-
-  /**
-   * Set this to `true` to force a specific aspect ratio.
-   *
-   * Note: This will only work if the parent element has applied the correct
-   * {@link ResponsiveItemContainerStyles} as well.
-   *
-   * @defaultValue `false`
-   */
-  forcedAspectRatio?: boolean;
-}
-
-/**
- * Applies the visual media responsive styles manually if you cannot use the
- * `ResponsiveItemContainer` component.
- *
- * @since 6.0.0
- */
-export function responsiveItem(
-  options: ResponsiveItemClassNameOptions = {}
-): string {
-  const {
-    className,
-    scaleToContainer = false,
-    forcedAspectRatio = false,
-  } = options;
-
-  return cnb(
-    styles({
-      scale: scaleToContainer,
-      "aspect-ratio": forcedAspectRatio,
-    }),
-    className
-  );
-}

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);
-  });
-});

package/src/searching/__tests__/fuzzy.ts

@@ -1,169 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { fuzzySearch } from "../fuzzy.js";
-
-const FRUITS = ["Apple", "Banana", "Mango", "Orange"];
-const NON_DEPRECATED_STRING_PROPERTY_NAMES = [
-  "at",
-  "charAt",
-  "charCodeAt",
-  "codePointAt",
-  "concat",
-  "constructor",
-  "endsWith",
-  "includes",
-  "indexOf",
-  "lastIndexOf",
-  "length",
-  "localeCompare",
-  "match",
-  "matchAll",
-  "normalize",
-  "padEnd",
-  "padStart",
-  "repeat",
-  "replace",
-  "replaceAll",
-  "search",
-  "slice",
-  "split",
-  "startsWith",
-  "substring",
-  "toLocaleLowerCase",
-  "toLocaleUpperCase",
-  "toLowerCase",
-  "toString",
-  "toUpperCase",
-  "trim",
-  "trimEnd",
-  "trimStart",
-  "valueOf",
-];
-
-describe("fuzzySearch", () => {
-  it("should return the list as-is if it is empty or there is no query string", () => {
-    const list1: string[] = [];
-    const list2 = ["item1", "item2"];
-
-    expect(
-      fuzzySearch({
-        list: list1,
-        query: "",
-      })
-    ).toBe(list1);
-    expect(
-      fuzzySearch({
-        list: list1,
-        query: "query",
-      })
-    ).toBe(list1);
-
-    expect(
-      fuzzySearch({
-        list: list2,
-        query: "",
-      })
-    ).toBe(list2);
-  });
-
-  it("should filter the list by ensuring that the letters just appear in order in the string", () => {
-    expect(
-      fuzzySearch({
-        list: FRUITS,
-        query: "ae",
-      })
-    ).toEqual(["Apple", "Orange"]);
-    expect(
-      fuzzySearch({
-        list: FRUITS,
-        query: "aE",
-      })
-    ).toEqual(["Apple", "Orange"]);
-
-    expect(
-      fuzzySearch({
-        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
-        query: "la",
-      })
-    ).toEqual([
-      "lastIndexOf",
-      "localeCompare",
-      "replace",
-      "replaceAll",
-      "toLocaleLowerCase",
-      "toLocaleUpperCase",
-      "toLowerCase",
-    ]);
-  });
-
-  it("should lazy-create the regexp", () => {
-    const reg = jest.spyOn(global, "RegExp");
-
-    const list = Array.from({ length: 100000 }, (_, i) => `${i} Item`);
-    fuzzySearch({ list, query: "1" });
-    expect(reg).toHaveBeenCalledTimes(1);
-  });
-
-  it("should support ignoring whitespace", () => {
-    const item1 = "Lorem ipsum";
-    const item2 = "another item";
-    const item3 = "in this string";
-    const item4 = "not interested, mate";
-    const item5 = "not in my house";
-    const list = [item1, item2, item3, item4, item5];
-
-    expect(
-      fuzzySearch({
-        list,
-        query: "ti",
-        whitespace: "ignore",
-      })
-    ).toEqual([item2, item3, item4, item5]);
-
-    expect(
-      fuzzySearch({
-        list,
-        query: "t i",
-        whitespace: "ignore",
-      })
-    ).toEqual([item2, item3, item4, item5]);
-
-    expect(
-      fuzzySearch({
-        list,
-        query: "rem",
-        whitespace: "ignore",
-      })
-    ).toEqual([item1, item2]);
-    expect(
-      fuzzySearch({
-        list,
-        query: "tem",
-        whitespace: "ignore",
-      })
-    ).toEqual([item2]);
-  });
-
-  it("should return the first match when the is set to search", () => {
-    expect(
-      fuzzySearch({
-        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
-        query: "ad",
-        type: "search",
-      })
-    ).toBe("charCodeAt");
-    expect(
-      fuzzySearch({
-        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
-        query: "add",
-        type: "search",
-      })
-    ).toBe("padEnd");
-    expect(
-      fuzzySearch({
-        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
-        query: "addition",
-        type: "search",
-      })
-    ).toBe(undefined);
-  });
-});

package/src/searching/__tests__/toSearchQuery.ts

@@ -1,21 +0,0 @@
-import { expect, describe, it } from "@jest/globals";
-import { toSearchQuery } from "../toSearchQuery.js";
-
-describe("toSearchQuery", () => {
-  it("should lowercase the string and keep whitespace by default", () => {
-    expect(toSearchQuery("")).toBe("");
-    expect(toSearchQuery("Hello, World!")).toBe("hello, world!");
-  });
-
-  it("should support ignoring whitespace by removing it all", () => {
-    expect(toSearchQuery("   Hell  o, Wor ld!    ", "ignore")).toBe(
-      "hello,world!"
-    );
-  });
-
-  it("should support removing leading and trailing whitespace by setting the whitespace to trim", () => {
-    expect(toSearchQuery("   Hell  o, Wor ld!    ", "trim")).toBe(
-      "hell  o, wor ld!"
-    );
-  });
-});