@postenbring/hedwig-react 0.0.74 → 0.0.76

package/dist/utils.mjs

@@ -1,10 +1,14 @@
 import {
+  focusTrap,
+  releaseFocusTrap,
   useHydrated,
   useMergeRefs,
   useResize
-} from "./chunk-ZL56N4UK.mjs";
+} from "./chunk-JXA3B33M.mjs";
 import "./chunk-R4SQKVDQ.mjs";
 export {
+  focusTrap,
+  releaseFocusTrap,
   useHydrated,
   useMergeRefs,
   useResize

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "sideEffects": [
-    "@postenbring/hedwig-css"
+    "@postenbring/hedwig-css/dist/index.css"
   ],
   "license": "MIT",
   "files": [
@@ -13,10 +13,10 @@
   ],
   "devDependencies": {
     "@microsoft/api-extractor": "7.43.1",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "react": "^18.2.0",
-    "react-dom": "18.2.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "18.3.1",
     "tsup": "^8.0.1",
     "typescript": "^5.4.5",
     "eslint-config-custom": "0.0.1",
@@ -31,8 +31,7 @@
   "dependencies": {
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
-    "focus-trap-react": "10.2.3",
-    "@postenbring/hedwig-css": "0.0.65"
+    "@postenbring/hedwig-css": "0.0.67"
   },
   "publishConfig": {
     "access": "public"

package/dist/chunk-3KZOKDKP.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport { useHydrated, type OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  const isClientSide = useHydrated();\n  const toggleOpen = () => {\n    const nextOpenState = !open;\n    setOpen(nextOpenState);\n    if (nextOpenState) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n    } else {\n      document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n    }\n  };\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {open && isClientSide ? (\n        <FocusTrap\n          containerElements={[\n            document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n          ]}\n        />\n      ) : null}\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__button\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\n\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n  NavbarExpandableMenuContentProps,\n  HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      inert={open ? undefined : \"true\"}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </Component>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n"],"mappings":"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","names":["_a","_b"]}

package/dist/chunk-ZL56N4UK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n"],"mappings":";AACA,YAAY,WAAW;AACvB,SAAS,aAAa,WAAW,gBAAgB;AAwB1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAC9C,QAAM,eAAe,YAAY,MAAM;AApDzC;AAqDI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,YAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;","names":[]}