npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.11 → 4.0.0-alpha.13 - Mend

@lifesg/react-design-system 4.0.0-alpha.11 → 4.0.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n {\n defaultLabel,\n stickyOffset = 0,\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": testId,\n className,\n renderItem,\n }: LocalNavDropdownProps,\n ref: React.Ref<HTMLElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const detectStickyRef = useRef<HTMLSpanElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const navWrapperRef = useRef<HTMLElement>(null);\n const navItemListRef = useRef<HTMLUListElement>(null);\n const listItemRefs = useRef<(HTMLLIElement \| null)[]>([]);\n const [isStickied, setIsStickied] = useState<boolean>(false);\n const [isDropdownExpanded, setIsDropdownExpanded] =\n useState<boolean>(false);\n const [viewportHeight, setViewportHeight] = useState(0);\n const [dropdowntHeight, setDropdownHeight] = useState(0);\n const [dynamicMargin, setDynamicMargin] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const navTestId = testId \|\| \"local-nav-dropdown\";\n const dropdownListId = useId();\n\n useImperativeHandle(ref, () => navWrapperRef.current!);\n\n useApplyStyle(navWrapperRef, {\n [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n });\n\n useApplyStyle(navItemListRef, {\n [styles.tokens.navItemList.viewportHeight]: `${\n viewportHeight - dropdowntHeight - stickyOffset\n }px`,\n });\n\n const labelText =\n typeof selectedItemIndex === \"number\" &&\n selectedItemIndex >= 0 &&\n isStickied\n ? items[selectedItemIndex].title\n : defaultLabel;\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n\n useEffect(() => {\n if (dropdownRef.current) {\n const dropdownHeight =\n dropdownRef.current.getBoundingClientRect().height;\n setDropdownHeight(dropdownHeight);\n }\n }, []);\n\n useEffect(() => {\n addStylesheetForDocumentBody();\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded && isStickied) {\n applyBodyStyleClass(\"add\");\n } else {\n applyBodyStyleClass(\"remove\");\n }\n }, [isDropdownExpanded, isStickied]);\n\n useEffect(() => {\n setViewportHeight(window.innerHeight);\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n const callback = (entries: IntersectionObserverEntry[]) => {\n const [entry] = entries;\n setIsStickied(!entry.isIntersecting);\n };\n\n const observer = new IntersectionObserver(callback, {\n threshold: 1,\n rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n });\n\n if (detectStickyRef.current) {\n observer.observe(detectStickyRef.current);\n }\n\n return () => observer.disconnect();\n }, [stickyOffset]);\n\n useEffect(() => {\n const adjustPadding = () => {\n const dropdown = navWrapperRef?.current;\n if (dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const spaceToRight =\n document.body.clientWidth - dropdownRect.right;\n const spaceToLeft = dropdownRect.left;\n // Calculate the padding needed to balance the dropdown in the viewport\n const sidePadding = Math.max(spaceToRight, spaceToLeft);\n setDynamicMargin(sidePadding);\n }\n };\n adjustPadding();\n\n window.addEventListener(\"resize\", adjustPadding);\n\n return () => {\n window.removeEventListener(\"resize\", adjustPadding);\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded) {\n listItemRefs.current[focusedIndex]?.focus();\n }\n }, [isDropdownExpanded, focusedIndex]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const addStylesheetForDocumentBody = () => {\n /*\n This stylesheet is to manipulate the <body>. We only add once\n /\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n const applyBodyStyleClass = (action: \"add\" \| \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n DROPDOWN_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const handleToggleDropdown = () => {\n setIsDropdownExpanded((prev) => !prev);\n };\n\n const handleDismissBackdrop = () => {\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemClick = (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n item: LocalNavItemProps,\n index: number\n ) => {\n if (onNavItemSelect) {\n onNavItemSelect(e, item, index);\n }\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(0);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(items.length - 1);\n } else if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n setIsDropdownExpanded(true);\n setFocusedIndex(0);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n }\n };\n\n const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n const nextIndex = (focusedIndex + 1) % items.length;\n setFocusedIndex(nextIndex);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n const prevIndex =\n focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n setFocusedIndex(prevIndex);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n dropdownRef.current?.focus();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDropdownNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavDropdownItemComponentProps) => {\n const { id, title } = item;\n\n if (renderItem) {\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el;\n }}\n >\n {renderItem(item, {\n selected: isSelected,\n stickied: isStickied,\n })}\n </li>\n );\n }\n\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n className={clsx(\n styles.navItem,\n isSelected && isStickied && styles.navItemSelected\n )}\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el as HTMLLIElement;\n }}\n >\n {isSelected && <TickIcon className={styles.tickIcon} />}\n <div\n className={clsx(\n styles.navItemLabel,\n isSelected && styles.navItemLabelSelected\n )}\n >\n {title}\n </div>\n </li>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <nav\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={clsx(\n styles.navWrapper,\n isStickied && styles.navWrapperStickied,\n className\n )}\n >\n <div\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n className={clsx(\n styles.navSelect,\n isDropdownExpanded && styles.navSelectExpanded\n )}\n aria-haspopup=\"true\"\n aria-expanded={isDropdownExpanded}\n aria-controls={dropdownListId}\n tabIndex={0}\n >\n <Typography.BodyBL weight=\"semibold\">\n {labelText}\n </Typography.BodyBL>\n <ChevronDownIcon\n className={clsx(\n styles.navSelectIcon,\n isDropdownExpanded && styles.navSelectIconExpanded\n )}\n />\n </div>\n {isDropdownExpanded && (\n <ul\n ref={navItemListRef}\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n className={styles.navItemList}\n >\n {items.map((item, i) =>\n renderDropdownNavItem({\n handleClick: (e) =>\n handleNavItemClick(e, item, i),\n isSelected: i === selectedItemIndex,\n item,\n renderItem,\n index: i,\n })\n )}\n </ul>\n )}\n {isDropdownExpanded && isStickied && (\n <div\n className={styles.backdrop}\n onClick={handleDismissBackdrop}\n />\n )}\n </nav>\n </>\n );\n};\n// @catalog\n/\n A collapsible dropdown used for in-page navigation on mobile viewports.\n \n Use `LocalNavDropdown` when the page has multiple named sections and screen\n * width is insufficient for a persistent sidebar.\n \n @remarks\n * This component adopts a fundamentally different interaction model from\n * `LocalNavMenu`: it collapses into a single trigger button and uses a menu\n * overlay, making it suited for mobile while `LocalNavMenu` suits desktop.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}
1	+ {"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n {\n defaultLabel,\n stickyOffset = 0,\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": testId,\n className,\n renderItem,\n }: LocalNavDropdownProps,\n ref: React.Ref<HTMLElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const detectStickyRef = useRef<HTMLSpanElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const navWrapperRef = useRef<HTMLElement>(null);\n const navItemListRef = useRef<HTMLUListElement>(null);\n const listItemRefs = useRef<(HTMLLIElement \| null)[]>([]);\n const [isStickied, setIsStickied] = useState<boolean>(false);\n const [isDropdownExpanded, setIsDropdownExpanded] =\n useState<boolean>(false);\n const [viewportHeight, setViewportHeight] = useState(0);\n const [dropdowntHeight, setDropdownHeight] = useState(0);\n const [dynamicMargin, setDynamicMargin] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const navTestId = testId \|\| \"local-nav-dropdown\";\n const dropdownListId = useId();\n\n useImperativeHandle(ref, () => navWrapperRef.current!);\n\n useApplyStyle(navWrapperRef, {\n [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n });\n\n useApplyStyle(navItemListRef, {\n [styles.tokens.navItemList.viewportHeight]: `${\n viewportHeight - dropdowntHeight - stickyOffset\n }px`,\n });\n\n const labelText =\n typeof selectedItemIndex === \"number\" &&\n selectedItemIndex >= 0 &&\n isStickied\n ? items[selectedItemIndex].title\n : defaultLabel;\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n\n useEffect(() => {\n if (dropdownRef.current) {\n const dropdownHeight =\n dropdownRef.current.getBoundingClientRect().height;\n setDropdownHeight(dropdownHeight);\n }\n }, []);\n\n useEffect(() => {\n addStylesheetForDocumentBody();\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded && isStickied) {\n applyBodyStyleClass(\"add\");\n } else {\n applyBodyStyleClass(\"remove\");\n }\n }, [isDropdownExpanded, isStickied]);\n\n useEffect(() => {\n setViewportHeight(window.innerHeight);\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n const callback = (entries: IntersectionObserverEntry[]) => {\n const [entry] = entries;\n setIsStickied(!entry.isIntersecting);\n };\n\n const observer = new IntersectionObserver(callback, {\n threshold: 1,\n rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n });\n\n if (detectStickyRef.current) {\n observer.observe(detectStickyRef.current);\n }\n\n return () => observer.disconnect();\n }, [stickyOffset]);\n\n useEffect(() => {\n const adjustPadding = () => {\n const dropdown = navWrapperRef?.current;\n if (dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const spaceToRight =\n document.body.clientWidth - dropdownRect.right;\n const spaceToLeft = dropdownRect.left;\n // Calculate the padding needed to balance the dropdown in the viewport\n const sidePadding = Math.max(spaceToRight, spaceToLeft);\n setDynamicMargin(sidePadding);\n }\n };\n adjustPadding();\n\n window.addEventListener(\"resize\", adjustPadding);\n\n return () => {\n window.removeEventListener(\"resize\", adjustPadding);\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded) {\n listItemRefs.current[focusedIndex]?.focus();\n }\n }, [isDropdownExpanded, focusedIndex]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const addStylesheetForDocumentBody = () => {\n /*\n This stylesheet is to manipulate the <body>. We only add once\n /\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n const applyBodyStyleClass = (action: \"add\" \| \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n DROPDOWN_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const handleToggleDropdown = () => {\n setIsDropdownExpanded((prev) => !prev);\n };\n\n const handleDismissBackdrop = () => {\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemClick = (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n item: LocalNavItemProps,\n index: number\n ) => {\n if (onNavItemSelect) {\n onNavItemSelect(e, item, index);\n }\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(0);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(items.length - 1);\n } else if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n setIsDropdownExpanded(true);\n setFocusedIndex(0);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n }\n };\n\n const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n const nextIndex = (focusedIndex + 1) % items.length;\n setFocusedIndex(nextIndex);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n const prevIndex =\n focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n setFocusedIndex(prevIndex);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n dropdownRef.current?.focus();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDropdownNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavDropdownItemComponentProps) => {\n const { id, title, titleAddon } = item;\n\n if (renderItem) {\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el;\n }}\n >\n {renderItem(item, {\n selected: isSelected,\n stickied: isStickied,\n })}\n </li>\n );\n }\n\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n className={clsx(\n styles.navItem,\n isSelected && isStickied && styles.navItemSelected\n )}\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el as HTMLLIElement;\n }}\n >\n {isSelected && (\n <span className={styles.leftAddon}>\n <TickIcon className={styles.tickIcon} />\n </span>\n )}\n {titleAddon ? (\n <span className={styles.titleContainer}>\n {titleAddon.left && (\n <span className={styles.leftAddon}>\n {titleAddon.left}\n </span>\n )}\n <div\n className={clsx(\n styles.navItemLabel,\n isSelected && styles.navItemLabelSelected\n )}\n >\n {title}\n </div>\n {titleAddon.right && (\n <span className={styles.rightAddon}>\n {titleAddon.right}\n </span>\n )}\n </span>\n ) : (\n <div\n className={clsx(\n styles.navItemLabel,\n isSelected && styles.navItemLabelSelected\n )}\n >\n {title}\n </div>\n )}\n </li>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <nav\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={clsx(\n styles.navWrapper,\n isStickied && styles.navWrapperStickied,\n className\n )}\n >\n <div\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n className={clsx(\n styles.navSelect,\n isDropdownExpanded && styles.navSelectExpanded\n )}\n aria-haspopup=\"true\"\n aria-expanded={isDropdownExpanded}\n aria-controls={dropdownListId}\n tabIndex={0}\n >\n <Typography.BodyBL weight=\"semibold\">\n {labelText}\n </Typography.BodyBL>\n <ChevronDownIcon\n className={clsx(\n styles.navSelectIcon,\n isDropdownExpanded && styles.navSelectIconExpanded\n )}\n />\n </div>\n {isDropdownExpanded && (\n <ul\n ref={navItemListRef}\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n className={styles.navItemList}\n >\n {items.map((item, i) =>\n renderDropdownNavItem({\n handleClick: (e) =>\n handleNavItemClick(e, item, i),\n isSelected: i === selectedItemIndex,\n item,\n renderItem,\n index: i,\n })\n )}\n </ul>\n )}\n {isDropdownExpanded && isStickied && (\n <div\n className={styles.backdrop}\n onClick={handleDismissBackdrop}\n />\n )}\n </nav>\n </>\n );\n};\n// @catalog\n/\n A collapsible dropdown used for in-page navigation on mobile viewports.\n \n Use `LocalNavDropdown` when the page has multiple named sections and screen\n * width is insufficient for a persistent sidebar.\n \n @remarks\n * This component adopts a fundamentally different interaction model from\n * `LocalNavMenu`: it collapses into a single trigger button and uses a menu\n * overlay, making it suited for mobile while `LocalNavMenu` suits desktop.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","titleAddon","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","styles.leftAddon","TickIcon","styles.tickIcon","styles.titleContainer","styles.navItemLabel","styles.navItemLabelSelected","styles.rightAddon","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./local-nav-dropdown.styles_uhd4xl.css");exports.backdrop="beqsxqe",exports.navItem="n1rgfmu8",exports.navItemLabel="n1lmzf88",exports.navItemLabelSelected="nc4nyiy",exports.navItemList="ny6lx9v",exports.navItemSelected="n122w1r6",exports.navSelect="n1fsscye",exports.navSelectExpanded="n10li8ea",exports.navSelectIcon="nczumix",exports.navSelectIconExpanded="n1mayi9n",exports.navWrapper="ns92rya",exports.navWrapperStickied="np844yu",exports.tickIcon="thuuy8a",exports.tokens={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}};
+"use strict";require("./local-nav-dropdown.styles_kpel1m.css");exports.backdrop="b7u5vs",exports.leftAddon="lc4nyiy",exports.navItem="n1rgfmu8",exports.navItemLabel="neqsxqe",exports.navItemLabelSelected="ns92rya",exports.navItemList="ny6lx9v",exports.navItemSelected="n122w1r6",exports.navSelect="n1fsscye",exports.navSelectExpanded="n10li8ea",exports.navSelectIcon="nczumix",exports.navSelectIconExpanded="n1mayi9n",exports.navWrapper="nb4z8rf",exports.navWrapperStickied="n1y3g4t3",exports.rightAddon="rhuuy8a",exports.tickIcon="tp844yu",exports.titleContainer="t1lmzf88",exports.tokens={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}};
 //# sourceMappingURL=local-nav-dropdown.styles.js.map

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n navWrapper: {\n stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n },\n navItemList: {\n viewportHeight:\n \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n color: ${Colour[\"icon\"]};\n transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n cursor: pointer;\n background: ${Colour[\"bg\"]};\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n overflow: hidden;\n box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n transition-property: background, border-radius, box-shadow, transform;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 2px;\n border-radius: ${Radius[\"sm\"]};\n }\n`;\n\nexport const navSelectExpanded = css`\n border-bottom-left-radius: ${Radius[\"none\"]};\n border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n background: ${Colour[\"bg\"]};\n /* Ensures that the tick mark is positioned relative to the selected item /\n position: relative;\n display: flex;\n / Vertically align text and tick /\n align-items: center;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0px;\n border-radius: ${Radius[\"sm\"]};\n }\n`;\n\nexport const navItemSelected = css`\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n ${Spacing[\"spacing-12\"]} 0;\n background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n ${tokens.navItemList.viewportHeight}: initial;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n transform-origin: top;\n list-style-type: none;\n padding: 0 ${Spacing[\"spacing-8\"]};\n margin: 0;\n background: ${Colour[\"bg\"]};\n cursor: pointer;\n box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n ${Colour[\"border\"]};\n border-bottom-right-radius: ${Radius[\"sm\"]};\n border-bottom-left-radius: ${Radius[\"sm\"]};\n / Enables vertical scrolling /\n overflow-y: auto;\n / Set a max height for the dropdown list /\n max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const navItemLabel = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n color: ${Colour[\"icon-selected\"]};\n margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background-color: ${Colour[\"overlay-strong\"]};\n z-index: -1;\n`;\n\nexport const navWrapper = css`\n ${tokens.navWrapper.stickyOffset}: initial;\n ${tokens.navWrapper.sideMargin}: initial;\n display: block;\n position: sticky;\n top: var(${tokens.navWrapper.stickyOffset});\n width: 100%;\n z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n .${navSelect} {\n margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) -1);\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n border-radius: ${Radius[\"none\"]};\n }\n\n .${navItemList} {\n margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n border-bottom-left-radius: ${Radius[\"sm\"]};\n border-bottom-right-radius: ${Radius[\"sm\"]};\n }\n`;\n"],"names":["navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight"],"mappings":"~~4HAuHqB~~,~~0BA5DD~~,~~gCA0CK~~,~~wCAKQ~~,~~8BAxBT~~,kCANI,6BA/CN,qCAqBQ,iCA/BJ,wCAMQ,~~8BAwGX~~,qCAUQ,~~2BA7BV~~,~~yBA1GC~~,CAClBA,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI"}
1	+ {"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n navWrapper: {\n stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n },\n navItemList: {\n viewportHeight:\n \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n color: ${Colour[\"icon\"]};\n transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n cursor: pointer;\n background: ${Colour[\"bg\"]};\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n overflow: hidden;\n box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n transition-property: background, border-radius, box-shadow, transform;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 2px;\n border-radius: ${Radius[\"sm\"]};\n }\n`;\n\nexport const navSelectExpanded = css`\n border-bottom-left-radius: ${Radius[\"none\"]};\n border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n background: ${Colour[\"bg\"]};\n /* Ensures that the tick mark is positioned relative to the selected item /\n position: relative;\n display: flex;\n / Vertically align text and tick /\n align-items: center;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0px;\n border-radius: ${Radius[\"sm\"]};\n }\n`;\n\nexport const navItemSelected = css`\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n ${Spacing[\"spacing-12\"]} 0;\n background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n ${tokens.navItemList.viewportHeight}: initial;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n transform-origin: top;\n list-style-type: none;\n padding: 0 ${Spacing[\"spacing-8\"]};\n margin: 0;\n background: ${Colour[\"bg\"]};\n cursor: pointer;\n box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n ${Colour[\"border\"]};\n border-bottom-right-radius: ${Radius[\"sm\"]};\n border-bottom-left-radius: ${Radius[\"sm\"]};\n / Enables vertical scrolling /\n overflow-y: auto;\n / Set a max height for the dropdown list /\n max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const titleContainer = css`\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-8\"]};\n flex: 1;\n`;\n\n/ Keeps the left addon aligned with the first line when the title wraps. /\nexport const leftAddon = css`\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n min-height: ${Font.Spec[\"body-lh-baseline\"]};\n`;\n\n/ Flushed right; stays vertically centred against the (possibly wrapped) title. /\nexport const rightAddon = css`\n display: inline-flex;\n align-items: center;\n margin-left: auto;\n`;\n\nexport const navItemLabel = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n color: ${Colour[\"icon-selected\"]};\n margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background-color: ${Colour[\"overlay-strong\"]};\n z-index: -1;\n`;\n\nexport const navWrapper = css`\n ${tokens.navWrapper.stickyOffset}: initial;\n ${tokens.navWrapper.sideMargin}: initial;\n display: block;\n position: sticky;\n top: var(${tokens.navWrapper.stickyOffset});\n width: 100%;\n z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n .${navSelect} {\n margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) -1);\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n border-radius: ${Radius[\"none\"]};\n }\n\n .${navItemList} {\n margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n border-bottom-left-radius: ${Radius[\"sm\"]};\n border-bottom-right-radius: ${Radius[\"sm\"]};\n }\n`;\n"],"names":["navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight"],"mappings":"4HA6IqB,2BAhCC,0BAlDF,gCAgEK,uCAKQ,8BA9CT,kCANI,6BA/CN,qCAqBQ,iCA/BJ,wCAMQ,8BA8HX,qCAUQ,8BA5CR,2BAeF,iCA/BM,0BAjGL,CAClBA,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI"}

