@lifesg/react-design-system 3.5.0 → 3.6.0-canary.1

package/local-nav/local-nav-menu/local-nav-menu.styles.js

@@ -1,10 +1,24 @@
-import o from"styled-components";import{Colour as i,Spacing as t,Radius as r}from"../../theme/index.js";import{Typography as e}from"../../typography/typography.js";const n=o.ul`
+import i from"styled-components";import{Spacing as e,Font as n,Colour as t,Radius as o}from"../../theme/index.js";import{Typography as l}from"../../typography/typography.js";const s=i.ul`
     list-style-type: none;
     padding: 0;
     margin-top: 0;
-`,p=o(e.BodyBL)`
+`,a=i(l.BodyBL)`
     margin: 0;
-`,s=o.li`
+`,r=i.span`
+    display: flex;
+    align-items: center;
+    gap: ${e["spacing-8"]};
+    width: 100%;
+`,p=i.span`
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+    min-height: ${n.Spec["body-lh-baseline"]};
+`,d=i.span`
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
+`,g=i.li`
     display: block;
     position: relative;
     margin: 0;
@@ -18,23 +32,23 @@ import o from"styled-components";import{Colour as i,Spacing as t,Radius as r}fro
         width: 4px;
         height: 100%;
         top: 0;
-        background-color: ${o=>o.$isSelected?i["bg-primary"]:i["bg-primary-subtler"]};
+        background-color: ${i=>i.$isSelected?t["bg-primary"]:t["bg-primary-subtler"]};
         transition: all 250ms linear;
     }
 
     &:hover,
     &:focus-within {
-        background-color: ${i["bg-hover-subtle"]};
+        background-color: ${t["bg-hover-subtle"]};
     }
-`,l=o.div`
+`,c=i.div`
     display: block;
-    padding: ${t["spacing-16"]};
-    padding-left: ${t["spacing-20"]};
+    padding: ${e["spacing-16"]};
+    padding-left: ${e["spacing-20"]};
 
     &:focus-visible {
-        outline: 2px solid ${i["focus-ring"]};
+        outline: 2px solid ${t["focus-ring"]};
         outline-offset: 2px;
-        border-radius: ${r.sm};
+        border-radius: ${o.sm};
     }
-`;export{n as Nav,s as NavItem,l as NavItemContent,p as TextLabel};
+`;export{p as LeftAddon,s as Nav,g as NavItem,c as NavItemContent,d as RightAddon,a as TextLabel,r as TitleContainer};
 //# sourceMappingURL=local-nav-menu.styles.js.map

