@postenbring/hedwig-react 0.0.81 → 0.0.83

package/src/utils/auto-animate-height.tsx

@@ -0,0 +1,139 @@
+import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
+import { useMergeRefs } from "./utils";
+
+export interface AutoAnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Time of the animation, using the hedwig animation tokens
+   * quick: 0.1s
+   * normal: 0.3s
+   * slow: 0.7s
+   *
+   * default is "quick"
+   */
+  animationDuration?: "quick" | "normal" | "slow";
+
+  /**
+   * Callback fired when animiation transition ends
+   * Use this to do effects after resizing is done, e.g. scrolling to the element
+   * using `element.scrollIntoView()`
+   */
+  onTransitionEnd?: () => void;
+
+  /**
+   * Which hedwig easing function to use, default is "normal"
+   */
+  animationEasing?: "in" | "out" | "normal";
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Helper component to animate the height of the children when they change
+ * It's done by rendering two versions of the passed children,
+ * one hidden to measure the height and one visible to only changes after the height is measured.
+ *
+ * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.
+ */
+export const AutoAnimateHeight = forwardRef<HTMLDivElement, AutoAnimateHeightProps>(
+  (
+    {
+      children,
+      style,
+      animationDuration = "quick",
+      animationEasing = "normal",
+      onTransitionEnd,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rootRef = useRef<HTMLDivElement>(null);
+    const mergedRef = useMergeRefs([rootRef, ref]);
+    const measurementRef = useRef<HTMLDivElement>(null);
+    const [height, setHeight] = useState<{ height: number; shouldAnimate: boolean } | undefined>(
+      undefined,
+    );
+    const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>
+      cloneElement(<>{children}</>, {}),
+    );
+
+    useEffect(() => {
+      if (!rootRef.current) return;
+      if (!measurementRef.current) return;
+      if (document.body.scrollHeight === 0) return;
+      const currentMeasurement = measurementRef.current;
+      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
+
+      // Listen for resize events on the measurement element
+      // Keep the children in sync with the height
+      // But don't animate it.
+      let previouslyObservedHeight = newHeight;
+      const resizeObserver = new ResizeObserver(() => {
+        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
+        if (resizedHeight === previouslyObservedHeight) return;
+        previouslyObservedHeight = resizedHeight;
+        setHeight({ height: resizedHeight, shouldAnimate: false });
+      });
+      resizeObserver.observe(currentMeasurement); // This is cleaned up down below in the return functions
+
+      // Set the new height when children changes
+      setHeight({ height: newHeight, shouldAnimate: true });
+
+      // Update children
+      const nextClonedChildren = cloneElement(<>{children}</>, {});
+
+      // When increasing in height update immediately so the new content is shown during the animation
+      if (newHeight >= (height?.height ?? 0)) {
+        setClonedChildren(nextClonedChildren);
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+
+      // When decreasing in height, wait until the animation is done so that we don't get a sudden flash of empty content
+      const currentRoot = rootRef.current;
+      function onTransitionEndHandler(e: TransitionEvent) {
+        if (e.propertyName !== "height") return;
+        setClonedChildren(nextClonedChildren);
+      }
+      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
+      return () => {
+        resizeObserver.disconnect();
+        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
+      };
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better
+    }, [children]);
+
+    return (
+      <div
+        ref={mergedRef}
+        onTransitionEnd={onTransitionEnd}
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          height: height?.height ?? measurementRef.current?.getBoundingClientRect().height,
+          transitionProperty: height?.shouldAnimate ? "height" : "none",
+          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
+          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
+          willChange: "height",
+          ...style,
+        }}
+        {...rest}
+      >
+        <div
+          aria-hidden
+          ref={measurementRef}
+          style={{
+            position: "absolute",
+            visibility: "hidden",
+            pointerEvents: "none",
+          }}
+        >
+          {children}
+        </div>
+        {clonedChildren}
+      </div>
+    );
+  },
+);
+AutoAnimateHeight.displayName = "AutoAnimateHeight";

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./utils";
+
+export { AutoAnimateHeight } from "./auto-animate-height";
+export type * from "./auto-animate-height";