package/cjs/local-nav/local-nav-dropdown/{local-nav-dropdown.styles_uhd4xl.css → local-nav-dropdown.styles_kpel1m.css} RENAMED Viewed

@@ -5,9 +5,12 @@
 .n1rgfmu8{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) var(--fds-spacing-32);background:var(--fds-colour-bg);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.n1rgfmu8:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:var(--fds-radius-sm);}
 .n122w1r6{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) 0;background:var(--fds-colour-bg-primary-subtlest);}
 .ny6lx9v{--fds-internal-localNavDropdown-navItemList-viewportHeight:initial;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transform-origin:top;list-style-type:none;padding:0 var(--fds-spacing-8);margin:0;background:var(--fds-colour-bg);cursor:pointer;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-bottom-right-radius:var(--fds-radius-sm);border-bottom-left-radius:var(--fds-radius-sm);overflow-y:auto;max-height:var(--fds-internal-localNavDropdown-navItemList-viewportHeight);}
-.n1lmzf88{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
-.nc4nyiy{color:var(--fds-colour-text-selected);}
-.thuuy8a{color:var(--fds-colour-icon-selected);margin:0 var(--fds-spacing-8);}
-.beqsxqe{position:fixed;top:0;right:0;left:0;bottom:0;background-color:var(--fds-colour-overlay-strong);z-index:-1;}
-.ns92rya{--fds-internal-localNavDropdown-navWrapper-stickyOffset:initial;--fds-internal-localNavDropdown-navWrapper-sideMargin:initial;display:block;position:-webkit-sticky;position:sticky;top:var(--fds-internal-localNavDropdown-navWrapper-stickyOffset);width:100%;z-index:10;}
-.np844yu .n1fsscye{margin:0 calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);padding:var(--fds-spacing-12) var(--fds-spacing-16);border-radius:var(--fds-radius-none);}.np844yu .ny6lx9v{margin-left:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);margin-right:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);border-bottom-left-radius:var(--fds-radius-sm);border-bottom-right-radius:var(--fds-radius-sm);}}
+.t1lmzf88{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);-webkit-flex:1;-ms-flex:1;flex:1;}
+.lc4nyiy{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;min-height:var(--fds-font-body-lh-baseline);}
+.rhuuy8a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;}
+.neqsxqe{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.ns92rya{color:var(--fds-colour-text-selected);}
+.tp844yu{color:var(--fds-colour-icon-selected);margin:0 var(--fds-spacing-8);}
+.b7u5vs{position:fixed;top:0;right:0;left:0;bottom:0;background-color:var(--fds-colour-overlay-strong);z-index:-1;}
+.nb4z8rf{--fds-internal-localNavDropdown-navWrapper-stickyOffset:initial;--fds-internal-localNavDropdown-navWrapper-sideMargin:initial;display:block;position:-webkit-sticky;position:sticky;top:var(--fds-internal-localNavDropdown-navWrapper-stickyOffset);width:100%;z-index:10;}
+.n1y3g4t3 .n1fsscye{margin:0 calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);padding:var(--fds-spacing-12) var(--fds-spacing-16);border-radius:var(--fds-radius-none);}.n1y3g4t3 .ny6lx9v{margin-left:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);margin-right:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);border-bottom-left-radius:var(--fds-radius-sm);border-bottom-right-radius:var(--fds-radius-sm);}}

