@purpurds/toggle 5.28.1 → 5.28.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/toggle",
-  "version": "5.28.1",
+  "version": "5.28.3",
   "license": "AGPL-3.0-only",
   "main": "./dist/toggle.cjs.js",
   "types": "./dist/toggle.d.ts",
@@ -16,10 +16,10 @@
   "dependencies": {
     "@radix-ui/react-switch": "~1.0.3",
     "classnames": "~2.5.0",
-    "@purpurds/icon": "5.28.1",
-    "@purpurds/label": "5.28.1",
-    "@purpurds/paragraph": "5.28.1",
-    "@purpurds/tokens": "5.28.1"
+    "@purpurds/icon": "5.28.3",
+    "@purpurds/tokens": "5.28.3",
+    "@purpurds/paragraph": "5.28.3",
+    "@purpurds/label": "5.28.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,121 @@
+import type { RefObject } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// This hook is a clone of useResizeObserver in b2c-sales/hooks
+
+type Size = {
+  width: number | undefined;
+  height: number | undefined;
+};
+
+type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+  ref: RefObject<T>;
+  onResize?: (size: Size) => void;
+  box?: "border-box" | "content-box" | "device-pixel-content-box";
+  round?: boolean;
+};
+
+const initialSize: Size = {
+  width: undefined,
+  height: undefined,
+};
+
+export function useResizeObserver<T extends HTMLElement = HTMLElement>(
+  options: UseResizeObserverOptions<T>
+): Size {
+  const { ref, box = "content-box", round } = options;
+  const [{ width, height }, setSize] = useState<Size>(initialSize);
+  const isMounted = useIsMounted();
+  const previousSize = useRef<Size>({ ...initialSize });
+  const onResize = useRef<((size: Size) => void) | undefined>(undefined);
+  onResize.current = options.onResize;
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    if (typeof window === "undefined" || !("ResizeObserver" in window)) {
+      return;
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      const boxProp =
+        // eslint-disable-next-line no-nested-ternary
+        box === "border-box"
+          ? "borderBoxSize"
+          : box === "device-pixel-content-box"
+          ? "devicePixelContentBoxSize"
+          : "contentBoxSize";
+
+      const newWidth = extractSize(entry, boxProp, "inlineSize");
+      const newHeight = extractSize(entry, boxProp, "blockSize");
+
+      const hasChanged =
+        previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
+
+      if (hasChanged) {
+        const newSize: Size = {
+          width: newWidth && round ? Math.round(newWidth) : newWidth,
+          height: newHeight && round ? Math.round(newHeight) : newHeight,
+        };
+        previousSize.current.width = newWidth;
+        previousSize.current.height = newHeight;
+
+        if (onResize.current) {
+          onResize.current(newSize);
+        } else {
+          if (isMounted()) {
+            setSize(newSize);
+          }
+        }
+      }
+    });
+
+    observer.observe(ref.current, { box });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [box, ref, isMounted, round]);
+
+  return { width, height };
+}
+
+type BoxSizesKey = keyof Pick<
+  ResizeObserverEntry,
+  "borderBoxSize" | "contentBoxSize" | "devicePixelContentBoxSize"
+>;
+
+function extractSize(
+  entry: ResizeObserverEntry,
+  box: BoxSizesKey,
+  sizeType: keyof ResizeObserverSize
+): number | undefined {
+  if (!entry[box]) {
+    if (box === "contentBoxSize") {
+      return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
+    }
+    return undefined;
+  }
+
+  return Array.isArray(entry[box])
+    ? entry[box][0][sizeType]
+    : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore Support Firefox's non-standard behavior
+      (entry[box][sizeType] as number);
+}
+
+function useIsMounted() {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+}

package/src/{useToggleDrag.ts → hooks/useToggleDrag.ts}

@@ -1,19 +1,21 @@
-import { MutableRefObject, useRef, useState, useLayoutEffect } from "react";
-import { ToggleProps } from "./toggle";
+import { MutableRefObject, useRef, useState } from "react";
 
-export const useToggleDrag = ({ checked, onChange }: Pick<ToggleProps, "checked" | "onChange">) => {
+import { useResizeObserver } from "./useResizeObserver";
+
+type UseToggleDragProps = {
+  checked: boolean;
+  onChange: ((checked: boolean) => void) | undefined;
+};
+
+export const useToggleDrag = ({ checked, onChange }: UseToggleDragProps) => {
   const trackRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
   const thumbRef = useRef<HTMLSpanElement>(null);
   const [dragX, setDragX] = useState<number | undefined>(undefined);
   const [isDragging, setIsDragging] = useState(false);
   const [dragStopped, setDragStopped] = useState(0);
-  const [thumbHeight, setThumbHeight] = useState(0);
-  const [switchHeight, setSwitchHeight] = useState(0);
 
-  useLayoutEffect(() => {
-    setThumbHeight(thumbRef.current?.clientHeight || 0);
-    setSwitchHeight(trackRef.current?.clientHeight || 0);
-  }, [thumbRef.current?.clientHeight, trackRef.current?.clientHeight]);
+  const { height: thumbHeight = 0 } = useResizeObserver({ ref: thumbRef, round: true });
+  const { height: switchHeight = 0 } = useResizeObserver({ ref: trackRef, round: true });
 
   const switchThumbHeightDelta = (switchHeight || 0) - thumbHeight;
   const maxDragRange = thumbHeight + switchThumbHeightDelta;

package/src/toggle.tsx

@@ -5,9 +5,9 @@ import { Paragraph } from "@purpurds/paragraph";
 import * as Switch from "@radix-ui/react-switch";
 import c from "classnames";
 
-import styles from "./toggle.module.scss";
 import { DraggableX } from "./DraggableX";
-import { useToggleDrag } from "./useToggleDrag";
+import { useToggleDrag } from "./hooks/useToggleDrag";
+import styles from "./toggle.module.scss";
 
 export type ToggleProps = {
   /**

package/dist/useToggleDrag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToggleDrag.d.ts","sourceRoot":"","sources":["../src/useToggleDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqC,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,aAAa,0BAA2B,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC;;;;;;;;;oBAqBrE;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;;CAiCrC,CAAC"}