@navikt/ds-react 5.15.0 → 5.16.0

package/src/util/hooks/descendants/descendant.ts

@@ -0,0 +1,161 @@
+/**
+ * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+import { getNextIndex, getPrevIndex, isElement, sortNodes } from "./utils";
+
+export type DescendantOptions<T = object> = T & {
+  /**
+   * If `true`, the item will be registered in all nodes map
+   * but omitted from enabled nodes map
+   */
+  disabled?: boolean;
+};
+
+export type Descendant<T, K> = DescendantOptions<K> & {
+  /**
+   * DOM element of the item
+   */
+  node: T;
+  /**
+   * index of item in all nodes map and enabled nodes map
+   */
+  index: number;
+};
+
+/**
+ * @internal
+ *
+ * Class to manage descendants and their relative indices in the DOM.
+ * It uses `node.compareDocumentPosition(...)` under the hood
+ */
+export class DescendantsManager<
+  T extends HTMLElement,
+  K extends Record<string, any> = object,
+> {
+  private descendants = new Map<T, Descendant<T, K>>();
+
+  register = (nodeOrOptions: T | null | DescendantOptions<K>) => {
+    if (nodeOrOptions == null) return;
+
+    if (isElement(nodeOrOptions)) {
+      return this.registerNode(nodeOrOptions);
+    }
+
+    return (node: T | null) => {
+      this.registerNode(node, nodeOrOptions);
+    };
+  };
+
+  unregister = (node: T) => {
+    this.descendants.delete(node);
+    const sorted = sortNodes(Array.from(this.descendants.keys()));
+    this.assignIndex(sorted);
+  };
+
+  destroy = () => {
+    this.descendants.clear();
+  };
+
+  private assignIndex = (descendants: Node[]) => {
+    this.descendants.forEach((descendant) => {
+      const index = descendants.indexOf(descendant.node);
+      descendant.index = index;
+      descendant.node.dataset["index"] = descendant.index.toString();
+    });
+  };
+
+  count = () => this.descendants.size;
+
+  enabledCount = () => this.enabledValues().length;
+
+  values = () => {
+    const values = Array.from(this.descendants.values());
+    return values.sort((a, b) => a.index - b.index);
+  };
+
+  enabledValues = () => {
+    return this.values().filter((descendant) => !descendant.disabled);
+  };
+
+  item = (index: number) => {
+    if (this.count() === 0) return undefined;
+    return this.values()[index];
+  };
+
+  enabledItem = (index: number) => {
+    if (this.enabledCount() === 0) return undefined;
+    return this.enabledValues()[index];
+  };
+
+  first = () => this.item(0);
+
+  firstEnabled = () => this.enabledItem(0);
+
+  last = () => this.item(this.descendants.size - 1);
+
+  lastEnabled = () => {
+    const lastIndex = this.enabledValues().length - 1;
+    return this.enabledItem(lastIndex);
+  };
+
+  indexOf = (node: T | null) => {
+    if (!node) return -1;
+    return this.descendants.get(node)?.index ?? -1;
+  };
+
+  enabledIndexOf = (node: T | null) => {
+    if (node == null) return -1;
+    return this.enabledValues().findIndex((i) => i.node.isSameNode(node));
+  };
+
+  next = (index: number, loop = true) => {
+    const next = getNextIndex(index, this.count(), loop);
+    return this.item(next);
+  };
+
+  nextEnabled = (index: number, loop = true) => {
+    const item = this.item(index);
+    if (!item) return;
+    const enabledIndex = this.enabledIndexOf(item.node);
+    const nextEnabledIndex = getNextIndex(
+      enabledIndex,
+      this.enabledCount(),
+      loop,
+    );
+    return this.enabledItem(nextEnabledIndex);
+  };
+
+  prev = (index: number, loop = true) => {
+    const prev = getPrevIndex(index, this.count() - 1, loop);
+    return this.item(prev);
+  };
+
+  prevEnabled = (index: number, loop = true) => {
+    const item = this.item(index);
+    if (!item) return;
+    const enabledIndex = this.enabledIndexOf(item.node);
+    const prevEnabledIndex = getPrevIndex(
+      enabledIndex,
+      this.enabledCount() - 1,
+      loop,
+    );
+    return this.enabledItem(prevEnabledIndex);
+  };
+
+  private registerNode = (node: T | null, options?: DescendantOptions<K>) => {
+    if (!node || this.descendants.has(node)) return;
+
+    const keys = Array.from(this.descendants.keys()).concat(node);
+    const sorted = sortNodes(keys);
+
+    if (options?.disabled) {
+      options.disabled = !!options.disabled;
+    }
+
+    const descendant = { node, index: -1, ...options };
+
+    this.descendants.set(node, descendant as Descendant<T, K>);
+
+    this.assignIndex(sorted);
+  };
+}

package/src/util/hooks/descendants/useDescendant.tsx