package/cjs/local-nav/local-nav-menu/local-nav-menu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("react"),r=require("../../typography/index.js"),n=require("./local-nav-menu.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(t);const d=l(a).default.forwardRef((({onNavItemSelect:t,items:a,selectedItemIndex:l,id:d,"data-testid":s,className:c,renderItem:o},u)=>{const m=s||"local-nav-menu";return e.jsx("ul",{ref:u,id:d,className:i.default(n.nav,c),"data-testid":m,children:a.map(((a,d)=>(({handleClick:t,isSelected:a,item:l,renderItem:d,index:s})=>{const{id:c,title:o}=l;return e.jsx("li",{id:c,className:i.default(n.navItem,a&&n.navItemSelected),children:e.jsx("div",{className:n.navItemContent,role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:a}=e;"Enter"!==a&&" "!==a||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!a||void 0,children:d?d(l,{selected:a}):e.jsx(r.Typography.BodyBL,{className:n.textLabel,weight:a?"semibold":"regular",children:o})})},s)})({handleClick:e=>t(e,a,d),isSelected:d===l,item:a,renderItem:o,index:d})))})}));exports.LocalNavMenu=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),n=require("react"),r=require("../../typography/index.js"),a=require("./local-nav-menu.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(t);const i=l(n).default.forwardRef((({onNavItemSelect:t,items:n,selectedItemIndex:l,id:i,"data-testid":d,className:c,renderItem:o},u)=>{const m=d||"local-nav-menu";return e.jsx("ul",{ref:u,id:i,className:s.default(a.nav,c),"data-testid":m,children:n.map(((n,i)=>(({handleClick:t,isSelected:n,item:l,renderItem:i,index:d})=>{const{id:c,title:o,titleAddon:u}=l;return e.jsx("li",{id:c,className:s.default(a.navItem,n&&a.navItemSelected),children:e.jsx("div",{className:a.navItemContent,role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!n||void 0,children:(()=>{if(i)return i(l,{selected:n});const t=e.jsx(r.Typography.BodyBL,{className:a.textLabel,weight:n?"semibold":"regular",children:o});return u?e.jsxs("span",{className:a.titleContainer,children:[u.left&&e.jsx("span",{className:a.leftAddon,children:u.left}),t,u.right&&e.jsx("span",{className:a.rightAddon,children:u.right})]}):t})()})},d)})({handleClick:e=>t(e,n,i),isSelected:i===l,item:n,renderItem:o,index:i})))})}));exports.LocalNavMenu=i;
 //# sourceMappingURL=local-nav-menu.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n {\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": dataTestId,\n className,\n renderItem,\n }: LocalNavMenuProps,\n ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const localNavMenuId = dataTestId \|\| \"local-nav-menu\";\n\n // =============================================================================\n // EVENT HANDLERS\n // ============================================================================\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderLocalNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavMenuItemComponentProps) => {\n const { id, title } = item;\n\n const renderTitle = () => {\n if (renderItem) {\n return renderItem(item, { selected: isSelected });\n }\n ~~return~~ (\n <Typography.BodyBL\n className={styles.textLabel}\n weight={isSelected ? \"semibold\" : \"regular\"}\n >\n {title}\n </Typography.BodyBL>\n );\n };\n\n return (\n <li\n id={id}\n key={index}\n className={clsx(\n styles.navItem,\n isSelected && styles.navItemSelected\n )}\n >\n <div\n className={styles.navItemContent}\n role=\"link\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n tabIndex={0}\n aria-current={isSelected ? true : undefined}\n >\n {renderTitle()}\n </div>\n </li>\n );\n };\n return (\n <ul\n ref={ref}\n id={id}\n className={clsx(styles.nav, className)}\n data-testid={localNavMenuId}\n >\n {items.map((item, i) => {\n const isSelected = i === selectedItemIndex;\n return renderLocalNavItem({\n handleClick: (e) => onNavItemSelect(e, item, i),\n isSelected,\n item,\n renderItem,\n index: i,\n });\n })}\n </ul>\n );\n};\n\n// @catalog\n/*\n A sidebar navigation list that highlights the currently selected section.\n \n Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAQA,~~MAgHaA~~,OAAeC,QAAMC,~~YAhHhB~~,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,~~iBAoErC~~,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,~~IApDC~~,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,~~GAAUL~~,~~EAgBtB~~,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,~~QACPS~~,~~UACAH~~,~~GAAcI~~,EAAAA,iBACjBC,~~SAEDZ~~,MAAA,MAAA,CACIJ,~~UAAWiB~~,EAAAA,eACXC,KAAK,OACLC,~~QAAST~~,~~EACTU~~,UAAYC,~~GAtDC~~,EACzBA,~~EACAX~~,KAIA,~~MAAMY~~,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,~~iBACFb~~,~~EAAYW~~,GAChB,~~EA2C8BG~~,CAAqBH,~~EAAGX~~,~~GAC1Ce~~,SAAU,EAAC,~~iBACGd~~,~~QAAoBe~~,EAASV,~~SA5B~~/Cf,~~EACOA~~,EAAWO,EAAM,~~CAAEmB~~,~~SAAUhB~~,~~IAGpCP~~,EAAAA,~~IAACwB~~,EAAAA,WAAWC,OAAM,~~CACd7B~~,~~UAAW8B~~,EAAAA,UACXC,~~OAAQpB~~,EAAa,WAAa,~~UAASK~~,~~SAE1CH~~,~~OAQAD~~,EAgBJ,~~EAYMoB~~,CAAmB,~~CACtBtB~~,~~YAAcW~~,~~GAAM1B~~,~~EAAgB0B~~,~~EAAGb~~,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}
1	+ {"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n {\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": dataTestId,\n className,\n renderItem,\n }: LocalNavMenuProps,\n ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const localNavMenuId = dataTestId \|\| \"local-nav-menu\";\n\n // =============================================================================\n // EVENT HANDLERS\n // ============================================================================\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderLocalNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavMenuItemComponentProps) => {\n const { id, title, titleAddon } = item;\n\n const renderTitle = () => {\n if (renderItem) {\n return renderItem(item, { selected: isSelected });\n }\n const label = (\n <Typography.BodyBL\n className={styles.textLabel}\n weight={isSelected ? \"semibold\" : \"regular\"}\n >\n {title}\n </Typography.BodyBL>\n );\n if (!titleAddon) {\n return label;\n }\n return (\n <span className={styles.titleContainer}>\n {titleAddon.left && (\n <span className={styles.leftAddon}>\n {titleAddon.left}\n </span>\n )}\n {label}\n {titleAddon.right && (\n <span className={styles.rightAddon}>\n {titleAddon.right}\n </span>\n )}\n </span>\n );\n };\n\n return (\n <li\n id={id}\n key={index}\n className={clsx(\n styles.navItem,\n isSelected && styles.navItemSelected\n )}\n >\n <div\n className={styles.navItemContent}\n role=\"link\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n tabIndex={0}\n aria-current={isSelected ? true : undefined}\n >\n {renderTitle()}\n </div>\n </li>\n );\n };\n return (\n <ul\n ref={ref}\n id={id}\n className={clsx(styles.nav, className)}\n data-testid={localNavMenuId}\n >\n {items.map((item, i) => {\n const isSelected = i === selectedItemIndex;\n return renderLocalNavItem({\n handleClick: (e) => onNavItemSelect(e, item, i),\n isSelected,\n item,\n renderItem,\n index: i,\n });\n })}\n </ul>\n );\n};\n\n// @catalog\n/*\n A sidebar navigation list that highlights the currently selected section.\n \n Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","titleAddon","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","label","Typography","BodyBL","styles.textLabel","weight","_jsxs","styles.titleContainer","left","styles.leftAddon","right","styles.rightAddon","renderTitle","renderLocalNavItem"],"mappings":"uPAQA,MAkIaA,OAAeC,QAAMC,YAlIhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAsFrC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IAtEC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,EAAKC,WAAEA,GAAeN,EAkClC,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPU,UACAJ,GAAcK,EAAAA,iBACjBC,SAEDb,MAAA,MAAA,CACIJ,UAAWkB,EAAAA,eACXC,KAAK,OACLC,QAASV,EACTW,UAAYC,GAxEC,EACzBA,EACAZ,KAIA,MAAMa,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFd,EAAYY,GAChB,EA6D8BG,CAAqBH,EAAGZ,GAC1CgB,SAAU,EAAC,iBACGf,QAAoBgB,EAASV,SA/CnC,MAChB,GAAIhB,EACA,OAAOA,EAAWO,EAAM,CAAEoB,SAAUjB,IAExC,MAAMkB,EACFzB,EAAAA,IAAC0B,EAAAA,WAAWC,OAAM,CACd/B,UAAWgC,EAAAA,UACXC,OAAQtB,EAAa,WAAa,UAASM,SAE1CJ,IAGT,OAAKC,EAIDoB,EAAAA,aAAMlC,UAAWmC,EAAAA,yBACZrB,EAAWsB,MACRhC,EAAAA,YAAMJ,UAAWqC,EAAAA,UAAgBpB,SAC5BH,EAAWsB,OAGnBP,EACAf,EAAWwB,OACRlC,EAAAA,IAAA,OAAA,CAAMJ,UAAWuC,EAAAA,oBACZzB,EAAWwB,WAZjBT,CAeA,EAqBFW,MAdA5B,EAgBJ,EAYM6B,CAAmB,CACtB/B,YAAcY,GAAM3B,EAAgB2B,EAAGd,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./local-nav-menu.styles_pq19dh.css");exports.nav="nflnesd",exports.navItem="n1ocymwf",exports.navItemContent="n8uzvfa",exports.navItemSelected="naf0oif",exports.textLabel="tun9y1j";
+"use strict";require("./local-nav-menu.styles_67fcyc.css");exports.leftAddon="laf0oif",exports.nav="nflnesd",exports.navItem="n5rg3yw",exports.navItemContent="n1qylgc6",exports.navItemSelected="nduzi41",exports.rightAddon="r8uzvfa",exports.textLabel="tun9y1j",exports.titleContainer="t1ocymwf";
 //# sourceMappingURL=local-nav-menu.styles.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n`;\n\nexport const textLabel = css`\n margin: 0;\n`;\n\nexport const navItem = css`\n display: block;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: pointer;\n\n &::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: 4px;\n height: 100%;\n top: 0;\n background-color: ${Colour[\"bg-primary-subtler\"]};\n transition: all 250ms linear;\n }\n\n &:hover,\n &:focus-within {\n background-color: ${Colour[\"bg-hover-subtle\"]};\n }\n`;\n\nexport const navItemSelected = css`\n &::before {\n background-color: ${Colour[\"bg-primary\"]};\n }\n`;\n\nexport const navItemContent = css`\n display: block;\n padding: ${Spacing[\"spacing-16\"]};\n padding-left: ${Spacing[\"spacing-20\"]};\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 2px;\n border-radius: ${Radius[\"sm\"]};\n }\n`;\n"],"names":[],"mappings":"~~+GAIgB~~,~~0BAUI~~,~~kCA8BO~~,~~kCANC~~,~~4BA5BN~~"}
