@lifesg/react-design-system 4.0.0-alpha.12 → 4.0.0-alpha.14

package/file-upload/file-list-item/file-list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    &[data-mobile-visibility=\"hidden\"] {\n        ${MediaQuery.MaxWidth.md} {\n            display: none;\n            visibility: hidden;\n        }\n    }\n\n    &[data-mobile-visibility=\"expand\"] {\n        ${MediaQuery.MaxWidth.md} {\n            width: 100%;\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-8\"]};\n            justify-content: flex-start;\n        }\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const descriptionFileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionLabel = css`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionText = css`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    overflow-wrap: anywhere;\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n    }\n\n    &[data-mobile-layout=\"loading\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            width: 100%;\n        }\n    }\n\n    &[data-mobile-layout=\"editable\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            align-self: flex-end;\n        }\n    }\n`;\n\nexport const inlineActionContainer = css`\n    width: 100%;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":["item","dragHandleIcon","box","contentSection","nameSection","extendedNameSection","fileSizeSection","fileSizeText","descriptionFileSizeText","itemDescriptionLabel","itemDescriptionText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","inlineActionContainer","iconButton"],"mappings":"qFAcO,MAAMA,EAAI,WAgCJC,EAAc,UAedC,EAAG,UAmCHC,EAAc,WAmBdC,EAAW,UAOXC,EAAmB,UAWnBC,EAAe,WAuBfC,EAAY,WAIZC,EAAuB,UAKvBC,EAAoB,WAOpBC,EAAmB,WAKnBC,EAAS,UAOTC,EAAmB,WAYnBC,EAAkB,WAalBC,EAAe,UA4BfC,EAAqB,UAQrBC,EAAU"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\n// =============================================================================\n// EDIT MODE STYLES\n// =============================================================================\n\nexport const editItem = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius[\"sm\"]};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const editContentSection = css`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const editDetailsSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const editNameSection = css`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const editFileNameText = css`\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const editFileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\n// =============================================================================\n// DISPLAY / ERROR MODE STYLES\n// =============================================================================\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        align-items: center;\n\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n"],"names":["editItem","editContentSection","editDetailsSection","editNameSection","editFileNameText","editFileSizeText","item","dragHandleIcon","box","contentSection"],"mappings":"qFAeO,MAAMA,EAAQ,WAaRC,EAAkB,UAOlBC,EAAkB,UAMlBC,EAAe,WAYfC,EAAgB,UAWhBC,EAAgB,UAUhBC,EAAI,WAgCJC,EAAc,WAedC,EAAG,UAmCHC,EAAc"}

package/file-upload/file-list-item/file-list-item.styles_x3a500.css

@@ -0,0 +1,10 @@
+@layer fds{.e18pxk0j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-32);background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}.e18pxk0j:not(:last-child){margin-bottom:var(--fds-spacing-16);}
+.eqb8x5u{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;margin-bottom:var(--fds-spacing-16);width:100%;}
+.eddx9rr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.e1dhzflv{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .e1dhzflv{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.ek38w4a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .ek38w4a{margin-right:0;margin-bottom:var(--fds-spacing-8);}
+.elwke9e{color:var(--fds-colour-text-subtler);}
+.i14h64yt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border:none;}.i14h64yt:not(:last-child){margin-bottom:var(--fds-spacing-16);}.i14h64yt[data-item-state="disabled"]{cursor:not-allowed;}.i14h64yt[data-item-state="sortable"]{touch-action:manipulation;}.i14h64yt[data-item-state="sortable"]:hover{cursor:-webkit-grab;cursor:grab;}.i14h64yt[data-item-state="sortable-active"]{cursor:-webkit-grabbing;cursor:grabbing;touch-action:manipulation;}
+.d1wv8fjl{margin-right:var(--fds-spacing-16);height:1.5rem;width:1.5rem;color:var(--fds-colour-icon);}.d1wv8fjl[data-drag-handle-state="active"]{color:var(--fds-colour-icon-primary);}.d1wv8fjl[data-drag-handle-state="disabled"]{color:var(--fds-colour-icon-disabled);}
+.bivlkvo{background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);padding:var(--fds-spacing-16) var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}:where(body.fds-breakpoint-md-max) .bivlkvo{padding:var(--fds-spacing-16);}.bivlkvo[data-box-state="focused"]{border-color:var(--fds-colour-border-focus);box-shadow:var(--fds-shadow-xs-focus-strong);}.bivlkvo[data-box-state="disabled"]{border-color:var(--fds-colour-border-disabled);}.bivlkvo[data-box-state="error"]{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}:where(body.fds-breakpoint-md-max) .bivlkvo[data-stack-mobile="true"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.c1jm950n{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .c1jm950n{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.c1jm950n[data-has-thumbnail="true"]{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .c1jm950n[data-has-thumbnail="true"]{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}

package/file-upload/file-list-item/types.d.ts

@@ -1,12 +1,19 @@
+import type { FormLabelProps } from "../../form/form-label/types";
 import type { FileItemProps } from "../types";
+export type FileItemMode = "display" | "edit" | "error";
 export interface FileListItemProps {
     fileItem: FileItemProps;
     wrapperWidth: number;
-    /** If specified, the edit buttons will be rendered */
     editable?: boolean | undefined;
-    /** If specified, drag handles will be rendered */
     sortable?: boolean | undefined;
     disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    descriptionLabel?: FormLabelProps | undefined;
+    fileDescriptionMaxLength?: number | undefined;
+    descriptionRequired?: boolean | undefined;
     onDelete: () => void;
-    onEditClick?: (() => void) | undefined;
+    onSave?: ((description: string) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onBlur?: ((value: string) => void) | undefined;
+    onModeChange?: ((mode: FileItemMode) => void) | undefined;
 }

package/file-upload/file-list-item/use-truncated-name.d.ts

@@ -0,0 +1 @@
+export declare function useTruncatedName(name: string, wrapperWidth: number, truncateText: boolean, elementRef: React.RefObject<HTMLElement | null>): string | undefined;

package/file-upload/file-list-item/use-truncated-name.js

@@ -0,0 +1,2 @@
+import{useState as r,useCallback as t,useEffect as e}from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import{StringHelper as n}from"../../util/string-helper.js";import"@react-aria/live-announcer";function i(i,o,u,a){const[l,c]=r(),m=t((r=>{if(!u)return r;const t=(null==a?void 0:a.current)?a.current.getBoundingClientRect().width:0;return n.truncateOneLine(r,t,t/2,t/2/8,16)}),[u,a]);return e((()=>{c(m(i))}),[o,m,i]),l}export{i as useTruncatedName};
+//# sourceMappingURL=use-truncated-name.js.map

package/file-upload/file-list-item/use-truncated-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-truncated-name.js","sources":["../../../src/file-upload/file-list-item/use-truncated-name.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nimport { StringHelper } from \"../../util\";\n\nexport function useTruncatedName(\n    name: string,\n    wrapperWidth: number,\n    truncateText: boolean,\n    elementRef: React.RefObject<HTMLElement | null>\n): string | undefined {\n    const [formattedName, setFormattedName] = useState<string>();\n\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement = elementRef?.current\n                ? elementRef.current.getBoundingClientRect().width\n                : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8,\n                16\n            );\n        },\n        [truncateText, elementRef]\n    );\n\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    return formattedName;\n}\n"],"names":["useTruncatedName","name","wrapperWidth","truncateText","elementRef","formattedName","setFormattedName","useState","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect"],"mappings":"yRAIM,SAAUA,EACZC,EACAC,EACAC,EACAC,GAEA,MAAOC,EAAeC,GAAoBC,IAEpCC,EAAmBC,GACpBC,IACG,IAAKP,EAAc,OAAOO,EAE1B,MAAMC,GAAiBP,aAAU,EAAVA,EAAYQ,SAC7BR,EAAWQ,QAAQC,wBAAwBC,MAC3C,EAEN,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACR,EAAcC,IAOnB,OAJAa,GAAU,KACNX,EAAiBE,EAAiBP,GAAM,GACzC,CAACC,EAAcM,EAAkBP,IAE7BI,CACX"}

package/input-group/types.d.ts

@@ -55,7 +55,10 @@ export interface ListAddon<T, V> extends DropdownDisplayProps<T, V>, DropdownSea
     onSelectOption?: ((option: T, extractedValue: T | V) => void) | undefined;
     /** Indicates the async load state of the options list. */
     optionsLoadState?: ItemsLoadStateType | undefined;
-    /** Controls how long option labels are truncated when they overflow. */
+    /**
+     * Controls how long option labels are truncated when they overflow.
+     * Specify `"none"` to display option labels in full.
+     */
     optionTruncationType?: TruncateType | undefined;
     /** Called when the user activates the retry action while `optionsLoadState` is `"fail"`. */
     onRetry?: (() => void) | undefined;

package/input-select/types.d.ts

@@ -16,6 +16,7 @@ export interface InputSelectOptionsProps<T> {
     optionsLoadState?: ItemsLoadStateType | undefined;
     /**
      * Controls how long option labels are truncated when they overflow.
+     * Specify `"none"` to display option labels in full.
      *
      * @default "end"
      */

package/local-nav/local-nav-dropdown/local-nav-dropdown.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{TickIcon as o}from"@lifesg/react-icons/tick";import i from"clsx";import s,{useRef as d,useState as l,useImperativeHandle as a,useEffect as c}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as m}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as p}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as u}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as h,navSelectIcon as f,navSelectIconExpanded as v,navSelect as w,navSelectExpanded as y,navItemList as g,backdrop as x,navWrapper as b,navWrapperStickied as k,tickIcon as j,navItemLabel as I,navItemLabelSelected as D,navItem as E,navItemSelected as L}from"./local-nav-dropdown.styles.js";const N=s.forwardRef((({defaultLabel:s,stickyOffset:N=0,onNavItemSelect:B,items:W,selectedItemIndex:z,id:A,"data-testid":H,className:K,renderItem:M},O)=>{const R=d(null),S=d(null),T=d(null),q=d(null),U=d([]),[F,G]=l(!1),[J,P]=l(!1),[Q,V]=l(0),[X,Y]=l(0),[Z,_]=l(0),[ee,te]=l(0),ne=H||"local-nav-dropdown",re=u();a(O,(()=>T.current)),m(T,{[h.navWrapper.stickyOffset]:`${N}px`,[h.navWrapper.sideMargin]:`${Z}px`}),m(q,{[h.navItemList.viewportHeight]:Q-X-N+"px"});const oe="number"==typeof z&&z>=0&&F?W[z].title:s;c((()=>{if(S.current){const e=S.current.getBoundingClientRect().height;Y(e)}}),[]),c((()=>(ie(),()=>{se("remove")})),[]),c((()=>{se(J&&F?"add":"remove")}),[J,F]),c((()=>{V(window.innerHeight);const e=()=>{V(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),c((()=>{const e=new IntersectionObserver((e=>{const[t]=e;G(!t.isIntersecting)}),{threshold:1,rootMargin:`-${N}px 0px 0px 0px`});return R.current&&e.observe(R.current),()=>e.disconnect()}),[N]),c((()=>{const e=()=>{const e=null==T?void 0:T.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,o=Math.max(n,r);_(o)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),c((()=>{var e;J&&(null===(e=U.current[ee])||void 0===e||e.focus())}),[J,ee]);const ie=()=>{if(!document.getElementById(C)){const e=document.createElement("style");e.id=C;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${$} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${$}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},se=e=>{const t=document.body.classList.contains($);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove($):document.body.classList.add($)},de=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:R,"data-testid":"sticky-ref"}),e("nav",{ref:T,id:A,"data-testid":ne,className:i(b,F&&k,K),children:[e("div",{ref:S,role:"button",onClick:()=>{P((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),J||P(!0),te(0)):"ArrowUp"===t?(e.preventDefault(),J||P(!0),te(W.length-1)):"Enter"===t||" "===t?(e.preventDefault(),P(!0),te(0)):("Tab"===t||"Escape"===t)&&P(!1)},"data-testid":`${ne}-label`,className:i(w,J&&y),"aria-haspopup":"true","aria-expanded":J,"aria-controls":re,tabIndex:0,children:[n(p.BodyBL,{weight:"semibold",children:oe}),n(r,{className:i(f,J&&v)})]}),J&&n("ul",{ref:q,id:re,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(ee+1)%W.length;te(t)}else if("ArrowUp"===n){e.preventDefault();const t=ee>0?ee-1:W.length-1;te(t)}else"Tab"===n?P(!1):"Escape"===n&&(P(!1),null===(t=S.current)||void 0===t||t.focus())},"data-testid":`${ne}-dropdown-list`,className:g,children:W.map(((t,r)=>(({handleClick:t,isSelected:r,item:s,renderItem:d,index:l})=>{const{id:a,title:c}=s;return d?n("li",{id:a,role:"menuitem",onClick:t,onKeyDown:e=>de(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{U.current[l]=e},children:d(s,{selected:r,stickied:F})},l):e("li",{id:a,role:"menuitem",className:i(E,r&&F&&L),onClick:t,onKeyDown:e=>de(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{U.current[l]=e},children:[r&&n(o,{className:j}),n("div",{className:i(I,r&&D),children:c})]},l)})({handleClick:e=>((e,t,n)=>{B&&B(e,t,n),P(!1)})(e,t,r),isSelected:r===z,item:t,renderItem:M,index:r})))}),J&&F&&n("div",{className:x,onClick:()=>{P(!1)}})]})]})})),C="lifesg-ds-local-nav-dropdown-stylesheet",$="lifesg-ds-local-nav-dropdown-open";export{N as LocalNavDropdown};
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{TickIcon as i}from"@lifesg/react-icons/tick";import o from"clsx";import s,{useRef as d,useState as l,useImperativeHandle as a,useEffect as c}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as m}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as p}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as u}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as h,navSelectIcon as f,navSelectIconExpanded as v,navSelect as w,navSelectExpanded as y,navItemList as g,backdrop as x,navWrapper as b,navWrapperStickied as k,leftAddon as j,tickIcon as N,titleContainer as I,navItemLabel as D,navItemLabelSelected as E,rightAddon as L,navItem as C,navItemSelected as $}from"./local-nav-dropdown.styles.js";const A=s.forwardRef((({defaultLabel:s,stickyOffset:A=0,onNavItemSelect:z,items:H,selectedItemIndex:K,id:M,"data-testid":O,className:R,renderItem:S},T)=>{const q=d(null),U=d(null),F=d(null),G=d(null),J=d([]),[P,Q]=l(!1),[V,X]=l(!1),[Y,Z]=l(0),[_,ee]=l(0),[te,ne]=l(0),[re,ie]=l(0),oe=O||"local-nav-dropdown",se=u();a(T,(()=>F.current)),m(F,{[h.navWrapper.stickyOffset]:`${A}px`,[h.navWrapper.sideMargin]:`${te}px`}),m(G,{[h.navItemList.viewportHeight]:Y-_-A+"px"});const de="number"==typeof K&&K>=0&&P?H[K].title:s;c((()=>{if(U.current){const e=U.current.getBoundingClientRect().height;ee(e)}}),[]),c((()=>(le(),()=>{ae("remove")})),[]),c((()=>{ae(V&&P?"add":"remove")}),[V,P]),c((()=>{Z(window.innerHeight);const e=()=>{Z(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),c((()=>{const e=new IntersectionObserver((e=>{const[t]=e;Q(!t.isIntersecting)}),{threshold:1,rootMargin:`-${A}px 0px 0px 0px`});return q.current&&e.observe(q.current),()=>e.disconnect()}),[A]),c((()=>{const e=()=>{const e=null==F?void 0:F.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,i=Math.max(n,r);ne(i)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),c((()=>{var e;V&&(null===(e=J.current[re])||void 0===e||e.focus())}),[V,re]);const le=()=>{if(!document.getElementById(B)){const e=document.createElement("style");e.id=B;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${W} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${W}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},ae=e=>{const t=document.body.classList.contains(W);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(W):document.body.classList.add(W)},ce=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:q,"data-testid":"sticky-ref"}),e("nav",{ref:F,id:M,"data-testid":oe,className:o(b,P&&k,R),children:[e("div",{ref:U,role:"button",onClick:()=>{X((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),V||X(!0),ie(0)):"ArrowUp"===t?(e.preventDefault(),V||X(!0),ie(H.length-1)):"Enter"===t||" "===t?(e.preventDefault(),X(!0),ie(0)):("Tab"===t||"Escape"===t)&&X(!1)},"data-testid":`${oe}-label`,className:o(w,V&&y),"aria-haspopup":"true","aria-expanded":V,"aria-controls":se,tabIndex:0,children:[n(p.BodyBL,{weight:"semibold",children:de}),n(r,{className:o(f,V&&v)})]}),V&&n("ul",{ref:G,id:se,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(re+1)%H.length;ie(t)}else if("ArrowUp"===n){e.preventDefault();const t=re>0?re-1:H.length-1;ie(t)}else"Tab"===n?X(!1):"Escape"===n&&(X(!1),null===(t=U.current)||void 0===t||t.focus())},"data-testid":`${oe}-dropdown-list`,className:g,children:H.map(((t,r)=>(({handleClick:t,isSelected:r,item:s,renderItem:d,index:l})=>{const{id:a,title:c,titleAddon:m}=s;return d?n("li",{id:a,role:"menuitem",onClick:t,onKeyDown:e=>ce(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{J.current[l]=e},children:d(s,{selected:r,stickied:P})},l):e("li",{id:a,role:"menuitem",className:o(C,r&&P&&$),onClick:t,onKeyDown:e=>ce(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{J.current[l]=e},children:[r&&n("span",{className:j,children:n(i,{className:N})}),m?e("span",{className:I,children:[m.left&&n("span",{className:j,children:m.left}),n("div",{className:o(D,r&&E),children:c}),m.right&&n("span",{className:L,children:m.right})]}):n("div",{className:o(D,r&&E),children:c})]},l)})({handleClick:e=>((e,t,n)=>{z&&z(e,t,n),X(!1)})(e,t,r),isSelected:r===K,item:t,renderItem:S,index:r})))}),V&&P&&n("div",{className:x,onClick:()=>{X(!1)}})]})]})})),B="lifesg-ds-local-nav-dropdown-stylesheet",W="lifesg-ds-local-nav-dropdown-open";export{A as LocalNavDropdown};
 //# sourceMappingURL=local-nav-dropdown.js.map

package/local-nav/local-nav-dropdown/local-nav-dropdown.js.map

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

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.d.ts

@@ -14,6 +14,9 @@ export declare const navSelectExpanded: import("@linaria/core").LinariaClassName
 export declare const navItem: import("@linaria/core").LinariaClassName;
 export declare const navItemSelected: import("@linaria/core").LinariaClassName;
 export declare const navItemList: import("@linaria/core").LinariaClassName;
+export declare const titleContainer: import("@linaria/core").LinariaClassName;
+export declare const leftAddon: import("@linaria/core").LinariaClassName;
+export declare const rightAddon: import("@linaria/core").LinariaClassName;
 export declare const navItemLabel: import("@linaria/core").LinariaClassName;
 export declare const navItemLabelSelected: import("@linaria/core").LinariaClassName;
 export declare const tickIcon: import("@linaria/core").LinariaClassName;

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

@@ -1,2 +1,2 @@
-import"./local-nav-dropdown.styles_uhd4xl.css";const n={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}},a="nczumix",r="n1mayi9n",e="n1fsscye",o="n10li8ea",i="n1rgfmu8",l="n122w1r6",s="ny6lx9v",t="n1lmzf88",p="nc4nyiy",v="thuuy8a",c="beqsxqe",d="ns92rya",y="np844yu";export{c as backdrop,i as navItem,t as navItemLabel,p as navItemLabelSelected,s as navItemList,l as navItemSelected,e as navSelect,o as navSelectExpanded,a as navSelectIcon,r as navSelectIconExpanded,d as navWrapper,y as navWrapperStickied,v as tickIcon,n as tokens};
+import"./local-nav-dropdown.styles_kpel1m.css";const n={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}},a="nczumix",r="n1mayi9n",e="n1fsscye",t="n10li8ea",l="n1rgfmu8",o="n122w1r6",s="ny6lx9v",i="t1lmzf88",p="lc4nyiy",v="rhuuy8a",c="neqsxqe",d="ns92rya",y="tp844yu",f="b7u5vs",m="nb4z8rf",w="n1y3g4t3";export{f as backdrop,p as leftAddon,l as navItem,c as navItemLabel,d as navItemLabelSelected,s as navItemList,o as navItemSelected,e as navSelect,t as navSelectExpanded,a as navSelectIcon,r as navSelectIconExpanded,m as navWrapper,w as navWrapperStickied,v as rightAddon,y as tickIcon,i as titleContainer,n as tokens};
 //# sourceMappingURL=local-nav-dropdown.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    navWrapper: {\n        stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n        sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n    },\n    navItemList: {\n        viewportHeight:\n            \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n    color: ${Colour[\"icon\"]};\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n    cursor: pointer;\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navSelectExpanded = css`\n    border-bottom-left-radius: ${Radius[\"none\"]};\n    border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} 0;\n    background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n    ${tokens.navItemList.viewportHeight}: initial;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-bottom-right-radius: ${Radius[\"sm\"]};\n    border-bottom-left-radius: ${Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const navItemLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n    margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const navWrapper = css`\n    ${tokens.navWrapper.stickyOffset}: initial;\n    ${tokens.navWrapper.sideMargin}: initial;\n    display: block;\n    position: sticky;\n    top: var(${tokens.navWrapper.stickyOffset});\n    width: 100%;\n    z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n    .${navSelect} {\n        margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n        border-radius: ${Radius[\"none\"]};\n    }\n\n    .${navItemList} {\n        margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        border-bottom-left-radius: ${Radius[\"sm\"]};\n        border-bottom-right-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["tokens","navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight","navSelectIcon","navSelectIconExpanded","navSelect","navSelectExpanded","navItem","navItemSelected","navItemLabel","navItemLabelSelected","tickIcon","backdrop","navWrapperStickied"],"mappings":"2FAIO,MAAMA,EAAS,CAClBC,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI,+DAQCC,EAAa,UAMbC,EAAqB,WAIrBC,EAAS,WAqBTC,EAAiB,WASjBC,EAAO,WAiBPC,EAAe,WAMfP,EAAW,UAmBXQ,EAAY,WAKZC,EAAoB,UAIpBC,EAAQ,UASRC,EAAQ,UAURd,EAAU,UAUVe,EAAkB"}
+{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    navWrapper: {\n        stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n        sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n    },\n    navItemList: {\n        viewportHeight:\n            \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n    color: ${Colour[\"icon\"]};\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n    cursor: pointer;\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navSelectExpanded = css`\n    border-bottom-left-radius: ${Radius[\"none\"]};\n    border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} 0;\n    background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n    ${tokens.navItemList.viewportHeight}: initial;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-bottom-right-radius: ${Radius[\"sm\"]};\n    border-bottom-left-radius: ${Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const titleContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    flex: 1;\n`;\n\n/* Keeps the left addon aligned with the first line when the title wraps. */\nexport const leftAddon = css`\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-start;\n    min-height: ${Font.Spec[\"body-lh-baseline\"]};\n`;\n\n/* Flushed right; stays vertically centred against the (possibly wrapped) title. */\nexport const rightAddon = css`\n    display: inline-flex;\n    align-items: center;\n    margin-left: auto;\n`;\n\nexport const navItemLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n    margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const navWrapper = css`\n    ${tokens.navWrapper.stickyOffset}: initial;\n    ${tokens.navWrapper.sideMargin}: initial;\n    display: block;\n    position: sticky;\n    top: var(${tokens.navWrapper.stickyOffset});\n    width: 100%;\n    z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n    .${navSelect} {\n        margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n        border-radius: ${Radius[\"none\"]};\n    }\n\n    .${navItemList} {\n        margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        border-bottom-left-radius: ${Radius[\"sm\"]};\n        border-bottom-right-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["tokens","navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight","navSelectIcon","navSelectIconExpanded","navSelect","navSelectExpanded","navItem","navItemSelected","titleContainer","leftAddon","rightAddon","navItemLabel","navItemLabelSelected","tickIcon","backdrop","navWrapperStickied"],"mappings":"2FAIO,MAAMA,EAAS,CAClBC,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI,+DAQCC,EAAa,UAMbC,EAAqB,WAIrBC,EAAS,WAqBTC,EAAiB,WASjBC,EAAO,WAiBPC,EAAe,WAMfP,EAAW,UAmBXQ,EAAc,WAQdC,EAAS,UAQTC,EAAU,UAMVC,EAAY,UAKZC,EAAoB,UAIpBC,EAAQ,UASRC,EAAQ,SAURjB,EAAU,UAUVkB,EAAkB"}

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

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

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

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

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

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

package/local-nav/local-nav-menu/local-nav-menu.styles.d.ts

@@ -1,5 +1,8 @@
 export declare const nav: import("@linaria/core").LinariaClassName;
 export declare const textLabel: import("@linaria/core").LinariaClassName;
+export declare const titleContainer: import("@linaria/core").LinariaClassName;
+export declare const leftAddon: import("@linaria/core").LinariaClassName;
+export declare const rightAddon: import("@linaria/core").LinariaClassName;
 export declare const navItem: import("@linaria/core").LinariaClassName;
 export declare const navItemSelected: import("@linaria/core").LinariaClassName;
 export declare const navItemContent: import("@linaria/core").LinariaClassName;

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

@@ -1,2 +1,2 @@
-import"./local-nav-menu.styles_pq19dh.css";const n="nflnesd",a="tun9y1j",l="n1ocymwf",o="naf0oif",c="n8uzvfa";export{n as nav,l as navItem,c as navItemContent,o as navItemSelected,a as textLabel};
+import"./local-nav-menu.styles_67fcyc.css";const n="nflnesd",l="tun9y1j",c="t1ocymwf",a="laf0oif",o="r8uzvfa",f="n5rg3yw",s="nduzi41",t="n1qylgc6";export{a as leftAddon,n as nav,f as navItem,t as navItemContent,s as navItemSelected,o as rightAddon,l as textLabel,c 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.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const textLabel = css`\n    margin: 0;\n`;\n\nexport const navItem = css`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    &::before {\n        background-color: ${Colour[\"bg-primary\"]};\n    }\n`;\n\nexport const navItemContent = css`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["nav","textLabel","navItem","navItemSelected","navItemContent"],"mappings":"mFAIO,MAAMA,EAAG,UAMHC,EAAS,UAITC,EAAO,WAwBPC,EAAe,UAMfC,EAAc"}
+{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const textLabel = css`\n    margin: 0;\n`;\n\nexport const titleContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    width: 100%;\n`;\n\n/* Keeps the left addon aligned with the first line when the title wraps. */\nexport const leftAddon = css`\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-start;\n    min-height: ${Font.Spec[\"body-lh-baseline\"]};\n`;\n\n/* Flushed right; stays vertically centred against the (possibly wrapped) title. */\nexport const rightAddon = css`\n    display: inline-flex;\n    align-items: center;\n    margin-left: auto;\n`;\n\nexport const navItem = css`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    &::before {\n        background-color: ${Colour[\"bg-primary\"]};\n    }\n`;\n\nexport const navItemContent = css`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["nav","textLabel","titleContainer","leftAddon","rightAddon","navItem","navItemSelected","navItemContent"],"mappings":"mFAIO,MAAMA,EAAG,UAMHC,EAAS,UAITC,EAAc,WAQdC,EAAS,UAQTC,EAAU,UAMVC,EAAO,UAwBPC,EAAe,UAMfC,EAAc"}

package/local-nav/local-nav-menu/local-nav-menu.styles_67fcyc.css

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

package/local-nav/types.d.ts

@@ -1,9 +1,26 @@
+/**
+ * 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;
+}
 /**
  * Data for a single local navigation item.
  */
 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;
 }
 /**
  * Base props for local navigation components.

package/masked-input/types.d.ts

@@ -71,8 +71,7 @@ export interface MaskedInputProps extends InputProps, MaskAttributeProps {
      */
     iconInactiveColor?: string | undefined;
     /**
-     * When `true`, masking is permanently disabled and the raw value is
-     * always shown. The toggle icon is not rendered.
+     * When `true`, the value is permanently unmasked.
      *
      * @default false
      */

package/menu/menu-content.js

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

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

@@ -2,6 +2,7 @@ export declare const tokens: {
     readonly panel: {
         readonly availableWidth: "--fds-internal-menu-panel-availableWidth";
         readonly maxHeight: "--fds-internal-menu-panel-maxHeight";
+        readonly maxWidth: "--fds-internal-menu-panel-maxWidth";
         readonly overflow: "--fds-internal-menu-panel-overflow";
         readonly xSpacing: "--fds-internal-menu-panel-xSpacing";
     };

package/menu/menu-content.styles.js

@@ -1,2 +1,2 @@
-import"./menu-content.styles_p7ijll.css";const e={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",overflow:"--fds-internal-menu-panel-overflow"}},n="pmssexq";export{n as panel,e as tokens};
+import"./menu-content.styles_1r8oxtk.css";const e={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",maxWidth:"--fds-internal-menu-panel-maxWidth",overflow:"--fds-internal-menu-panel-overflow"}},n="pmssexq";export{n as panel,e as tokens};
 //# sourceMappingURL=menu-content.styles.js.map

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

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

package/menu/menu-content.styles_1r8oxtk.css

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