@ably/ui 17.12.0-dev.dcf685cd → 17.13.0-dev.de27db52

package/core/Accordion/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   * @deprecated Use `heading` for custom heading content. This will be used as fallback if `heading` is not provided.\n   */\n  name: string;\n\n  /**\n   * Custom heading content. If provided, this will be used instead of `name`.\n   * Can be a ReactNode or a function that receives the index and isOpen state and returns ReactNode.\n   */\n  heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName | AccordionIcon;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n\n  /**\n   * Indicates whether the accordion item is interactive.\n   * When false, the item cannot be expanded or collapsed by user interaction.\n   * @default true\n   */\n  interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n  name: IconName;\n  css?: string;\n};\n\nexport type AccordionIcons = {\n  closed: AccordionIcon;\n  open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AAsDA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}
+{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   */\n  name: string;\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName | AccordionIcon;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n\n  /**\n   * Indicates whether the accordion item is interactive.\n   * When false, the item cannot be expanded or collapsed by user interaction.\n   * @default true\n   */\n  interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n  name: IconName;\n  css?: string;\n};\n\nexport type AccordionIcons = {\n  closed: AccordionIcon;\n  open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AA+CA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}

package/core/Accordion.js

@@ -1,2 +1,2 @@
-import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,heading,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;const renderHeading=()=>{if(heading){if(typeof heading==="function"){return heading(index,isOpen)}return heading}return React.createElement("span",null,name)};return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,renderHeading(),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[data,options?.fullyOpen,options?.defaultOpenIndexes]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,heading:item.heading,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
+import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[data,options?.fullyOpen,options?.defaultOpenIndexes]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
 //# sourceMappingURL=Accordion.js.map

package/core/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useMemo,\n  useState,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  heading,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  // Render custom heading or fallback to name\n  const renderHeading = () => {\n    if (heading) {\n      if (typeof heading === 'function') {\n        return heading(index, isOpen);\n      }\n      return heading;\n    }\n    return <span>{name}</span>;\n  };\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        {renderHeading()}\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n          options?.defaultOpenIndexes?.includes(index),\n        );\n    }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n    useEffect(() => {\n      setOpenRowValues(openIndexes);\n    }, [openIndexes]);\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        heading={item.heading}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","heading","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","renderHeading","span","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useMemo,\n  useState,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        <span>{name}</span>\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n    useEffect(() => {\n      setOpenRowValues(openIndexes);\n    }, [openIndexes]);\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}

package/core/Expander.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import{throttle}from"es-toolkit/compat";import cn from"./utils/cn";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[contentHeight,setContentHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}setShowControls(contentHeight>=heightThreshold)},[contentHeight,heightThreshold]);useEffect(()=>{const onResize=throttle(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}},250);window.addEventListener("resize",onResize);return()=>{window.removeEventListener("resize",onResize)}},[]);const height=contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold;return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:cn("overflow-hidden transition-all relative",className)},showControls&&!expanded&&React.createElement("div",{className:cn("h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0",fadeClassName)}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("button",{"data-testid":"expander-controls",className:cn(heightThreshold===0&&!expanded?"":"mt-4","cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light",controlsClassName)},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
+import React,{useMemo,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import cn from"./utils/cn";import{useContentHeight}from"./hooks/use-content-height";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[expanded,setExpanded]=useState(false);const contentHeight=useContentHeight(innerRef,heightThreshold);const showControls=useMemo(()=>contentHeight>=heightThreshold,[contentHeight,heightThreshold]);const height=useMemo(()=>contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold,[contentHeight,heightThreshold,expanded]);return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:cn("overflow-hidden transition-all relative",className)},showControls&&!expanded&&React.createElement("div",{className:cn("h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0",fadeClassName)}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("button",{"data-testid":"expander-controls",className:cn(heightThreshold===0&&!expanded?"":"mt-4","cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light",controlsClassName)},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
 //# sourceMappingURL=Expander.js.map

package/core/Expander.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport { throttle } from \"es-toolkit/compat\";\nimport cn from \"./utils/cn\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [showControls, setShowControls] = useState(false);\n  const [contentHeight, setContentHeight] = useState<number>(heightThreshold);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (innerRef.current) {\n      setContentHeight(innerRef.current.clientHeight);\n    }\n\n    setShowControls(contentHeight >= heightThreshold);\n  }, [contentHeight, heightThreshold]);\n\n  useEffect(() => {\n    const onResize = throttle(() => {\n      if (innerRef.current) {\n        setContentHeight(innerRef.current.clientHeight);\n      }\n    }, 250);\n\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n    };\n  }, []);\n\n  const height =\n    contentHeight < heightThreshold\n      ? \"auto\"\n      : expanded\n        ? contentHeight\n        : heightThreshold;\n\n  return (\n    <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={cn(\"overflow-hidden transition-all relative\", className)}\n      >\n        {showControls && !expanded && (\n          <div\n            className={cn(\n              \"h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0\",\n              fadeClassName,\n            )}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <RadixCollapsible.Trigger asChild>\n          <button\n            data-testid=\"expander-controls\"\n            className={cn(\n              heightThreshold === 0 && !expanded ? \"\" : \"mt-4\",\n              \"cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light\",\n              controlsClassName,\n            )}\n          >\n            {expanded\n              ? (controlsOpenedLabel ?? \"View less -\")\n              : (controlsClosedLabel ?? \"View all +\")}\n          </button>\n        </RadixCollapsible.Trigger>\n      )}\n    </RadixCollapsible.Root>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useEffect","useRef","useState","RadixCollapsible","throttle","cn","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","showControls","setShowControls","contentHeight","setContentHeight","expanded","setExpanded","current","clientHeight","onResize","window","addEventListener","removeEventListener","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild","button"],"mappings":"AAAA,OAAOA,OAGLC,SAAS,CACTC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAASC,QAAQ,KAAQ,mBAAoB,AAC7C,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWb,OAAuB,MACxC,KAAM,CAACc,aAAcC,gBAAgB,CAAGd,SAAS,OACjD,KAAM,CAACe,cAAeC,iBAAiB,CAAGhB,SAAiBK,iBAC3D,KAAM,CAACY,SAAUC,YAAY,CAAGlB,SAAS,OAEzCF,UAAU,KACR,GAAIc,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CAEAN,gBAAgBC,eAAiBV,gBACnC,EAAG,CAACU,cAAeV,gBAAgB,EAEnCP,UAAU,KACR,MAAMuB,SAAWnB,SAAS,KACxB,GAAIU,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CACF,EAAG,KAEHE,OAAOC,gBAAgB,CAAC,SAAUF,UAClC,MAAO,KACLC,OAAOE,mBAAmB,CAAC,SAAUH,SACvC,CACF,EAAG,EAAE,EAEL,MAAMI,OACJV,cAAgBV,gBACZ,OACAY,SACEF,cACAV,gBAER,OACE,oBAACJ,iBAAiByB,IAAI,EAACC,KAAMV,SAAUW,aAAcV,aACnD,oBAACW,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZzB,UAAWH,GAAG,0CAA2CG,YAExDO,cAAgB,CAACI,UAChB,oBAACY,OACCvB,UAAWH,GACT,0FACAI,iBAIN,oBAACsB,OAAIG,IAAKpB,UAAWD,WAEtBE,cACC,oBAACZ,iBAAiBgC,OAAO,EAACC,QAAAA,MACxB,oBAACC,UACCJ,cAAY,oBACZzB,UAAWH,GACTE,kBAAoB,GAAK,CAACY,SAAW,GAAK,OAC1C,uFACAT,oBAGDS,SACIR,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}
+{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport cn from \"./utils/cn\";\nimport { useContentHeight } from \"./hooks/use-content-height\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n\n  const contentHeight = useContentHeight(innerRef, heightThreshold);\n\n  const showControls = useMemo(\n    () => contentHeight >= heightThreshold,\n    [contentHeight, heightThreshold],\n  );\n\n  const height = useMemo(\n    () =>\n      contentHeight < heightThreshold\n        ? \"auto\"\n        : expanded\n          ? contentHeight\n          : heightThreshold,\n    [contentHeight, heightThreshold, expanded],\n  );\n\n  return (\n    <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={cn(\"overflow-hidden transition-all relative\", className)}\n      >\n        {showControls && !expanded && (\n          <div\n            className={cn(\n              \"h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0\",\n              fadeClassName,\n            )}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <RadixCollapsible.Trigger asChild>\n          <button\n            data-testid=\"expander-controls\"\n            className={cn(\n              heightThreshold === 0 && !expanded ? \"\" : \"mt-4\",\n              \"cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light\",\n              controlsClassName,\n            )}\n          >\n            {expanded\n              ? (controlsOpenedLabel ?? \"View less -\")\n              : (controlsClosedLabel ?? \"View all +\")}\n          </button>\n        </RadixCollapsible.Trigger>\n      )}\n    </RadixCollapsible.Root>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useMemo","useRef","useState","RadixCollapsible","cn","useContentHeight","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","expanded","setExpanded","contentHeight","showControls","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild","button"],"mappings":"AAAA,OAAOA,OAGLC,OAAO,CACPC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAAOC,OAAQ,YAAa,AAC5B,QAASC,gBAAgB,KAAQ,4BAA6B,CAW9D,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWb,OAAuB,MACxC,KAAM,CAACc,SAAUC,YAAY,CAAGd,SAAS,OAEzC,MAAMe,cAAgBZ,iBAAiBS,SAAUP,iBAEjD,MAAMW,aAAelB,QACnB,IAAMiB,eAAiBV,gBACvB,CAACU,cAAeV,gBAAgB,EAGlC,MAAMY,OAASnB,QACb,IACEiB,cAAgBV,gBACZ,OACAQ,SACEE,cACAV,gBACR,CAACU,cAAeV,gBAAiBQ,SAAS,EAG5C,OACE,oBAACZ,iBAAiBiB,IAAI,EAACC,KAAMN,SAAUO,aAAcN,aACnD,oBAACO,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZjB,UAAWJ,GAAG,0CAA2CI,YAExDU,cAAgB,CAACH,UAChB,oBAACQ,OACCf,UAAWJ,GACT,0FACAK,iBAIN,oBAACc,OAAIG,IAAKZ,UAAWD,WAEtBK,cACC,oBAACf,iBAAiBwB,OAAO,EAACC,QAAAA,MACxB,oBAACC,UACCJ,cAAY,oBACZjB,UAAWJ,GACTG,kBAAoB,GAAK,CAACQ,SAAW,GAAK,OAC1C,uFACAL,oBAGDK,SACIJ,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}

package/core/Header/types.js

@@ -0,0 +1,2 @@
+export{};
+//# sourceMappingURL=types.js.map

package/core/Header/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/Header/types.ts"],"sourcesContent":["export type ThemedScrollpoint = {\n  id: string;\n  className: string;\n};\n"],"names":[],"mappings":"AAAA,QAGE"}

package/core/Header.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,useRef,useMemo,useCallback}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import{throttle}from"es-toolkit/compat";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeBannerEnabled=false,noticeHeight=0,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,headerCenterClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location,logoBadge})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[noticeBannerVisible,setNoticeBannerVisible]=useState(isNoticeBannerEnabled);const menuRef=useRef(null);const[scrollpointClasses,setScrollpointClasses]=useState(themedScrollpoints.length>0?themedScrollpoints[0].className:"");const headerStyle={height:HEADER_HEIGHT,top:noticeBannerVisible?`${noticeHeight}px`:"0"};const headerClassName=cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16",scrollpointClasses,{"md:top-auto":noticeBannerVisible});const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};const handleNoticeClose=useCallback(()=>{setNoticeBannerVisible(false)},[]);useEffect(()=>{document.addEventListener("notice-closed",handleNoticeClose);return()=>document.removeEventListener("notice-closed",handleNoticeClose)},[handleNoticeClose]);useEffect(()=>{const handleScroll=()=>{const noticeElement=document.querySelector('[data-id="ui-notice"]');const isNoticeClosedToBeHidden=noticeElement?.classList.contains("ui-announcement-hidden");setNoticeBannerVisible(window.scrollY<=COLLAPSE_TRIGGER_DISTANCE&&isNoticeBannerEnabled&&!isNoticeClosedToBeHidden);for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,100);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints,isNoticeBannerEnabled]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",style:headerStyle,className:headerClassName},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,badge:logoBadge,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-4 lg:mr-8",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-6 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center",headerCenterClassName)},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo,useCallback}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import{throttle}from"es-toolkit/compat";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";import{useThemedScrollpoints}from"./hooks/use-themed-scrollpoints";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeBannerEnabled=false,noticeHeight=0,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,headerCenterClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location,logoBadge})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[noticeBannerVisible,setNoticeBannerVisible]=useState(isNoticeBannerEnabled);const menuRef=useRef(null);const scrollpointClasses=useThemedScrollpoints(themedScrollpoints);const headerStyle={height:HEADER_HEIGHT,top:noticeBannerVisible?`${noticeHeight}px`:"0"};const headerClassName=cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16",scrollpointClasses,{"md:top-auto":noticeBannerVisible});const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};const handleNoticeClose=useCallback(()=>{setNoticeBannerVisible(false)},[]);useEffect(()=>{document.addEventListener("notice-closed",handleNoticeClose);return()=>document.removeEventListener("notice-closed",handleNoticeClose)},[handleNoticeClose]);useEffect(()=>{if(!isNoticeBannerEnabled){return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement){console.warn("Header: Notice element not found");return}let previousVisibility=noticeBannerVisible;const handleScroll=()=>{const scrollY=window.scrollY;const isNoticeHidden=noticeElement.classList.contains("ui-announcement-hidden");const shouldBeVisible=scrollY<=COLLAPSE_TRIGGER_DISTANCE&&!isNoticeHidden;if(shouldBeVisible!==previousVisibility){previousVisibility=shouldBeVisible;setNoticeBannerVisible(shouldBeVisible)}};const throttledHandleScroll=throttle(handleScroll,100);handleScroll();window.addEventListener("scroll",throttledHandleScroll,{passive:true});return()=>{window.removeEventListener("scroll",throttledHandleScroll)}},[isNoticeBannerEnabled,noticeBannerVisible]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",style:headerStyle,className:headerClassName},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,badge:logoBadge,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-4 lg:mr-8",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-6 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center",headerCenterClassName)},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
 //# sourceMappingURL=Header.js.map

package/core/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport { throttle } from \"es-toolkit/compat\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\n\nexport type ThemedScrollpoint = {\n  id: string;\n  className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  /**\n   * Optional classnames to add to the header\n   */\n  className?: string;\n  /**\n   * Indicates if the notice banner is enabled.\n   */\n  isNoticeBannerEnabled?: boolean;\n  /**\n   * Height of the notice banner in pixels.\n   */\n  noticeHeight?: number;\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional classname for styling the header links container.\n   */\n  headerLinksClassName?: string;\n\n  /**\n   * Optional classname for styling the header center container.\n   */\n  headerCenterClassName?: string;\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n\n  /**\n   * Optional location object to detect location changes.\n   */\n  location?: Location;\n\n  /**\n   * Optional badge text to display on the logo.\n   */\n  logoBadge?: string;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  className,\n  isNoticeBannerEnabled = false,\n  noticeHeight = 0,\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  headerLinksClassName,\n  headerCenterClassName,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n  location,\n  logoBadge,\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [noticeBannerVisible, setNoticeBannerVisible] = useState(\n    isNoticeBannerEnabled,\n  );\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [scrollpointClasses, setScrollpointClasses] = useState<string>(\n    themedScrollpoints.length > 0 ? themedScrollpoints[0].className : \"\",\n  );\n\n  const headerStyle = {\n    height: HEADER_HEIGHT,\n    top: noticeBannerVisible ? `${noticeHeight}px` : \"0\",\n  };\n\n  const headerClassName = cn(\n    \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16\",\n    scrollpointClasses,\n    {\n      \"md:top-auto\": noticeBannerVisible,\n    },\n  );\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  const handleNoticeClose = useCallback(() => {\n    setNoticeBannerVisible(false);\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener(\"notice-closed\", handleNoticeClose);\n    return () =>\n      document.removeEventListener(\"notice-closed\", handleNoticeClose);\n  }, [handleNoticeClose]);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n      const isNoticeClosedToBeHidden = noticeElement?.classList.contains(\n        \"ui-announcement-hidden\",\n      );\n      setNoticeBannerVisible(\n        window.scrollY <= COLLAPSE_TRIGGER_DISTANCE &&\n          isNoticeBannerEnabled &&\n          !isNoticeClosedToBeHidden,\n      );\n      for (const scrollpoint of themedScrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          const rect = element.getBoundingClientRect();\n          if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n            setScrollpointClasses(scrollpoint.className);\n            return;\n          }\n        }\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 100);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll);\n    return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n  }, [themedScrollpoints, isNoticeBannerEnabled]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  // Close menu when location changes\n  useEffect(() => {\n    if (location && showMenu) {\n      closeMenu();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [location]);\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header role=\"banner\" style={headerStyle} className={headerClassName}>\n        <div className={cn(\"flex items-center h-full\", className)}>\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                badge={logoBadge}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-4 lg:mr-8\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-6 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div\n              className={cn(\n                FLEXIBLE_DESKTOP_CLASSES,\n                \"justify-center\",\n                headerCenterClassName,\n              )}\n            >\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","useCallback","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeBannerEnabled","noticeHeight","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","headerCenterClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","logoBadge","showMenu","setShowMenu","fadingOut","setFadingOut","noticeBannerVisible","setNoticeBannerVisible","menuRef","scrollpointClasses","setScrollpointClasses","length","headerStyle","height","top","headerClassName","closeMenu","setTimeout","handleNoticeClose","document","addEventListener","removeEventListener","handleScroll","noticeElement","querySelector","isNoticeClosedToBeHidden","classList","contains","window","scrollY","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","bottom","throttledHandleScroll","handleResize","innerWidth","body","add","remove","wrappedSearchButton","div","header","role","style","map","theme","key","href","badge","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport { throttle } from \"es-toolkit/compat\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\nimport { useThemedScrollpoints } from \"./hooks/use-themed-scrollpoints\";\nimport { ThemedScrollpoint } from \"./Header/types\";\n\nexport type { ThemedScrollpoint };\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  /**\n   * Optional classnames to add to the header\n   */\n  className?: string;\n  /**\n   * Indicates if the notice banner is enabled.\n   */\n  isNoticeBannerEnabled?: boolean;\n  /**\n   * Height of the notice banner in pixels.\n   */\n  noticeHeight?: number;\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional classname for styling the header links container.\n   */\n  headerLinksClassName?: string;\n\n  /**\n   * Optional classname for styling the header center container.\n   */\n  headerCenterClassName?: string;\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n\n  /**\n   * Optional location object to detect location changes.\n   */\n  location?: Location;\n\n  /**\n   * Optional badge text to display on the logo.\n   */\n  logoBadge?: string;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  className,\n  isNoticeBannerEnabled = false,\n  noticeHeight = 0,\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  headerLinksClassName,\n  headerCenterClassName,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n  location,\n  logoBadge,\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [noticeBannerVisible, setNoticeBannerVisible] = useState(\n    isNoticeBannerEnabled,\n  );\n  const menuRef = useRef<HTMLDivElement>(null);\n  const scrollpointClasses = useThemedScrollpoints(themedScrollpoints);\n\n  const headerStyle = {\n    height: HEADER_HEIGHT,\n    top: noticeBannerVisible ? `${noticeHeight}px` : \"0\",\n  };\n\n  const headerClassName = cn(\n    \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16\",\n    scrollpointClasses,\n    {\n      \"md:top-auto\": noticeBannerVisible,\n    },\n  );\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  const handleNoticeClose = useCallback(() => {\n    setNoticeBannerVisible(false);\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener(\"notice-closed\", handleNoticeClose);\n    return () =>\n      document.removeEventListener(\"notice-closed\", handleNoticeClose);\n  }, [handleNoticeClose]);\n\n  useEffect(() => {\n    if (!isNoticeBannerEnabled) {\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n\n    if (!noticeElement) {\n      console.warn(\"Header: Notice element not found\");\n      return;\n    }\n\n    let previousVisibility = noticeBannerVisible;\n\n    const handleScroll = () => {\n      const scrollY = window.scrollY;\n      const isNoticeHidden = noticeElement.classList.contains(\n        \"ui-announcement-hidden\",\n      );\n\n      const shouldBeVisible =\n        scrollY <= COLLAPSE_TRIGGER_DISTANCE && !isNoticeHidden;\n\n      if (shouldBeVisible !== previousVisibility) {\n        previousVisibility = shouldBeVisible;\n        setNoticeBannerVisible(shouldBeVisible);\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 100);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll, { passive: true });\n\n    return () => {\n      window.removeEventListener(\"scroll\", throttledHandleScroll);\n    };\n  }, [isNoticeBannerEnabled, noticeBannerVisible]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  // Close menu when location changes\n  useEffect(() => {\n    if (location && showMenu) {\n      closeMenu();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [location]);\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header role=\"banner\" style={headerStyle} className={headerClassName}>\n        <div className={cn(\"flex items-center h-full\", className)}>\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                badge={logoBadge}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-4 lg:mr-8\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-6 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div\n              className={cn(\n                FLEXIBLE_DESKTOP_CLASSES,\n                \"justify-center\",\n                headerCenterClassName,\n              )}\n            >\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","useCallback","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","useThemedScrollpoints","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeBannerEnabled","noticeHeight","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","headerCenterClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","logoBadge","showMenu","setShowMenu","fadingOut","setFadingOut","noticeBannerVisible","setNoticeBannerVisible","menuRef","scrollpointClasses","headerStyle","height","top","headerClassName","closeMenu","setTimeout","handleNoticeClose","document","addEventListener","removeEventListener","noticeElement","querySelector","console","warn","previousVisibility","handleScroll","scrollY","window","isNoticeHidden","classList","contains","shouldBeVisible","throttledHandleScroll","passive","handleResize","innerWidth","body","add","remove","wrappedSearchButton","div","header","role","style","map","theme","key","href","badge","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","id","maxWidth","maxHeight","ref"],"mappings":"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"}