1	+ {"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n`;\n\nexport const textLabel = css`\n margin: 0;\n`;\n\nexport const titleContainer = css`\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-8\"]};\n width: 100%;\n`;\n\n/* Keeps the left addon aligned with the first line when the title wraps. /\nexport const leftAddon = css`\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n min-height: ${Font.Spec[\"body-lh-baseline\"]};\n`;\n\n/ Flushed right; stays vertically centred against the (possibly wrapped) title. */\nexport const rightAddon = css`\n display: inline-flex;\n align-items: center;\n margin-left: auto;\n`;\n\nexport const navItem = css`\n display: block;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: pointer;\n\n &::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: 4px;\n height: 100%;\n top: 0;\n background-color: ${Colour[\"bg-primary-subtler\"]};\n transition: all 250ms linear;\n }\n\n &:hover,\n &:focus-within {\n background-color: ${Colour[\"bg-hover-subtle\"]};\n }\n`;\n\nexport const navItemSelected = css`\n &::before {\n background-color: ${Colour[\"bg-primary\"]};\n }\n`;\n\nexport const navItemContent = css`\n display: block;\n padding: ${Spacing[\"spacing-16\"]};\n padding-left: ${Spacing[\"spacing-20\"]};\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 2px;\n border-radius: ${Radius[\"sm\"]};\n }\n`;\n"],"names":[],"mappings":"qHAsBsB,sBAlBN,0BAgCI,iCA8BO,mCANC,6BA9BL,4BApBD,iCAIK"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles_67fcyc.css ADDED Viewed

@@ -0,0 +1,8 @@
+@layer fds{.nflnesd{list-style-type:none;padding:0;margin-top:0;}
+.tun9y1j{margin:0;}
+.t1ocymwf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);width:100%;}
+.laf0oif{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;min-height:var(--fds-font-body-lh-baseline);}
+.r8uzvfa{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;}
+.n5rg3yw{display:block;position:relative;margin:0;padding:0;cursor:pointer;}.n5rg3yw::before{content:"";position:absolute;left:0;width:4px;height:100%;top:0;background-color:var(--fds-colour-bg-primary-subtler);-webkit-transition:all 250ms linear;transition:all 250ms linear;}.n5rg3yw:hover,.n5rg3yw:focus-within{background-color:var(--fds-colour-bg-hover-subtle);}
+.nduzi41::before{background-color:var(--fds-colour-bg-primary);}
+.n1qylgc6{display:block;padding:var(--fds-spacing-16);padding-left:var(--fds-spacing-20);}.n1qylgc6:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}}

package/cjs/masthead/sgds-day.css CHANGED Viewed

