@navikt/ds-react 6.0.0-alpha.2 → 6.0.0

package/src/util/TextareaAutoSize.tsx

@@ -10,7 +10,7 @@ type State = {
   overflow?: boolean | undefined;
 };
 
-const updateState = (
+const checkState = (
   prevState: State,
   newState: State,
   renders: React.MutableRefObject<number>,
@@ -25,20 +25,12 @@ const updateState = (
       prevState.overflow !== overflow)
   ) {
     renders.current += 1;
-    return {
-      overflow,
-      outerHeightStyle,
-    };
+    return newState;
   }
-  if (process.env.NODE_ENV !== "production") {
-    if (renders.current === 20) {
-      console.error(
-        [
-          "Textarea: Too many re-renders. The layout is unstable.",
-          "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-        ].join("\n"),
-      );
-    }
+  if (process.env.NODE_ENV !== "production" && renders.current === 20) {
+    console.error(
+      "Textarea: Too many re-renders. The layout is unstable. TextareaAutosize limits the number of renders to prevent an infinite loop.",
+    );
   }
   return prevState;
 };
@@ -92,9 +84,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   ) => {
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
-
     const handleRef = useMergeRefs(inputRef, ref);
-
     const shadowRef = useRef<HTMLTextAreaElement>(null);
     const renders = useRef(0);
     const [state, setState] = useState<State>({ outerHeightStyle: 0 });
@@ -153,35 +143,31 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       return { outerHeightStyle, overflow };
     }, [maxRows, minRows, other.placeholder]);
 
-    const syncHeight = React.useCallback(() => {
+    const syncHeight = () => {
       const newState = getUpdatedState();
-
       if (isEmpty(newState)) {
         return;
       }
-
-      setState((prevState) => updateState(prevState, newState, renders));
-    }, [getUpdatedState]);
+      setState((prevState) => checkState(prevState, newState, renders));
+    };
 
     useClientLayoutEffect(() => {
       const syncHeightWithFlushSync = () => {
         const newState = getUpdatedState();
-
         if (isEmpty(newState)) {
           return;
         }
 
         // In React 18, state updates in a ResizeObserver's callback are happening after
         // the paint, this leads to an infinite rendering.
-        //
-        // Using flushSync ensures that the states is updated before the next pain.
+        // Using flushSync ensures that the state is updated before the next paint.
         // Related issue - https://github.com/facebook/react/issues/24331
         ReactDOM.flushSync(() => {
-          setState((prevState) => updateState(prevState, newState, renders));
+          setState((prevState) => checkState(prevState, newState, renders));
         });
       };
 
-      const handleResize = () => {
+      const handleResize = debounce(() => {
         renders.current = 0;
 
         if (inputRef.current?.style.height || inputRef.current?.style.width) {
@@ -193,13 +179,12 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         }
 
         syncHeightWithFlushSync();
-      };
+      });
 
-      const debounceHandleResize = debounce(handleResize);
       const input = inputRef.current!;
       const containerWindow = ownerWindow(input);
 
-      containerWindow.addEventListener("resize", debounceHandleResize);
+      containerWindow.addEventListener("resize", handleResize);
 
       let resizeObserver: ResizeObserver;
       if (typeof ResizeObserver !== "undefined") {
@@ -208,8 +193,8 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       }
 
       return () => {
-        debounceHandleResize.clear();
-        containerWindow.removeEventListener("resize", debounceHandleResize);
+        handleResize.clear();
+        containerWindow.removeEventListener("resize", handleResize);
         if (resizeObserver) {
           resizeObserver.disconnect();
         }

package/src/util/create-context.tsx

@@ -6,6 +6,7 @@
  */
 import React, {
   createContext as createReactContext,
+  forwardRef,
   useContext as useReactContext,
 } from "react";
 
@@ -19,11 +20,6 @@ export interface CreateContextOptions<T> {
 
 type ProviderProps<T> = T & { children: React.ReactNode };
 
-export type CreateContextReturn<T> = [
-  (contextValues: ProviderProps<T>) => React.JSX.Element,
-  () => T,
-];
-
 function getErrorMessage(hook: string, provider: string) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
 }
@@ -39,17 +35,30 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
 
   const Context = createReactContext<T | undefined>(defaultValue);
 
-  function Provider({ children, ...context }: ProviderProps<T>) {
-    // Only re-memoize when prop values change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const value = React.useMemo(() => context, Object.values(context)) as T;
-    return <Context.Provider value={value}>{children}</Context.Provider>;
-  }
+  /**
+   * We use forwardRef to allow `ref` to be used as a regular context value
+   * @see https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components
+   */
+  const Provider = forwardRef(
+    ({ children, ...context }: ProviderProps<T>, ref) => {
+      // Only re-memoize when prop values change
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const value = React.useMemo(() => context, Object.values(context)) as T;
 
-  function useContext() {
+      return (
+        <Context.Provider value={ref ? { ...value, ref } : value}>
+          {children}
+        </Context.Provider>
+      );
+    },
+  );
+
+  function useContext<S extends boolean = true>(
+    strict: S = true as S,
+  ): Context<S, T> {
     const context = useReactContext(Context);
 
-    if (!context) {
+    if (!context && strict) {
       const error = new Error(
         errorMessage ?? getErrorMessage(hookName, providerName),
       );
@@ -58,10 +67,12 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
       throw error;
     }
 
-    return context;
+    return context as Context<S, T>;
   }
 
   Context.displayName = name;
 
-  return [Provider, useContext] as CreateContextReturn<T>;
+  return [Provider, useContext] as const;
 }
+
+type Context<S, T> = S extends true ? T : T | undefined;

package/src/util/types/AsChildProps.ts

@@ -0,0 +1,37 @@
+export type AsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild: true;
+    }
+  | {
+      children: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };

package/src/util/types/OverridableComponent.ts

@@ -22,7 +22,7 @@ export interface OverridableComponent<Component, Element extends HTMLElement> {
    */
   <As extends React.ElementType>(
     props: {
-      as?: As;
+      as: As;
     } & Component &
       Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">,
   ): ReturnType<React.FC>;

package/src/util/types/index.ts

@@ -1 +1,2 @@
 export type { OverridableComponent } from "./OverridableComponent";
+export type { AsChildProps } from "./AsChildProps";