package/core/Meganav.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";import{getMenuItemsForHeader}from"./Meganav/utils/getMenuItemsForHeader";const Meganav=({sessionState,notice,theme,themedScrollpoints,onNoticeClose,blogPosts})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const finalNoticeHeight=notice?noticeHeight:0;const headerMenuItems=useMemo(()=>getMenuItemsForHeader(blogPosts),[blogPosts]);const mobileNavItems=useMemo(()=>headerMenuItems.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[headerMenuItems]);const defaultThemedScrollpoints=[{id:"meganav",className:"ui-theme-light !bg-transparent !border-none"},{id:"meganav-theme-dark",className:"ui-theme-dark !bg-transparent !border-none"},{id:"main",className:"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b"},{id:"main-theme-dark",className:"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b"}];useEffect(()=>{if(!notice){if(noticeHeight!==0){setNoticeHeight(0)}return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement)return;const updateNoticeHeight=()=>{setNoticeHeight(noticeElement.getBoundingClientRect().height)};const observer=new ResizeObserver(updateNoticeHeight);observer.observe(noticeElement);const timeoutId=setTimeout(updateNoticeHeight,0);window.addEventListener("resize",updateNoticeHeight);return()=>{clearTimeout(timeoutId);observer.disconnect();window.removeEventListener("resize",updateNoticeHeight)}},[notice]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute inset-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+finalNoticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config,onClose:onNoticeClose}),React.createElement(Header,{className:"max-w-screen-xl mx-auto",isNoticeBannerEnabled:!!notice,noticeHeight:finalNoticeHeight,nav:React.createElement(Flyout,{menuItems:headerMenuItems,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-1 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-6 ",sessionState:sessionState,themedScrollpoints:themedScrollpoints??defaultThemedScrollpoints})))};export default Meganav;
+import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";import{getMenuItemsForHeader}from"./Meganav/utils/getMenuItemsForHeader";const Meganav=({sessionState,notice,theme,themedScrollpoints,onNoticeClose,blogPosts})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const finalNoticeHeight=notice?noticeHeight:0;const headerMenuItems=useMemo(()=>getMenuItemsForHeader(blogPosts),[blogPosts]);const mobileNavItems=useMemo(()=>headerMenuItems.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[headerMenuItems]);const defaultThemedScrollpoints=[{id:"meganav",className:"ui-theme-light !bg-transparent !border-none"},{id:"meganav-theme-dark",className:"ui-theme-dark !bg-transparent !border-none"},{id:"main",className:"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b"},{id:"main-theme-dark",className:"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b"}];useEffect(()=>{if(!notice){if(noticeHeight!==0){setNoticeHeight(0)}return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement)return;const updateNoticeHeight=()=>{setNoticeHeight(noticeElement.getBoundingClientRect().height)};const observer=new ResizeObserver(updateNoticeHeight);observer.observe(noticeElement);const timeoutId=setTimeout(updateNoticeHeight,0);window.addEventListener("resize",updateNoticeHeight);return()=>{clearTimeout(timeoutId);observer.disconnect();window.removeEventListener("resize",updateNoticeHeight)}},[notice]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute top-0 left-0 right-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+finalNoticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config,onClose:onNoticeClose}),React.createElement(Header,{className:"max-w-screen-xl mx-auto",isNoticeBannerEnabled:!!notice,noticeHeight:finalNoticeHeight,nav:React.createElement(Flyout,{menuItems:headerMenuItems,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-1 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-6 ",sessionState:sessionState,themedScrollpoints:themedScrollpoints??defaultThemedScrollpoints})))};export default Meganav;
 //# sourceMappingURL=Meganav.js.map