@@ -0,0 +1,111 @@
+/**
+ * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+import React, { useRef, useState } from "react";
+import { createContext } from "../../create-context";
+import { useClientLayoutEffect } from "../useClientLayoutEffect";
+import { mergeRefs } from "../useMergeRefs";
+import { DescendantOptions, DescendantsManager } from "./descendant";
+import { cast } from "./utils";
+
+/**
+ * @internal
+ * Initializing DescendantsManager
+ */
+function useDescendants<
+  T extends HTMLElement = HTMLElement,
+  K extends Record<string, any> = object,
+>() {
+  const descendants = useRef(new DescendantsManager<T, K>()).current;
+  useClientLayoutEffect(() => {
+    return () => {
+      descendants.destroy();
+    };
+  });
+
+  return descendants;
+}
+
+const [DescendantsContextProvider, useDescendantsContext] = createContext<
+  ReturnType<typeof useDescendants>
+>({
+  name: "DescendantsProvider",
+  errorMessage: "useDescendantsContext must be used within DescendantsProvider",
+});
+
+/**
+ * @internal
+ * This hook provides information to descendant component:
+ * - Index compared to other descendants
+ * - ref callback to register the descendant
+ * - Its enabled index compared to other enabled descendants
+ */
+function useDescendant<
+  T extends HTMLElement = HTMLElement,
+  K extends Record<string, any> = object,
+>(options?: DescendantOptions<K>) {
+  const descendants = useDescendantsContext();
+  const [index, setIndex] = useState(-1);
+  const ref = useRef<T>(null);
+
+  useClientLayoutEffect(() => {
+    return () => {
+      if (!ref.current) return;
+      descendants.unregister(ref.current);
+    };
+  }, []);
+
+  useClientLayoutEffect(() => {
+    if (!ref.current) return;
+    const dataIndex = Number(ref.current.dataset["index"]);
+    if (index != dataIndex && !Number.isNaN(dataIndex)) {
+      setIndex(dataIndex);
+    }
+  });
+
+  const refCallback = options
+    ? cast<React.RefCallback<T>>(descendants.register(options))
+    : cast<React.RefCallback<T>>(descendants.register);
+
+  return {
+    descendants,
+    index,
+    enabledIndex: descendants.enabledIndexOf(ref.current),
+    register: mergeRefs([refCallback, ref]),
+  };
+}
+
+/**
+ * Provides strongly typed versions of the context provider and hooks above.
+ */
+export function createDescendantContext<
+  T extends HTMLElement = HTMLElement,
+  K extends Record<string, any> = object,
+>() {
+  const ContextProvider = cast<React.Provider<DescendantsManager<T, K>>>(
+    (props) => (
+      <DescendantsContextProvider {...props.value}>
+        {props.children}
+      </DescendantsContextProvider>
+    ),
+  );
+
+  const _useDescendantsContext = () =>
+    cast<DescendantsManager<T, K>>(useDescendantsContext());
+
+  const _useDescendant = (options?: DescendantOptions<K>) =>
+    useDescendant<T, K>(options);
+
+  const _useDescendants = () => useDescendants<T, K>();
+
+  return [
+    // context provider
+    ContextProvider,
+    // call this when you need to read from context
+    _useDescendantsContext,
+    // descendants state information, to be called and passed to `ContextProvider`
+    _useDescendants,
+    // descendant index information
+    _useDescendant,
+  ] as const;
+}

package/src/util/hooks/descendants/utils.ts

@@ -0,0 +1,56 @@
+/**
+ * Sort an array of DOM nodes according to the HTML tree order
+ * @see http://www.w3.org/TR/html5/infrastructure.html#tree-order
+ * Inspired by
+ * - https://github.com/floating-ui/floating-ui/blob/8e449abb0bfda143c6a6eb01d3e6943c095b744f/packages/react/src/components/FloatingList.tsx#L8
+ * - https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+export function sortNodes(nodes: Node[]) {
+  return nodes.sort((a, b) => {
+    const compare = a.compareDocumentPosition(b);
+
+    if (
+      compare & Node.DOCUMENT_POSITION_FOLLOWING ||
+      compare & Node.DOCUMENT_POSITION_CONTAINED_BY
+    ) {
+      // a < b
+      return -1;
+    }
+
+    if (
+      compare & Node.DOCUMENT_POSITION_PRECEDING ||
+      compare & Node.DOCUMENT_POSITION_CONTAINS
+    ) {
+      // a > b
+      return 1;
+    }
+
+    if (
+      compare & Node.DOCUMENT_POSITION_DISCONNECTED ||
+      compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
+    ) {
+      throw Error("Cannot sort the given nodes.");
+    } else {
+      return 0;
+    }
+  });
+}
+
+export const isElement = (el: any): el is HTMLElement =>
+  typeof el == "object" &&
+  "nodeType" in el &&
+  el.nodeType === Node.ELEMENT_NODE;
+
+export function getNextIndex(current: number, max: number, loop: boolean) {
+  let next = current + 1;
+  if (loop && next >= max) next = 0;
+  return next;
+}
+
+export function getPrevIndex(current: number, max: number, loop: boolean) {
+  let next = current - 1;
+  if (loop && next < 0) next = max;
+  return next;
+}
+
+export const cast = <T>(value: any) => value as T;