package/local-nav/local-nav-menu/local-nav-menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Colour, Radius, Spacing } from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Nav = styled.ul`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const TextLabel = styled(Typography.BodyBL)<NavItemStyleProps>`\n    margin: 0;\n`;\n\nexport const NavItem = styled.li<NavItemStyleProps>`\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: ${(props) =>\n            props.$isSelected\n                ? Colour[\"bg-primary\"]\n                : 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 NavItemContent = styled.div`\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":["Nav","styled","ul","TextLabel","Typography","BodyBL","NavItem","li","props","$isSelected","Colour","NavItemContent","div","Spacing","Radius"],"mappings":"oKAgBO,MAAMA,EAAMC,EAAOC,EAAE;;;;EAMfC,EAAYF,EAAOG,EAAWC,OAA0B;;EAIxDC,EAAUL,EAAOM,EAAqB;;;;;;;;;;;;;;4BActBC,GACjBA,EAAMC,YACAC,EAAO,cACPA,EAAO;;;;;;4BAMGA,EAAO;;EAItBC,EAAiBV,EAAOW,GAAG;;eAEzBC,EAAQ;oBACHA,EAAQ;;;6BAGCH,EAAO;;yBAEXI,EAAW;;"}
+{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Nav = styled.ul`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const TextLabel = styled(Typography.BodyBL)<NavItemStyleProps>`\n    margin: 0;\n`;\n\nexport const TitleContainer = styled.span`\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 = styled.span`\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 = styled.span`\n    display: inline-flex;\n    align-items: center;\n    margin-left: auto;\n`;\n\nexport const NavItem = styled.li<NavItemStyleProps>`\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: ${(props) =>\n            props.$isSelected\n                ? Colour[\"bg-primary\"]\n                : 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 NavItemContent = styled.div`\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":["Nav","styled","ul","TextLabel","Typography","BodyBL","TitleContainer","span","Spacing","LeftAddon","Font","Spec","RightAddon","NavItem","li","props","$isSelected","Colour","NavItemContent","div","Radius"],"mappings":"8KAgBO,MAAMA,EAAMC,EAAOC,EAAE;;;;EAMfC,EAAYF,EAAOG,EAAWC,OAA0B;;EAIxDC,EAAiBL,EAAOM,IAAI;;;WAG9BC,EAAQ;;EAKNC,EAAYR,EAAOM,IAAI;;;;kBAIlBG,EAAKC,KAAK;EAIfC,EAAaX,EAAOM,IAAI;;;;EAMxBM,EAAUZ,EAAOa,EAAqB;;;;;;;;;;;;;;4BActBC,GACjBA,EAAMC,YACAC,EAAO,cACPA,EAAO;;;;;;4BAMGA,EAAO;;EAItBC,EAAiBjB,EAAOkB,GAAG;;eAEzBX,EAAQ;oBACHA,EAAQ;;;6BAGCS,EAAO;;yBAEXG,EAAW;;"}

package/local-nav/types.d.ts

@@ -1,6 +1,23 @@
+/**
+ * Configuration for the optional addon elements displayed alongside a
+ * navigation item's title. Both slots may be used at the same time.
+ */
+export interface TitleAddonProps {
+    /** Element rendered immediately before the title. */
+    left?: JSX.Element | undefined;
+    /** Element rendered after the title, flushed to the far right of the item. */
+    right?: JSX.Element | undefined;
+}
 export interface LocalNavItemProps {
     title: string | React.ReactNode;
     id?: string | undefined;
+    /**
+     * Optional addon element rendered alongside the item title.
+     *
+     * Ignored when a custom `renderItem` is provided, since the caller then
+     * controls the item's layout.
+     */
+    titleAddon?: TitleAddonProps | undefined;
 }
 interface BaseLocalNavProps {
     className?: string | undefined;

package/menu/menu-content.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{MenuPanel as r}from"./menu-content.styles.js";const n=n=>{var{children:o,"data-testid":i="menu-content",overflow:a,maxHeight:l}=n,s=t(n,["children","data-testid","overflow","maxHeight"]);return e(r,Object.assign({$overflow:a,$maxHeight:l,"data-testid":i,tabIndex:-1,onKeyDown:t=>{var e;const r="ArrowDown"===t.key||"ArrowRight"===t.key,n="ArrowUp"===t.key||"ArrowLeft"===t.key;if(!r&&!n)return;const o=(t=>Array.from(t.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((t=>!t.hasAttribute("disabled"))))(t.currentTarget);if(!o.length)return;const i=document.activeElement,a=i?o.indexOf(i):-1;t.preventDefault();const l=r?1:-1;null===(e=o[-1===a?r?0:o.length-1:(a+l+o.length)%o.length])||void 0===e||e.focus()}},s,{children:o}))};n.displayName="Menu.Content";export{n as MenuContent};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r,{useMemo as n,Children as o}from"react";import{MenuPanel as i}from"./menu-content.styles.js";import{GRID_COLUMN_WIDTH_PX as a,GRID_COLUMN_GAP_PX as l}from"./menu-section.styles.js";const s=s=>{var{children:m,"data-testid":c="menu-content",overflow:d,maxHeight:u}=s,f=t(s,["children","data-testid","overflow","maxHeight"]);const h=n((()=>{const t=o.toArray(m).filter((t=>r.isValidElement(t)&&!!t.props.columns)).reduce(((t,e)=>{var r;return Math.max(t,null!==(r=e.props.columns)&&void 0!==r?r:0)}),0);if(t)return t*a+(t-1)*l+2}),[m]);return e(i,Object.assign({$overflow:d,$maxHeight:u,$maxWidth:h,"data-testid":c,tabIndex:-1,onKeyDown:t=>{var e;const r="ArrowDown"===t.key||"ArrowRight"===t.key,n="ArrowUp"===t.key||"ArrowLeft"===t.key;if(!r&&!n)return;const o=(t=>Array.from(t.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((t=>!t.hasAttribute("disabled"))))(t.currentTarget);if(!o.length)return;const i=document.activeElement,a=i?o.indexOf(i):-1;t.preventDefault();const l=r?1:-1;null===(e=o[-1===a?r?0:o.length-1:(a+l+o.length)%o.length])||void 0===e||e.focus()}},f,{children:m}))};s.displayName="Menu.Content";export{s as MenuContent};
 //# sourceMappingURL=menu-content.js.map

package/menu/menu-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.js","sources":["../../src/menu/menu-content.tsx"],"sourcesContent":["import React from \"react\";\nimport { MenuPanel } from \"./menu-content.styles\";\nimport { 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    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\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        <MenuPanel\n            $overflow={overflow}\n            $maxHeight={maxHeight}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            {...otherProps}\n        >\n            {children}\n        </MenuPanel>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","testId","overflow","maxHeight","otherProps","__rest","_jsx","MenuPanel","Object","assign","$overflow","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","displayName"],"mappings":"4IAOA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASJ,EACNK,EAAUC,EAAAN,EALW,mDAuCxB,OACIO,EAACC,EAASC,OAAAC,OAAA,CAAAC,UACKR,aACCC,EAAS,cACRF,EACbU,YACAC,UAnCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EAzBQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cAoBXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBf,EAAAkB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAA5B,GAAAA,EAAEoC,OAAO,GAYtB/B,EAAU,CAAAJ,SAEbA,IACO,EAIpBF,EAAYsC,YAAc"}
+{"version":3,"file":"menu-content.js","sources":["../../src/menu/menu-content.tsx"],"sourcesContent":["import React, { Children, useMemo } from \"react\";\nimport { MenuPanel } from \"./menu-content.styles\";\nimport {\n    GRID_COLUMN_GAP_PX,\n    GRID_COLUMN_WIDTH_PX,\n} from \"./menu-section.styles\";\nimport { 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    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    // caps the panel width so it fits the widest Menu.Section's grid columns, falling back to the default 24rem\n    const gridMaxWidth = useMemo(() => {\n        const maxColumns = Children.toArray(children)\n            .filter(\n                (child): child is React.ReactElement<MenuSectionProps> =>\n                    React.isValidElement(child) &&\n                    !!(child.props as MenuSectionProps).columns\n            )\n            .reduce((max, child) => Math.max(max, child.props.columns ?? 0), 0);\n\n        if (!maxColumns) return undefined;\n\n        return (\n            maxColumns * GRID_COLUMN_WIDTH_PX +\n            (maxColumns - 1) * GRID_COLUMN_GAP_PX +\n            2 // 1px border × 2 sides\n        );\n    }, [children]);\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        <MenuPanel\n            $overflow={overflow}\n            $maxHeight={maxHeight}\n            $maxWidth={gridMaxWidth}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            {...otherProps}\n        >\n            {children}\n        </MenuPanel>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","testId","overflow","maxHeight","otherProps","__rest","gridMaxWidth","useMemo","maxColumns","Children","toArray","filter","child","React","isValidElement","props","columns","reduce","max","Math","GRID_COLUMN_WIDTH_PX","GRID_COLUMN_GAP_PX","_jsx","MenuPanel","Object","assign","$overflow","$maxHeight","$maxWidth","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","displayName"],"mappings":"qRAWA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASJ,EACNK,EAAUC,EAAAN,EALW,mDAWxB,MAAMO,EAAeC,GAAQ,KACzB,MAAMC,EAAaC,EAASC,QAAQV,GAC/BW,QACIC,GACGC,EAAMC,eAAeF,MAClBA,EAAMG,MAA2BC,UAE3CC,QAAO,CAACC,EAAKN,KAAS,IAAAb,EAAC,OAAAoB,KAAKD,IAAIA,EAAwB,QAAnBnB,EAAAa,EAAMG,MAAMC,eAAO,IAAAjB,EAAAA,EAAI,EAAE,GAAE,GAErE,GAAKS,EAEL,OACIA,EAAaY,GACZZ,EAAa,GAAKa,EACnB,IAEL,CAACrB,IAkCJ,OACIsB,EAACC,EAASC,OAAAC,OAAA,CAAAC,UACKxB,EAAQyB,WACPxB,EAASyB,UACVtB,EAAY,cACVL,EACb4B,UAAU,EACVC,UApCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EA/CQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAEN5B,QAAQ6B,IAAQA,EAAGC,aAAa,cA0CXC,CADDX,EAAEY,eAEpB,IAAKR,EAAWS,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASV,EAAWc,QAAQJ,IAAU,EAElDd,EAAEmB,iBAEF,MAAMC,EAAQnB,EAAY,GAAI,EAST,QAArBjC,EAAAoC,GANY,IAARa,EACMhB,EACI,EACAG,EAAWS,OAAS,GACvBI,EAAMG,EAAQhB,EAAWS,QAAUT,EAAWS,eAEpC,IAAA7C,GAAAA,EAAEqD,OAAO,GAatBhD,EAAU,CAAAJ,SAEbA,IACO,EAIpBF,EAAYuD,YAAc"}

package/menu/menu-content.styles.d.ts

@@ -2,6 +2,7 @@ import { PopoverOverflowType } from "../popover-v2/types";
 interface MenuPanelStylesProps {
     $overflow?: PopoverOverflowType | undefined;
     $maxHeight?: number | undefined;
+    $maxWidth?: number | undefined;
 }
 export declare const MenuPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof MenuPanelStylesProps> & MenuPanelStylesProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof MenuPanelStylesProps> & MenuPanelStylesProps, never>>> & string;
 export {};

package/menu/menu-content.styles.js

@@ -1,26 +1,29 @@
-import a from"styled-components";import{Radius as r,Border as i,Colour as o,Shadow as d,MediaQuery as n,Breakpoint as t}from"../theme/index.js";const e=a.div`
-    border-radius: ${r.md};
-    border: ${i["width-010"]} ${i.solid} ${o.border};
-    background: ${o.bg};
-    box-shadow: ${d["md-subtle"]};
+import a from"styled-components";import{Radius as i,Border as r,Colour as d,Shadow as o,MediaQuery as t,Breakpoint as n}from"../theme/index.js";const e=a.div`
+    border-radius: ${i.md};
+    border: ${r["width-010"]} ${r.solid} ${d.border};
+    background: ${d.bg};
+    box-shadow: ${o["md-subtle"]};
 
     --x-spacing: 0px;
     --available-width: calc(100vw - var(--x-spacing) * 2);
 
-    ${n.MaxWidth.sm} {
-        --x-spacing: ${t["sm-margin"]}px;
+    ${t.MaxWidth.sm} {
+        --x-spacing: ${n["sm-margin"]}px;
     }
 
-    ${n.MaxWidth.xs} {
-        --x-spacing: ${t["xs-margin"]}px;
+    ${t.MaxWidth.xs} {
+        --x-spacing: ${n["xs-margin"]}px;
     }
 
-    ${n.MaxWidth.xxs} {
-        --x-spacing: ${t["xxs-margin"]}px;
+    ${t.MaxWidth.xxs} {
+        --x-spacing: ${n["xxs-margin"]}px;
     }
 
     min-width: min(15rem, var(--available-width));
-    max-width: min(24rem, var(--available-width));
+    max-width: min(
+        ${({$maxWidth:a})=>a?`${a}px`:"24rem"},
+        var(--available-width)
+    );
 
     ${({$maxHeight:a})=>void 0!==a&&`\n        max-height: ${a}px;\n    `}
 
@@ -39,9 +42,9 @@ import a from"styled-components";import{Radius as r,Border as i,Colour as o,Shad
     }
 
     &::-webkit-scrollbar-thumb {
-        background: ${o["bg-inverse-subtlest"]};
+        background: ${d["bg-inverse-subtlest"]};
         border: 5px solid transparent;
-        border-radius: ${r.full};
+        border-radius: ${i.full};
         background-clip: padding-box;
     }
 `;export{e as MenuPanel};

package/menu/menu-content.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.styles.js","sources":["../../src/menu/menu-content.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { PopoverOverflowType } from \"../popover-v2/types\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuPanelStylesProps {\n    $overflow?: PopoverOverflowType | undefined;\n    $maxHeight?: number | undefined;\n}\n\n// =============================================================================\n// MENU CONTENT STYLES\n// =============================================================================\nexport const MenuPanel = styled.div<MenuPanelStylesProps>`\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    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    min-width: min(15rem, var(--available-width));\n    max-width: min(24rem, var(--available-width));\n\n    ${({ $maxHeight }) =>\n        $maxHeight !== undefined &&\n        `\n        max-height: ${$maxHeight}px;\n    `}\n\n    ${({ $overflow }) =>\n        $overflow &&\n        `\n        overflow-y: ${$overflow};\n    `}\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":["MenuPanel","styled","div","Radius","Border","Colour","Shadow","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","$maxHeight","undefined","$overflow"],"mappings":"gJAsBO,MAAMA,EAAYC,EAAOC,GAAyB;qBACpCC,EAAW;cAClBC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;kBACrDA,EAAW;kBACXC,EAAO;;;;;MAKnBC,EAAWC,SAASC;uBACHC,EAAW;;;MAG5BH,EAAWC,SAASG;uBACHD,EAAW;;;MAG5BH,EAAWC,SAASI;uBACHF,EAAW;;;;;;MAM5B,EAAGG,qBACcC,IAAfD,GACA,yBACcA;;MAGhB,EAAGE,eACDA,GACA,yBACcA;;;;;;;;;;;;;;;sBAgBAV,EAAO;;yBAEJF,EAAa;;;"}
+{"version":3,"file":"menu-content.styles.js","sources":["../../src/menu/menu-content.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { PopoverOverflowType } from \"../popover-v2/types\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuPanelStylesProps {\n    $overflow?: PopoverOverflowType | undefined;\n    $maxHeight?: number | undefined;\n    $maxWidth?: number | undefined;\n}\n\n// =============================================================================\n// MENU CONTENT STYLES\n// =============================================================================\nexport const MenuPanel = styled.div<MenuPanelStylesProps>`\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    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    min-width: min(15rem, var(--available-width));\n    max-width: min(\n        ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : \"24rem\")},\n        var(--available-width)\n    );\n\n    ${({ $maxHeight }) =>\n        $maxHeight !== undefined &&\n        `\n        max-height: ${$maxHeight}px;\n    `}\n\n    ${({ $overflow }) =>\n        $overflow &&\n        `\n        overflow-y: ${$overflow};\n    `}\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":["MenuPanel","styled","div","Radius","Border","Colour","Shadow","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","$maxWidth","$maxHeight","undefined","$overflow"],"mappings":"gJAuBO,MAAMA,EAAYC,EAAOC,GAAyB;qBACpCC,EAAW;cAClBC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;kBACrDA,EAAW;kBACXC,EAAO;;;;;MAKnBC,EAAWC,SAASC;uBACHC,EAAW;;;MAG5BH,EAAWC,SAASG;uBACHD,EAAW;;;MAG5BH,EAAWC,SAASI;uBACHF,EAAW;;;;;UAKxB,EAAGG,eAAiBA,EAAY,GAAGA,MAAgB;;;;MAIvD,EAAGC,qBACcC,IAAfD,GACA,yBACcA;;MAGhB,EAAGE,eACDA,GACA,yBACcA;;;;;;;;;;;;;;;sBAgBAX,EAAO;;yBAEJF,EAAa;;;"}

package/menu/menu-item.styles.js

@@ -1,7 +1,7 @@
 import o from"styled-components";import{Spacing as t,Colour as p}from"../theme/index.js";import{Typography as r}from"../typography/typography.js";const e=o.li`
     display: flex;
     flex-direction: column;
-    padding: ${t["spacing-8"]} ${t["spacing-16"]};
+    padding: ${t["spacing-12"]} ${t["spacing-16"]};
 `,i=o(r.BodySM)`
     color: ${p["text-subtler"]};
 `;export{e as MenuItemDiv,i as SubLabel};

package/menu/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sources":["../../src/menu/menu-item.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Colour, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// MENU ITEM STYLES\n// =============================================================================\nexport const MenuItemDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const SubLabel = styled(Typography.BodySM)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["MenuItemDiv","styled","li","Spacing","SubLabel","Typography","BodySM","Colour"],"mappings":"kJAOO,MAAMA,EAAcC,EAAOC,EAAE;;;eAGrBC,EAAQ,gBAAgBA,EAAQ;EAGlCC,EAAWH,EAAOI,EAAWC,OAAO;aACpCC,EAAO;"}
+{"version":3,"file":"menu-item.styles.js","sources":["../../src/menu/menu-item.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Colour, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// MENU ITEM STYLES\n// =============================================================================\nexport const MenuItemDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const SubLabel = styled(Typography.BodySM)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["MenuItemDiv","styled","li","Spacing","SubLabel","Typography","BodySM","Colour"],"mappings":"kJAOO,MAAMA,EAAcC,EAAOC,EAAE;;;eAGrBC,EAAQ,iBAAiBA,EAAQ;EAGnCC,EAAWH,EAAOI,EAAWC,OAAO;aACpCC,EAAO;"}

package/menu/menu-link.styles.js

@@ -7,7 +7,7 @@ import o from"styled-components";import{lineClampCss as r}from"../shared/styles/
     margin: 0 ${i["spacing-8"]};
 
     border: ${t.solid} transparent;
-    border-width: ${i["spacing-8"]} ${i["spacing-8"]};
+    border-width: ${i["spacing-12"]} ${i["spacing-8"]};
 
     border-radius: ${s.md};
 

package/menu/menu-link.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-link.styles.js","sources":["../../src/menu/menu-link.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// MENU LINK STYLES\n// =============================================================================\nexport const MenuLinkDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const Link = styled(Typography.LinkMD)`\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":["MenuLinkDiv","styled","li","Link","Typography","LinkMD","Colour","Spacing","Border","Radius","lineClampCss"],"mappings":"mOAQO,MAAMA,EAAcC,EAAOC,EAAE;;;EAKvBC,EAAOF,EAAOG,EAAWC,OAAO;aAChCC,EAAa;;gBAEVC,EAAQ;;cAEVC,EAAc;oBACRD,EAAQ,gBAAgBA,EAAQ;;qBAE/BE,EAAW;;MAE1BC,EAAa;;;;;;4BAMSJ,EAAO;iBAClBA,EAAa;;;;6BAIDA,EAAO;;;"}
+{"version":3,"file":"menu-link.styles.js","sources":["../../src/menu/menu-link.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// MENU LINK STYLES\n// =============================================================================\nexport const MenuLinkDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const Link = styled(Typography.LinkMD)`\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":["MenuLinkDiv","styled","li","Link","Typography","LinkMD","Colour","Spacing","Border","Radius","lineClampCss"],"mappings":"mOAQO,MAAMA,EAAcC,EAAOC,EAAE;;;EAKvBC,EAAOF,EAAOG,EAAWC,OAAO;aAChCC,EAAa;;gBAEVC,EAAQ;;cAEVC,EAAc;oBACRD,EAAQ,iBAAiBA,EAAQ;;qBAEhCE,EAAW;;MAE1BC,EAAa;;;;;;4BAMSJ,EAAO;iBAClBA,EAAa;;;;6BAIDA,EAAO;;;"}

package/menu/menu-section.d.ts

@@ -1,5 +1,5 @@
 import { MenuSectionProps } from "./types";
 export declare const MenuSection: {
-    ({ children, label, showDivider, "data-testid": testId, ...otherProps }: MenuSectionProps): JSX.Element;
+    ({ children, label, showDivider, columns, className, "data-testid": testId, ...otherProps }: MenuSectionProps): JSX.Element;
     displayName: string;
 };

package/menu/menu-section.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t}from"react/jsx-runtime";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"react";import{useId as r}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Section as l,Label as a}from"./menu-section.styles.js";const s=s=>{var{children:o,label:n,showDivider:d=!0,"data-testid":m="menu-section"}=s,p=e(s,["children","label","showDivider","data-testid"]);const c=r();return i(l,Object.assign({$showDivider:d,"data-testid":m,"aria-labelledby":c},p,{children:[n&&t(a,{weight:"semibold",id:c,children:n}),o]}))};s.displayName="Menu.Section";export{s as MenuSection};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t}from"react/jsx-runtime";import{useMemo as r,Children as s}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as a}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{SectionWrapper as l,Label as o,List as m}from"./menu-section.styles.js";const n=n=>{var{children:d,label:c,showDivider:p=!0,columns:u,className:h,"data-testid":j="menu-section"}=n,v=e(n,["children","label","showDivider","columns","className","data-testid"]);const b=a(),f=r((()=>void 0!==u?Math.ceil(s.count(d)/Math.max(1,u)):void 0),[u,d]);return i(l,{$showDivider:p,className:h,children:[c&&t(o,{weight:"semibold",id:b,children:c}),t(m,Object.assign({$columns:u,$gridRows:f,"data-testid":j,"aria-labelledby":b},v,{children:d}))]})};n.displayName="Menu.Section";export{n as MenuSection};
 //# sourceMappingURL=menu-section.js.map

package/menu/menu-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-section.js","sources":["../../src/menu/menu-section.tsx"],"sourcesContent":["import { useId } from \"../util\";\nimport { Label, Section } from \"./menu-section.styles\";\nimport { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n    children,\n    label,\n    showDivider = true,\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        <Section\n            $showDivider={showDivider}\n            data-testid={testId}\n            aria-labelledby={internalId}\n            {...otherProps}\n        >\n            {label && (\n                <Label weight=\"semibold\" id={internalId}>\n                    {label}\n                </Label>\n            )}\n            {children}\n        </Section>\n    );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","testId","otherProps","__rest","internalId","useId","_jsxs","Section","Object","assign","$showDivider","_jsx","Label","weight","id","displayName"],"mappings":"+YAIO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EACd,cAAeC,EAAS,gBAAcJ,EACnCK,EAAUC,EAAAN,EALW,kDAUxB,MAAMO,EAAaC,IAKnB,OACIC,EAACC,EAAOC,OAAAC,OAAA,CAAAC,aACUV,EAAW,cACZC,EAAM,kBACFG,GACbF,EAAU,CAAAJ,SAAA,CAEbC,GACGY,EAACC,EAAK,CAACC,OAAO,WAAWC,GAAIV,EAAUN,SAClCC,IAGRD,KACK,EAIlBF,EAAYmB,YAAc"}
+{"version":3,"file":"menu-section.js","sources":["../../src/menu/menu-section.tsx"],"sourcesContent":["import { Children, useMemo } from \"react\";\nimport { useId } from \"../util\";\nimport { Label, List, SectionWrapper } from \"./menu-section.styles\";\nimport { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n    children,\n    label,\n    showDivider = true,\n    columns,\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    // clamp to 1 column so a non-positive `columns` never yields a negative grid-template-rows count\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    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <SectionWrapper $showDivider={showDivider} className={className}>\n            {label && (\n                <Label weight=\"semibold\" id={internalId}>\n                    {label}\n                </Label>\n            )}\n            <List\n                $columns={columns}\n                $gridRows={gridRows}\n                data-testid={testId}\n                aria-labelledby={internalId}\n                {...otherProps}\n            >\n                {children}\n            </List>\n        </SectionWrapper>\n    );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","columns","className","testId","otherProps","__rest","internalId","useId","gridRows","useMemo","undefined","Math","ceil","Children","count","max","_jsxs","SectionWrapper","$showDivider","_jsx","Label","weight","id","List","Object","assign","$columns","$gridRows","displayName"],"mappings":"gcAKO,MAAMA,EAAeC,QAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,QAClBA,EAAOC,UACPA,EACA,cAAeC,EAAS,kBACrBC,EAAUC,EAAAR,EAPW,CAAA,WAAA,QAAA,cAAA,UAAA,YAAA,gBAYxB,MAAMS,EAAaC,IAEbC,EAAWC,GACb,SACgBC,IAAZT,EACMU,KAAKC,KAAKC,EAASC,MAAMhB,GAAYa,KAAKI,IAAI,EAAGd,SACjDS,GACV,CAACT,EAASH,IAMd,OACIkB,EAACC,EAAc,CAAAC,aAAelB,EAAaE,UAAWA,EAASJ,SAAA,CAC1DC,GACGoB,EAACC,EAAK,CAACC,OAAO,WAAWC,GAAIhB,EAAUR,SAClCC,IAGToB,EAACI,EAAIC,OAAAC,OAAA,CAAAC,SACSzB,EAAO0B,UACNnB,gBACEL,EAAM,kBACFG,GACbF,YAEHN,OAEQ,EAIzBF,EAAYgC,YAAc"}

package/menu/menu-section.styles.d.ts

@@ -1,7 +1,14 @@
-interface MenuSectionStyleProps {
+export declare const GRID_COLUMN_WIDTH_PX = 383;
+export declare const GRID_COLUMN_GAP_PX = 8;
+interface MenuSectionWrapperStyleProps {
     $showDivider?: boolean;
 }
-export declare const Section: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$showDivider"> & MenuSectionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$showDivider"> & MenuSectionStyleProps, never>>> & string;
+interface MenuSectionListStyleProps {
+    $columns?: number;
+    $gridRows?: number;
+}
+export declare const SectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$showDivider"> & MenuSectionWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$showDivider"> & MenuSectionWrapperStyleProps, never>>> & string;
+export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof MenuSectionListStyleProps> & MenuSectionListStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof MenuSectionListStyleProps> & MenuSectionListStyleProps, never>>> & string;
 export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
     ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
 } & {

package/menu/menu-section.styles.js

@@ -1,13 +1,27 @@
-import o,{css as r}from"styled-components";import{Spacing as t,Border as i,Colour as p}from"../theme/index.js";import{Typography as e}from"../typography/typography.js";const s=o.ul`
+import o,{css as r}from"styled-components";import{Spacing as i,Border as t,Colour as a,MediaQuery as d}from"../theme/index.js";import{Typography as e}from"../typography/typography.js";const n=383,p=8,s=o.div`
     ${o=>o.$showDivider&&r`
-            border-top: ${i["width-010"]} ${i.solid}
-                ${p.border};
+            border-top: ${t["width-010"]} ${t.solid}
+                ${a.border};
         `}
-    padding: ${t["spacing-8"]} 0;
+    padding: ${i["spacing-8"]} 0;
+`,g=o.ul`
     margin: 0;
     list-style: none;
-`,n=o(e.BodyXS)`
-    margin: 0 ${t["spacing-16"]} ${t["spacing-8"]};
-    color: ${p["text-subtler"]};
-`;export{n as Label,s as Section};
+
+    ${o=>o.$columns&&r`
+            display: grid;
+            grid-template-rows: repeat(${o.$gridRows}, auto);
+            grid-auto-flow: column;
+            grid-auto-columns: minmax(0, 1fr);
+            column-gap: ${i["spacing-8"]};
+
+            ${d.MaxWidth.lg} {
+                grid-template-rows: none;
+                grid-auto-flow: row;
+            }
+        `}
+`,m=o(e.BodyXS)`
+    margin: 0 ${i["spacing-16"]} ${i["spacing-8"]};
+    color: ${a["text-subtler"]};
+`;export{p as GRID_COLUMN_GAP_PX,n as GRID_COLUMN_WIDTH_PX,m as Label,g as List,s as SectionWrapper};
 //# sourceMappingURL=menu-section.styles.js.map

package/menu/menu-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-section.styles.js","sources":["../../src/menu/menu-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuSectionStyleProps {\n    $showDivider?: boolean;\n}\n\n// =============================================================================\n// MENU SECTION STYLES\n// =============================================================================\nexport const Section = styled.ul<MenuSectionStyleProps>`\n    ${(props) =>\n        props.$showDivider &&\n        css`\n            border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        `}\n    padding: ${Spacing[\"spacing-8\"]} 0;\n    margin: 0;\n    list-style: none;\n`;\n\nexport const Label = styled(Typography.BodyXS)`\n    margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Section","styled","ul","props","$showDivider","css","Border","Colour","Spacing","Label","Typography","BodyXS"],"mappings":"wKAcO,MAAMA,EAAUC,EAAOC,EAAyB;MAChDC,GACCA,EAAMC,cACNC,CAAG;0BACeC,EAAO,gBAAgBA,EAAc;kBAC7CC,EAAe;;eAElBC,EAAQ;;;EAKVC,EAAQR,EAAOS,EAAWC,OAAO;gBAC9BH,EAAQ,iBAAiBA,EAAQ;aACpCD,EAAO;"}
+{"version":3,"file":"menu-section.styles.js","sources":["../../src/menu/menu-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\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\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuSectionWrapperStyleProps {\n    $showDivider?: boolean;\n}\n\ninterface MenuSectionListStyleProps {\n    $columns?: number;\n    $gridRows?: number;\n}\n\n// =============================================================================\n// MENU SECTION STYLES\n// =============================================================================\nexport const SectionWrapper = styled.div<MenuSectionWrapperStyleProps>`\n    ${(props) =>\n        props.$showDivider &&\n        css`\n            border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        `}\n    padding: ${Spacing[\"spacing-8\"]} 0;\n`;\n\nexport const List = styled.ul<MenuSectionListStyleProps>`\n    margin: 0;\n    list-style: none;\n\n    ${(props) =>\n        props.$columns &&\n        css`\n            display: grid;\n            grid-template-rows: repeat(${props.$gridRows}, 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`;\n\nexport const Label = styled(Typography.BodyXS)`\n    margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["GRID_COLUMN_WIDTH_PX","GRID_COLUMN_GAP_PX","SectionWrapper","styled","div","props","$showDivider","css","Border","Colour","Spacing","List","ul","$columns","$gridRows","MediaQuery","MaxWidth","lg","Label","Typography","BodyXS"],"mappings":"wLAKO,MAAMA,EAAuB,IAEvBC,EAAqB,EAiBrBC,EAAiBC,EAAOC,GAAiC;MAC/DC,GACCA,EAAMC,cACNC,CAAG;0BACeC,EAAO,gBAAgBA,EAAc;kBAC7CC,EAAe;;eAElBC,EAAQ;EAGVC,EAAOR,EAAOS,EAA6B;;;;MAIjDP,GACCA,EAAMQ,UACNN,CAAG;;yCAE8BF,EAAMS;;;0BAGrBJ,EAAQ;;cAEpBK,EAAWC,SAASC;;;;;EAOrBC,EAAQf,EAAOgB,EAAWC,OAAO;gBAC9BV,EAAQ,iBAAiBA,EAAQ;aACpCD,EAAO;"}

package/menu/menu.d.ts

@@ -6,7 +6,7 @@ export declare const Menu: (({ children, position, menuContent, "data-testid": t
         displayName: string;
     };
     Section: {
-        ({ children, label, showDivider, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): JSX.Element;
+        ({ children, label, showDivider, columns, className, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): JSX.Element;
         displayName: string;
     };
     Item: {

package/menu/types.d.ts

@@ -2,18 +2,18 @@ import { AnchorHTMLAttributes, FunctionComponentElement, HTMLAttributes, ReactEl
 import { PopoverRenderProps, PopoverV2TriggerProps } from "../popover-v2";
 import { MenuItem } from "./menu-item";
 import { MenuLink } from "./menu-link";
-import { MenuSection } from "./menu-section";
 export interface MenuProps extends Omit<PopoverV2TriggerProps, "popoverContent"> {
     menuContent: FunctionComponentElement<MenuContentProps>;
 }
 export interface MenuContentProps extends HTMLAttributes<HTMLDivElement>, PopoverRenderProps {
-    children: ReactElement<typeof MenuSection> | ReactElement<typeof MenuSection>[];
+    children: ReactElement<MenuSectionProps> | ReactElement<MenuSectionProps>[];
     "data-testid"?: string | undefined;
 }
 type MenuSectionItem = ReactElement<typeof MenuItem> | ReactElement<typeof MenuLink>;
 export interface MenuSectionProps extends HTMLAttributes<HTMLUListElement> {
     children: MenuSectionItem | MenuSectionItem[];
     showDivider?: boolean | undefined;
+    columns?: number | undefined;
     label?: string | undefined;
     "data-testid"?: string | undefined;
 }

package/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as n,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as o}from"react";import{Menu as d}from"../menu/menu.js";import{Menu as a}from"./menu.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{MobileWrapper as c,Wrapper as u,LinkItem as p,Link as m,LinkLabel as h,LinkButton as g,ChevronIconDesktop as b,LinkIndicator as v,LinkIconContainer as $,ExpandCollapseButton as f,ChevronIcon as j}from"./navbar-items.styles.js";const x=({items:x,selectedId:k,mobile:I=!1,hideNavBranding:C,hideLinkIndicator:M=!1,onItemClick:O})=>{const[_,w]=r(null),L=l(null),y=s(),P=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===k)))},E=I?x.findIndex((e=>"component"!==e.itemType&&P(e))):-1,B=E<0?null:E;o((()=>{I&&w(B)}),[I,B]),o((()=>{if(I)return;const e=e=>{L.current&&!L.current.contains(e.target)&&w(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[I]);const D=(e,n)=>t=>{t.stopPropagation(),I&&w((t=>{var i;return(null===(i=e.subMenu)||void 0===i?void 0:i.length)&&t!==n?n:null})),O(t,e)},T=(e,n)=>{e.stopPropagation(),O(e,n)},A=(e,t)=>n(d.Content,{id:t,children:n(d.Section,{showDivider:!1,children:e.map(((e,t)=>n(d.Link,{href:e.href,children:e.children},`${e.id}-${t}`)))})}),F=e=>n(a,{items:e,selectedId:k,onItemClick:T}),H=(r,l)=>{const{children:o,options:a,subMenu:s}=r,c=e(r,["children","options","subMenu"]),u=!!(null==s?void 0:s.length),O=(e=>e.id===k||P(e))(r),L=I&&u&&_===l,E=!I&&u&&_===l||L,B=I||null===_?O:_===l,T=!M&&B,H=B?I?"bold":"semibold":"regular",N=I?`link__mobile-${l+1}`:`link__${l+1}`,S=()=>T?n(v,{"data-testid":`${N}-indicator`,$selected:B}):null;return n(p,{$hiddenBranding:C,children:u?(e=>{const p=`navbar-submenu-${y}-${r.id}`;return I?i(t,{children:[i(m,Object.assign({"data-testid":N,$weight:H,$selected:B},c,{"aria-current":O?"page":void 0,"aria-haspopup":"menu","aria-expanded":E,onClick:D(r,l)},a,{children:[n(h,{children:o}),S(),I&&u?n($,{children:n(f,{"data-testid":`${N}-expand-collapse-button`,$selected:B,$expanded:E,focusHighlight:!1,focusOutline:"browser","aria-label":E?"Collapse":"Expand",children:n(j,{$selected:B})})}):null]})),L&&F(s)]}):n(d,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:A(s,p),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{w(l)},onPopoverDismiss:()=>{w((e=>e===l?null:e))},children:i(g,Object.assign({type:"button",tabIndex:0,"data-testid":N,$weight:H,$selected:B,"aria-haspopup":"menu","aria-expanded":E},a,{children:[n(h,{children:o}),S(),n(b,{$selected:B,$expanded:E})]}))})})(l===x.length-1):i(m,Object.assign({tabIndex:0,"data-testid":N,$weight:H,$selected:B},c,{"aria-current":O?"page":void 0,onClick:D(r,l)},a,{children:[n(h,{children:o}),S()]}))},l)},N=()=>x.map(((e,t)=>{var i;return"component"===e.itemType?n("li",{children:null!==(i=e.children)&&void 0!==i?i:null},t):H(e,t)}));return x&&x.length>0?I?n(c,{ref:L,children:N()}):n(u,{ref:L,$alignLeft:C,children:N()}):n(t,{})};export{x as NavbarItems};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as n,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as o}from"react";import{Menu as d}from"../menu/menu.js";import{Menu as a}from"./menu.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{MobileWrapper as u,Wrapper as c,LinkItem as m,Link as p,LinkLabel as h,LinkButton as b,ChevronIconDesktop as g,LinkIndicator as v,LinkIconContainer as $,ExpandCollapseButton as f,ChevronIcon as j}from"./navbar-items.styles.js";const x=({items:x,selectedId:k,mobile:C=!1,hideNavBranding:I,hideLinkIndicator:M=!1,onItemClick:O})=>{const[_,w]=r(null),L=l(null),y=s(),P=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===k)))},E=C?x.findIndex((e=>"component"!==e.itemType&&P(e))):-1,B=E<0?null:E;o((()=>{C&&w(B)}),[C,B]),o((()=>{if(C)return;const e=e=>{L.current&&!L.current.contains(e.target)&&w(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[C]);const D=(e,n)=>t=>{t.stopPropagation(),C&&w((t=>{var i;return(null===(i=e.subMenu)||void 0===i?void 0:i.length)&&t!==n?n:null})),O(t,e)},T=(e,n)=>{e.stopPropagation(),O(e,n)},z=(e,t,i)=>n(d.Content,{id:t,children:n(d.Section,{showDivider:!1,columns:i,children:e.map(((e,t)=>n(d.Link,{href:e.href,children:e.children},`${e.id}-${t}`)))})}),A=e=>n(a,{items:e,selectedId:k,onItemClick:T}),F=(r,l)=>{const{children:o,options:a,subMenu:s,subMenuColumns:u}=r,c=e(r,["children","options","subMenu","subMenuColumns"]),O=!!(null==s?void 0:s.length),L=(e=>e.id===k||P(e))(r),E=C&&O&&_===l,B=!C&&O&&_===l||E,T=C||null===_?L:_===l,F=!M&&T,H=T?C?"bold":"semibold":"regular",N=C?`link__mobile-${l+1}`:`link__${l+1}`,R=()=>F?n(v,{"data-testid":`${N}-indicator`,$selected:T}):null;return n(m,{$hiddenBranding:I,children:O?(e=>{const m=`navbar-submenu-${y}-${r.id}`;return C?i(t,{children:[i(p,Object.assign({"data-testid":N,$weight:H,$selected:T},c,{"aria-current":L?"page":void 0,"aria-haspopup":"menu","aria-expanded":B,onClick:D(r,l)},a,{children:[n(h,{children:o}),R(),C&&O?n($,{children:n(f,{"data-testid":`${N}-expand-collapse-button`,$selected:T,$expanded:B,focusHighlight:!1,focusOutline:"browser","aria-label":B?"Collapse":"Expand",children:n(j,{$selected:T})})}):null]})),E&&A(s)]}):n(d,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:z(s,m,u),enableResize:!0,triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{w(l)},onPopoverDismiss:()=>{w((e=>e===l?null:e))},children:i(b,Object.assign({type:"button",tabIndex:0,"data-testid":N,$weight:H,$selected:T,"aria-haspopup":"menu","aria-expanded":B},a,{children:[n(h,{children:o}),R(),n(g,{$selected:T,$expanded:B})]}))})})(l===x.length-1):i(p,Object.assign({tabIndex:0,"data-testid":N,$weight:H,$selected:T},c,{"aria-current":L?"page":void 0,onClick:D(r,l)},a,{children:[n(h,{children:o}),R()]}))},l)},H=()=>x.map(((e,t)=>{var i;return"component"===e.itemType?n("li",{children:null!==(i=e.children)&&void 0!==i?i:null},t):F(e,t)}));return x&&x.length>0?C?n(u,{ref:L,children:H()}):n(c,{ref:L,$alignLeft:I,children:H()}):n(t,{})};export{x as NavbarItems};
 //# sourceMappingURL=navbar-items.js.map

package/navbar/navbar-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                $weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            $weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        $weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","$weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
+{"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string,\n        columns?: number\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false} columns={columns}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const {\n            children,\n            options,\n            subMenu,\n            subMenuColumns,\n            ...otherItemAttrs\n        } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                $weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            $weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(\n                        subMenu!,\n                        subMenuId,\n                        subMenuColumns\n                    )}\n                    enableResize\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        $weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","columns","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","subMenuColumns","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","$weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","enableResize","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}

package/navbar/types.d.ts

@@ -3,6 +3,7 @@ import { TypographyLinkProps } from "../typography";
 export interface NavItemLinkProps<T> extends NavItemCommonProps<T> {
     itemType?: "link";
     subMenu?: NavItemCommonProps<T>[] | undefined;
+    subMenuColumns?: number | undefined;
 }
 export interface NavItemComponentProps {
     itemType: "component";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.5.0",
+  "version": "3.6.0-canary.1",
   "description": "A component design system for LifeSG web apps",
   "keywords": [
     "design-system"

package/pagination/pagination.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Chevron2LeftIcon as a}from"@lifesg/react-icons/chevron-2-left";import{Chevron2RightIcon as r}from"@lifesg/react-icons/chevron-2-right";import{ChevronLeftIcon as t}from"@lifesg/react-icons/chevron-left";import{ChevronLineLeftIcon as o}from"@lifesg/react-icons/chevron-line-left";import{ChevronLineRightIcon as l}from"@lifesg/react-icons/chevron-line-right";import{ChevronRightIcon as n}from"@lifesg/react-icons/chevron-right";import{EllipsisHorizontalIcon as s}from"@lifesg/react-icons/ellipsis-horizontal";import c,{useContext as p,useState as d,useEffect as h}from"react";import{r as g}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as u}from"styled-components";import{InputSelect as m}from"../input-select/input-select.js";import{VisuallyHidden as f}from"../shared/accessibility/index.js";import{Breakpoint as v}from"../theme/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as b}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{PaginationWrapper as $,PaginationList as x,PaginationMenu as C,NavigationButton as M,InputSelectWrapper as j,PaginationMobileInput as O,InputView as w,LabelDivider as y,Label as k,PageItem as P,EllipsisContainer as S,EllipsisButton as z,Hover as F}from"./pagination.styles.js";const H=c.forwardRef((({id:c,"data-testid":H,className:E,pageSize:I=10,totalItems:L,activePage:A,pageSizeOptions:B=N,showFirstAndLastNav:D,showPageSizeChanger:Q=!1,onPageChange:R,onPageSizeChange:V},W)=>{const q=p(u),G=v["sm-max"]({theme:q}),J=g.useMediaQuery({maxWidth:G}),[K,T]=d(!1),[U,X]=d(!1),[Y,Z]=d(""),[_,ee]=d(B[0]),[ie,ae]=d(!J&&Q&&_?_.value:I),re=`${b()}-pagination`,te=Math.ceil(L/ie),oe=1===A,le=A===te,ne=A>1?()=>ge(1):void 0,se=A<te?()=>ge(te):void 0,ce=A>1?()=>ge(A-1):void 0,pe=A<te?()=>ge(parseInt(A.toString())+1):void 0;h((()=>{A&&de(A)}),[A]),h((()=>{ae(I),ee(B.find((e=>e.value===I)))}),[I]);const de=e=>{Z(e.toString())},he=()=>{T(!1),X(!1)},ge=e=>{R&&(R(e),de(e))},ue=()=>{const e=Math.min(te,A+5);ge(e),de(e),T(!0),X(!1)},me=()=>{const e=Math.max(1,A-5);ge(e),de(e),T(!1),X(!0)},fe=e=>{const i=e.target.value;if(void 0===i||0===i.length)Z("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));de(Math.max(1,Math.min(te,e)))}else Z(i.replace(/[^0-9]/g,""))},ve=e=>{e.preventDefault(),Y&&(null==R||R(parseInt(Y)))},be=()=>{T(!0)},$e=()=>{T(!1)},xe=()=>{X(!0)},Ce=()=>{X(!1)},Me=r=>e(S,{children:[i(z,{focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:xe,onMouseLeave:Ce,onFocus:xe,onBlur:Ce,onClick:me,children:i(U?a:s,{"aria-hidden":!0})}),U&&i(F,{children:"Previous 5 pages"})]},r),je=a=>e(S,{children:[i(z,{focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:be,onMouseLeave:$e,onFocus:be,onBlur:$e,onClick:ue,children:i(K?r:s,{"aria-hidden":!0})}),K&&i(F,{children:"Next 5 pages"})]},a);return e($,{className:E,ref:W,id:c||"pagination-wrapper","data-testid":H||"pagination","aria-labelledby":re,children:[i(f,{id:re,"aria-hidden":!0,children:"pagination"}),i(x,{children:e(C,{children:[D&&i(M,{onClick:ne,disabled:oe,focusHighlight:!1,$position:"left","aria-label":"First page",focusOutline:"browser",children:i(o,{"aria-hidden":!0})}),i(M,{onClick:ce,disabled:oe,focusHighlight:!1,$position:"left","aria-label":"Previous page",focusOutline:"browser",children:i(t,{"aria-hidden":!0})}),J?e(O,{children:[i("form",{onSubmit:ve,children:i(w,{value:Y,onChange:fe,autoComplete:"off",type:"numeric",id:(c||"pagination")+"-input","data-testid":(H||"pagination")+"-input","aria-label":`Page ${A} of ${te}`})}),i(y,{children:"/"}),i(k,{children:te})]}):[...Array(te)].map(((e,a)=>{const r=a+1,t=te-5,o=A===r;return te<=7?i(P,{onClick:()=>ge(r),$selected:o,"aria-label":`page ${r} of ${te}`,"aria-current":!!o&&"page",onMouseOver:he,onFocus:he,children:r},r):A+1>5&&2===r?Me(r):A-1<=t&&r===te-1-1?je(r):r<=5&&A+1<=5||r<=1||r===A||r<=A+1&&r>=A-1-1||r>t&&A-1>t||r>te-1?i(P,{onClick:()=>ge(r),$selected:o,"aria-label":`page ${r} of ${te}`,"aria-current":!!o&&"page",onMouseOver:he,onFocus:he,children:r},r):null})),i(M,{onClick:pe,disabled:le,focusHighlight:!1,$position:"right","aria-label":"Next page",focusOutline:"browser",children:i(n,{"aria-hidden":!0})}),D&&i(M,{onClick:se,disabled:le,focusHighlight:!1,$position:"right","aria-label":"Last page",focusOutline:"browser",children:i(l,{"aria-hidden":!0})})]})}),Q&&!J&&e(j,{children:[i(f,{id:`${re}-page-size`,children:"Items per page"}),i(m,{"aria-labelledby":`${re}-page-size`,options:B,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:_,onSelectOption:e=>{ee(e);const i=e.value,a=Math.ceil(L/i);ae(i);V&&V(A>=a?a:A,i)}})]})]})})),N=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];export{H as Pagination};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Chevron2LeftIcon as a}from"@lifesg/react-icons/chevron-2-left";import{Chevron2RightIcon as r}from"@lifesg/react-icons/chevron-2-right";import{ChevronLeftIcon as t}from"@lifesg/react-icons/chevron-left";import{ChevronLineLeftIcon as o}from"@lifesg/react-icons/chevron-line-left";import{ChevronLineRightIcon as l}from"@lifesg/react-icons/chevron-line-right";import{ChevronRightIcon as n}from"@lifesg/react-icons/chevron-right";import{EllipsisHorizontalIcon as s}from"@lifesg/react-icons/ellipsis-horizontal";import c,{useContext as p,useState as d,useEffect as h}from"react";import{r as u}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as g}from"styled-components";import{InputSelect as m}from"../input-select/input-select.js";import{VisuallyHidden as f}from"../shared/accessibility/index.js";import{Breakpoint as v}from"../theme/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as b}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{PaginationWrapper as $,PaginationList as x,PaginationMenu as C,NavigationButton as M,InputSelectWrapper as j,PaginationMobileInput as O,InputView as w,LabelDivider as y,Label as k,PageItem as P,EllipsisContainer as S,EllipsisButton as z,Hover as F}from"./pagination.styles.js";const H=c.forwardRef((({id:c,"data-testid":H,className:E,pageSize:I=10,totalItems:L,activePage:A,pageSizeOptions:B=N,showFirstAndLastNav:D,showPageSizeChanger:Q=!1,variant:R="default",onPageChange:V,onPageSizeChange:W},q)=>{const G=p(g),J=v["sm-max"]({theme:G}),K=u.useMediaQuery({maxWidth:J}),T="default"===R?K?"compact":"full":R,U=Q&&"full"===T,[X,Y]=d(!1),[Z,_]=d(!1),[ee,ie]=d(""),[ae,re]=d(I),te=((e,i)=>{var a;return null!==(a=e.find((e=>e.value===i)))&&void 0!==a?a:e[0]})(B,ae),oe=`${b()}-pagination`,le=Math.ceil(L/ae),ne=1===A,se=A===le,ce=A>1?()=>me(1):void 0,pe=A<le?()=>me(le):void 0,de=A>1?()=>me(A-1):void 0,he=A<le?()=>me(parseInt(A.toString())+1):void 0;h((()=>{A&&ue(A)}),[A]),h((()=>{re(I)}),[I]);const ue=e=>{ie(e.toString())},ge=()=>{Y(!1),_(!1)},me=e=>{V&&(V(e),ue(e))},fe=()=>{const e=Math.min(le,A+5);me(e),ue(e),Y(!0),_(!1)},ve=()=>{const e=Math.max(1,A-5);me(e),ue(e),Y(!1),_(!0)},be=e=>{const i=e.target.value;if(void 0===i||0===i.length)ie("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));ue(Math.max(1,Math.min(le,e)))}else ie(i.replace(/[^0-9]/g,""))},$e=e=>{e.preventDefault(),ee&&(null==V||V(parseInt(ee)))},xe=()=>{Y(!0)},Ce=()=>{Y(!1)},Me=()=>{_(!0)},je=()=>{_(!1)},Oe=r=>e(S,{children:[i(z,{focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:Me,onMouseLeave:je,onFocus:Me,onBlur:je,onClick:ve,children:i(Z?a:s,{"aria-hidden":!0})}),Z&&i(F,{children:"Previous 5 pages"})]},r),we=a=>e(S,{children:[i(z,{focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:xe,onMouseLeave:Ce,onFocus:xe,onBlur:Ce,onClick:fe,children:i(X?r:s,{"aria-hidden":!0})}),X&&i(F,{children:"Next 5 pages"})]},a);return e($,{className:E,ref:q,id:c||"pagination-wrapper","data-testid":H||"pagination","aria-labelledby":oe,children:[i(f,{id:oe,"aria-hidden":!0,children:"pagination"}),i(x,{children:e(C,{children:[D&&i(M,{onClick:ce,disabled:ne,focusHighlight:!1,$position:"left","aria-label":"First page",focusOutline:"browser",children:i(o,{"aria-hidden":!0})}),i(M,{onClick:de,disabled:ne,focusHighlight:!1,$position:"left","aria-label":"Previous page",focusOutline:"browser",children:i(t,{"aria-hidden":!0})}),"compact"===T?e(O,{children:[i("form",{onSubmit:$e,children:i(w,{value:ee,onChange:be,autoComplete:"off",type:"numeric",id:(c||"pagination")+"-input","data-testid":(H||"pagination")+"-input","aria-label":`Page ${A} of ${le}`})}),i(y,{children:"/"}),i(k,{children:le})]}):[...Array(le)].map(((e,a)=>{const r=a+1,t=le-5,o=A===r;return le<=7?i(P,{onClick:()=>me(r),$selected:o,"aria-label":`page ${r} of ${le}`,"aria-current":!!o&&"page",onMouseOver:ge,onFocus:ge,children:r},r):A+1>5&&2===r?Oe(r):A-1<=t&&r===le-1-1?we(r):r<=5&&A+1<=5||r<=1||r===A||r<=A+1&&r>=A-1-1||r>t&&A-1>t||r>le-1?i(P,{onClick:()=>me(r),$selected:o,"aria-label":`page ${r} of ${le}`,"aria-current":!!o&&"page",onMouseOver:ge,onFocus:ge,children:r},r):null})),i(M,{onClick:he,disabled:se,focusHighlight:!1,$position:"right","aria-label":"Next page",focusOutline:"browser",children:i(n,{"aria-hidden":!0})}),D&&i(M,{onClick:pe,disabled:se,focusHighlight:!1,$position:"right","aria-label":"Last page",focusOutline:"browser",children:i(l,{"aria-hidden":!0})})]})}),U&&e(j,{children:[i(f,{id:`${oe}-page-size`,children:"Items per page"}),i(m,{"aria-labelledby":`${oe}-page-size`,options:B,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:te,onSelectOption:e=>{const i=e.value,a=Math.ceil(L/i);re(i);W&&W(A>=a?a:A,i)}})]})]})})),N=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];export{H as Pagination};
 //# sourceMappingURL=pagination.js.map