package/core/Meganav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState, ThemedScrollpoint } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\nimport { BlogPost } from \"./Meganav/MeganavBlog\";\nimport { getMenuItemsForHeader } from \"./Meganav/utils/getMenuItemsForHeader\";\n\nexport type MeganavNoticeBannerProps = {\n  props: {\n    title: string;\n    bodyText: string;\n    buttonLink: string;\n    buttonLabel: string;\n    closeBtn: boolean;\n  };\n  config: {\n    cookieId: string;\n    noticeId: string | number;\n    options: {\n      collapse: boolean;\n    };\n  };\n};\n\nexport type MeganavProps = {\n  sessionState: HeaderSessionState;\n  blogPosts: BlogPost[];\n  notice?: MeganavNoticeBannerProps;\n  theme?: string;\n  themedScrollpoints?: ThemedScrollpoint[];\n  onNoticeClose?: () => void;\n};\n\nconst Meganav = ({\n  sessionState,\n  notice,\n  theme,\n  themedScrollpoints,\n  onNoticeClose,\n  blogPosts,\n}: MeganavProps) => {\n  const [noticeHeight, setNoticeHeight] = React.useState(0);\n\n  const finalNoticeHeight = notice ? noticeHeight : 0;\n\n  const headerMenuItems = useMemo(\n    () => getMenuItemsForHeader(blogPosts),\n    [blogPosts],\n  );\n\n  const mobileNavItems = useMemo(\n    () =>\n      headerMenuItems\n        .filter((item) => !item.isHiddenMobile)\n        .map(({ name, link, content }) => ({ name, link, content })),\n    [headerMenuItems],\n  );\n\n  const defaultThemedScrollpoints = [\n    {\n      id: \"meganav\",\n      className: \"ui-theme-light !bg-transparent !border-none\",\n    },\n    {\n      id: \"meganav-theme-dark\",\n      className: \"ui-theme-dark !bg-transparent !border-none\",\n    },\n    {\n      id: \"main\",\n      className: \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n    {\n      id: \"main-theme-dark\",\n      className: \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n  ];\n\n  useEffect(() => {\n    if (!notice) {\n      if (noticeHeight !== 0) {\n        setNoticeHeight(0);\n      }\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n    if (!noticeElement) return;\n\n    const updateNoticeHeight = () => {\n      setNoticeHeight(noticeElement.getBoundingClientRect().height);\n    };\n\n    const observer = new ResizeObserver(updateNoticeHeight);\n    observer.observe(noticeElement);\n\n    const timeoutId = setTimeout(updateNoticeHeight, 0);\n    window.addEventListener(\"resize\", updateNoticeHeight);\n\n    return () => {\n      clearTimeout(timeoutId);\n      observer.disconnect();\n      window.removeEventListener(\"resize\", updateNoticeHeight);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notice]);\n\n  return (\n    <>\n      <div\n        className=\"absolute inset-0 w-full z-50\"\n        id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n        data-testid=\"meganav\"\n        style={{ height: HEADER_HEIGHT + finalNoticeHeight }}\n      >\n        {notice && (\n          <Notice\n            {...notice.props}\n            config={notice.config}\n            onClose={onNoticeClose}\n          />\n        )}\n        <Header\n          className=\"max-w-screen-xl mx-auto\"\n          isNoticeBannerEnabled={!!notice}\n          noticeHeight={finalNoticeHeight}\n          nav={\n            <Flyout\n              menuItems={headerMenuItems}\n              className=\"justify-left z-40\"\n              flyOutClassName=\"flex justify-left\"\n              viewPortClassName=\"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-1 bg-neutral-000 dark:bg-neutral-1300\"\n            />\n          }\n          mobileNav={<MeganavMobile navItems={mobileNavItems} />}\n          headerLinks={[{ href: \"/contact\", label: \"Contact us\" }]}\n          headerLinksClassName=\"md:gap-x-6 \"\n          sessionState={sessionState}\n          themedScrollpoints={themedScrollpoints ?? defaultThemedScrollpoints}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","MeganavMobile","Notice","HEADER_HEIGHT","getMenuItemsForHeader","Meganav","sessionState","notice","theme","themedScrollpoints","onNoticeClose","blogPosts","noticeHeight","setNoticeHeight","useState","finalNoticeHeight","headerMenuItems","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","defaultThemedScrollpoints","id","className","noticeElement","document","querySelector","updateNoticeHeight","getBoundingClientRect","height","observer","ResizeObserver","observe","timeoutId","setTimeout","window","addEventListener","clearTimeout","disconnect","removeEventListener","div","data-testid","style","props","config","onClose","isNoticeBannerEnabled","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAuD,UAAW,AACzE,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,AAEhD,QAASC,qBAAqB,KAAQ,uCAAwC,CA4B9E,MAAMC,QAAU,CAAC,CACfC,YAAY,CACZC,MAAM,CACNC,KAAK,CACLC,kBAAkB,CAClBC,aAAa,CACbC,SAAS,CACI,IACb,KAAM,CAACC,aAAcC,gBAAgB,CAAGjB,MAAMkB,QAAQ,CAAC,GAEvD,MAAMC,kBAAoBR,OAASK,aAAe,EAElD,MAAMI,gBAAkBlB,QACtB,IAAMM,sBAAsBO,WAC5B,CAACA,UAAU,EAGb,MAAMM,eAAiBnB,QACrB,IACEkB,gBACGE,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAC7D,CAACR,gBAAgB,EAGnB,MAAMS,0BAA4B,CAChC,CACEC,GAAI,UACJC,UAAW,6CACb,EACA,CACED,GAAI,qBACJC,UAAW,4CACb,EACA,CACED,GAAI,OACJC,UAAW,6DACb,EACA,CACED,GAAI,kBACJC,UAAW,4DACb,EACD,CAED9B,UAAU,KACR,GAAI,CAACU,OAAQ,CACX,GAAIK,eAAiB,EAAG,CACtBC,gBAAgB,EAClB,CACA,MACF,CAEA,MAAMe,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAI,CAACF,cAAe,OAEpB,MAAMG,mBAAqB,KACzBlB,gBAAgBe,cAAcI,qBAAqB,GAAGC,MAAM,CAC9D,EAEA,MAAMC,SAAW,IAAIC,eAAeJ,oBACpCG,SAASE,OAAO,CAACR,eAEjB,MAAMS,UAAYC,WAAWP,mBAAoB,GACjDQ,OAAOC,gBAAgB,CAAC,SAAUT,oBAElC,MAAO,KACLU,aAAaJ,WACbH,SAASQ,UAAU,GACnBH,OAAOI,mBAAmB,CAAC,SAAUZ,mBACvC,CAEF,EAAG,CAACxB,OAAO,EAEX,OACE,wCACE,oBAACqC,OACCjB,UAAU,+BACVD,GAAIlB,QAAU,OAAS,qBAAuB,UAC9CqC,cAAY,UACZC,MAAO,CAAEb,OAAQ9B,cAAgBY,iBAAkB,GAElDR,QACC,oBAACL,QACE,GAAGK,OAAOwC,KAAK,CAChBC,OAAQzC,OAAOyC,MAAM,CACrBC,QAASvC,gBAGb,oBAACX,QACC4B,UAAU,0BACVuB,sBAAuB,CAAC,CAAC3C,OACzBK,aAAcG,kBACdoC,IACE,oBAACnD,QACCoD,UAAWpC,gBACXW,UAAU,oBACV0B,gBAAgB,oBAChBC,kBAAkB,iIAGtBC,UAAW,oBAACtD,eAAcuD,SAAUvC,iBACpCwC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,cACrBtD,aAAcA,aACdG,mBAAoBA,oBAAsBgB,6BAKpD,CAEA,gBAAepB,OAAQ"}
+{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState, ThemedScrollpoint } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\nimport { BlogPost } from \"./Meganav/MeganavBlog\";\nimport { getMenuItemsForHeader } from \"./Meganav/utils/getMenuItemsForHeader\";\n\nexport type MeganavNoticeBannerProps = {\n  props: {\n    title: string;\n    bodyText: string;\n    buttonLink: string;\n    buttonLabel: string;\n    closeBtn: boolean;\n  };\n  config: {\n    cookieId: string;\n    noticeId: string | number;\n    options: {\n      collapse: boolean;\n    };\n  };\n};\n\nexport type MeganavProps = {\n  sessionState: HeaderSessionState;\n  blogPosts: BlogPost[];\n  notice?: MeganavNoticeBannerProps;\n  theme?: string;\n  themedScrollpoints?: ThemedScrollpoint[];\n  onNoticeClose?: () => void;\n};\n\nconst Meganav = ({\n  sessionState,\n  notice,\n  theme,\n  themedScrollpoints,\n  onNoticeClose,\n  blogPosts,\n}: MeganavProps) => {\n  const [noticeHeight, setNoticeHeight] = React.useState(0);\n\n  const finalNoticeHeight = notice ? noticeHeight : 0;\n\n  const headerMenuItems = useMemo(\n    () => getMenuItemsForHeader(blogPosts),\n    [blogPosts],\n  );\n\n  const mobileNavItems = useMemo(\n    () =>\n      headerMenuItems\n        .filter((item) => !item.isHiddenMobile)\n        .map(({ name, link, content }) => ({ name, link, content })),\n    [headerMenuItems],\n  );\n\n  const defaultThemedScrollpoints = [\n    {\n      id: \"meganav\",\n      className: \"ui-theme-light !bg-transparent !border-none\",\n    },\n    {\n      id: \"meganav-theme-dark\",\n      className: \"ui-theme-dark !bg-transparent !border-none\",\n    },\n    {\n      id: \"main\",\n      className: \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n    {\n      id: \"main-theme-dark\",\n      className: \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n  ];\n\n  useEffect(() => {\n    if (!notice) {\n      if (noticeHeight !== 0) {\n        setNoticeHeight(0);\n      }\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n    if (!noticeElement) return;\n\n    const updateNoticeHeight = () => {\n      setNoticeHeight(noticeElement.getBoundingClientRect().height);\n    };\n\n    const observer = new ResizeObserver(updateNoticeHeight);\n    observer.observe(noticeElement);\n\n    const timeoutId = setTimeout(updateNoticeHeight, 0);\n    window.addEventListener(\"resize\", updateNoticeHeight);\n\n    return () => {\n      clearTimeout(timeoutId);\n      observer.disconnect();\n      window.removeEventListener(\"resize\", updateNoticeHeight);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notice]);\n\n  return (\n    <>\n      <div\n        className=\"absolute top-0 left-0 right-0 w-full z-50\"\n        id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n        data-testid=\"meganav\"\n        style={{ height: HEADER_HEIGHT + finalNoticeHeight }}\n      >\n        {notice && (\n          <Notice\n            {...notice.props}\n            config={notice.config}\n            onClose={onNoticeClose}\n          />\n        )}\n        <Header\n          className=\"max-w-screen-xl mx-auto\"\n          isNoticeBannerEnabled={!!notice}\n          noticeHeight={finalNoticeHeight}\n          nav={\n            <Flyout\n              menuItems={headerMenuItems}\n              className=\"justify-left z-40\"\n              flyOutClassName=\"flex justify-left\"\n              viewPortClassName=\"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-1 bg-neutral-000 dark:bg-neutral-1300\"\n            />\n          }\n          mobileNav={<MeganavMobile navItems={mobileNavItems} />}\n          headerLinks={[{ href: \"/contact\", label: \"Contact us\" }]}\n          headerLinksClassName=\"md:gap-x-6 \"\n          sessionState={sessionState}\n          themedScrollpoints={themedScrollpoints ?? defaultThemedScrollpoints}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","MeganavMobile","Notice","HEADER_HEIGHT","getMenuItemsForHeader","Meganav","sessionState","notice","theme","themedScrollpoints","onNoticeClose","blogPosts","noticeHeight","setNoticeHeight","useState","finalNoticeHeight","headerMenuItems","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","defaultThemedScrollpoints","id","className","noticeElement","document","querySelector","updateNoticeHeight","getBoundingClientRect","height","observer","ResizeObserver","observe","timeoutId","setTimeout","window","addEventListener","clearTimeout","disconnect","removeEventListener","div","data-testid","style","props","config","onClose","isNoticeBannerEnabled","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAuD,UAAW,AACzE,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,AAEhD,QAASC,qBAAqB,KAAQ,uCAAwC,CA4B9E,MAAMC,QAAU,CAAC,CACfC,YAAY,CACZC,MAAM,CACNC,KAAK,CACLC,kBAAkB,CAClBC,aAAa,CACbC,SAAS,CACI,IACb,KAAM,CAACC,aAAcC,gBAAgB,CAAGjB,MAAMkB,QAAQ,CAAC,GAEvD,MAAMC,kBAAoBR,OAASK,aAAe,EAElD,MAAMI,gBAAkBlB,QACtB,IAAMM,sBAAsBO,WAC5B,CAACA,UAAU,EAGb,MAAMM,eAAiBnB,QACrB,IACEkB,gBACGE,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAC7D,CAACR,gBAAgB,EAGnB,MAAMS,0BAA4B,CAChC,CACEC,GAAI,UACJC,UAAW,6CACb,EACA,CACED,GAAI,qBACJC,UAAW,4CACb,EACA,CACED,GAAI,OACJC,UAAW,6DACb,EACA,CACED,GAAI,kBACJC,UAAW,4DACb,EACD,CAED9B,UAAU,KACR,GAAI,CAACU,OAAQ,CACX,GAAIK,eAAiB,EAAG,CACtBC,gBAAgB,EAClB,CACA,MACF,CAEA,MAAMe,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAI,CAACF,cAAe,OAEpB,MAAMG,mBAAqB,KACzBlB,gBAAgBe,cAAcI,qBAAqB,GAAGC,MAAM,CAC9D,EAEA,MAAMC,SAAW,IAAIC,eAAeJ,oBACpCG,SAASE,OAAO,CAACR,eAEjB,MAAMS,UAAYC,WAAWP,mBAAoB,GACjDQ,OAAOC,gBAAgB,CAAC,SAAUT,oBAElC,MAAO,KACLU,aAAaJ,WACbH,SAASQ,UAAU,GACnBH,OAAOI,mBAAmB,CAAC,SAAUZ,mBACvC,CAEF,EAAG,CAACxB,OAAO,EAEX,OACE,wCACE,oBAACqC,OACCjB,UAAU,4CACVD,GAAIlB,QAAU,OAAS,qBAAuB,UAC9CqC,cAAY,UACZC,MAAO,CAAEb,OAAQ9B,cAAgBY,iBAAkB,GAElDR,QACC,oBAACL,QACE,GAAGK,OAAOwC,KAAK,CAChBC,OAAQzC,OAAOyC,MAAM,CACrBC,QAASvC,gBAGb,oBAACX,QACC4B,UAAU,0BACVuB,sBAAuB,CAAC,CAAC3C,OACzBK,aAAcG,kBACdoC,IACE,oBAACnD,QACCoD,UAAWpC,gBACXW,UAAU,oBACV0B,gBAAgB,oBAChBC,kBAAkB,iIAGtBC,UAAW,oBAACtD,eAAcuD,SAAUvC,iBACpCwC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,cACrBtD,aAAcA,aACdG,mBAAoBA,oBAAsBgB,6BAKpD,CAEA,gBAAepB,OAAQ"}