@@ -737,7 +737,6 @@
   --sgds-elevation-edge-top: 0 -2px 4px 0 rgba(14, 14, 14, 0.08);
   --sgds-elevation-edge-bottom: 0 2px 4px 0 rgba(14, 14, 14, 0.08);
 }
 :root {
   color-scheme: only light;
   --sgds-color-scheme: only light;

package/cjs/masthead/sgds-night.css CHANGED Viewed

@@ -737,7 +737,6 @@
   --sgds-elevation-edge-top: 0 -2px 4px 0 rgba(14, 14, 14, 0.08);
   --sgds-elevation-edge-bottom: 0 2px 4px 0 rgba(14, 14, 14, 0.08);
 }
 :root.sgds-night-theme {
   color-scheme: only dark;
   --sgds-color-scheme: only dark;

package/cjs/menu/menu-content.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),n=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var s=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var i=require("./menu-content.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(r);const a=r=>{var{children:o,className:a,"data-testid":l="menu-content",overflow:d,maxHeight:c}=r,m=e.__rest(r,["children","className","data-testid","overflow","maxHeight"]);const h=n.useRef(null);s.useApplyStyle(h,{[i.tokens.panel.maxHeight]:void 0!==c?`${c}px`:null,[i.tokens.panel.overflow]:d||null});return t.jsx("div",Object.assign({ref:h,"data-testid":l,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const s=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!s.length)return;const i=document.activeElement,o=i?s.indexOf(i):-1;e.preventDefault();const u=r?1:-1;null===(t=s[-1===o?r?0:s.length-1:(o+u+s.length)%s.length])||void 0===t||t.focus()},className:u.default(i.panel,a)},m,{children:o}))};a.displayName="Menu.Content",exports.MenuContent=a;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),n=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var s=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var i=require("./menu-content.styles.js"),o=require("./menu-section.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(r);const a=r=>{var{children:l,className:a,"data-testid":d="menu-content",overflow:c,maxHeight:m}=r,h=e.__rest(r,["children","className","data-testid","overflow","maxHeight"]);const f=n.useRef(null),p=n.useMemo((()=>{const e=n.Children.toArray(l).filter((e=>n.isValidElement(e)&&!!e.props.columns)).reduce(((e,t)=>{var r;return Math.max(e,null!==(r=t.props.columns)&&void 0!==r?r:0)}),0);if(e)return e*o.GRID_COLUMN_WIDTH_PX+(e-1)*o.GRID_COLUMN_GAP_PX+2}),[l]);s.useApplyStyle(f,{[i.tokens.panel.maxHeight]:void 0!==m?`${m}px`:null,[i.tokens.panel.maxWidth]:void 0!==p?`${p}px`:null,[i.tokens.panel.overflow]:c||null});return t.jsx("div",Object.assign({ref:f,"data-testid":d,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const s=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!s.length)return;const i=document.activeElement,o=i?s.indexOf(i):-1;e.preventDefault();const l=r?1:-1;null===(t=s[-1===o?r?0:s.length-1:(o+l+s.length)%s.length])||void 0===t||t.focus()},className:u.default(i.panel,a)},h,{children:l}))};a.displayName="Menu.Content",exports.MenuContent=a;
 //# sourceMappingURL=menu-content.js.map

package/cjs/menu/menu-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n return Array.from(\n container.querySelectorAll<HTMLElement>(\n 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n )\n ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n children,\n className,\n \"data-testid\": testId = \"menu-content\",\n overflow,\n maxHeight,\n ...otherProps\n}: MenuContentProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const panelRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(panelRef, {\n [styles.tokens.panel.maxHeight]:\n maxHeight !== undefined ? `${maxHeight}px` : null,\n [styles.tokens.panel.overflow]: overflow \|\| null,\n });\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const isNextKey = e.key === \"ArrowDown\" \|\| e.key === \"ArrowRight\";\n const isPrevKey = e.key === \"ArrowUp\" \|\| e.key === \"ArrowLeft\";\n\n if (!isNextKey && !isPrevKey) return;\n\n const container = e.currentTarget as HTMLElement;\n const focusables = getFocusables(container);\n if (!focusables.length) return;\n\n const active = document.activeElement as HTMLElement \| null;\n const idx = active ? focusables.indexOf(active) : -1;\n\n e.preventDefault();\n\n const delta = isNextKey ? 1 : -1;\n\n const nextIndex =\n idx === -1\n ? isNextKey\n ? 0\n : focusables.length - 1\n : (idx + delta + focusables.length) % focusables.length;\n\n focusables[nextIndex]?.focus();\n };\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n ref={panelRef}\n data-testid={testId}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n className={clsx(styles.panel, className)}\n {...otherProps}\n >\n {children}\n </div>\n );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","useApplyStyle","styles.tokens","panel","undefined","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","~~filter","~~el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"~~ukBAWA~~,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAAA,OAAuB,~~MAExCC~~,EAAAA,~~cAAcF~~,EAAU,CACpB,~~CAACG~~,EAAAA,OAAcC,~~MAAMP~~,~~gBACHQ~~,~~IAAdR~~,EAA0B,GAAGA,MAAgB,KACjD,~~CAACM~~,SAAcC,~~MAAMR~~,UAAWA,GAAY,OAkChD,~~OACIU~~,MAAA,MAAAC,OAAAC,OAAA,CACIC,~~IAAKT~~,EAAQ,cACAL,~~EACbe~~,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,~~EApCQ~~,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,~~qEAENC~~,~~QAAQC~~,IAAQA,EAAGC,aAAa,~~cA+BXC~~,~~CADDZ~~,~~EAAEa~~,eAEpB,~~IAAKT~~,~~EAAWU~~,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,~~EAASX~~,~~EAAWe~~,QAAQJ,IAAU,~~EAElDf~~,~~EAAEoB~~,iBAEF,MAAMC,~~EAAQpB~~,EAAY,GAAI,EAST,~~QAArBrB~~,~~EAAAwB~~,GANY,~~IAARc~~,~~EACMjB~~,EACI,EACAG,~~EAAWU~~,OAAS,GACvBI,EAAMG,~~EAAQjB~~,~~EAAWU~~,~~QAAUV~~,~~EAAWU~~,eAEpC,~~IAAAlC~~,GAAAA,~~EAAE0C~~,OAAO,~~EAW1BxC~~,~~UAAWyC~~,UAAKC,EAAAA,~~MAAc1C~~,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,~~EAAY8C~~,YAAc"}
1	+ {"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n Children,\n isValidElement,\n type ReactElement,\n useMemo,\n useRef,\n} from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport * as sectionStyles from \"./menu-section.styles\";\nimport type { MenuContentProps, MenuSectionProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n return Array.from(\n container.querySelectorAll<HTMLElement>(\n 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n )\n ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n children,\n className,\n \"data-testid\": testId = \"menu-content\",\n overflow,\n maxHeight,\n ...otherProps\n}: MenuContentProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const panelRef = useRef<HTMLDivElement>(null);\n\n const gridMaxWidth = useMemo(() => {\n const maxColumns = Children.toArray(children)\n .filter(\n (child): child is ReactElement<MenuSectionProps> =>\n isValidElement(child) &&\n !!(child.props as MenuSectionProps).columns\n )\n .reduce((max, child) => Math.max(max, child.props.columns ?? 0), 0);\n if (!maxColumns) return undefined;\n return (\n maxColumns * sectionStyles.GRID_COLUMN_WIDTH_PX +\n (maxColumns - 1) * sectionStyles.GRID_COLUMN_GAP_PX +\n 2 // 1px border × 2 sides\n );\n }, [children]);\n\n useApplyStyle(panelRef, {\n [styles.tokens.panel.maxHeight]:\n maxHeight !== undefined ? `${maxHeight}px` : null,\n [styles.tokens.panel.maxWidth]:\n gridMaxWidth !== undefined ? `${gridMaxWidth}px` : null,\n [styles.tokens.panel.overflow]: overflow \|\| null,\n });\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const isNextKey = e.key === \"ArrowDown\" \|\| e.key === \"ArrowRight\";\n const isPrevKey = e.key === \"ArrowUp\" \|\| e.key === \"ArrowLeft\";\n\n if (!isNextKey && !isPrevKey) return;\n\n const container = e.currentTarget as HTMLElement;\n const focusables = getFocusables(container);\n if (!focusables.length) return;\n\n const active = document.activeElement as HTMLElement \| null;\n const idx = active ? focusables.indexOf(active) : -1;\n\n e.preventDefault();\n\n const delta = isNextKey ? 1 : -1;\n\n const nextIndex =\n idx === -1\n ? isNextKey\n ? 0\n : focusables.length - 1\n : (idx + delta + focusables.length) % focusables.length;\n\n focusables[nextIndex]?.focus();\n };\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n ref={panelRef}\n data-testid={testId}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n className={clsx(styles.panel, className)}\n {...otherProps}\n >\n {children}\n </div>\n );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","gridMaxWidth","useMemo","maxColumns","Children","toArray","filter","child","isValidElement","props","columns","reduce","max","Math","sectionStyles.GRID_COLUMN_WIDTH_PX","sectionStyles.GRID_COLUMN_GAP_PX","useApplyStyle","styles.tokens","panel","undefined","maxWidth","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"6mBAkBA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAAA,OAAuB,MAElCC,EAAeC,EAAAA,SAAQ,KACzB,MAAMC,EAAaC,WAASC,QAAQb,GAC/Bc,QACIC,GACGC,EAAAA,eAAeD,MACZA,EAAME,MAA2BC,UAE3CC,QAAO,CAACC,EAAKL,KAAS,IAAAhB,EAAC,OAAAsB,KAAKD,IAAIA,EAAwB,QAAnBrB,EAAAgB,EAAME,MAAMC,eAAO,IAAAnB,EAAAA,EAAI,EAAE,GAAE,GACrE,GAAKY,EACL,OACIA,EAAaW,EAAAA,sBACZX,EAAa,GAAKY,EAAAA,mBACnB,IAEL,CAACvB,IAEJwB,EAAAA,cAAcjB,EAAU,CACpB,CAACkB,EAAAA,OAAcC,MAAMtB,gBACHuB,IAAdvB,EAA0B,GAAGA,MAAgB,KACjD,CAACqB,EAAAA,OAAcC,MAAME,eACAD,IAAjBlB,EAA6B,GAAGA,MAAmB,KACvD,CAACgB,SAAcC,MAAMvB,UAAWA,GAAY,OAkChD,OACI0B,MAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKzB,EAAQ,cACAL,EACb+B,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EAtDQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAEN7B,QAAQ8B,IAAQA,EAAGC,aAAa,cAiDXC,CADDX,EAAEY,eAEpB,IAAKR,EAAWS,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASV,EAAWc,QAAQJ,IAAU,EAElDd,EAAEmB,iBAEF,MAAMC,EAAQnB,EAAY,GAAI,EAST,QAArBrC,EAAAwC,GANY,IAARa,EACMhB,EACI,EACAG,EAAWS,OAAS,GACvBI,EAAMG,EAAQhB,EAAWS,QAAUT,EAAWS,eAEpC,IAAAjD,GAAAA,EAAEyD,OAAO,EAW1BvD,UAAWwD,UAAKC,EAAAA,MAAczD,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY6D,YAAc"}

package/cjs/menu/menu-content.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./menu-content.styles_p7ijll.css");exports.panel="pmssexq",exports.tokens={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",overflow:"--fds-internal-menu-panel-overflow"}};
+"use strict";require("./menu-content.styles_1r8oxtk.css");exports.panel="pmssexq",exports.tokens={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",maxWidth:"--fds-internal-menu-panel-maxWidth",overflow:"--fds-internal-menu-panel-overflow"}};
 //# sourceMappingURL=menu-content.styles.js.map

package/cjs/menu/menu-content.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Breakpoint,\n Colour,\n MediaQuery,\n Radius,\n Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n panel: {\n availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n overflow: \"--fds-internal-menu-panel-overflow\",\n xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n },\n} as const;\n\nexport const panel = css`\n border-radius: ${Radius[\"md\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n box-shadow: ${Shadow[\"md-subtle\"]};\n\n ${tokens.panel.maxHeight}: initial;\n ${tokens.panel.overflow}: initial;\n ${tokens.panel.xSpacing}: 0px;\n ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n .xSpacing}) * 2);\n\n ${MediaQuery.MaxWidth.sm} {\n ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.xs} {\n ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n }\n\n min-width: min(15rem, var(${tokens.panel.availableWidth}));\n max-width: min(~~24rem~~, var(${tokens.panel.availableWidth}));\n max-height: var(${tokens.panel.maxHeight});\n overflow-y: var(${tokens.panel.overflow});\n\n &:focus {\n outline: none;\n }\n\n ~~&::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background:~~ ${~~Colour[~~\"~~bg-inverse-subtlest~~\"]}~~;\n border: 5px solid transparent;\n border-radius: ${Radius[~~\~~"full\"]};\~~n ~~background-clip: padding-box;\n }\n~~`;\n"],"names":["panel","maxHeight","overflow"],"mappings":"~~2FAoBkB~~,~~yBATI~~,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU"}
1	+ {"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { scrollbarCss } from \"../shared/styles\";\nimport {\n Border,\n Breakpoint,\n Colour,\n MediaQuery,\n Radius,\n Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n panel: {\n availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n maxWidth: \"--fds-internal-menu-panel-maxWidth\",\n overflow: \"--fds-internal-menu-panel-overflow\",\n xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n },\n} as const;\n\nexport const panel = css`\n border-radius: ${Radius[\"md\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n box-shadow: ${Shadow[\"md-subtle\"]};\n\n ${tokens.panel.maxHeight}: initial;\n ${tokens.panel.maxWidth}: initial;\n ${tokens.panel.overflow}: initial;\n ${tokens.panel.xSpacing}: 0px;\n ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n .xSpacing}) * 2);\n\n ${MediaQuery.MaxWidth.sm} {\n ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.xs} {\n ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n }\n\n min-width: min(15rem, var(${tokens.panel.availableWidth}));\n max-width: min(\n var(${tokens.panel.maxWidth}, 24rem),\n var(${tokens.panel.availableWidth})\n );\n max-height: var(${tokens.panel.maxHeight});\n overflow-y: var(${tokens.panel.overflow});\n\n &:focus {\n outline: none;\n }\n\n ${scrollbarCss(\"vertical\")}\n`;\n"],"names":["panel","maxHeight","maxWidth","overflow"],"mappings":"4FAsBkB,yBAVI,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU,qCACVC,SAAU"}

