@entur/utils 1.0.0-alpha.0 → 1.0.0-next.0

package/README.md

@@ -1,6 +1,6 @@
 # Utils
 
-This package contains the different utils shared across the Entur Designsystem packages.
+This package contains the different utils shared across the Entur Linje packages.
 
 > ## Think twice before adding stuff here
 >

package/dist/PolymorphicComponent.d.ts

@@ -1,7 +1,4 @@
-/** These polymorphic types are derrived from Ben Ilegbodu's article available at the following link:
- * https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
- */
-import React from 'react';
+import { default as React } from 'react';
 export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;
 type AsProp<C extends React.ElementType> = {
     /**

package/dist/color-utils.scss

@@ -1,10 +1,12 @@
+@use 'sass:color';
+
 /// Slightly lighten a color
 /// @access public
 /// @param {Color} $color - color to tint
 /// @param {Number} $percentage - percentage of `$color` in returned color
 /// @return {Color}
 @function tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
+  @return color.mix(white, $color, $percentage);
 }
 
 /// Slightly darken a color
@@ -13,5 +15,5 @@
 /// @param {Number} $percentage - percentage of `$color` in returned color
 /// @return {Color}
 @function shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
+  @return color.mix(black, $color, $percentage);
 }

package/dist/index.d.ts

@@ -9,6 +9,6 @@ export * from './useOnEscape';
 export * from './useWindowDimensions';
 export * from './ConditionalWrapper';
 export * from './warnAboutMissingStyles';
-export * from './types';
+export * from './types/variants';
 export * from './getNodeText';
-export * from './consentUtils';
+export * from './useControllableProp';

package/dist/layers.scss

@@ -0,0 +1,11 @@
+// Top-level layer order (lowest to highest precedence)
+@layer core, third-party, components, utilities, app;
+
+// Foundation: resets, design tokens (CSS variables), and base element styles
+@layer core.reset, core.tokens, core.base;
+
+// Third-party: vendor CSS imports, then DS overrides to tame them
+@layer third-party.imports, third-party.overrides;
+
+// Components: primitives (buttons, icons), composites (datepicker, dropdown), then cross-component overrides
+@layer components.primitives, components.composites, components.overrides;

package/dist/mergeRefs.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const mergeRefs: <T extends HTMLElement>(...refs: (import("react").MutableRefObject<T> | import("react").ForwardedRef<T> | ((node: T | null) => void) | undefined)[]) => (node: T) => void;
+export declare const mergeRefs: <T extends HTMLElement>(...refs: (React.MutableRefObject<T> | React.ForwardedRef<T> | ((node: T | null) => void) | undefined)[]) => (node: T) => void;

package/dist/useControllableProp.d.ts

@@ -0,0 +1,6 @@
+export type UseControllablePropType<T> = {
+    prop?: T;
+    updater?: (value?: T) => void;
+    defaultValue: T;
+};
+export declare function useControllableProp<T>({ prop, updater, defaultValue, }: UseControllablePropType<T>): [T, (arg: T) => void];

package/dist/useOnClickOutside.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare const useOnClickOutside: (refs: (React.RefObject<HTMLElement> | React.MutableRefObject<any>)[], handler: () => void) => void;

package/dist/useOnEscape.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare const useOnEscape: (ref: React.RefObject<any> | React.MutableRefObject<any>, handler: () => void) => void;

package/dist/useRandomId.d.ts

@@ -1 +1,12 @@
+/**
+ * @deprecated Use `useId()` from React directly instead.
+ * Will be removed in a future major version.
+ *
+ * ```diff
+ * - import { useRandomId } from '@entur/utils';
+ * - const id = useRandomId('eds-my-component');
+ * + import { useId } from 'react';
+ * + const id = `eds-my-component${useId()}`;
+ * ```
+ */
 export declare const useRandomId: (prefix?: string) => string;

package/dist/utils.cjs.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const warning = require("tiny-warning");
+function useDebounce(callBack, debounceTime) {
+  const timeoutRef = React.useRef();
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const debouncedFunc = (...args) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      callBack(...args);
+    }, debounceTime);
+  };
+  return debouncedFunc;
+}
+const useRandomId = (prefix) => {
+  const id = React.useId();
+  return prefix ? `${prefix}${id}` : id;
+};
+function useOnMount(callback) {
+  const hasRun = React.useRef(false);
+  React.useEffect(() => {
+    if (!hasRun.current) {
+      hasRun.current = true;
+      callback();
+    }
+  }, [callback]);
+}
+const mergeRefs = (...refs) => {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) ref.current = node;
+    }
+  };
+};
+const useForceUpdate = () => {
+  const [_, setValue] = React.useState(0);
+  return () => setValue((value) => value + 1);
+};
+const useOnClickOutside = (refs, handler) => {
+  React.useEffect(() => {
+    const listener = (event) => {
+      if (refs.some((ref) => elementContainsEventTarget(ref.current, event))) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler]);
+};
+const elementContainsEventTarget = (element, event) => {
+  if (!element) {
+    return false;
+  }
+  if (element.contains(event.target)) {
+    return true;
+  }
+  if (event.composed && event.composedPath) {
+    const contains = event.composedPath().find((target) => {
+      if (target === window) {
+        return false;
+      }
+      return element.contains(target);
+    });
+    return contains;
+  }
+  return false;
+};
+const useOnEscape = (ref, handler) => {
+  React.useEffect(() => {
+    const runIfKeyIsEscape = (event) => {
+      if (event.key === "Escape") handler();
+    };
+    const currentRef = ref.current;
+    currentRef?.addEventListener("keydown", runIfKeyIsEscape);
+    return () => currentRef?.removeEventListener("keydown", runIfKeyIsEscape);
+  }, [ref, handler]);
+};
+const subscribe = (callback) => {
+  window.addEventListener("resize", callback);
+  return () => window.removeEventListener("resize", callback);
+};
+let cachedSnapshot = { width: void 0, height: void 0 };
+const getSnapshot = () => {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  if (cachedSnapshot.width !== width || cachedSnapshot.height !== height) {
+    cachedSnapshot = { width, height };
+  }
+  return cachedSnapshot;
+};
+const serverSnapshot = {
+  width: void 0,
+  height: void 0
+};
+const getServerSnapshot = () => serverSnapshot;
+const useWindowDimensions = () => {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
+const packagesToCheck = /* @__PURE__ */ new Set();
+let checkTimeoutId;
+function checkAndWarn() {
+  const missingImports = Array.from(packagesToCheck).filter(
+    (namespace) => parseInt(
+      window.getComputedStyle(document.documentElement).getPropertyValue(`--eds-${namespace}`)
+    ) !== 1
+  ).sort();
+  const singleMissingImport = missingImports.length === 1;
+  warning(
+    missingImports.length === 0,
+    `You are missing ${singleMissingImport ? "a CSS import" : `${missingImports.length} CSS imports`}!
+
+Please add the following CSS import${singleMissingImport ? "" : "s"} somewhere in your app:
+
+${missingImports.map((namespace) => `	@import '@entur/${namespace}/dist/styles.css';`).join("\n")}
+`
+  );
+}
+function warnAboutMissingStyles(...namespaces) {
+  if (typeof window === "undefined" || typeof process !== "undefined" && process?.env?.TEST === "true" || typeof process !== "undefined" && process?.env?.NODE_ENV === "production") {
+    return;
+  }
+  window.clearTimeout(checkTimeoutId);
+  namespaces.forEach((namespace) => packagesToCheck.add(namespace));
+  checkTimeoutId = window.setTimeout(checkAndWarn, 1e3);
+}
+const getNodeText = (node) => {
+  if (node === null || node === void 0) return "";
+  if (["string", "number"].includes(typeof node)) return node.toString();
+  if (node instanceof Array) return node.map(getNodeText).join("").trim();
+  if (typeof node === "object")
+    return getNodeText(node.props?.children ?? "").trim();
+  return "unknown";
+};
+function useControllableProp({
+  prop,
+  updater = () => void 0,
+  defaultValue
+}) {
+  const [internalState, setInternalState] = React.useState(defaultValue);
+  React.useEffect(() => {
+    if (prop !== void 0) {
+      setInternalState(prop);
+    }
+  }, [prop]);
+  return prop === void 0 ? [internalState, setInternalState] : [prop, updater];
+}
+exports.ConditionalWrapper = ConditionalWrapper;
+exports.getNodeText = getNodeText;
+exports.mergeRefs = mergeRefs;
+exports.useControllableProp = useControllableProp;
+exports.useDebounce = useDebounce;
+exports.useForceUpdate = useForceUpdate;
+exports.useOnClickOutside = useOnClickOutside;
+exports.useOnEscape = useOnEscape;
+exports.useOnMount = useOnMount;
+exports.useRandomId = useRandomId;
+exports.useWindowDimensions = useWindowDimensions;
+exports.warnAboutMissingStyles = warnAboutMissingStyles;
+//# sourceMappingURL=utils.cjs.js.map

package/dist/utils.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs.js","sources":["../src/useDebounce.ts","../src/useRandomId.ts","../src/useOnMount.ts","../src/mergeRefs.ts","../src/useForceUpdate.ts","../src/useOnClickOutside.ts","../src/useOnEscape.ts","../src/useWindowDimensions.ts","../src/ConditionalWrapper.tsx","../src/warnAboutMissingStyles.ts","../src/getNodeText.ts","../src/useControllableProp.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport function useDebounce<T extends (...args: any[]) => any>(\n  callBack: T,\n  debounceTime: number,\n) {\n  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  const debouncedFunc = (...args: any[]) => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      callBack(...args);\n    }, debounceTime);\n  };\n\n  return debouncedFunc as T;\n}\n","import { useId } from 'react';\n\n/**\n * @deprecated Use `useId()` from React directly instead.\n * Will be removed in a future major version.\n *\n * ```diff\n * - import { useRandomId } from '@entur/utils';\n * - const id = useRandomId('eds-my-component');\n * + import { useId } from 'react';\n * + const id = `eds-my-component${useId()}`;\n * ```\n */\nexport const useRandomId = (prefix?: string): string => {\n  const id = useId();\n  return prefix ? `${prefix}${id}` : id;\n};\n","import React from 'react';\n\nexport function useOnMount(callback: () => void): void {\n  const hasRun = React.useRef<boolean>(false);\n\n  React.useEffect(() => {\n    if (!hasRun.current) {\n      hasRun.current = true;\n      callback();\n    }\n  }, [callback]);\n}\n","export const mergeRefs = <T extends HTMLElement>(\n  ...refs: (\n    | React.MutableRefObject<T>\n    | React.ForwardedRef<T>\n    | ((node: T | null) => void)\n    | undefined\n  )[]\n) => {\n  return (node: T) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) ref.current = node;\n    }\n  };\n};\n","import { useState } from 'react';\n\nexport const useForceUpdate = () => {\n  const [_, setValue] = useState(0);\n  return () => setValue(value => value + 1);\n};\n","import React, { useEffect } from 'react';\n\nexport const useOnClickOutside = (\n  refs: (React.RefObject<HTMLElement> | React.MutableRefObject<any>)[],\n  handler: () => void,\n) => {\n  useEffect(() => {\n    const listener = (event: Event) => {\n      // If the ref contains the clicked element, then the click is not outside\n      if (refs.some(ref => elementContainsEventTarget(ref.current, event))) {\n        return;\n      }\n\n      handler();\n    };\n\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [refs, handler]);\n};\n\nconst elementContainsEventTarget = (\n  element: HTMLElement | null,\n  event: Event,\n) => {\n  if (!element) {\n    return false;\n  }\n\n  if (element.contains(event.target as Node)) {\n    return true;\n  }\n\n  // For elements inside a Shadow DOM we need to check the composedPath\n  if (event.composed && event.composedPath) {\n    const contains = event.composedPath().find(target => {\n      if (target === window) {\n        return false;\n      }\n      return element.contains(target as Node);\n    });\n    return contains;\n  }\n\n  return false;\n};\n","import React, { useEffect } from 'react';\n\nexport const useOnEscape = (\n  ref: React.RefObject<any> | React.MutableRefObject<any>,\n  handler: () => void,\n) => {\n  useEffect(() => {\n    const runIfKeyIsEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') handler();\n    };\n\n    const currentRef = ref.current;\n    currentRef?.addEventListener('keydown', runIfKeyIsEscape);\n\n    return () => currentRef?.removeEventListener('keydown', runIfKeyIsEscape);\n  }, [ref, handler]);\n};\n","import { useSyncExternalStore } from 'react';\n\ntype WindowDimensions = {\n  width: number | undefined;\n  height: number | undefined;\n};\n\nconst subscribe = (callback: () => void) => {\n  window.addEventListener('resize', callback);\n  return () => window.removeEventListener('resize', callback);\n};\n\nlet cachedSnapshot: WindowDimensions = { width: undefined, height: undefined };\n\nconst getSnapshot = (): WindowDimensions => {\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n  if (cachedSnapshot.width !== width || cachedSnapshot.height !== height) {\n    cachedSnapshot = { width, height };\n  }\n  return cachedSnapshot;\n};\n\nconst serverSnapshot: WindowDimensions = {\n  width: undefined,\n  height: undefined,\n};\nconst getServerSnapshot = () => serverSnapshot;\n\nexport const useWindowDimensions = (): WindowDimensions => {\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n};\n","type ConditionalWrapperType = {\n  condition: boolean;\n  wrapper: any;\n  children: any;\n};\n\nexport const ConditionalWrapper = ({\n  condition,\n  wrapper,\n  children,\n}: ConditionalWrapperType) => (condition ? wrapper(children) : children);\n","import warning from 'tiny-warning';\n\nconst packagesToCheck: Set<string> = new Set();\nlet checkTimeoutId: number;\n\nfunction checkAndWarn() {\n  const missingImports = Array.from(packagesToCheck)\n    .filter(\n      namespace =>\n        parseInt(\n          window\n            .getComputedStyle(document.documentElement)\n            .getPropertyValue(`--eds-${namespace}`),\n        ) !== 1,\n    )\n    .sort();\n\n  // Finally, we warn about those pesky imports\n  const singleMissingImport = missingImports.length === 1;\n  warning(\n    missingImports.length === 0,\n    `You are missing ${\n      singleMissingImport\n        ? 'a CSS import'\n        : `${missingImports.length} CSS imports`\n    }!\n\nPlease add the following CSS import${\n      singleMissingImport ? '' : 's'\n    } somewhere in your app:\n\n${missingImports\n  .map(namespace => `\\t@import '@entur/${namespace}/dist/styles.css';`)\n  .join('\\n')}\n`,\n  );\n}\n\n/** Warns the developer if they have forgotten to include styles */\nexport function warnAboutMissingStyles(...namespaces: string[]): void {\n  // We skip this check in production, and when we build static sites\n  if (\n    typeof window === 'undefined' ||\n    (typeof process !== 'undefined' && process?.env?.TEST === 'true') ||\n    (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'production')\n  ) {\n    return;\n  }\n  // First, let's clear earlier calls to setTimeout\n  window.clearTimeout(checkTimeoutId);\n\n  // Next, let's add all namespaces to the set of packages to check\n  namespaces.forEach(namespace => packagesToCheck.add(namespace));\n\n  // Finally. let's trigger a run of the checker.\n  checkTimeoutId = window.setTimeout(checkAndWarn, 1000);\n}\n","// with inspiration from https://stackoverflow.com/questions/50428910/get-text-content-from-node-in-react\nexport const getNodeText = (\n  node: React.ReactNode | string | number | string[] | number[],\n): string => {\n  if (node === null || node === undefined) return '';\n  if (['string', 'number'].includes(typeof node)) return node.toString();\n  if (node instanceof Array) return node.map(getNodeText).join('').trim();\n  if (typeof node === 'object')\n    // @ts-expect-error props does exist for react nodes\n    return getNodeText(node.props?.children ?? '').trim();\n  return 'unknown';\n};\n","import { useEffect, useState } from 'react';\nexport type UseControllablePropType<T> = {\n  prop?: T;\n  updater?: (value?: T) => void;\n  defaultValue: T;\n};\nexport function useControllableProp<T>({\n  prop,\n  updater = () => undefined,\n  defaultValue,\n}: UseControllablePropType<T>): [T, (arg: T) => void] {\n  const [internalState, setInternalState] = useState<T>(defaultValue);\n  useEffect(() => {\n    if (prop !== undefined) {\n      setInternalState(prop);\n    }\n  }, [prop]);\n  return prop === undefined\n    ? [internalState, setInternalState]\n    : [prop, updater];\n}\n"],"names":["useRef","useEffect","useId","useState","useSyncExternalStore"],"mappings":"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"}