@react-md/core 1.0.0-next.8 → 1.0.0-next.9

package/src/movement/useKeyboardMovementProvider.ts

@@ -198,6 +198,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
     onFocus = noop,
     onKeyDown = noop,
     loopable = false,
+    disabled,
     searchable = false,
     horizontal = false,
     includeDisabled = false,
@@ -211,6 +212,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
     jumpToLastKeys: propJumpToLastKeys,
     getFocusableElements = defaultGetFocusableElements,
     getDefaultFocusedIndex = returnNegative1,
+    isNegativeOneAllowed = false,
   } = options;
 
   const isRTL = useDir().dir === "rtl";
@@ -273,21 +275,27 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
     }, []);
   }
 
+  let tabIndex: number | undefined;
+  if (tabIndexBehavior) {
+    tabIndex =
+      disabled || (tabIndexBehavior === "roving" && activeDescendantId)
+        ? -1
+        : 0;
+  }
+
   return {
     movementProps: {
       "aria-activedescendant":
         tabIndexBehavior === "virtual" ? activeDescendantId : undefined,
-      tabIndex:
-        tabIndexBehavior === "roving"
-          ? activeDescendantId
-            ? -1
-            : 0
-          : undefined,
+      tabIndex,
 
       // Note: This used to be on the `onFocus` event, but this causes issues in
       // Chromium browsers for drag and drop behavior
       onClick(event) {
         onClick(event);
+        if (disabled) {
+          return;
+        }
 
         // This makes it so you can click an element with a mouse and then
         // keyboard navigate from that element instead of the last keyboard focus
@@ -353,7 +361,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
         // This allows my custom `getDefaultFocusedIndex` implementations to
         // have a nice fallback without having to re-implement the "focus
         // first" behavior
-        if (defaultFocusIndex === -1) {
+        if (!isNegativeOneAllowed && defaultFocusIndex === -1) {
           if (tabIndexBehavior === "virtual") {
             // virtual keyboard navigation **must** always focus at least one element
             defaultFocusIndex = getVirtualFocusDefaultIndex({
@@ -392,6 +400,10 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
       },
       onKeyDown(event) {
         onKeyDown(event);
+        if (disabled) {
+          return;
+        }
+
         const { currentTarget } = event;
 
         const setFocusIndex = (
@@ -439,7 +451,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
         // TODO: Figure this part out. This is currently required for the tree
         // movement when the asterisk key is pressed. There might be other cases
         // as well.
-        if (currentFocusIndex.current === -1) {
+        if (!isNegativeOneAllowed && currentFocusIndex.current === -1) {
           currentFocusIndex.current = recalculateFocusIndex({
             focusables: getFocusableElements(currentTarget, programmatic),
             includeDisabled,
@@ -529,6 +541,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
     },
     movementContext,
     currentFocusIndex,
+    activeDescendantId,
     setActiveDescendantId,
   };
 }

package/src/movement/utils.ts

@@ -1,6 +1,6 @@
-import type { KeyboardEvent } from "react";
+import { type KeyboardEvent } from "react";
 import { loop } from "../utils/loop.js";
-import type { FocusableIndexOptions, TabIndexBehavior } from "./types.js";
+import { type FocusableIndexOptions, type TabIndexBehavior } from "./types.js";
 
 /**
  * @remarks \@since 6.0.0
@@ -260,3 +260,13 @@ export function isSearchableEvent(event: KeyboardEvent): boolean {
     !metaKey
   );
 }
+
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export function isTypeEvent(event: KeyboardEvent): boolean {
+  return (
+    isSearchableEvent(event) || ["Backspace", "Delete", " "].includes(event.key)
+  );
+}

package/src/positioning/__tests__/__snapshots__/useFixedPositioning.tsx.snap

@@ -85,35 +85,3 @@ exports[`useFixedPositioning should default to fixing itself with the BELOW_CENT
   </button>
 </div>
 `;
-
-exports[`useFixedPositioning should update the style correctly based on the initialX and initialY so that it can be used for context menus 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-    style="position: fixed; left: 16px; top: 0px;"
-  >
-    Some content.
-  </div>
-</div>
-`;
-
-exports[`useFixedPositioning should update the style correctly based on the initialX and initialY so that it can be used for context menus 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-    style="position: fixed; left: 30px; top: 40px;"
-  >
-    Some content.
-  </div>
-</div>
-`;

package/src/positioning/__tests__/useFixedPositioning.tsx

@@ -141,20 +141,6 @@ describe("useFixedPositioning", () => {
     expect(onResize).toHaveBeenCalled();
   });
 
-  it("should update the style correctly based on the initialX and initialY so that it can be used for context menus", () => {
-    const { container, rerender } = render(<Test />);
-    const toggle = screen.getByRole("button");
-
-    fireEvent.click(toggle);
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(container).toMatchSnapshot();
-
-    rerender(<Test initialX={30} initialY={40} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it("should correctly call the transition callbacks", () => {
     const onEnter = jest.fn();
     const onEntering = jest.fn();

package/src/positioning/useFixedPositioning.ts

@@ -380,12 +380,6 @@ export function useFixedPositioning<
     };
   }, [active, fixedTo, onResize, onScroll, ref, updateStyle]);
 
-  useEffect(() => {
-    if (!ref.current || !ref.current.hidden) {
-      updateStyle();
-    }
-  }, [ref, updateStyle]);
-
   const callbacks: Required<FixedPositioningTransitionCallbacks> = {
     onEnter(appearing) {
       onEnter(appearing);

package/src/searching/__tests__/caseInsensitive.ts

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,169 @@
+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

@@ -0,0 +1,21 @@
+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!"
+    );
+  });
+});