package/cjs/menu/menu-content.styles_1r8oxtk.css ADDED Viewed

@@ -0,0 +1,5 @@
+@layer fds{.pmssexq{border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-subtle);--fds-internal-menu-panel-maxHeight:initial;--fds-internal-menu-panel-maxWidth:initial;--fds-internal-menu-panel-overflow:initial;--fds-internal-menu-panel-xSpacing:0px;--fds-internal-menu-panel-availableWidth:calc(100vw - var(--fds-internal-menu-panel-xSpacing
+              ) * 2);min-width:min(15rem, var(--fds-internal-menu-panel-availableWidth));max-width:min(
+        var(--fds-internal-menu-panel-maxWidth, 24rem),
+        var(--fds-internal-menu-panel-availableWidth)
+    );max-height:var(--fds-internal-menu-panel-maxHeight);overflow-y:var(--fds-internal-menu-panel-overflow);}:where(body.fds-breakpoint-sm-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs);}.pmssexq:focus{outline:none;}.pmssexq::-webkit-scrollbar{width:14px;}.pmssexq::-webkit-scrollbar-track{background:transparent;}.pmssexq::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}}

package/cjs/menu/menu-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./menu-item.styles_liyed8.css");exports.menuItemDiv="m1ddqpur",exports.subLabel="s12tso9",exports.text="tor9xcz";
+"use strict";require("./menu-item.styles_eut2j9.css");exports.menuItemDiv="m1ddqpur",exports.subLabel="s12tso9",exports.text="tor9xcz";
 //# sourceMappingURL=menu-item.styles.js.map

package/cjs/menu/menu-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme/tokens\";\n\nexport const menuItemDiv = css`\n display: flex;\n flex-direction: column;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const text = css`\n color: ${Colour[\"text\"]};\n`;\n\nexport const subLabel = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"8FAIwB,4BAUH,uBAJJ"}
1	+ {"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme/tokens\";\n\nexport const menuItemDiv = css`\n display: flex;\n flex-direction: column;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const text = css`\n color: ${Colour[\"text\"]};\n`;\n\nexport const subLabel = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"8FAIwB,4BAUH,uBAJJ"}

package/cjs/menu/{menu-item.styles_liyed8.css → menu-item.styles_eut2j9.css} RENAMED Viewed

@@ -1,3 +1,3 @@
-@layer fds{.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+@layer fds{.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-12) var(--fds-spacing-16);}
 .tor9xcz{color:var(--fds-colour-text);}
 .s12tso9{color:var(--fds-colour-text-subtler);}}

package/cjs/menu/menu-link.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./menu-link.styles_hfxoez.css");exports.link="l5rk4za",exports.menuLinkDiv="mmmrhdq";
+"use strict";require("./menu-link.styles_rng7n7.css");exports.link="l5rk4za",exports.menuLinkDiv="mmmrhdq";
 //# sourceMappingURL=menu-link.styles.js.map

package/cjs/menu/menu-link.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-link.styles.js","sources":["../../../src/menu/menu-link.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme/tokens\";\n\nexport const menuLinkDiv = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const link = css`\n color: ${Colour[\"text\"]};\n\n margin: 0 ${Spacing[\"spacing-8\"]};\n\n border: ${Border[\"solid\"]} transparent;\n border-width: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n\n border-radius: ${Radius[\"md\"]};\n\n ${lineClampCss(2)}\n white-space: pre-wrap;\n\n &:hover,\n &:active,\n &:focus {\n background-color: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text\"]};\n }\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n"],"names":[],"mappings":"uFAUiB,8BALO"}
1	+ {"version":3,"file":"menu-link.styles.js","sources":["../../../src/menu/menu-link.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme/tokens\";\n\nexport const menuLinkDiv = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const link = css`\n color: ${Colour[\"text\"]};\n\n margin: 0 ${Spacing[\"spacing-8\"]};\n\n border: ${Border[\"solid\"]} transparent;\n border-width: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n\n border-radius: ${Radius[\"md\"]};\n\n ${lineClampCss(2)}\n white-space: pre-wrap;\n\n &:hover,\n &:active,\n &:focus {\n background-color: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text\"]};\n }\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n"],"names":[],"mappings":"uFAUiB,8BALO"}

package/cjs/menu/menu-link.styles_rng7n7.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @layer fds{.mmmrhdq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
2	+ .l5rk4za{color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-12) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l5rk4za:hover,.l5rk4za:active,.l5rk4za:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}.l5rk4za:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}}