package/core/Notice.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useRef,useState}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100 dark:bg-orange-1100",textColor=defaultTextColor,onClose})=>{const contentRef=useRef(null);const[isClosing,setIsClosing]=useState(false);useRailsUjsLinks(contentRef);useEffect(()=>{const cleanup=NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}});return cleanup},[config?.cookieId,config?.noticeId,config?.options?.collapse]);const safeContent=DOMPurify.sanitize(bodyText??"",{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});return React.createElement("div",{className:cn("ui-announcement relative z-[60]",isClosing?"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden":"ui-announcement-visible",bgColor,textColor),"data-id":"ui-notice"},React.createElement("div",{className:"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-1"},title),React.createElement("span",{ref:contentRef,className:"pr-1",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent",onClick:()=>{setIsClosing(true);setTimeout(()=>{document.dispatchEvent(new CustomEvent("notice-closed"));onClose?.()},300)}},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
+import React,{useEffect,useRef,useState}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 ui-text-p4 self-center";const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100 dark:bg-orange-1100",textColor=defaultTextColor,onClose})=>{const contentRef=useRef(null);const[isClosing,setIsClosing]=useState(false);useRailsUjsLinks(contentRef);useEffect(()=>{const cleanup=NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}});return cleanup},[config?.cookieId,config?.noticeId,config?.options?.collapse]);const safeContent=DOMPurify.sanitize(bodyText??"",{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});const isSafeButtonLink=typeof buttonLink==="string"&&(/^\/(?!\/)/.test(buttonLink)||/^https?:\/\//.test(buttonLink));return React.createElement("div",{className:cn("ui-announcement relative z-[60]",isClosing?"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden":"ui-announcement-visible",bgColor,textColor),"data-id":"ui-notice"},React.createElement("div",{className:"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start"},React.createElement("div",{className:cn(contentWrapperClasses,textColor)},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-1"},title),React.createElement("span",{ref:contentRef,className:"pr-1",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&(isSafeButtonLink?React.createElement("a",{href:buttonLink,className:"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel):React.createElement("span",{className:"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel))),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent",onClick:()=>{setIsClosing(true);setTimeout(()=>{document.dispatchEvent(new CustomEvent("notice-closed"));onClose?.()},300)}},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
 //# sourceMappingURL=Notice.js.map

package/core/Notice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\ntype ContentWrapperProps = {\n  buttonLink: string;\n  children: ReactNode;\n  textColor?: ColorClass | ColorThemeSet;\n};\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n  onClose?: () => void;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n  buttonLink,\n  textColor = defaultTextColor,\n  children,\n}: ContentWrapperProps) =>\n  buttonLink ? (\n    <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n      {children}\n    </a>\n  ) : (\n    <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n  );\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText,\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n  textColor = defaultTextColor,\n  onClose,\n}: NoticeProps) => {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const [isClosing, setIsClosing] = useState(false);\n  useRailsUjsLinks(contentRef);\n\n  useEffect(() => {\n    const cleanup = NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n\n    return cleanup;\n  }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n  const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  // have to add the style classes here as src/core/Notice/component.css is not being properly imported or distributed when ably-ui is used as a package.\n  return (\n    <div\n      className={cn(\n        \"ui-announcement relative z-[60]\",\n        isClosing\n          ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n          : \"ui-announcement-visible\",\n        bgColor,\n        textColor,\n      )}\n      data-id=\"ui-notice\"\n    >\n      <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n        <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n          <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n          <span\n            ref={contentRef}\n            className=\"pr-1\"\n            dangerouslySetInnerHTML={{\n              __html: safeContent,\n            }}\n          ></span>\n          {buttonLabel && (\n            <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n              {buttonLabel}\n            </span>\n          )}\n        </ContentWrapper>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent\"\n            onClick={() => {\n              setIsClosing(true);\n              setTimeout(() => {\n                document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n                onClose?.();\n              }, 300);\n            }}\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AACtE,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CAmC3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWX,GAAGI,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWX,GAAGI,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CZ,UAAYJ,gBAAgB,CAC5BiB,OAAO,CACK,IACZ,MAAMC,WAAazB,OAAwB,MAC3C,KAAM,CAAC0B,UAAWC,aAAa,CAAG1B,SAAS,OAC3CK,iBAAiBmB,YAEjB1B,UAAU,KACR,MAAM6B,QAAUvB,cAAc,CAC5BwB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUX,QAAQW,SAClBC,SAAUZ,QAAQY,SAClBC,QAAS,CACPC,SAAUd,QAAQa,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACP,QAAQW,SAAUX,QAAQY,SAAUZ,QAAQa,SAASC,SAAS,EAElE,MAAMC,YAAclC,UAAUmC,QAAQ,CAAClB,UAAY,GAAI,CACrDmB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAGA,OACE,oBAACxB,OACCD,UAAWX,GACT,kCACAsB,UACI,6EACA,0BACJH,QACAZ,WAEF8B,UAAQ,aAER,oBAACzB,OAAID,UAAU,4DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAACgC,UAAO3B,UAAU,oCAAoCK,OACtD,oBAACuB,QACCC,IAAKnB,WACLV,UAAU,OACV8B,wBAAyB,CACvBC,OAAQV,WACV,IAEDlB,aACC,oBAACyB,QAAK5B,UAAU,gGACbG,cAKNI,UACC,oBAACyB,UACCC,KAAK,SACLjC,UAAU,0HACVkC,QAAS,KACPtB,aAAa,MACbuB,WAAW,KACTpB,SAASqB,aAAa,CAAC,IAAIC,YAAY,kBACvC5B,WACF,EAAG,IACL,GAEA,oBAACrB,MACCkD,KAAK,0BACLC,KAAK,UACLC,MAAO5C,cAOrB,CAEA,gBAAeM,MAAO"}
+{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n  onClose?: () => void;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText,\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n  textColor = defaultTextColor,\n  onClose,\n}: NoticeProps) => {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const [isClosing, setIsClosing] = useState(false);\n  useRailsUjsLinks(contentRef);\n\n  useEffect(() => {\n    const cleanup = NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n\n    return cleanup;\n  }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n  const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const isSafeButtonLink =\n    typeof buttonLink === \"string\" &&\n    (/^\\/(?!\\/)/.test(buttonLink) || /^https?:\\/\\//.test(buttonLink));\n\n  // have to add the style classes here as src/core/Notice/component.css is not being properly imported or distributed when ably-ui is used as a package.\n  return (\n    <div\n      className={cn(\n        \"ui-announcement relative z-[60]\",\n        isClosing\n          ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n          : \"ui-announcement-visible\",\n        bgColor,\n        textColor,\n      )}\n      data-id=\"ui-notice\"\n    >\n      <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n        <div className={cn(contentWrapperClasses, textColor)}>\n          <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n          <span\n            ref={contentRef}\n            className=\"pr-1\"\n            dangerouslySetInnerHTML={{\n              __html: safeContent,\n            }}\n          ></span>\n          {buttonLabel &&\n            (isSafeButtonLink ? (\n              <a\n                href={buttonLink}\n                className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\"\n              >\n                {buttonLabel}\n              </a>\n            ) : (\n              <span className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n                {buttonLabel}\n              </span>\n            ))}\n        </div>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent\"\n            onClick={() => {\n              setIsClosing(true);\n              setTimeout(() => {\n                document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n                onClose?.();\n              }, 300);\n            }}\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","Notice","buttonLink","buttonLabel","bodyText","title","config","closeBtn","bgColor","textColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","isSafeButtonLink","test","div","className","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","a","href","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CA6B3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,OAAS,CAAC,CACdC,UAAU,CACVC,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CC,UAAYV,gBAAgB,CAC5BW,OAAO,CACK,IACZ,MAAMC,WAAanB,OAAwB,MAC3C,KAAM,CAACoB,UAAWC,aAAa,CAAGpB,SAAS,OAC3CK,iBAAiBa,YAEjBpB,UAAU,KACR,MAAMuB,QAAUjB,cAAc,CAC5BkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUZ,QAAQY,SAClBC,SAAUb,QAAQa,SAClBC,QAAS,CACPC,SAAUf,QAAQc,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACR,QAAQY,SAAUZ,QAAQa,SAAUb,QAAQc,SAASC,SAAS,EAElE,MAAMC,YAAc5B,UAAU6B,QAAQ,CAACnB,UAAY,GAAI,CACrDoB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,MAAMC,iBACJ,OAAOzB,aAAe,UACrB,CAAA,YAAY0B,IAAI,CAAC1B,aAAe,eAAe0B,IAAI,CAAC1B,WAAU,EAGjE,OACE,oBAAC2B,OACCC,UAAWlC,GACT,kCACAgB,UACI,6EACA,0BACJJ,QACAC,WAEFsB,UAAQ,aAER,oBAACF,OAAIC,UAAU,4DACb,oBAACD,OAAIC,UAAWlC,GAAGI,sBAAuBS,YACxC,oBAACuB,UAAOF,UAAU,oCAAoCzB,OACtD,oBAAC4B,QACCC,IAAKvB,WACLmB,UAAU,OACVK,wBAAyB,CACvBC,OAAQd,WACV,IAEDnB,aACEwB,CAAAA,iBACC,oBAACU,KACCC,KAAMpC,WACN4B,UAAU,6HAET3B,aAGH,oBAAC8B,QAAKH,UAAU,6HACb3B,YAEL,GAGHI,UACC,oBAACgC,UACCC,KAAK,SACLV,UAAU,0HACVW,QAAS,KACP5B,aAAa,MACb6B,WAAW,KACT1B,SAAS2B,aAAa,CAAC,IAAIC,YAAY,kBACvClC,WACF,EAAG,IACL,GAEA,oBAACf,MACCkD,KAAK,0BACLC,KAAK,UACLC,MAAOtC,cAOrB,CAEA,gBAAeR,MAAO"}

package/core/hooks/use-content-height.js

@@ -0,0 +1,2 @@
+import{useState,useEffect,useRef}from"react";export function useContentHeight(ref,initialHeight=0){const[contentHeight,setContentHeight]=useState(initialHeight);const observerRef=useRef(null);useEffect(()=>{const element=ref.current;if(!element){return}observerRef.current=new ResizeObserver(entries=>{requestAnimationFrame(()=>{const entry=entries[0];if(entry&&entry.contentRect){const newHeight=Math.round(entry.contentRect.height);setContentHeight(newHeight)}})});observerRef.current.observe(element);return()=>{observerRef.current?.disconnect();observerRef.current=null}},[ref]);return contentHeight}
+//# sourceMappingURL=use-content-height.js.map

package/core/hooks/use-content-height.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/hooks/use-content-height.ts"],"sourcesContent":["import { useState, useEffect, useRef, RefObject } from \"react\";\n\n/**\n * Custom hook that tracks the content height of an element using ResizeObserver.\n * This eliminates forced reflows by using the browser's native resize observation API\n * instead of synchronous clientHeight/getBoundingClientRect queries.\n *\n * @param ref - React ref to the element to observe\n * @param initialHeight - Initial height value (default: 0)\n * @returns Current content height in pixels\n */\nexport function useContentHeight(\n  ref: RefObject<HTMLElement>,\n  initialHeight = 0,\n): number {\n  const [contentHeight, setContentHeight] = useState<number>(initialHeight);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    observerRef.current = new ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        const entry = entries[0];\n        if (entry && entry.contentRect) {\n          const newHeight = Math.round(entry.contentRect.height);\n          setContentHeight(newHeight);\n        }\n      });\n    });\n\n    observerRef.current.observe(element);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [ref]);\n\n  return contentHeight;\n}\n"],"names":["useState","useEffect","useRef","useContentHeight","ref","initialHeight","contentHeight","setContentHeight","observerRef","element","current","ResizeObserver","entries","requestAnimationFrame","entry","contentRect","newHeight","Math","round","height","observe","disconnect"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,SAAS,CAAEC,MAAM,KAAmB,OAAQ,AAW/D,QAAO,SAASC,iBACdC,GAA2B,CAC3BC,cAAgB,CAAC,EAEjB,KAAM,CAACC,cAAeC,iBAAiB,CAAGP,SAAiBK,eAC3D,MAAMG,YAAcN,OAA8B,MAElDD,UAAU,KACR,MAAMQ,QAAUL,IAAIM,OAAO,CAE3B,GAAI,CAACD,QAAS,CACZ,MACF,CAEAD,YAAYE,OAAO,CAAG,IAAIC,eAAe,AAACC,UACxCC,sBAAsB,KACpB,MAAMC,MAAQF,OAAO,CAAC,EAAE,CACxB,GAAIE,OAASA,MAAMC,WAAW,CAAE,CAC9B,MAAMC,UAAYC,KAAKC,KAAK,CAACJ,MAAMC,WAAW,CAACI,MAAM,EACrDZ,iBAAiBS,UACnB,CACF,EACF,GAEAR,YAAYE,OAAO,CAACU,OAAO,CAACX,SAE5B,MAAO,KACLD,YAAYE,OAAO,EAAEW,YACrBb,CAAAA,YAAYE,OAAO,CAAG,IACxB,CACF,EAAG,CAACN,IAAI,EAER,OAAOE,aACT"}

package/core/hooks/use-themed-scrollpoints.js

@@ -0,0 +1,2 @@
+import{useState,useEffect,useRef}from"react";const HEADER_HEIGHT=64;export function useThemedScrollpoints(scrollpoints){const[activeClassName,setActiveClassName]=useState("");const previousClassNameRef=useRef("");const observerRef=useRef(null);const initialCheckDoneRef=useRef(false);const intersectingElementsRef=useRef(new Map);useEffect(()=>{if(scrollpoints.length===0){return}const intersectingElements=intersectingElementsRef.current;observerRef.current=new IntersectionObserver(entries=>{requestAnimationFrame(()=>{for(const entry of entries){const id=entry.target.id;if(entry.isIntersecting){intersectingElements.set(id,entry)}else{intersectingElements.delete(id)}}let bestMatch=null;for(const[id,entry]of intersectingElements){const scrollpoint=scrollpoints.find(sp=>sp.id===id);if(!scrollpoint)continue;const rect=entry.boundingClientRect||entry.target.getBoundingClientRect();const containsHeader=rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT;if(containsHeader){const distance=Math.abs(rect.top-HEADER_HEIGHT);if(!bestMatch||distance<bestMatch.distance){bestMatch={scrollpoint,distance}}}}if(bestMatch&&bestMatch.scrollpoint.className!==previousClassNameRef.current){previousClassNameRef.current=bestMatch.scrollpoint.className;setActiveClassName(bestMatch.scrollpoint.className)}})},{rootMargin:`-${HEADER_HEIGHT}px 0px 0px 0px`,threshold:0});scrollpoints.forEach(({id})=>{const element=document.getElementById(id);if(element){observerRef.current?.observe(element)}else{console.warn(`useThemedScrollpoints: Element with id "${id}" not found in DOM`)}});const timeoutId=setTimeout(()=>{if(initialCheckDoneRef.current){return}initialCheckDoneRef.current=true;let bestMatch=null;for(const scrollpoint of scrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();const containsHeader=rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT;if(containsHeader){const distance=Math.abs(rect.top-HEADER_HEIGHT);if(!bestMatch||distance<bestMatch.distance){bestMatch={scrollpoint,distance}}}}}if(bestMatch){previousClassNameRef.current=bestMatch.scrollpoint.className;setActiveClassName(bestMatch.scrollpoint.className)}},0);return()=>{clearTimeout(timeoutId);observerRef.current?.disconnect();observerRef.current=null;initialCheckDoneRef.current=false;intersectingElements.clear()}},[scrollpoints]);return activeClassName}
+//# sourceMappingURL=use-themed-scrollpoints.js.map

package/core/hooks/use-themed-scrollpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.ts"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { ThemedScrollpoint } from \"../Header/types\";\n\nconst HEADER_HEIGHT = 64;\n\nexport function useThemedScrollpoints(\n  scrollpoints: ThemedScrollpoint[],\n): string {\n  const [activeClassName, setActiveClassName] = useState<string>(\"\");\n\n  const previousClassNameRef = useRef<string>(\"\");\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const initialCheckDoneRef = useRef<boolean>(false);\n  const intersectingElementsRef = useRef<\n    Map<string, IntersectionObserverEntry>\n  >(new Map());\n\n  useEffect(() => {\n    if (scrollpoints.length === 0) {\n      return;\n    }\n\n    const intersectingElements = intersectingElementsRef.current;\n\n    observerRef.current = new IntersectionObserver(\n      (entries) => {\n        requestAnimationFrame(() => {\n          // Update the map of currently intersecting elements\n          for (const entry of entries) {\n            const id = (entry.target as HTMLElement).id;\n            if (entry.isIntersecting) {\n              intersectingElements.set(id, entry);\n            } else {\n              intersectingElements.delete(id);\n            }\n          }\n\n          // Find the best match from ALL currently intersecting elements\n          let bestMatch: {\n            scrollpoint: ThemedScrollpoint;\n            distance: number;\n          } | null = null;\n\n          for (const [id, entry] of intersectingElements) {\n            const scrollpoint = scrollpoints.find((sp) => sp.id === id);\n            if (!scrollpoint) continue;\n\n            // Use boundingClientRect from entry if available, otherwise get from target\n            const rect =\n              entry.boundingClientRect || entry.target.getBoundingClientRect();\n            const containsHeader =\n              rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT;\n\n            if (containsHeader) {\n              const distance = Math.abs(rect.top - HEADER_HEIGHT);\n              if (!bestMatch || distance < bestMatch.distance) {\n                bestMatch = { scrollpoint, distance };\n              }\n            }\n          }\n\n          if (\n            bestMatch &&\n            bestMatch.scrollpoint.className !== previousClassNameRef.current\n          ) {\n            previousClassNameRef.current = bestMatch.scrollpoint.className;\n            setActiveClassName(bestMatch.scrollpoint.className);\n          }\n        });\n      },\n      {\n        rootMargin: `-${HEADER_HEIGHT}px 0px 0px 0px`,\n        threshold: 0,\n      },\n    );\n\n    scrollpoints.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) {\n        observerRef.current?.observe(element);\n      } else {\n        console.warn(\n          `useThemedScrollpoints: Element with id \"${id}\" not found in DOM`,\n        );\n      }\n    });\n\n    // Manually check initial intersection state since IntersectionObserver\n    // callbacks only fire on changes, not on initial observation\n    // Use a small timeout to ensure DOM is fully laid out\n    const timeoutId = setTimeout(() => {\n      if (initialCheckDoneRef.current) {\n        return;\n      }\n      initialCheckDoneRef.current = true;\n\n      // Find the element closest to the header position\n      let bestMatch: {\n        scrollpoint: ThemedScrollpoint;\n        distance: number;\n      } | null = null;\n\n      for (const scrollpoint of scrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          const rect = element.getBoundingClientRect();\n          const containsHeader =\n            rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT;\n\n          if (containsHeader) {\n            const distance = Math.abs(rect.top - HEADER_HEIGHT);\n            if (!bestMatch || distance < bestMatch.distance) {\n              bestMatch = { scrollpoint, distance };\n            }\n          }\n        }\n      }\n\n      if (bestMatch) {\n        previousClassNameRef.current = bestMatch.scrollpoint.className;\n        setActiveClassName(bestMatch.scrollpoint.className);\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(timeoutId);\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n      initialCheckDoneRef.current = false;\n      intersectingElements.clear();\n    };\n  }, [scrollpoints]);\n\n  return activeClassName;\n}\n"],"names":["useState","useEffect","useRef","HEADER_HEIGHT","useThemedScrollpoints","scrollpoints","activeClassName","setActiveClassName","previousClassNameRef","observerRef","initialCheckDoneRef","intersectingElementsRef","Map","length","intersectingElements","current","IntersectionObserver","entries","requestAnimationFrame","entry","id","target","isIntersecting","set","delete","bestMatch","scrollpoint","find","sp","rect","boundingClientRect","getBoundingClientRect","containsHeader","top","bottom","distance","Math","abs","className","rootMargin","threshold","forEach","element","document","getElementById","observe","console","warn","timeoutId","setTimeout","clearTimeout","disconnect","clear"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,SAAS,CAAEC,MAAM,KAAQ,OAAQ,CAGpD,MAAMC,cAAgB,EAEtB,QAAO,SAASC,sBACdC,YAAiC,EAEjC,KAAM,CAACC,gBAAiBC,mBAAmB,CAAGP,SAAiB,IAE/D,MAAMQ,qBAAuBN,OAAe,IAC5C,MAAMO,YAAcP,OAAoC,MACxD,MAAMQ,oBAAsBR,OAAgB,OAC5C,MAAMS,wBAA0BT,OAE9B,IAAIU,KAENX,UAAU,KACR,GAAII,aAAaQ,MAAM,GAAK,EAAG,CAC7B,MACF,CAEA,MAAMC,qBAAuBH,wBAAwBI,OAAO,AAE5DN,CAAAA,YAAYM,OAAO,CAAG,IAAIC,qBACxB,AAACC,UACCC,sBAAsB,KAEpB,IAAK,MAAMC,SAASF,QAAS,CAC3B,MAAMG,GAAK,AAACD,MAAME,MAAM,CAAiBD,EAAE,CAC3C,GAAID,MAAMG,cAAc,CAAE,CACxBR,qBAAqBS,GAAG,CAACH,GAAID,MAC/B,KAAO,CACLL,qBAAqBU,MAAM,CAACJ,GAC9B,CACF,CAGA,IAAIK,UAGO,KAEX,IAAK,KAAM,CAACL,GAAID,MAAM,GAAIL,qBAAsB,CAC9C,MAAMY,YAAcrB,aAAasB,IAAI,CAAC,AAACC,IAAOA,GAAGR,EAAE,GAAKA,IACxD,GAAI,CAACM,YAAa,SAGlB,MAAMG,KACJV,MAAMW,kBAAkB,EAAIX,MAAME,MAAM,CAACU,qBAAqB,GAChE,MAAMC,eACJH,KAAKI,GAAG,EAAI9B,eAAiB0B,KAAKK,MAAM,EAAI/B,cAE9C,GAAI6B,eAAgB,CAClB,MAAMG,SAAWC,KAAKC,GAAG,CAACR,KAAKI,GAAG,CAAG9B,eACrC,GAAI,CAACsB,WAAaU,SAAWV,UAAUU,QAAQ,CAAE,CAC/CV,UAAY,CAAEC,YAAaS,QAAS,CACtC,CACF,CACF,CAEA,GACEV,WACAA,UAAUC,WAAW,CAACY,SAAS,GAAK9B,qBAAqBO,OAAO,CAChE,CACAP,qBAAqBO,OAAO,CAAGU,UAAUC,WAAW,CAACY,SAAS,CAC9D/B,mBAAmBkB,UAAUC,WAAW,CAACY,SAAS,CACpD,CACF,EACF,EACA,CACEC,WAAY,CAAC,CAAC,EAAEpC,cAAc,cAAc,CAAC,CAC7CqC,UAAW,CACb,GAGFnC,aAAaoC,OAAO,CAAC,CAAC,CAAErB,EAAE,CAAE,IAC1B,MAAMsB,QAAUC,SAASC,cAAc,CAACxB,IACxC,GAAIsB,QAAS,CACXjC,YAAYM,OAAO,EAAE8B,QAAQH,QAC/B,KAAO,CACLI,QAAQC,IAAI,CACV,CAAC,wCAAwC,EAAE3B,GAAG,kBAAkB,CAAC,CAErE,CACF,GAKA,MAAM4B,UAAYC,WAAW,KAC3B,GAAIvC,oBAAoBK,OAAO,CAAE,CAC/B,MACF,CACAL,oBAAoBK,OAAO,CAAG,KAG9B,IAAIU,UAGO,KAEX,IAAK,MAAMC,eAAerB,aAAc,CACtC,MAAMqC,QAAUC,SAASC,cAAc,CAAClB,YAAYN,EAAE,EACtD,GAAIsB,QAAS,CACX,MAAMb,KAAOa,QAAQX,qBAAqB,GAC1C,MAAMC,eACJH,KAAKI,GAAG,EAAI9B,eAAiB0B,KAAKK,MAAM,EAAI/B,cAE9C,GAAI6B,eAAgB,CAClB,MAAMG,SAAWC,KAAKC,GAAG,CAACR,KAAKI,GAAG,CAAG9B,eACrC,GAAI,CAACsB,WAAaU,SAAWV,UAAUU,QAAQ,CAAE,CAC/CV,UAAY,CAAEC,YAAaS,QAAS,CACtC,CACF,CACF,CACF,CAEA,GAAIV,UAAW,CACbjB,qBAAqBO,OAAO,CAAGU,UAAUC,WAAW,CAACY,SAAS,CAC9D/B,mBAAmBkB,UAAUC,WAAW,CAACY,SAAS,CACpD,CACF,EAAG,GAEH,MAAO,KACLY,aAAaF,UACbvC,CAAAA,YAAYM,OAAO,EAAEoC,YACrB1C,CAAAA,YAAYM,OAAO,CAAG,IACtBL,CAAAA,oBAAoBK,OAAO,CAAG,MAC9BD,qBAAqBsC,KAAK,EAC5B,CACF,EAAG,CAAC/C,aAAa,EAEjB,OAAOC,eACT"}

package/core/hooks/use-themed-scrollpoints.test.js

@@ -0,0 +1,2 @@
+import{describe,it,expect,beforeEach,afterEach,vi}from"vitest";import{renderHook,act}from"@testing-library/react";import{useThemedScrollpoints}from"./use-themed-scrollpoints";describe("useThemedScrollpoints",()=>{let observerCallback;let mockObserve;let mockUnobserve;let mockDisconnect;beforeEach(()=>{vi.useFakeTimers();mockObserve=vi.fn();mockUnobserve=vi.fn();mockDisconnect=vi.fn();global.IntersectionObserver=vi.fn(callback=>{observerCallback=callback;return{observe:mockObserve,unobserve:mockUnobserve,disconnect:mockDisconnect}});global.requestAnimationFrame=vi.fn(cb=>{cb(0);return 0})});afterEach(()=>{vi.clearAllMocks();vi.useRealTimers();document.body.innerHTML=""});it("returns first scrollpoint className on mount",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:200,bottom:400});document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));expect(result.current).toBe("");act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-light")});it("returns empty string when no scrollpoints provided",()=>{const{result}=renderHook(()=>useThemedScrollpoints([]));expect(result.current).toBe("")});it("does not create IntersectionObserver when no scrollpoints provided",()=>{renderHook(()=>useThemedScrollpoints([]));expect(IntersectionObserver).not.toHaveBeenCalled()});it("creates IntersectionObserver with correct config",()=>{const scrollpoints=[{id:"zone1",className:"theme-light"}];const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);renderHook(()=>useThemedScrollpoints(scrollpoints));expect(IntersectionObserver).toHaveBeenCalledWith(expect.any(Function),expect.objectContaining({rootMargin:"-64px 0px 0px 0px",threshold:0}))});it("observes all scrollpoint elements that exist in DOM",()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(mockObserve).toHaveBeenCalledTimes(2);expect(mockObserve).toHaveBeenCalledWith(elem1);expect(mockObserve).toHaveBeenCalledWith(elem2)});it("logs warning for missing DOM elements",()=>{const consoleWarn=vi.spyOn(console,"warn").mockImplementation(()=>{});const scrollpoints=[{id:"non-existent",className:"theme"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(consoleWarn).toHaveBeenCalledWith(expect.stringContaining('Element with id "non-existent" not found'));consoleWarn.mockRestore()});it("observes existing elements and warns about missing ones",()=>{const consoleWarn=vi.spyOn(console,"warn").mockImplementation(()=>{});const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"missing",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(mockObserve).toHaveBeenCalledTimes(1);expect(mockObserve).toHaveBeenCalledWith(elem);expect(consoleWarn).toHaveBeenCalledWith(expect.stringContaining('Element with id "missing" not found'));consoleWarn.mockRestore()});it("updates className when intersection occurs",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:50,bottom:250});document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-dark");act(()=>{observerCallback([{target:elem1,isIntersecting:true,boundingClientRect:{top:60,bottom:260,left:0,right:0,x:0,y:60,width:0,height:200}},{target:elem2,isIntersecting:true,boundingClientRect:{top:100,bottom:300,left:0,right:0,x:0,y:100,width:0,height:200}}],{})});expect(result.current).toBe("theme-light")});it("does not update className if same scrollpoint intersects again",()=>{const elem=document.createElement("div");elem.id="zone1";elem.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-light");const renderCount=result.current;observerCallback([{target:elem,isIntersecting:true,boundingClientRect:{top:0,bottom:200,left:0,right:0,x:0,y:0,width:0,height:200}}],{});expect(result.current).toBe(renderCount)});it("ignores non-intersecting entries",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:200,bottom:400});document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-light");observerCallback([{target:elem2,isIntersecting:false}],{});expect(result.current).toBe("theme-light")});it("uses closest element to header when multiple entries intersect",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:50});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:60,bottom:200});const elem3=document.createElement("div");elem3.id="zone3";elem3.getBoundingClientRect=vi.fn().mockReturnValue({top:10,bottom:100});document.body.appendChild(elem1);document.body.appendChild(elem2);document.body.appendChild(elem3);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"},{id:"zone3",className:"theme-blue"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-dark");act(()=>{observerCallback([{target:elem1,isIntersecting:false,boundingClientRect:{top:0,bottom:50,left:0,right:0,x:0,y:0,width:0,height:50}},{target:elem2,isIntersecting:true,boundingClientRect:{top:100,bottom:300,left:0,right:0,x:0,y:100,width:0,height:200}},{target:elem3,isIntersecting:true,boundingClientRect:{top:62,bottom:152,left:0,right:0,x:0,y:62,width:0,height:90}}],{})});expect(result.current).toBe("theme-blue")});it("disconnects observer on unmount",()=>{const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"}];const{unmount}=renderHook(()=>useThemedScrollpoints(scrollpoints));unmount();expect(mockDisconnect).toHaveBeenCalled()});it("recreates observer when scrollpoints change",()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const{rerender}=renderHook(({scrollpoints})=>useThemedScrollpoints(scrollpoints),{initialProps:{scrollpoints:[{id:"zone1",className:"theme-light"}]}});expect(IntersectionObserver).toHaveBeenCalledTimes(1);expect(mockObserve).toHaveBeenCalledTimes(1);rerender({scrollpoints:[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}]});expect(mockDisconnect).toHaveBeenCalledTimes(1);expect(IntersectionObserver).toHaveBeenCalledTimes(2);expect(mockObserve).toHaveBeenCalledTimes(3)});it("uses requestAnimationFrame for state updates",()=>{const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));const rafSpy=vi.spyOn(global,"requestAnimationFrame");observerCallback([{target:elem,isIntersecting:true}],{});expect(rafSpy).toHaveBeenCalled();rafSpy.mockRestore()})});
+//# sourceMappingURL=use-themed-scrollpoints.test.js.map

package/core/hooks/use-themed-scrollpoints.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.test.ts"],"sourcesContent":["/**\n * @vitest-environment jsdom\n */\n\nimport { describe, it, expect, beforeEach, afterEach, vi } from \"vitest\";\nimport { renderHook, act } from \"@testing-library/react\";\nimport { useThemedScrollpoints } from \"./use-themed-scrollpoints\";\n\ndescribe(\"useThemedScrollpoints\", () => {\n  let observerCallback: IntersectionObserverCallback;\n  let mockObserve: ReturnType<typeof vi.fn>;\n  let mockUnobserve: ReturnType<typeof vi.fn>;\n  let mockDisconnect: ReturnType<typeof vi.fn>;\n\n  beforeEach(() => {\n    vi.useFakeTimers();\n\n    // Mock IntersectionObserver\n    mockObserve = vi.fn();\n    mockUnobserve = vi.fn();\n    mockDisconnect = vi.fn();\n\n    global.IntersectionObserver = vi.fn((callback) => {\n      observerCallback = callback;\n      return {\n        observe: mockObserve,\n        unobserve: mockUnobserve,\n        disconnect: mockDisconnect,\n      };\n    }) as unknown as typeof IntersectionObserver;\n\n    // Mock requestAnimationFrame\n    global.requestAnimationFrame = vi.fn((cb) => {\n      cb(0);\n      return 0;\n    });\n  });\n\n  afterEach(() => {\n    vi.clearAllMocks();\n    vi.useRealTimers();\n    document.body.innerHTML = \"\";\n  });\n\n  it(\"returns first scrollpoint className on mount\", () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 200, bottom: 400 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Initial state is empty\n    expect(result.current).toBe(\"\");\n\n    // Advance timer to trigger initial check\n    act(() => {\n      vi.runAllTimers();\n    });\n\n    // Should now have the first scrollpoint's className\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"returns empty string when no scrollpoints provided\", () => {\n    const { result } = renderHook(() => useThemedScrollpoints([]));\n    expect(result.current).toBe(\"\");\n  });\n\n  it(\"does not create IntersectionObserver when no scrollpoints provided\", () => {\n    renderHook(() => useThemedScrollpoints([]));\n\n    expect(IntersectionObserver).not.toHaveBeenCalled();\n  });\n\n  it(\"creates IntersectionObserver with correct config\", () => {\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    // Create DOM element\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(IntersectionObserver).toHaveBeenCalledWith(\n      expect.any(Function),\n      expect.objectContaining({\n        rootMargin: \"-64px 0px 0px 0px\",\n        threshold: 0,\n      }),\n    );\n  });\n\n  it(\"observes all scrollpoint elements that exist in DOM\", () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(mockObserve).toHaveBeenCalledTimes(2);\n    expect(mockObserve).toHaveBeenCalledWith(elem1);\n    expect(mockObserve).toHaveBeenCalledWith(elem2);\n  });\n\n  it(\"logs warning for missing DOM elements\", () => {\n    const consoleWarn = vi.spyOn(console, \"warn\").mockImplementation(() => {});\n\n    const scrollpoints = [{ id: \"non-existent\", className: \"theme\" }];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(consoleWarn).toHaveBeenCalledWith(\n      expect.stringContaining('Element with id \"non-existent\" not found'),\n    );\n\n    consoleWarn.mockRestore();\n  });\n\n  it(\"observes existing elements and warns about missing ones\", () => {\n    const consoleWarn = vi.spyOn(console, \"warn\").mockImplementation(() => {});\n\n    // Create only one element\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"missing\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(mockObserve).toHaveBeenCalledTimes(1);\n    expect(mockObserve).toHaveBeenCalledWith(elem);\n    expect(consoleWarn).toHaveBeenCalledWith(\n      expect.stringContaining('Element with id \"missing\" not found'),\n    );\n\n    consoleWarn.mockRestore();\n  });\n\n  it(\"updates className when intersection occurs\", () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 50, bottom: 250 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    // elem2 (top=50) is closer to header (64) than elem1 (top=0)\n    // distance for elem1: |0 - 64| = 64\n    // distance for elem2: |50 - 64| = 14\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-dark\");\n\n    // Simulate scrolling - elem1 moves closer to header position\n    act(() => {\n      observerCallback(\n        [\n          {\n            target: elem1,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 60,\n              bottom: 260,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 60,\n              width: 0,\n              height: 200,\n            },\n          } as unknown as IntersectionObserverEntry,\n          {\n            target: elem2,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 100,\n              bottom: 300,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 100,\n              width: 0,\n              height: 200,\n            },\n          } as unknown as IntersectionObserverEntry,\n        ],\n        {} as IntersectionObserver,\n      );\n    });\n\n    // elem1 is now closer to header (distance=4 vs elem2 distance=36)\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"does not update className if same scrollpoint intersects again\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    elem.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    document.body.appendChild(elem);\n\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-light\");\n\n    // Simulate intersection with same element\n    const renderCount = result.current;\n    observerCallback(\n      [\n        {\n          target: elem,\n          isIntersecting: true,\n          boundingClientRect: {\n            top: 0,\n            bottom: 200,\n            left: 0,\n            right: 0,\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 200,\n          },\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver,\n    );\n\n    // Should not trigger re-render (className unchanged)\n    expect(result.current).toBe(renderCount);\n  });\n\n  it(\"ignores non-intersecting entries\", () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 200, bottom: 400 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-light\");\n\n    // Simulate non-intersecting entry\n    observerCallback(\n      [\n        {\n          target: elem2,\n          isIntersecting: false,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver,\n    );\n\n    // Should remain unchanged\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"uses closest element to header when multiple entries intersect\", () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 50 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    // zone2 top is at 60, which is closer to HEADER_HEIGHT (64) than zone3\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 60, bottom: 200 });\n    const elem3 = document.createElement(\"div\");\n    elem3.id = \"zone3\";\n    elem3.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 10, bottom: 100 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n    document.body.appendChild(elem3);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n      { id: \"zone3\", className: \"theme-blue\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    // elem2 (top=60) is closest to header (64) with distance=4\n    // elem3 (top=10) has distance=54\n    // elem1 (top=0) doesn't contain header (bottom=50 < 64)\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-dark\");\n\n    // Simulate scrolling where elem3 becomes closest to header\n    act(() => {\n      observerCallback(\n        [\n          {\n            target: elem1,\n            isIntersecting: false,\n            boundingClientRect: {\n              top: 0,\n              bottom: 50,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 0,\n              width: 0,\n              height: 50,\n            },\n          } as unknown as IntersectionObserverEntry,\n          {\n            target: elem2,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 100,\n              bottom: 300,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 100,\n              width: 0,\n              height: 200,\n            },\n          } as unknown as IntersectionObserverEntry,\n          {\n            target: elem3,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 62,\n              bottom: 152,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 62,\n              width: 0,\n              height: 90,\n            },\n          } as unknown as IntersectionObserverEntry,\n        ],\n        {} as IntersectionObserver,\n      );\n    });\n\n    // elem3 is now closest to HEADER_HEIGHT (64)\n    // distance for elem2: |100 - 64| = 36\n    // distance for elem3: |62 - 64| = 2\n    expect(result.current).toBe(\"theme-blue\");\n  });\n\n  it(\"disconnects observer on unmount\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    const { unmount } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    unmount();\n\n    expect(mockDisconnect).toHaveBeenCalled();\n  });\n\n  it(\"recreates observer when scrollpoints change\", () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const { rerender } = renderHook(\n      ({ scrollpoints }) => useThemedScrollpoints(scrollpoints),\n      {\n        initialProps: {\n          scrollpoints: [{ id: \"zone1\", className: \"theme-light\" }],\n        },\n      },\n    );\n\n    expect(IntersectionObserver).toHaveBeenCalledTimes(1);\n    expect(mockObserve).toHaveBeenCalledTimes(1);\n\n    // Change scrollpoints\n    rerender({\n      scrollpoints: [\n        { id: \"zone1\", className: \"theme-light\" },\n        { id: \"zone2\", className: \"theme-dark\" },\n      ],\n    });\n\n    // Should disconnect old observer and create new one\n    expect(mockDisconnect).toHaveBeenCalledTimes(1);\n    expect(IntersectionObserver).toHaveBeenCalledTimes(2);\n    expect(mockObserve).toHaveBeenCalledTimes(3); // 1 from first render + 2 from second\n  });\n\n  it(\"uses requestAnimationFrame for state updates\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    const rafSpy = vi.spyOn(global, \"requestAnimationFrame\");\n\n    // Simulate intersection\n    observerCallback(\n      [\n        {\n          target: elem,\n          isIntersecting: true,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver,\n    );\n\n    expect(rafSpy).toHaveBeenCalled();\n\n    rafSpy.mockRestore();\n  });\n});\n"],"names":["describe","it","expect","beforeEach","afterEach","vi","renderHook","act","useThemedScrollpoints","observerCallback","mockObserve","mockUnobserve","mockDisconnect","useFakeTimers","fn","global","IntersectionObserver","callback","observe","unobserve","disconnect","requestAnimationFrame","cb","clearAllMocks","useRealTimers","document","body","innerHTML","elem1","createElement","id","getBoundingClientRect","mockReturnValue","top","bottom","elem2","appendChild","scrollpoints","className","result","current","toBe","runAllTimers","not","toHaveBeenCalled","elem","toHaveBeenCalledWith","any","Function","objectContaining","rootMargin","threshold","toHaveBeenCalledTimes","consoleWarn","spyOn","console","mockImplementation","stringContaining","mockRestore","target","isIntersecting","boundingClientRect","left","right","x","y","width","height","renderCount","elem3","unmount","rerender","initialProps","rafSpy"],"mappings":"AAIA,OAASA,QAAQ,CAAEC,EAAE,CAAEC,MAAM,CAAEC,UAAU,CAAEC,SAAS,CAAEC,EAAE,KAAQ,QAAS,AACzE,QAASC,UAAU,CAAEC,GAAG,KAAQ,wBAAyB,AACzD,QAASC,qBAAqB,KAAQ,2BAA4B,CAElER,SAAS,wBAAyB,KAChC,IAAIS,iBACJ,IAAIC,YACJ,IAAIC,cACJ,IAAIC,eAEJT,WAAW,KACTE,GAAGQ,aAAa,GAGhBH,YAAcL,GAAGS,EAAE,GACnBH,cAAgBN,GAAGS,EAAE,GACrBF,eAAiBP,GAAGS,EAAE,EAEtBC,CAAAA,OAAOC,oBAAoB,CAAGX,GAAGS,EAAE,CAAC,AAACG,WACnCR,iBAAmBQ,SACnB,MAAO,CACLC,QAASR,YACTS,UAAWR,cACXS,WAAYR,cACd,CACF,EAGAG,CAAAA,OAAOM,qBAAqB,CAAGhB,GAAGS,EAAE,CAAC,AAACQ,KACpCA,GAAG,GACH,OAAO,CACT,EACF,GAEAlB,UAAU,KACRC,GAAGkB,aAAa,GAChBlB,GAAGmB,aAAa,EAChBC,CAAAA,SAASC,IAAI,CAACC,SAAS,CAAG,EAC5B,GAEA1B,GAAG,+CAAgD,KAEjD,MAAM2B,MAAQH,SAASI,aAAa,CAAC,MACrCD,CAAAA,MAAME,EAAE,CAAG,OACXF,CAAAA,MAAMG,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,EAAGC,OAAQ,GAAI,GACzC,MAAMC,MAAQV,SAASI,aAAa,CAAC,MACrCM,CAAAA,MAAML,EAAE,CAAG,OACXK,CAAAA,MAAMJ,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,IAAKC,OAAQ,GAAI,GAC3CT,SAASC,IAAI,CAACU,WAAW,CAACR,OAC1BH,SAASC,IAAI,CAACU,WAAW,CAACD,OAE1B,MAAME,aAAe,CACnB,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACxC,CAED,KAAM,CAAEC,MAAM,CAAE,CAAGjC,WAAW,IAAME,sBAAsB6B,eAG1DnC,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,IAG5BlC,IAAI,KACFF,GAAGqC,YAAY,EACjB,GAGAxC,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,cAC9B,GAEAxC,GAAG,qDAAsD,KACvD,KAAM,CAAEsC,MAAM,CAAE,CAAGjC,WAAW,IAAME,sBAAsB,EAAE,GAC5DN,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,GAC9B,GAEAxC,GAAG,qEAAsE,KACvEK,WAAW,IAAME,sBAAsB,EAAE,GAEzCN,OAAOc,sBAAsB2B,GAAG,CAACC,gBAAgB,EACnD,GAEA3C,GAAG,mDAAoD,KACrD,MAAMoC,aAAe,CAAC,CAAEP,GAAI,QAASQ,UAAW,aAAc,EAAE,CAGhE,MAAMO,KAAOpB,SAASI,aAAa,CAAC,MACpCgB,CAAAA,KAAKf,EAAE,CAAG,QACVL,SAASC,IAAI,CAACU,WAAW,CAACS,MAE1BvC,WAAW,IAAME,sBAAsB6B,eAEvCnC,OAAOc,sBAAsB8B,oBAAoB,CAC/C5C,OAAO6C,GAAG,CAACC,UACX9C,OAAO+C,gBAAgB,CAAC,CACtBC,WAAY,oBACZC,UAAW,CACb,GAEJ,GAEAlD,GAAG,sDAAuD,KAExD,MAAM2B,MAAQH,SAASI,aAAa,CAAC,MACrCD,CAAAA,MAAME,EAAE,CAAG,QACX,MAAMK,MAAQV,SAASI,aAAa,CAAC,MACrCM,CAAAA,MAAML,EAAE,CAAG,QACXL,SAASC,IAAI,CAACU,WAAW,CAACR,OAC1BH,SAASC,IAAI,CAACU,WAAW,CAACD,OAE1B,MAAME,aAAe,CACnB,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACxC,CAEDhC,WAAW,IAAME,sBAAsB6B,eAEvCnC,OAAOQ,aAAa0C,qBAAqB,CAAC,GAC1ClD,OAAOQ,aAAaoC,oBAAoB,CAAClB,OACzC1B,OAAOQ,aAAaoC,oBAAoB,CAACX,MAC3C,GAEAlC,GAAG,wCAAyC,KAC1C,MAAMoD,YAAchD,GAAGiD,KAAK,CAACC,QAAS,QAAQC,kBAAkB,CAAC,KAAO,GAExE,MAAMnB,aAAe,CAAC,CAAEP,GAAI,eAAgBQ,UAAW,OAAQ,EAAE,CAEjEhC,WAAW,IAAME,sBAAsB6B,eAEvCnC,OAAOmD,aAAaP,oBAAoB,CACtC5C,OAAOuD,gBAAgB,CAAC,6CAG1BJ,YAAYK,WAAW,EACzB,GAEAzD,GAAG,0DAA2D,KAC5D,MAAMoD,YAAchD,GAAGiD,KAAK,CAACC,QAAS,QAAQC,kBAAkB,CAAC,KAAO,GAGxE,MAAMX,KAAOpB,SAASI,aAAa,CAAC,MACpCgB,CAAAA,KAAKf,EAAE,CAAG,QACVL,SAASC,IAAI,CAACU,WAAW,CAACS,MAE1B,MAAMR,aAAe,CACnB,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,UAAWQ,UAAW,YAAa,EAC1C,CAEDhC,WAAW,IAAME,sBAAsB6B,eAEvCnC,OAAOQ,aAAa0C,qBAAqB,CAAC,GAC1ClD,OAAOQ,aAAaoC,oBAAoB,CAACD,MACzC3C,OAAOmD,aAAaP,oBAAoB,CACtC5C,OAAOuD,gBAAgB,CAAC,wCAG1BJ,YAAYK,WAAW,EACzB,GAEAzD,GAAG,6CAA8C,KAE/C,MAAM2B,MAAQH,SAASI,aAAa,CAAC,MACrCD,CAAAA,MAAME,EAAE,CAAG,OACXF,CAAAA,MAAMG,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,EAAGC,OAAQ,GAAI,GACzC,MAAMC,MAAQV,SAASI,aAAa,CAAC,MACrCM,CAAAA,MAAML,EAAE,CAAG,OACXK,CAAAA,MAAMJ,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,GAAIC,OAAQ,GAAI,GAC1CT,SAASC,IAAI,CAACU,WAAW,CAACR,OAC1BH,SAASC,IAAI,CAACU,WAAW,CAACD,OAE1B,MAAME,aAAe,CACnB,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACxC,CAED,KAAM,CAAEC,MAAM,CAAE,CAAGjC,WAAW,IAAME,sBAAsB6B,eAM1D9B,IAAI,KACFF,GAAGqC,YAAY,EACjB,GACAxC,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,cAG5BlC,IAAI,KACFE,iBACE,CACE,CACEkD,OAAQ/B,MACRgC,eAAgB,KAChBC,mBAAoB,CAClB5B,IAAK,GACLC,OAAQ,IACR4B,KAAM,EACNC,MAAO,EACPC,EAAG,EACHC,EAAG,GACHC,MAAO,EACPC,OAAQ,GACV,CACF,EACA,CACER,OAAQxB,MACRyB,eAAgB,KAChBC,mBAAoB,CAClB5B,IAAK,IACLC,OAAQ,IACR4B,KAAM,EACNC,MAAO,EACPC,EAAG,EACHC,EAAG,IACHC,MAAO,EACPC,OAAQ,GACV,CACF,EACD,CACD,CAAC,EAEL,GAGAjE,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,cAC9B,GAEAxC,GAAG,iEAAkE,KACnE,MAAM4C,KAAOpB,SAASI,aAAa,CAAC,MACpCgB,CAAAA,KAAKf,EAAE,CAAG,OACVe,CAAAA,KAAKd,qBAAqB,CAAG1B,GAC1BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,EAAGC,OAAQ,GAAI,GACzCT,SAASC,IAAI,CAACU,WAAW,CAACS,MAE1B,MAAMR,aAAe,CAAC,CAAEP,GAAI,QAASQ,UAAW,aAAc,EAAE,CAEhE,KAAM,CAAEC,MAAM,CAAE,CAAGjC,WAAW,IAAME,sBAAsB6B,eAG1D9B,IAAI,KACFF,GAAGqC,YAAY,EACjB,GACAxC,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,eAG5B,MAAM2B,YAAc7B,OAAOC,OAAO,CAClC/B,iBACE,CACE,CACEkD,OAAQd,KACRe,eAAgB,KAChBC,mBAAoB,CAClB5B,IAAK,EACLC,OAAQ,IACR4B,KAAM,EACNC,MAAO,EACPC,EAAG,EACHC,EAAG,EACHC,MAAO,EACPC,OAAQ,GACV,CACF,EACD,CACD,CAAC,GAIHjE,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC2B,YAC9B,GAEAnE,GAAG,mCAAoC,KACrC,MAAM2B,MAAQH,SAASI,aAAa,CAAC,MACrCD,CAAAA,MAAME,EAAE,CAAG,OACXF,CAAAA,MAAMG,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,EAAGC,OAAQ,GAAI,GACzC,MAAMC,MAAQV,SAASI,aAAa,CAAC,MACrCM,CAAAA,MAAML,EAAE,CAAG,OACXK,CAAAA,MAAMJ,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,IAAKC,OAAQ,GAAI,GAC3CT,SAASC,IAAI,CAACU,WAAW,CAACR,OAC1BH,SAASC,IAAI,CAACU,WAAW,CAACD,OAE1B,MAAME,aAAe,CACnB,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACxC,CAED,KAAM,CAAEC,MAAM,CAAE,CAAGjC,WAAW,IAAME,sBAAsB6B,eAG1D9B,IAAI,KACFF,GAAGqC,YAAY,EACjB,GACAxC,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,eAG5BhC,iBACE,CACE,CACEkD,OAAQxB,MACRyB,eAAgB,KAClB,EACD,CACD,CAAC,GAIH1D,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,cAC9B,GAEAxC,GAAG,iEAAkE,KACnE,MAAM2B,MAAQH,SAASI,aAAa,CAAC,MACrCD,CAAAA,MAAME,EAAE,CAAG,OACXF,CAAAA,MAAMG,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,EAAGC,OAAQ,EAAG,GACxC,MAAMC,MAAQV,SAASI,aAAa,CAAC,MACrCM,CAAAA,MAAML,EAAE,CAAG,OAEXK,CAAAA,MAAMJ,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,GAAIC,OAAQ,GAAI,GAC1C,MAAMmC,MAAQ5C,SAASI,aAAa,CAAC,MACrCwC,CAAAA,MAAMvC,EAAE,CAAG,OACXuC,CAAAA,MAAMtC,qBAAqB,CAAG1B,GAC3BS,EAAE,GACFkB,eAAe,CAAC,CAAEC,IAAK,GAAIC,OAAQ,GAAI,GAC1CT,SAASC,IAAI,CAACU,WAAW,CAACR,OAC1BH,SAASC,IAAI,CAACU,WAAW,CAACD,OAC1BV,SAASC,IAAI,CAACU,WAAW,CAACiC,OAE1B,MAAMhC,aAAe,CACnB,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACvC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACxC,CAED,KAAM,CAAEC,MAAM,CAAE,CAAGjC,WAAW,IAAME,sBAAsB6B,eAM1D9B,IAAI,KACFF,GAAGqC,YAAY,EACjB,GACAxC,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,cAG5BlC,IAAI,KACFE,iBACE,CACE,CACEkD,OAAQ/B,MACRgC,eAAgB,MAChBC,mBAAoB,CAClB5B,IAAK,EACLC,OAAQ,GACR4B,KAAM,EACNC,MAAO,EACPC,EAAG,EACHC,EAAG,EACHC,MAAO,EACPC,OAAQ,EACV,CACF,EACA,CACER,OAAQxB,MACRyB,eAAgB,KAChBC,mBAAoB,CAClB5B,IAAK,IACLC,OAAQ,IACR4B,KAAM,EACNC,MAAO,EACPC,EAAG,EACHC,EAAG,IACHC,MAAO,EACPC,OAAQ,GACV,CACF,EACA,CACER,OAAQU,MACRT,eAAgB,KAChBC,mBAAoB,CAClB5B,IAAK,GACLC,OAAQ,IACR4B,KAAM,EACNC,MAAO,EACPC,EAAG,EACHC,EAAG,GACHC,MAAO,EACPC,OAAQ,EACV,CACF,EACD,CACD,CAAC,EAEL,GAKAjE,OAAOqC,OAAOC,OAAO,EAAEC,IAAI,CAAC,aAC9B,GAEAxC,GAAG,kCAAmC,KACpC,MAAM4C,KAAOpB,SAASI,aAAa,CAAC,MACpCgB,CAAAA,KAAKf,EAAE,CAAG,QACVL,SAASC,IAAI,CAACU,WAAW,CAACS,MAE1B,MAAMR,aAAe,CAAC,CAAEP,GAAI,QAASQ,UAAW,aAAc,EAAE,CAEhE,KAAM,CAAEgC,OAAO,CAAE,CAAGhE,WAAW,IAAME,sBAAsB6B,eAE3DiC,UAEApE,OAAOU,gBAAgBgC,gBAAgB,EACzC,GAEA3C,GAAG,8CAA+C,KAChD,MAAM2B,MAAQH,SAASI,aAAa,CAAC,MACrCD,CAAAA,MAAME,EAAE,CAAG,QACX,MAAMK,MAAQV,SAASI,aAAa,CAAC,MACrCM,CAAAA,MAAML,EAAE,CAAG,QACXL,SAASC,IAAI,CAACU,WAAW,CAACR,OAC1BH,SAASC,IAAI,CAACU,WAAW,CAACD,OAE1B,KAAM,CAAEoC,QAAQ,CAAE,CAAGjE,WACnB,CAAC,CAAE+B,YAAY,CAAE,GAAK7B,sBAAsB6B,cAC5C,CACEmC,aAAc,CACZnC,aAAc,CAAC,CAAEP,GAAI,QAASQ,UAAW,aAAc,EAAE,AAC3D,CACF,GAGFpC,OAAOc,sBAAsBoC,qBAAqB,CAAC,GACnDlD,OAAOQ,aAAa0C,qBAAqB,CAAC,GAG1CmB,SAAS,CACPlC,aAAc,CACZ,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACxC,AACH,GAGApC,OAAOU,gBAAgBwC,qBAAqB,CAAC,GAC7ClD,OAAOc,sBAAsBoC,qBAAqB,CAAC,GACnDlD,OAAOQ,aAAa0C,qBAAqB,CAAC,EAC5C,GAEAnD,GAAG,+CAAgD,KACjD,MAAM4C,KAAOpB,SAASI,aAAa,CAAC,MACpCgB,CAAAA,KAAKf,EAAE,CAAG,QACVL,SAASC,IAAI,CAACU,WAAW,CAACS,MAE1B,MAAMR,aAAe,CACnB,CAAEP,GAAI,QAASQ,UAAW,aAAc,EACxC,CAAER,GAAI,QAASQ,UAAW,YAAa,EACxC,CAEDhC,WAAW,IAAME,sBAAsB6B,eAEvC,MAAMoC,OAASpE,GAAGiD,KAAK,CAACvC,OAAQ,yBAGhCN,iBACE,CACE,CACEkD,OAAQd,KACRe,eAAgB,IAClB,EACD,CACD,CAAC,GAGH1D,OAAOuE,QAAQ7B,gBAAgB,GAE/B6B,OAAOf,WAAW,EACpB,EACF"}