package/src/utils/utils.ts

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ * @see https://floating-ui.com/docs/useMergeRefs
+ */
+export function useMergeRefs<Instance>(
+  refs: (React.Ref<Instance> | undefined)[],
+): React.RefCallback<Instance> | null {
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref === null)) {
+      return null;
+    }
+
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref !== null) {
+          (ref as React.MutableRefObject<Instance | null>).current = value;
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok
+  }, refs);
+}
+
+export function useResize<Instance extends HTMLElement>(
+  ref: React.RefObject<Instance> | undefined | null,
+): { width: number; height: number } {
+  const [width, setWidth] = useState<number>(0);
+  const [height, setHeight] = useState<number>(0);
+  const handleResize = useCallback(() => {
+    if (ref?.current !== null) {
+      setWidth(ref?.current?.offsetWidth ?? 0);
+      setHeight(ref?.current?.offsetHeight ?? 0);
+    }
+  }, [ref]);
+  useEffect(() => {
+    window.addEventListener("load", handleResize);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("load", handleResize);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [ref, handleResize]);
+  useEffect(() => {
+    handleResize();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok
+  }, []);
+  return { width, height };
+}
+
+function subscribe() {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok
+  return () => {};
+}
+
+export function useHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  );
+}
+
+/**
+ * Trap focus inside an element using the `inert` attribute.
+ *
+ * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.
+ * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.
+ *
+ * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
+ * @see https://web.dev/articles/inert
+ */
+export function focusTrap(element: HTMLElement) {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element
+  if (element === document.body) return () => {};
+
+  let inertElements: HTMLElement[] = [];
+  for (let el: HTMLElement | null = element; el; el = el.parentElement) {
+    if (el === document.body) break;
+
+    for (const sibling of el.parentElement?.children ?? []) {
+      if (sibling === el) continue;
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.hasAttribute("inert")) continue;
+
+      sibling.setAttribute("inert", "true");
+      inertElements.push(sibling);
+    }
+  }
+
+  return () => {
+    releaseFocusTrap(inertElements);
+    inertElements = [];
+  };
+}
+
+/**
+ * Unset the `inert` attribute on all elements given
+ */
+function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {
+  for (const el of inertElements) {
+    el.removeAttribute("inert");
+  }
+}

package/src/warning-banner/index.tsx

@@ -0,0 +1,2 @@
+export { WarningBanner } from "./warning-banner";
+export type * from "./warning-banner";

package/src/warning-banner/warning-banner.stories.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "../link";
+import { WarningBanner } from ".";
+
+const meta: Meta<typeof WarningBanner> = {
+  title: "Warning Banner",
+  component: WarningBanner,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningBanner>;
+
+export const Expandable: Story = {
+  args: {
+    title: "Warning banner title",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
+  },
+};
+
+export const LinkInDescription: Story = {
+  args: {
+    title: "Warning banner with link in description",
+    description: (
+      <>
+        You can include links in the description of the warning banner. However, remember to use
+        link with variant solid.{" "}
+        <Link href="https://www.posten.no/" variant="solid">
+          Link to Posten
+        </Link>
+      </>
+    ),
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    title: "Title only",
+  },
+};

package/src/warning-banner/warning-banner.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+import React, { forwardRef, useState } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Box } from "../box";
+
+export interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+}
+
+export const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(
+  ({ title, description, className, ...rest }, ref) => {
+    const expandable = !!description;
+    return (
+      <Box {...rest} className={clsx("hds-warning-banner", className as undefined)} ref={ref}>
+        <WarningBannerTitle variant={expandable ? "expandable" : "default"}>
+          {title}
+        </WarningBannerTitle>
+        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}
+      </Box>
+    );
+  },
+);
+WarningBanner.displayName = "WarningBanner";
+
+type WarningBannerTitleProps =
+  | ({ variant: "expandable" } & React.ButtonHTMLAttributes<HTMLButtonElement>)
+  | ({ variant: "default" } & React.HTMLAttributes<HTMLParagraphElement>);
+
+const WarningBannerTitle = forwardRef<
+  HTMLButtonElement | HTMLParagraphElement,
+  WarningBannerTitleProps
+>(({ variant, children, className, ...rest }, ref) => {
+  const [open, setOpen] = useState<boolean>(false);
+  if (variant === "expandable") {
+    return (
+      <button
+        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+        className={clsx(
+          "hds-warning-banner__title",
+          "hds-warning-banner__title-trigger",
+          { "hds-warning-banner--closed": !open },
+          className as undefined,
+        )}
+        onClick={() => {
+          setOpen((prev) => !prev);
+        }}
+        ref={ref as React.Ref<HTMLButtonElement>}
+        type="button"
+      >
+        <span>{children}</span>
+      </button>
+    );
+  }
+  return (
+    <p
+      {...(rest as React.HTMLAttributes<HTMLParagraphElement>)}
+      className={clsx("hds-warning-banner__title", className as undefined)}
+      ref={ref as React.Ref<HTMLParagraphElement>}
+    >
+      {children}
+    </p>
+  );
+});
+WarningBannerTitle.displayName = "WarningBannerTitle";
+
+type WarningBannerDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+const WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <p
+        className={clsx("hds-warning-banner__description", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+WarningBannerDescription.displayName = "WarningBannerDescription";