package/cjs/menu/menu-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("react");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var t=require("./menu-section.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(i);const u=i=>{var{children:l,label:u,showDivider:d=!0,className:c,"data-testid":o="menu-section"}=i,j=e.__rest(i,["children","label","showDivider","className","data-testid"]);const h=a.useId();return r.jsxs("ul",Object.assign({"data-testid":o,"aria-labelledby":h,className:n.default(t.section,d&&t.sectionWithDivider,c)},j,{children:[u&&r.jsx(s.Typography.BodyXS,{className:t.label,weight:"semibold",id:h,children:u}),l]}))};u.displayName="Menu.Section",exports.MenuSection=u;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var t=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var a=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./menu-section.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(i);const d=i=>{var{children:n,label:d,showDivider:c=!0,className:m,columns:h,"data-testid":j="menu-section"}=i,q=e.__rest(i,["children","label","showDivider","className","columns","data-testid"]);const v=l.useId(),y=s.useRef(null),p=s.useMemo((()=>void 0!==h?Math.ceil(s.Children.count(n)/Math.max(1,h)):void 0),[h,n]);t.useApplyStyle(y,void 0!==p?{[u.gridTokens.rows]:String(p)}:void 0);const x=d?r.jsx(a.Typography.BodyXS,{className:u.label,weight:"semibold",id:v,children:d}):null;return r.jsxs("div",{className:o.default(u.section,c&&u.sectionWithDivider,m),children:[x,r.jsx("ul",Object.assign({ref:y,"data-testid":j,"aria-labelledby":v,className:o.default(u.list,h&&u.listColumns)},q,{children:n}))]})};d.displayName="Menu.Section",exports.MenuSection=d;
 //# sourceMappingURL=menu-section.js.map

package/cjs/menu/menu-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-section.js","sources":["../../../src/menu/menu-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./menu-section.styles\";\nimport type { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n children,\n label,\n showDivider = true,\n className,\n \"data-testid\": testId = \"menu-section\",\n ...otherProps\n}: MenuSectionProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const internalId = useId();\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n ~~return~~ (\n <ul\n ~~data-testid~~={~~testId~~}\n ~~aria-labelledby~~={internalId}\n className={clsx(\n styles.section,\n showDivider && styles.sectionWithDivider,\n className\n )}\n ~~{...otherProps}\n~~ >\n {~~label && (~~\n <~~Typography.BodyXS~~\n ~~className~~={~~styles.label~~}\n ~~weight=\"semibold~~\"\n id={internalId}\n ~~>\n~~ {~~label~~}\n ~~</Typography.BodyXS>\n )~~}\n {children}\n </ul>\n );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","className","testId","otherProps","__rest","internalId","useId","~~_jsxs~~","~~Object~~","~~assign~~","~~clsx~~","~~styles.section~~","styles.~~sectionWithDivider~~","_jsx","Typography","BodyXS","styles.label","weight","id","displayName"],"mappings":"~~ieAOO~~,MAAMA,EAAeC,QAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,UAClBA,EACA,cAAeC,EAAS,~~gBAAcL~~,~~EACnCM,~~EAAUC,EAAAA,~~OAAAP~~,~~EANW~~,~~8DAWxB~~,~~MAAMQ~~,EAAaC,EAAAA,~~QAKnB~~,~~OACIC~~,EAAAA,~~KAAA~~,~~KAAAC~~,~~OAAAC~~,~~OAAA~~,~~CAAA~~,~~cACiBP~~,~~EAAM~~,~~kBACFG~~,~~EACjBJ~~,~~UAAWS~~,EAAAA,~~QACPC~~,~~UACAX~~,~~GAAeY~~,EAAAA,~~mBACfX~~,~~IAEAE~~,~~EAAU~~,~~CAAAL~~,~~SAAA~~,~~CAEbC~~,~~GACGc~~,EAAAA,IAACC,EAAAA,WAAWC,OAAM,~~CACdd~~,~~UAAWe~~,EAAAA,MACXC,OAAO,WACPC,~~GAAIb~~,~~EAAUP~~,SAEbC,~~IAGRD~~,~~KACA~~,~~EAIbF~~,~~EAAYuB~~,YAAc"}
1	+ {"version":3,"file":"menu-section.js","sources":["../../../src/menu/menu-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Children, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./menu-section.styles\";\nimport type { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n children,\n label,\n showDivider = true,\n className,\n columns,\n \"data-testid\": testId = \"menu-section\",\n ...otherProps\n}: MenuSectionProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const internalId = useId();\n const ulRef = useRef<HTMLUListElement>(null);\n const gridRows = useMemo(\n () =>\n columns !== undefined\n ? Math.ceil(Children.count(children) / Math.max(1, columns))\n : undefined,\n [columns, children]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useApplyStyle(\n ulRef,\n gridRows !== undefined\n ? { [styles.gridTokens.rows]: String(gridRows) }\n : undefined\n );\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const labelElement = label ? (\n <Typography.BodyXS\n className={styles.label}\n weight=\"semibold\"\n id={internalId}\n >\n {label}\n </Typography.BodyXS>\n ) : null;\n\n return (\n <div\n className={clsx(\n styles.section,\n showDivider && styles.sectionWithDivider,\n className\n )}\n >\n {labelElement}\n <ul\n ref={ulRef}\n data-testid={testId}\n aria-labelledby={internalId}\n className={clsx(styles.list, columns && styles.listColumns)}\n {...otherProps}\n >\n {children}\n </ul>\n </div>\n );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","className","columns","testId","otherProps","__rest","internalId","useId","ulRef","useRef","gridRows","useMemo","undefined","Math","ceil","Children","count","max","useApplyStyle","styles.gridTokens","rows","String","labelElement","_jsx","Typography","BodyXS","styles.label","weight","id","_jsxs","clsx","styles.section","styles.sectionWithDivider","Object","assign","ref","styles.list","styles.listColumns","displayName"],"mappings":"yzBASO,MAAMA,EAAeC,QAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,UAClBA,EAASC,QACTA,EACA,cAAeC,EAAS,kBACrBC,EAAUC,EAAAA,OAAAR,EAPW,CAAA,WAAA,QAAA,cAAA,YAAA,UAAA,gBAYxB,MAAMS,EAAaC,EAAAA,QACbC,EAAQC,EAAAA,OAAyB,MACjCC,EAAWC,WACb,SACgBC,IAAZV,EACMW,KAAKC,KAAKC,EAAAA,SAASC,MAAMlB,GAAYe,KAAKI,IAAI,EAAGf,SACjDU,GACV,CAACV,EAASJ,IAMdoB,EAAAA,cACIV,OACaI,IAAbF,EACM,CAAE,CAACS,EAAAA,WAAkBC,MAAOC,OAAOX,SACnCE,GAMV,MAAMU,EAAevB,EACjBwB,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CACdxB,UAAWyB,EAAAA,MACXC,OAAO,WACPC,GAAItB,EAAUR,SAEbC,IAEL,KAEJ,OACI8B,EAAAA,YACI5B,UAAW6B,EAAAA,QACPC,EAAAA,QACA/B,GAAegC,EAAAA,mBACf/B,aAGHqB,EACDC,EAAAA,IAAA,KAAAU,OAAAC,OAAA,CACIC,IAAK3B,gBACQL,EAAM,kBACFG,EACjBL,UAAW6B,EAAAA,QAAKM,OAAalC,GAAWmC,EAAAA,cACpCjC,YAEHN,OAEH,EAIdF,EAAY0C,YAAc"}

package/cjs/menu/menu-section.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./menu-section.styles_g7my4d.css");exports.label="llhca5j",exports.section="s1fmxqsy",exports.sectionWithDivider="s1o971t2";
+"use strict";require("./menu-section.styles_1n0ppxl.css");exports.GRID_COLUMN_GAP_PX=8,exports.GRID_COLUMN_WIDTH_PX=383,exports.gridTokens={rows:"--fds-menu-section-grid-rows"},exports.label="llhca5j",exports.list="l7qikvl",exports.listColumns="l6d0215",exports.section="s1fmxqsy",exports.sectionWithDivider="s1o971t2";
 //# sourceMappingURL=menu-section.styles.js.map

package/cjs/menu/menu-section.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme/tokens\";\n\nexport const section = css`\n padding: ${Spacing[\"spacing-8\"]} 0;\n margin: 0;\n ~~list-style: none;\~~n~~`;\~~nexport const sectionWithDivider = css`\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const label = css`\n margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"~~2FAakB~~,~~0BATE~~,sCAKW"}
1	+ {"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Spacing } from \"../theme/tokens\";\n\nexport const gridTokens = {\n rows: \"--fds-menu-section-grid-rows\",\n} as const;\n\n// 367px max content width (Figma) + 8px padding per side; used to cap the panel maxWidth in MenuContent\nexport const GRID_COLUMN_WIDTH_PX = 383;\n// matches Spacing[\"spacing-8\"]\nexport const GRID_COLUMN_GAP_PX = 8;\n\nexport const section = css`\n padding: ${Spacing[\"spacing-8\"]} 0;\n margin: 0;\n`;\n\nexport const sectionWithDivider = css`\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const label = css`\n margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const list = css`\n list-style: none;\n`;\n\nexport const listColumns = css`\n ${gridTokens.rows}: initial;\n\n display: grid;\n grid-template-rows: repeat(var(${gridTokens.rows}), auto);\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n column-gap: ${Spacing[\"spacing-8\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n grid-template-rows: none;\n grid-auto-flow: row;\n }\n`;\n"],"names":["rows"],"mappings":"yGAWkC,+BAFE,uBALV,CACtBA,KAAM,8CAiBQ,uBAKD,8BAIO,0BAlBJ,sCAKW"}