package/index.d.ts

@@ -10,14 +10,8 @@ import { ColorThemeSet } from ".@ably/ui/core/styles/colors/types";
 export type AccordionData = {
     /**
      * The name of the accordion item.
-     * @deprecated Use `heading` for custom heading content. This will be used as fallback if `heading` is not provided.
      */
     name: string;
-    /**
-     * Custom heading content. If provided, this will be used instead of `name`.
-     * Can be a ReactNode or a function that receives the index and isOpen state and returns ReactNode.
-     */
-    heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);
     /**
      * The optional icon name to be displayed alongside the accordion item.
      */
@@ -779,12 +773,18 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 
-declare module '@ably/ui/core/Header' {
-import React, { ReactNode } from "react";
+declare module '@ably/ui/core/Header/types' {
 export type ThemedScrollpoint = {
     id: string;
     className: string;
 };
+//# sourceMappingURL=types.d.ts.map
+}
+
+declare module '@ably/ui/core/Header' {
+import React, { ReactNode } from "react";
+import { ThemedScrollpoint } from "@ably/ui/core/Header/types";
+export type { ThemedScrollpoint };
 /**
  * Represents the state of the user session in the header.
  */
@@ -2485,17 +2485,6 @@ export default ForwardRef;
 //# sourceMappingURL=icon-gui-spinner-light.d.ts.map
 }
 
-declare module '@ably/ui/core/Icon/components/icon-gui-square-3-stack-3d' {
-import * as React from "react";
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default ForwardRef;
-//# sourceMappingURL=icon-gui-square-3-stack-3d.d.ts.map
-}
-
 declare module '@ably/ui/core/Icon/components/icon-product-ai-transport-mono' {
 import * as React from "react";
 interface SVGRProps {
@@ -6237,6 +6226,21 @@ export const queryIdAll: (val: string, root?: ParentNode) => NodeListOf<Element>
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-content-height' {
+import { RefObject } from "react";
+/**
+ * Custom hook that tracks the content height of an element using ResizeObserver.
+ * This eliminates forced reflows by using the browser's native resize observation API
+ * instead of synchronous clientHeight/getBoundingClientRect queries.
+ *
+ * @param ref - React ref to the element to observe
+ * @param initialHeight - Initial height value (default: 0)
+ * @returns Current content height in pixels
+ */
+export function useContentHeight(ref: RefObject<HTMLElement>, initialHeight?: number): number;
+//# sourceMappingURL=use-content-height.d.ts.map
+}
+
 declare module '@ably/ui/core/hooks/use-rails-ujs-hooks' {
 import { RefObject } from "react";
 const useRailsUjsLinks: (containerRef: RefObject<HTMLElement>) => void;
@@ -6244,6 +6248,20 @@ export default useRailsUjsLinks;
 //# sourceMappingURL=use-rails-ujs-hooks.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-themed-scrollpoints' {
+import { ThemedScrollpoint } from ".@ably/ui/core/Header/types";
+export function useThemedScrollpoints(scrollpoints: ThemedScrollpoint[]): string;
+//# sourceMappingURL=use-themed-scrollpoints.d.ts.map
+}
+
+declare module '@ably/ui/core/hooks/use-themed-scrollpoints.test' {
+/**
+ * @vitest-environment jsdom
+ */
+export {};
+//# sourceMappingURL=use-themed-scrollpoints.test.d.ts.map
+}
+
 declare module '@ably/ui/core/insights/command-queue' {
 import { AnalyticsService, InsightsConfig, InsightsIdentity, TrackPageViewOptions } from "@ably/ui/core/types";
 export class InsightsCommandQueue implements AnalyticsService {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.12.0-dev.dcf685cd",
+  "version": "17.13.0-dev.de27db52",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "@swc/cli": "^0.7.8",
     "@swc/core": "^1.13.5",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18.3.1",
@@ -56,7 +57,7 @@
     "msw": "2.12.0",
     "msw-storybook-addon": "^2.0.5",
     "playwright": "^1.49.1",
-    "posthog-js": "^1.321.0",
+    "posthog-js": "^1.324.1",
     "prettier": "^3.8.0",
     "storybook": "^10.1.10",
     "svg-sprite": "^2.0.4",
@@ -81,7 +82,7 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
-    "es-toolkit": "^1.43.0",
+    "es-toolkit": "^1.44.0",
     "highlight.js": "^11.11.1",
     "highlightjs-curl": "^1.3.0",
     "js-cookie": "^3.0.5",

package/core/Icon/components/icon-gui-square-3-stack-3d.js

@@ -1,2 +0,0 @@
-import*as React from"react";import{forwardRef}from"react";const IconGuiSquare3Stack3d=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#03020D",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"}));const ForwardRef=forwardRef(IconGuiSquare3Stack3d);export default ForwardRef;
-//# sourceMappingURL=icon-gui-square-3-stack-3d.js.map

package/core/Icon/components/icon-gui-square-3-stack-3d.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-square-3-stack-3d.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconGuiSquare3Stack3d = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"currentColor\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#03020D\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiSquare3Stack3d);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiSquare3Stack3d","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,eAAeC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,cAAc,QAAQC,eAAe,QAAQC,YAAa,IAAKC,EAAE,yMACtW,MAAMC,WAAapB,WAAWC,sBAC9B,gBAAemB,UAAW"}