@navikt/ds-react 5.15.1 → 6.0.0-alpha.1

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;

package/cjs/accordion/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/accordion/index.js",
-  "types": "../../esm/accordion/index.d.ts"
-}

package/cjs/alert/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/alert/index.js",
-  "types": "../../esm/alert/index.d.ts"
-}

package/cjs/button/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/button/index.js",
-  "types": "../../esm/button/index.d.ts"
-}

package/cjs/chat/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/chat/index.js",
-  "types": "../../esm/chat/index.d.ts"
-}

package/cjs/chips/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/chips/index.js",
-  "types": "../../esm/chips/index.d.ts"
-}

package/cjs/copybutton/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/copybutton/index.js",
-  "types": "../../esm/copybutton/index.d.ts"
-}

package/cjs/date/context/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/date/context/index.js",
-  "types": "../../../esm/date/context/index.d.ts"
-}

package/cjs/date/hooks/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/date/hooks/index.js",
-  "types": "../../../esm/date/hooks/index.d.ts"
-}

package/cjs/date/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/date/index.js",
-  "types": "../../esm/date/index.d.ts"
-}

package/cjs/date/utils/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/date/utils/index.js",
-  "types": "../../../esm/date/utils/index.d.ts"
-}

package/cjs/dropdown/Menu/GroupedList/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../../esm/dropdown/Menu/GroupedList/index.js",
-  "types": "../../../../esm/dropdown/Menu/GroupedList/index.d.ts"
-}

package/cjs/dropdown/Menu/List/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../../esm/dropdown/Menu/List/index.js",
-  "types": "../../../../esm/dropdown/Menu/List/index.d.ts"
-}

package/cjs/dropdown/Menu/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/dropdown/Menu/index.js",
-  "types": "../../../esm/dropdown/Menu/index.d.ts"
-}

package/cjs/dropdown/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/dropdown/index.js",
-  "types": "../../esm/dropdown/index.d.ts"
-}

package/cjs/expansion-card/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/expansion-card/index.js",
-  "types": "../../esm/expansion-card/index.d.ts"
-}

package/cjs/form/Fieldset/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/form/Fieldset/index.js",
-  "types": "../../../esm/form/Fieldset/index.d.ts"
-}

package/cjs/form/checkbox/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/form/checkbox/index.js",
-  "types": "../../../esm/form/checkbox/index.d.ts"
-}

package/cjs/form/combobox/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/form/combobox/index.js",
-  "types": "../../../esm/form/combobox/index.d.ts"
-}

package/cjs/form/error-summary/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/form/error-summary/index.js",
-  "types": "../../../esm/form/error-summary/index.d.ts"
-}

package/cjs/form/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/form/index.js",
-  "types": "../../esm/form/index.d.ts"
-}

package/cjs/form/radio/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/form/radio/index.js",
-  "types": "../../../esm/form/radio/index.d.ts"
-}

package/cjs/form/search/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/form/search/index.js",
-  "types": "../../../esm/form/search/index.d.ts"
-}

package/cjs/grid/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/grid/index.js",
-  "types": "../../esm/grid/index.d.ts"
-}

package/cjs/guide-panel/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/guide-panel/index.js",
-  "types": "../../esm/guide-panel/index.d.ts"
-}

package/cjs/help-text/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/help-text/index.js",
-  "types": "../../esm/help-text/index.d.ts"
-}

package/cjs/internal-header/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/internal-header/index.js",
-  "types": "../../esm/internal-header/index.d.ts"
-}

package/cjs/layout/bleed/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/layout/bleed/index.js",
-  "types": "../../../esm/layout/bleed/index.d.ts"
-}

package/cjs/layout/box/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/layout/box/index.js",
-  "types": "../../../esm/layout/box/index.d.ts"
-}

package/cjs/layout/content-container/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/layout/content-container/index.js",
-  "types": "../../../esm/layout/content-container/index.d.ts"
-}

package/cjs/layout/grid/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/layout/grid/index.js",
-  "types": "../../../esm/layout/grid/index.d.ts"
-}

package/cjs/layout/page/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/layout/page/index.js",
-  "types": "../../../esm/layout/page/index.d.ts"
-}

package/cjs/layout/responsive/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/layout/responsive/index.js",
-  "types": "../../../esm/layout/responsive/index.d.ts"
-}

package/cjs/layout/sidemal-test/content-box/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../../esm/layout/sidemal-test/content-box/index.js",
-  "types": "../../../../esm/layout/sidemal-test/content-box/index.d.ts"
-}

package/cjs/layout/stack/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../../esm/layout/stack/index.js",
-  "types": "../../../esm/layout/stack/index.d.ts"
-}

package/cjs/link/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/link/index.js",
-  "types": "../../esm/link/index.d.ts"
-}

package/cjs/link-panel/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/link-panel/index.js",
-  "types": "../../esm/link-panel/index.d.ts"
-}

package/cjs/list/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/list/index.js",
-  "types": "../../esm/list/index.d.ts"
-}

package/cjs/loader/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/loader/index.js",
-  "types": "../../esm/loader/index.d.ts"
-}

package/cjs/modal/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/modal/index.js",
-  "types": "../../esm/modal/index.d.ts"
-}

package/cjs/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../esm/index.js",
-  "types": "../esm/index.d.ts"
-}

package/cjs/pagination/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/pagination/index.js",
-  "types": "../../esm/pagination/index.d.ts"
-}