package/cjs/menu/menu-section.styles_1n0ppxl.css ADDED Viewed

@@ -0,0 +1,5 @@
+@layer fds{.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;}
+.s1o971t2{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.llhca5j{margin:0 var(--fds-spacing-16) var(--fds-spacing-8);color:var(--fds-colour-text-subtler);}
+.l7qikvl{list-style:none;}
+.l6d0215{--fds-menu-section-grid-rows:initial;display:-ms-grid;display:grid;-ms-grid-rows:repeat(var(--fds-menu-section-grid-rows), auto);grid-template-rows:repeat(var(--fds-menu-section-grid-rows), auto);-ms-grid-auto-flow:column;grid-auto-flow:column;-ms-grid-auto-columns:minmax(0, 1fr);grid-auto-columns:minmax(0, 1fr);-webkit-column-gap:var(--fds-spacing-8);column-gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-lg-max) .l6d0215{-ms-grid-rows:none;grid-template-rows:none;-ms-grid-auto-flow:row;grid-auto-flow:row;}}

package/cjs/navbar/navbar-items.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-up"),r=require("clsx"),l=require("react"),t=require("../menu/menu.js"),a=require("../shared/clickable-icon/clickable-icon.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("./menu.js"),d=require("./navbar-items.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(r);exports.NavbarItems=({items:r,selectedId:u,mobile:m=!1,hideNavBranding:p,hideLinkIndicator:h=!1,onItemClick:v})=>{const[b,j]=l.useState(null),x=l.useRef(null),f=s.useId(),g=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===u)))},k=m?r.findIndex((e=>"component"!==e.itemType&&g(e))):-1,I=k<0?null:k;l.useEffect((()=>{m&&j(I)}),[m,I]),l.useEffect((()=>{if(m)return;const e=e=>{x.current&&!x.current.contains(e.target)&&j(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[m]);const N=(e,n)=>i=>{i.stopPropagation(),m&&j((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),v(i,e)},q=(e,n)=>{e.stopPropagation(),v(e,n)},C=(e,i)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),M=e=>n.jsx(c.Menu,{items:e,selectedId:u,onItemClick:q}),L=(l,s)=>{const{children:c,options:v,subMenu:x}=l,k=e.__rest(l,["children","options","subMenu"]),I=!!(null==x?void 0:x.length),q=(e=>e.id===u||g(e))(l),L=!m&&I&&b===s,$=m&&I&&b===s,_=L||$,y=m||null===b?q:b===s,E=!h&&y,S=y?m?"bold":"semibold":"regular",O=m?`link__mobile-${s+1}`:`link__${s+1}`,w=()=>E?n.jsx("div",{"data-testid":`${O}-indicator`,className:o.default(d.linkIndicator,y&&d.linkIndicatorSelected)}):null,B=o.default(d.link,(e=>{switch(e){case"bold":return d.linkWeightBold;case"semibold":return d.linkWeightSemibold;default:return d.linkWeightRegular}})(S),y&&d.linkSelected);return n.jsx("li",{className:o.default(d.linkItem,p&&d.linkItemHiddenBranding),children:I?(e=>{const r=`navbar-submenu-${f}-${l.id}`;return m?n.jsxs(n.Fragment,{children:[n.jsxs("a",Object.assign({"data-testid":O,className:B},k,{"aria-current":q?"page":void 0,"aria-haspopup":"menu","aria-expanded":_,onClick:N(l,s)},v,{children:[n.jsx("div",{className:d.linkLabel,children:c}),w(),m&&I?n.jsx("div",{className:d.linkIconContainer,children:n.jsx(a.ClickableIcon,{"data-testid":`${O}-expand-collapse-button`,className:o.default(d.expandCollapseButton,$&&d.subMenuExpanded),focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(i.ChevronUpIcon,{className:o.default(d.chevronIcon,y&&d.chevronIconSelected)})})}):null]})),$&&M(x)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:C(x,r),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{j(s)},onPopoverDismiss:()=>{j((e=>e===s?null:e))},children:n.jsxs("button",Object.assign({type:"button",tabIndex:0,"data-testid":O,className:o.default(B,d.linkButton),"aria-haspopup":"menu","aria-expanded":_},v,{children:[n.jsx("div",{className:d.linkLabel,children:c}),w(),n.jsx(i.ChevronUpIcon,{className:o.default(d.chevronIcon,d.chevronIconDesktop,y&&d.chevronIconSelected,L&&d.subMenuExpanded)})]}))})})(s===r.length-1):n.jsxs("a",Object.assign({tabIndex:0,"data-testid":O,className:B},k,{"aria-current":q?"page":void 0,onClick:N(l,s)},v,{children:[n.jsx("div",{className:d.linkLabel,children:c}),w()]}))},s)},$=()=>r.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):L(e,i)}));return r&&r.length>0?m?n.jsx("ul",{ref:x,className:d.mobileWrapper,children:$()}):n.jsx("ul",{ref:x,className:o.default(d.wrapper,p&&d.wrapperAlignLeft),children:$()}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-up"),r=require("clsx"),l=require("react"),t=require("../menu/menu.js"),s=require("../shared/clickable-icon/clickable-icon.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./menu.js"),c=require("./navbar-items.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(r);exports.NavbarItems=({items:r,selectedId:d,mobile:m=!1,hideNavBranding:p,hideLinkIndicator:h=!1,onItemClick:b})=>{const[v,j]=l.useState(null),x=l.useRef(null),f=a.useId(),g=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===d)))},k=m?r.findIndex((e=>"component"!==e.itemType&&g(e))):-1,I=k<0?null:k;l.useEffect((()=>{m&&j(I)}),[m,I]),l.useEffect((()=>{if(m)return;const e=e=>{x.current&&!x.current.contains(e.target)&&j(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[m]);const N=(e,n)=>i=>{i.stopPropagation(),m&&j((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),b(i,e)},q=(e,n)=>{e.stopPropagation(),b(e,n)},C=(e,i,r)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,columns:r,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),M=e=>n.jsx(u.Menu,{items:e,selectedId:d,onItemClick:q}),L=(l,a)=>{const{children:u,options:b,subMenu:x,subMenuColumns:k}=l,I=e.__rest(l,["children","options","subMenu","subMenuColumns"]),q=!!(null==x?void 0:x.length),L=(e=>e.id===d||g(e))(l),$=!m&&q&&v===a,_=m&&q&&v===a,y=$||_,E=m||null===v?L:v===a,S=!h&&E,O=E?m?"bold":"semibold":"regular",w=m?`link__mobile-${a+1}`:`link__${a+1}`,B=()=>S?n.jsx("div",{"data-testid":`${w}-indicator`,className:o.default(c.linkIndicator,E&&c.linkIndicatorSelected)}):null,P=o.default(c.link,(e=>{switch(e){case"bold":return c.linkWeightBold;case"semibold":return c.linkWeightSemibold;default:return c.linkWeightRegular}})(O),E&&c.linkSelected);return n.jsx("li",{className:o.default(c.linkItem,p&&c.linkItemHiddenBranding),children:q?(e=>{const r=`navbar-submenu-${f}-${l.id}`;return m?n.jsxs(n.Fragment,{children:[n.jsxs("a",Object.assign({"data-testid":w,className:P},I,{"aria-current":L?"page":void 0,"aria-haspopup":"menu","aria-expanded":y,onClick:N(l,a)},b,{children:[n.jsx("div",{className:c.linkLabel,children:u}),B(),m&&q?n.jsx("div",{className:c.linkIconContainer,children:n.jsx(s.ClickableIcon,{"data-testid":`${w}-expand-collapse-button`,className:o.default(c.expandCollapseButton,_&&c.subMenuExpanded),focusHighlight:!1,focusOutline:"browser","aria-label":_?"Collapse":"Expand",children:n.jsx(i.ChevronUpIcon,{className:o.default(c.chevronIcon,E&&c.chevronIconSelected)})})}):null]})),_&&M(x)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:C(x,r,k),enableResize:!0,triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{j(a)},onPopoverDismiss:()=>{j((e=>e===a?null:e))},children:n.jsxs("button",Object.assign({type:"button",tabIndex:0,"data-testid":w,className:o.default(P,c.linkButton),"aria-haspopup":"menu","aria-expanded":y},b,{children:[n.jsx("div",{className:c.linkLabel,children:u}),B(),n.jsx(i.ChevronUpIcon,{className:o.default(c.chevronIcon,c.chevronIconDesktop,E&&c.chevronIconSelected,$&&c.subMenuExpanded)})]}))})})(a===r.length-1):n.jsxs("a",Object.assign({tabIndex:0,"data-testid":w,className:P},I,{"aria-current":L?"page":void 0,onClick:N(l,a)},b,{children:[n.jsx("div",{className:c.linkLabel,children:u}),B()]}))},a)},$=()=>r.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):L(e,i)}));return r&&r.length>0?m?n.jsx("ul",{ref:x,className:c.mobileWrapper,children:$()}):n.jsx("ul",{ref:x,className:o.default(c.wrapper,p&&c.wrapperAlignLeft),children:$()}):n.jsx(n.Fragment,{})};
 //# sourceMappingURL=navbar-items.js.map