npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

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

Files changed (2348) hide show

package/link-list/link-list.styles.d.ts CHANGED Viewed

@@ -4,40 +4,110 @@ interface ExpandableChildStyleProps {
 interface ToggleButtonStyleProps {
     $loading?: boolean;
 }
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ItemTitleDefault: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
-export declare const ItemTitleSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ItemTitleDefault: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ItemTitleSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const ItemIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const ItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const ItemContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Expandable: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string>;
-export declare const ExpandableChild: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ExpandableChildStyleProps>> & string;
-export declare const ToggleButtonLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
+export declare const ItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
+export declare const ItemContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Expandable: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string>;
+export declare const ExpandableChild: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$border"> & ExpandableChildStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$border"> & ExpandableChildStyleProps, never>>> & string;
+export declare const ToggleButtonLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const ViewMoreIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
 export declare const ViewLessIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const ToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ToggleButtonStyleProps>> & string;
+export declare const ToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$loading"> & ToggleButtonStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$loading"> & ToggleButtonStyleProps, never>>> & string;
 export {};

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

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useState as o,useImperativeHandle as d,useEffect as s}from"react";import{Typography as l}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import{NavWrapper as a,NavSelect as m,NavSelectIcon as u,NavItemList as p,Backdrop as w,NavItem as f,StyledTickIcon as h,NavItemLabel as v}from"./local-nav-dropdown.styles.js";const y=r.forwardRef((({defaultLabel:r,stickyOffset:y=0,onNavItemSelect:x,items:k,selectedItemIndex:D,id:$,"data-testid":E,className:I,renderItem:L},j)=>{const C=i(null),S=i(null),B=i(null),z=i([]),[A,H]=o(!1),[K,M]=o(!1),[N,O]=o(0),[R,T]=o(0),[W,U]=o(0),[q,F]=o(0),G=E||"local-nav-dropdown",[J]=o((()=>c.generate()));d(j,(()=>B.current));const P="number"==typeof D&&D>=0&&A?k[D].title:r;s((()=>{if(S.current){const e=S.current.getBoundingClientRect().height;T(e)}}),[]),s((()=>(Q(),()=>{V("remove")})),[]),s((()=>{V(K&&A?"add":"remove")}),[K,A]),s((()=>{O(window.innerHeight);const e=()=>{O(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),s((()=>{const e=new IntersectionObserver((e=>{const[t]=e;H(!t.isIntersecting)}),{threshold:1,rootMargin:`-${y}px 0px 0px 0px`});return C.current&&e.observe(C.current),()=>e.disconnect()}),[y]),s((()=>{const e=()=>{const e=null==B?void 0:B.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,i=Math.max(n,r);U(i)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),s((()=>{var e;K&&(null===(e=z.current[q])||void 0===e||e.focus())}),[K,q]);const Q=()=>{if(!document.getElementById(g)){const e=document.createElement("style");e.id=g;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${b} {\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.${b}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},V=e=>{const t=document.body.classList.contains(b);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(b):document.body.classList.add(b)},X=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:C,"data-testid":"sticky-ref"}),e(a,{$isStickied:A,$sideMargin:W,$stickyOffset:y,ref:B,id:$,"data-testid":G,className:I,children:[e(m,{ref:S,role:"button",onClick:()=>{M((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),K||M(!0),F(0)):"ArrowUp"===t?(e.preventDefault(),K||M(!0),F(k.length-1)):"Enter"===t||" "===t?(e.preventDefault(),M(!0),F(0)):("Tab"===t||"Escape"===t)&&M(!1)},"data-testid":`${G}-label`,$isDropdownExpanded:K,"aria-haspopup":"true","aria-expanded":K,"aria-controls":J,tabIndex:0,children:[n(l.BodyBL,{weight:"semibold",children:P}),n(u,{$isDropdownExpanded:K})]}),K&&n(p,{id:J,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(q+1)%k.length;F(t)}else if("ArrowUp"===n){e.preventDefault();const t=q>0?q-1:k.length-1;F(t)}else"Tab"===n?M(!1):"Escape"===n&&(M(!1),null===(t=S.current)||void 0===t||t.focus())},"data-testid":`${G}-dropdown-list`,$viewportHeight:N-R-y,children:k.map(((t,r)=>(({handleClick:t,isSelected:r,item:i,renderItem:o,index:d})=>{const{id:s,title:l}=i;return o?n("li",{id:s,role:"menuitem",onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:o(i,{selected:r,stickied:A})},d):e(f,{id:s,role:"menuitem",$isSelected:r&&A,onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:[r&&n(h,{}),n(v,{$isSelected:r,children:l})]},d)})({handleClick:e=>((e,t,n)=>{x&&x(e,t,n),M(!1)})(e,t,r),isSelected:r===D,item:t,renderItem:L,index:r})))}),K&&A&&n(w,{onClick:()=>{M(!1)}})]})]})})),g="lifesg-ds-local-nav-dropdown-stylesheet",b="lifesg-ds-local-nav-dropdown-open";export{y as LocalNavDropdown};
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useState as o,useImperativeHandle as d,useEffect as s}from"react";import{Typography as l}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{NavWrapper as a,NavSelect as m,NavSelectIcon as u,NavItemList as p,Backdrop as w,NavItem as f,StyledTickIcon as h,NavItemLabel as v}from"./local-nav-dropdown.styles.js";const y=r.forwardRef((({defaultLabel:r,stickyOffset:y=0,onNavItemSelect:x,items:k,selectedItemIndex:D,id:$,"data-testid":E,className:I,renderItem:L},j)=>{const C=i(null),S=i(null),B=i(null),z=i([]),[A,H]=o(!1),[K,M]=o(!1),[N,O]=o(0),[R,T]=o(0),[W,U]=o(0),[q,F]=o(0),G=E||"local-nav-dropdown",J=c();d(j,(()=>B.current));const P="number"==typeof D&&D>=0&&A?k[D].title:r;s((()=>{if(S.current){const e=S.current.getBoundingClientRect().height;T(e)}}),[]),s((()=>(Q(),()=>{V("remove")})),[]),s((()=>{V(K&&A?"add":"remove")}),[K,A]),s((()=>{O(window.innerHeight);const e=()=>{O(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),s((()=>{const e=new IntersectionObserver((e=>{const[t]=e;H(!t.isIntersecting)}),{threshold:1,rootMargin:`-${y}px 0px 0px 0px`});return C.current&&e.observe(C.current),()=>e.disconnect()}),[y]),s((()=>{const e=()=>{const e=null==B?void 0:B.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,i=Math.max(n,r);U(i)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),s((()=>{var e;K&&(null===(e=z.current[q])||void 0===e||e.focus())}),[K,q]);const Q=()=>{if(!document.getElementById(g)){const e=document.createElement("style");e.id=g;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${b} {\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.${b}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},V=e=>{const t=document.body.classList.contains(b);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(b):document.body.classList.add(b)},X=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:C,"data-testid":"sticky-ref"}),e(a,{$isStickied:A,$sideMargin:W,$stickyOffset:y,ref:B,id:$,"data-testid":G,className:I,children:[e(m,{ref:S,role:"button",onClick:()=>{M((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),K||M(!0),F(0)):"ArrowUp"===t?(e.preventDefault(),K||M(!0),F(k.length-1)):"Enter"===t||" "===t?(e.preventDefault(),M(!0),F(0)):("Tab"===t||"Escape"===t)&&M(!1)},"data-testid":`${G}-label`,$isDropdownExpanded:K,"aria-haspopup":"true","aria-expanded":K,"aria-controls":J,tabIndex:0,children:[n(l.BodyBL,{weight:"semibold",children:P}),n(u,{$isDropdownExpanded:K})]}),K&&n(p,{id:J,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(q+1)%k.length;F(t)}else if("ArrowUp"===n){e.preventDefault();const t=q>0?q-1:k.length-1;F(t)}else"Tab"===n?M(!1):"Escape"===n&&(M(!1),null===(t=S.current)||void 0===t||t.focus())},"data-testid":`${G}-dropdown-list`,$viewportHeight:N-R-y,children:k.map(((t,r)=>(({handleClick:t,isSelected:r,item:i,renderItem:o,index:d})=>{const{id:s,title:l}=i;return o?n("li",{id:s,role:"menuitem",onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:o(i,{selected:r,stickied:A})},d):e(f,{id:s,role:"menuitem",$isSelected:r&&A,onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:[r&&n(h,{}),n(v,{$isSelected:r,children:l})]},d)})({handleClick:e=>((e,t,n)=>{x&&x(e,t,n),M(!1)})(e,t,r),isSelected:r===D,item:t,renderItem:L,index:r})))}),K&&A&&n(w,{onClick:()=>{M(!1)}})]})]})})),g="lifesg-ds-local-nav-dropdown-stylesheet",b="lifesg-ds-local-nav-dropdown-open";export{y as LocalNavDropdown};
 //# sourceMappingURL=local-nav-dropdown.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"local-nav-dropdown.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport { SimpleIdGenerator } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport {\n Backdrop,\n NavItem,\n NavItemLabel,\n NavItemList,\n NavSelect,\n NavSelectIcon,\n NavWrapper,\n StyledTickIcon,\n} 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 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] = useState(() => SimpleIdGenerator.generate());\n\n useImperativeHandle(ref, () => navWrapperRef.current!);\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 <NavItem\n id={id}\n key={index}\n role=\"menuitem\"\n $isSelected={isSelected && isStickied}\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 && <StyledTickIcon />}\n <NavItemLabel $isSelected={isSelected}>{title}</NavItemLabel>\n </NavItem>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <NavWrapper\n $isStickied={isStickied}\n $sideMargin={dynamicMargin}\n $stickyOffset={stickyOffset}\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={className}\n >\n <NavSelect\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n $isDropdownExpanded={isDropdownExpanded}\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 <NavSelectIcon $isDropdownExpanded={isDropdownExpanded} />\n </NavSelect>\n {isDropdownExpanded && (\n <NavItemList\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n $viewportHeight={\n viewportHeight - dropdowntHeight - stickyOffset\n }\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 </NavItemList>\n )}\n {isDropdownExpanded && isStickied && (\n <Backdrop onClick={handleDismissBackdrop} />\n )}\n </NavWrapper>\n </>\n );\n};\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","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","SimpleIdGenerator","generate","useImperativeHandle","current","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","NavWrapper","$isStickied","$sideMargin","$stickyOffset","NavSelect","role","onClick","prev","onKeyDown","length","$isDropdownExpanded","tabIndex","Typography","BodyBL","weight","NavSelectIcon","NavItemList","nextIndex","prevIndex","$viewportHeight","map","item","i","isSelected","index","undefined","el","selected","stickied","NavItem","$isSelected","StyledTickIcon","NavItemLabel","renderDropdownNavItem","handleNavItemClick","Backdrop"],"mappings":"yjBAiBA,MA4WaA,EAAmBC,EAAMC,YA5WpB,EAEVC,eACAC,eAAe,EACfC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAkBC,EAAwB,MAC1CC,EAAcD,EAAuB,MACrCE,EAAgBF,EAAoB,MACpCG,EAAeH,EAAiC,KAC/CI,EAAYC,GAAiBC,GAAkB,IAC/CC,EAAoBC,GACvBF,GAAkB,IACfG,EAAgBC,GAAqBJ,EAAS,IAC9CK,EAAiBC,GAAqBN,EAAS,IAC/CO,EAAeC,GAAoBR,EAAS,IAC5CS,EAAcC,GAAmBV,EAAS,GAC3CW,EAAYtB,GAAU,sBACrBuB,GAAkBZ,GAAS,IAAMa,EAAkBC,aAE1DC,EAAoBvB,GAAK,IAAMI,EAAcoB,UAE7C,MAAMC,EAC2B,iBAAtB9B,GACPA,GAAqB,GACrBW,EACMZ,EAAMC,GAAmB+B,MACzBnC,EAMVoC,GAAU,KACN,GAAIxB,EAAYqB,QAAS,CACrB,MAAMI,EACFzB,EAAYqB,QAAQK,wBAAwBC,OAChDhB,EAAkBc,EACtB,IACD,IAEHD,GAAU,KACNI,IACO,KACHC,EAAoB,SAAS,IAElC,IAEHL,GAAU,KAEFK,EADAvB,GAAsBH,EACF,MAEA,SACxB,GACD,CAACG,EAAoBH,IAExBqB,GAAU,KACNf,EAAkBqB,OAAOC,aACzB,MAAMC,EAAe,KACjBvB,EAAkBqB,OAAOC,YAAY,EAGzC,OADAD,OAAOG,iBAAiB,SAAUD,GAC3B,IAAMF,OAAOI,oBAAoB,SAAUF,EAAa,GAChE,IAEHR,GAAU,KACN,MAKMW,EAAW,IAAIC,sBALHC,IACd,MAAOC,GAASD,EAChBjC,GAAekC,EAAMC,eAAe,GAGY,CAChDC,UAAW,EACXC,WAAY,IAAIpD,oBAOpB,OAJIS,EAAgBuB,SAChBc,EAASO,QAAQ5C,EAAgBuB,SAG9B,IAAMc,EAASQ,YAAY,GACnC,CAACtD,IAEJmC,GAAU,KACN,MAAMoB,EAAgB,KAClB,MAAMC,EAAW5C,aAAa,EAAbA,EAAeoB,QAChC,GAAIwB,EAAU,CACV,MAAMC,EAAeD,EAASnB,wBACxBqB,EACFC,SAASC,KAAKC,YAAcJ,EAAaK,MACvCC,EAAcN,EAAaO,KAE3BC,EAAcC,KAAKC,IAAIT,EAAcK,GAC3CvC,EAAiByC,EACrB,GAMJ,OAJAV,IAEAd,OAAOG,iBAAiB,SAAUW,GAE3B,KACHd,OAAOI,oBAAoB,SAAUU,EAAc,CACtD,GACF,IAEHpB,GAAU,WACFlB,IACkC,QAAlCmD,EAAAvD,EAAamB,QAAQP,UAAa,IAAA2C,GAAAA,EAAEC,QACxC,GACD,CAACpD,EAAoBQ,IAMxB,MAAMc,EAA+B,KAIjC,IAAKoB,SAASW,eAAeC,GAAgB,CACzC,MAAMC,EAAoBb,SAASc,cAAc,SACjDD,EAAkBpE,GAAKmE,EAEvB,MAAMG,EAAgBf,SAASgB,gBAAgBd,YAEzCe,EADcnC,OAAOoC,WACUH,EAErCF,EAAkBM,UAAY,cACnCC,8DAEeH,iHAKfG,sEAKKpB,SAASC,KAAKoB,YAAYR,EAC9B,GAGEhC,EAAuByC,IACzB,MAAMC,EAA6BvB,SAASC,KAAKuB,UAAUC,SACvDL,GAGW,QAAXE,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BvB,SAASC,KAAKuB,UAAUE,OAAON,GAF/BpB,SAASC,KAAKuB,UAAUG,IAAIP,EAGhC,EA0BEQ,EAAuB,CACzBC,EACAC,KAIA,MAAMC,IAAEA,GAAQF,EAEJ,UAARE,GAA2B,MAARA,IACnBF,EAAEG,iBACFF,EAAYD,GAChB,EAwGJ,OACII,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAAA,OAAA,CAAMvF,IAAKC,EAAe,cAAe,eACzCmF,EAACI,EAAU,CAAAC,YACMnF,EAAUoF,YACV3E,EAAa4E,cACXnG,EACfQ,IAAKI,EACLR,GAAIA,EAAE,cACOuB,EACbrB,UAAWA,EAASwF,SAAA,CAEpBF,EAACQ,EAAS,CACN5F,IAAKG,EACL0F,KAAK,SACLC,QArJa,KACzBpF,GAAuBqF,IAAUA,GAAK,EAqJ1BC,UArHgBhB,IAC5B,MAAME,IAAEA,GAAQF,EAEJ,cAARE,GACAF,EAAEG,iBACG1E,GACDC,GAAsB,GAE1BQ,EAAgB,IACD,YAARgE,GACPF,EAAEG,iBACG1E,GACDC,GAAsB,GAE1BQ,EAAgBxB,EAAMuG,OAAS,IAChB,UAARf,GAA2B,MAARA,GAC1BF,EAAEG,iBACFzE,GAAsB,GACtBQ,EAAgB,KACD,QAARgE,GAEQ,WAARA,IADPxE,GAAsB,EAG1B,EA8F6C,cACpB,GAAGS,UAAiB+E,oBACZzF,EAAkB,gBACzB,OAAM,gBACLA,EAAkB,gBAClBW,EACf+E,SAAU,EAACb,SAAA,CAEXC,EAACa,EAAWC,OAAM,CAACC,OAAO,WAAUhB,SAC/B7D,IAEL8D,EAACgB,EAAa,CAAAL,oBAAsBzF,OAEvCA,GACG8E,EAACiB,EAAW,CACR5G,GAAIwB,EACJyE,KAAK,OACLG,UA5GchB,UAC9B,MAAME,IAAEA,GAAQF,EAEhB,GAAY,cAARE,EAAqB,CACrBF,EAAEG,iBACF,MAAMsB,GAAaxF,EAAe,GAAKvB,EAAMuG,OAC7C/E,EAAgBuF,EACpB,MAAO,GAAY,YAARvB,EAAmB,CAC1BF,EAAEG,iBACF,MAAMuB,EACFzF,EAAe,EAAIA,EAAe,EAAIvB,EAAMuG,OAAS,EACzD/E,EAAgBwF,EACpB,KAAmB,QAARxB,EACPxE,GAAsB,GACP,WAARwE,IACPxE,GAAsB,GACH,QAAnBkD,EAAAzD,EAAYqB,eAAO,IAAAoC,GAAAA,EAAEC,QACzB,EA2FmD,cACtB,GAAG1C,kBAAyBwF,gBAErChG,EAAiBE,EAAkBrB,EAAY8F,SAGlD5F,EAAMkH,KAAI,CAACC,EAAMC,IA1FR,GAC1B7B,cACA8B,aACAF,OACA9G,aACAiH,YAEA,MAAMpH,GAAEA,EAAE8B,MAAEA,GAAUmF,EAEtB,OAAI9G,EAEIwF,QACI3F,GAAIA,EAEJiG,KAAK,WACLC,QAASb,EACTe,UAAYhB,GAAMD,EAAqBC,EAAGC,oBAC5B8B,QAAoBE,EAClCd,UAAU,EACVnG,IAAMkH,IACF7G,EAAamB,QAAQwF,GAASE,CAAE,EACnC5B,SAEAvF,EAAW8G,EAAM,CACdM,SAAUJ,EACVK,SAAU9G,KAZT0G,GAmBb5B,EAACiC,EAAO,CACJzH,GAAIA,EAEJiG,KAAK,WAAUyB,YACFP,GAAczG,EAC3BwF,QAASb,EACTe,UAAYhB,GAAMD,EAAqBC,EAAGC,GAAY,iBACxC8B,QAAoBE,EAClCd,UAAU,EACVnG,IAAMkH,IACF7G,EAAamB,QAAQwF,GAASE,CAAmB,YAGpDH,GAAcxB,EAACgC,EAAc,CAAA,GAC9BhC,EAACiC,EAAY,CAAAF,YAAcP,WAAarF,MAZnCsF,EAaC,EA4CMS,CAAsB,CAClBxC,YAAcD,GAvKf,EACvBA,EACA6B,EACAG,KAEIvH,GACAA,EAAgBuF,EAAG6B,EAAMG,GAE7BtG,GAAsB,EAAM,EAgKAgH,CAAmB1C,EAAG6B,EAAMC,GAChCC,WAAYD,IAAMnH,EAClBkH,OACA9G,aACAiH,MAAOF,QAKtBrG,GAAsBH,GACnBiF,EAACoC,EAAQ,CAAC7B,QAtLI,KAC1BpF,GAAsB,EAAM,SAwLzB,IASLqD,EAAgB,0CAChBQ,EAA0B"}
1	+ {"version":3,"file":"local-nav-dropdown.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport {\n Backdrop,\n NavItem,\n NavItemLabel,\n NavItemList,\n NavSelect,\n NavSelectIcon,\n NavWrapper,\n StyledTickIcon,\n} 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 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 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 <NavItem\n id={id}\n key={index}\n role=\"menuitem\"\n $isSelected={isSelected && isStickied}\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 && <StyledTickIcon />}\n <NavItemLabel $isSelected={isSelected}>{title}</NavItemLabel>\n </NavItem>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <NavWrapper\n $isStickied={isStickied}\n $sideMargin={dynamicMargin}\n $stickyOffset={stickyOffset}\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={className}\n >\n <NavSelect\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n $isDropdownExpanded={isDropdownExpanded}\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 <NavSelectIcon $isDropdownExpanded={isDropdownExpanded} />\n </NavSelect>\n {isDropdownExpanded && (\n <NavItemList\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n $viewportHeight={\n viewportHeight - dropdowntHeight - stickyOffset\n }\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 </NavItemList>\n )}\n {isDropdownExpanded && isStickied && (\n <Backdrop onClick={handleDismissBackdrop} />\n )}\n </NavWrapper>\n </>\n );\n};\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","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","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","NavWrapper","$isStickied","$sideMargin","$stickyOffset","NavSelect","role","onClick","prev","onKeyDown","length","$isDropdownExpanded","tabIndex","Typography","BodyBL","weight","NavSelectIcon","NavItemList","nextIndex","prevIndex","$viewportHeight","map","item","i","isSelected","index","undefined","el","selected","stickied","NavItem","$isSelected","StyledTickIcon","NavItemLabel","renderDropdownNavItem","handleNavItemClick","Backdrop"],"mappings":"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"}

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

@@ -16,22 +16,26 @@ interface NavIconStyleProps extends DropdownExpandedProps {
 }
 interface NavLabelStyleProps extends DropdownExpandedProps {
 }
-export declare const NavSelectIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+export declare const NavSelectIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, NavIconStyleProps>> & string & Omit<{
+}, "$isDropdownExpanded"> & NavIconStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "$isDropdownExpanded"> & NavIconStyleProps, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const NavSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NavLabelStyleProps>> & string;
-export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, NavItemStyleProps>> & string;
-export declare const NavItemList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, NavItemListStyleProps>> & string;
-export declare const NavItemLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NavItemStyleProps>> & string;
+export declare const NavSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isDropdownExpanded"> & NavLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isDropdownExpanded"> & NavLabelStyleProps, never>>> & string;
+export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$isSelected"> & NavItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$isSelected"> & NavItemStyleProps, never>>> & string;
+export declare const NavItemList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$viewportHeight"> & NavItemListStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$viewportHeight"> & NavItemListStyleProps, never>>> & string;
+export declare const NavItemLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & NavItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & NavItemStyleProps, never>>> & string;
 export declare const StyledTickIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const Backdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NavWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, DropdownNavStyleProps>> & string;
+export declare const Backdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const NavWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DropdownNavStyleProps> & DropdownNavStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DropdownNavStyleProps> & DropdownNavStyleProps, never>>> & string;
 export {};

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

@@ -1,10 +1,26 @@
 interface NavItemStyleProps {
     $isSelected?: boolean;
 }
-export declare const Nav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const TextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, NavItemStyleProps>> & string;
-export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, NavItemStyleProps>> & string;
-export declare const NavItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Nav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
+export declare const TextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, "$isSelected"> & NavItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, "$isSelected"> & NavItemStyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$isSelected"> & NavItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$isSelected"> & NavItemStyleProps, never>>> & string;
+export declare const NavItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/markup/markup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Container as o}from"./markup.style.js";const i=r(((r,i)=>{const{baseTextColor:s,baseTextSize:a,inline:m}=r,n=e(r,["baseTextColor","baseTextSize","inline"]);return t(o,Object.assign({ref:i,as:m?"span":"div",$textSize:a,$textColor:s},n))}));export{i as Markup};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import{forwardRef as o,useRef as s,useMemo 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{generateFontProperties as m}from"../theme/utils/font.js";import{useApplyStyle as l}from"../theme/utils/use-apply-styles.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as a}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{baseMarkup as n,sizedMarkup as p}from"./markup.style.js";import{createMarkupFontStyles as j}from"./markup.utils.js";const u=o(((o,u)=>{const{baseTextColor:c,baseTextSize:f,inline:h,className:d}=o,x=e(o,["baseTextColor","baseTextSize","inline","className"]),b=s(null),g=i((()=>a(b,u)),[u]),k=i((()=>{if(f)return m(f,"regular")}),[f]),y=i((()=>Object.assign({color:c||null},j(k))),[c,k]);l(b,y);const v=r(n,f&&p,d);return t(h?"span":"div",Object.assign({ref:g,className:v},x))}));export{u as Markup};
 //# sourceMappingURL=markup.js.map

package/markup/markup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markup.js","sources":["../../src/markup/markup.tsx"],"sourcesContent":["import type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ~~Container~~ } from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const { baseTextColor, baseTextSize, inline, ...otherProps } = props;\n\n // ~~=========================================================================\~~n // ~~RENDER~~ ~~FUNCTION~~\n // ~~=========================================================================\~~n return (\n ~~<Container~~\n ~~ref={ref~~}\n as={inline ? \"span\" : \"div\"}\n ~~$textSize~~={~~baseTextSize~~}\n ~~$textColor~~={~~baseTextColor~~}\n {...otherProps}\n />\n );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","otherProps","__rest","~~_jsx~~","~~Container~~","Object","assign","as","~~$textSize~~","~~$textColor~~"],"mappings":"~~wKAMA~~,~~MAoBaA~~,EAASC,~~GApBJ~~,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,~~GAA0BJ~~,~~EAAfK~~,EAAUC,~~EAAKN~~,~~EAAzD~~,CAAA,gBAAA,eAAA,~~WAKN~~,~~OACIO~~,~~EAACC~~,~~EAASC~~,OAAAC,OAAA,~~CACNT~~,~~IAAKA~~,~~EACLU~~,~~GAAIP~~,EAAS,OAAS,~~MAAKQ~~,~~UAChBT~~,~~EAAYU~~,~~WACXX~~,~~GACRG~~,GACN"}
1	+ {"version":3,"file":"markup.js","sources":["../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { generateFontProperties, useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport { createMarkupFontStyles } from \"./markup.utils\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n props;\n\n const containerRef = useRef<HTMLDivElement \| HTMLSpanElement>(null);\n const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n const fontDeclarations = useMemo(() => {\n if (!baseTextSize) {\n return undefined;\n }\n\n return generateFontProperties(baseTextSize, \"regular\");\n }, [baseTextSize]);\n\n const appliedStyles = useMemo(\n () => ({\n color: baseTextColor \|\| null,\n ...createMarkupFontStyles(fontDeclarations),\n }),\n [baseTextColor, fontDeclarations]\n );\n\n useApplyStyle(containerRef, appliedStyles);\n\n const mergedClassName = clsx(\n styles.baseMarkup,\n baseTextSize && styles.sizedMarkup,\n className\n );\n\n const ElementTag = inline ? \"span\" : \"div\";\n\n return (\n <ElementTag\n ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n className={mergedClassName}\n {...otherProps}\n />\n );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","createMarkupFontStyles","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","_jsx"],"mappings":"22BAUA,MA6CaA,EAASC,GA7CJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAyC,MACxDC,EAAYC,GAAQ,IAAMC,EAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,GAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,GAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBiB,EAAuBN,KAE9B,CAACX,EAAeW,IAGpBO,EAAcZ,EAAcO,GAE5B,MAAMM,EAAkBC,EACpBC,EACApB,GAAgBqB,EAChBnB,GAKJ,OACIoB,EAHerB,EAAS,OAAS,MAGtBY,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWgB,GACPf,GACN"}

package/markup/markup.style.d.ts CHANGED Viewed

@@ -1,8 +1,10 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-interface ContainerStyleProps {
-    $textSize?: V3_TypographySizeType | undefined;
-    $textColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyleProps>> & string;
-export {};
+export declare const tokens: {
+    readonly rootFontFamily: "--fds-internal-markup-root-fontFamily";
+    readonly rootFontVariant: "--fds-internal-markup-root-fontVariant";
+    readonly rootFontSize: "--fds-internal-markup-root-fontSize";
+    readonly rootFontWeight: "--fds-internal-markup-root-fontWeight";
+    readonly rootLineHeight: "--fds-internal-markup-root-lineHeight";
+    readonly rootLetterSpacing: "--fds-internal-markup-root-letterSpacing";
+};
+export declare const baseMarkup: import("@linaria/core").LinariaClassName;
+export declare const sizedMarkup: import("@linaria/core").LinariaClassName;

package/markup/markup.style.js CHANGED Viewed

@@ -1,7 +1,2 @@
-import t,{css as o}from"styled-components";import{applyHtmlContentStyle as e}from"../shared/html-content/html-content.js";const r=t.div`
-    ${t=>e({textSize:t.$textSize})}
-    ${t=>t.$textColor&&o`
-            color: ${t.$textColor};
-        `}
-`;export{r as Container};
+import"./markup.style_1iu40x9.css";const t={rootFontFamily:"--fds-internal-markup-root-fontFamily",rootFontVariant:"--fds-internal-markup-root-fontVariant",rootFontSize:"--fds-internal-markup-root-fontSize",rootFontWeight:"--fds-internal-markup-root-fontWeight",rootLineHeight:"--fds-internal-markup-root-lineHeight",rootLetterSpacing:"--fds-internal-markup-root-letterSpacing"},o="b2c8sfe",r="stfuo83";export{o as baseMarkup,r as sizedMarkup,t as tokens};
 //# sourceMappingURL=markup.style.js.map

package/markup/markup.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markup.style.js","sources":["../../src/markup/markup.style.~~tsx~~"],"sourcesContent":["import ~~styled,~~ { css } from \"~~styled-components~~\";\n\nimport { ~~applyHtmlContentStyle~~ } from \"../~~shared~~/~~html-content~~/~~html-content~~\";\nimport ~~type~~ { ~~V3_TypographySizeType~~ } from \"../~~v3_theme~~/font~~/types~~\";\~~nimport~~ ~~type~~ { ~~V3_ThemeStyleProps~~ } ~~from~~ \"~~../v3_theme/types~~\";\n\n// ~~=============================================================================\~~n// ~~STYLE~~ ~~INTERFACES~~\n// ~~=============================================================================\ninterface~~ ~~ContainerStyleProps~~ {\n $~~textSize?:~~ ~~V3_TypographySizeType~~ \| ~~undefined~~;\n $~~textColor?:~~ ~~string~~ \| ~~((props~~: ~~V3_ThemeStyleProps)~~ => ~~string)~~ \| ~~undefined~~;\n}\n\n// ~~=============================================================================\~~n// ~~STYLING~~\n~~// =============================================================================\~~nexport const ~~Container~~ = ~~styled.div<ContainerStyleProps>`\~~n ${~~(props~~) ~~=> applyHtmlContentStyle~~({ ~~textSize~~: ~~props.$textSize~~ })}\n ${~~(props~~) ~~=>\~~n ~~props.$textColor~~ ~~&&\~~n ~~css`\n color~~: ${~~props.$textColor~~};\n ~~`}\n~~`;\n"],"names":["~~Container~~","~~styled~~","~~div~~","~~props~~","~~applyHtmlContentStyle~~","~~textSize~~","~~$textSize~~","~~$textColor~~","~~css~~"],"mappings":"~~0HAiBO~~,MAAMA,~~EAAYC~~,~~EAAOC~~,~~GAAwB;MACjDC~~,~~GAAUC~~,~~EAAsB~~,~~CAAEC~~,~~SAAUF~~,~~EAAMG;MAClDH~~,~~GACCA~~,~~EAAMI~~,~~YACNC~~,~~CAAG;qBACUL~~,~~EAAMI;;~~"}
1	+ {"version":3,"file":"markup.style.js","sources":["../../src/markup/markup.style.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme/tokens/colour\";\nimport { Font } from \"../theme/tokens/font\";\n\nexport const tokens = {\n rootFontFamily: \"--fds-internal-markup-root-fontFamily\",\n rootFontVariant: \"--fds-internal-markup-root-fontVariant\",\n rootFontSize: \"--fds-internal-markup-root-fontSize\",\n rootFontWeight: \"--fds-internal-markup-root-fontWeight\",\n rootLineHeight: \"--fds-internal-markup-root-lineHeight\",\n rootLetterSpacing: \"--fds-internal-markup-root-letterSpacing\",\n} as const;\n\nexport const baseMarkup = css`\n strong {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n\n p {\n margin: 0;\n }\n\n a {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour.hyperlink};\n text-decoration: underline;\n\n svg {\n color: ${Colour[\"icon-primary\"]};\n height: 1lh;\n width: 1em;\n margin-left: 0.4rem;\n vertical-align: middle;\n }\n\n &:hover,\n &:active,\n &:visited,\n &:focus {\n color: ${Colour[\"hyperlink-hover\"]};\n\n svg {\n color: ${Colour[\"icon-hover\"]};\n }\n }\n }\n\n ul,\n ol {\n margin: 0;\n padding: 0;\n margin-left: 2.5rem;\n }\n\n ol {\n list-style: decimal;\n }\n\n ul {\n list-style: disc;\n }\n`;\n\nexport const sizedMarkup = css`\n font-family: var(${tokens.rootFontFamily}, inherit);\n font-variant: var(${tokens.rootFontVariant}, inherit);\n font-size: var(${tokens.rootFontSize}, inherit);\n font-weight: var(${tokens.rootFontWeight}, inherit);\n line-height: var(${tokens.rootLineHeight}, inherit);\n letter-spacing: var(${tokens.rootLetterSpacing}, inherit);\n`;\n"],"names":["tokens","rootFontFamily","rootFontVariant","rootFontSize","rootFontWeight","rootLineHeight","rootLetterSpacing","baseMarkup","sizedMarkup"],"mappings":"yDAKO,MAAMA,EAAS,CAClBC,eAAgB,wCAChBC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,wCAChBC,eAAgB,wCAChBC,kBAAmB,4CAGVC,EAAU,UAkDVC,EAAW"}

package/markup/markup.style_1iu40x9.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .b2c8sfe strong{font-weight:var(--fds-font-weight-semibold);}.b2c8sfe p{margin:0;}.b2c8sfe a{font-weight:var(--fds-font-weight-semibold);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;}.b2c8sfe a svg{color:var(--fds-colour-icon-primary);height:1lh;width:1em;margin-left:0.4rem;vertical-align:middle;}.b2c8sfe a:hover,.b2c8sfe a:active,.b2c8sfe a:visited,.b2c8sfe a:focus{color:var(--fds-colour-hyperlink-hover);}.b2c8sfe a:hover svg,.b2c8sfe a:active svg,.b2c8sfe a:visited svg,.b2c8sfe a:focus svg{color:var(--fds-colour-icon-hover);}.b2c8sfe ul,.b2c8sfe ol{margin:0;padding:0;margin-left:2.5rem;}.b2c8sfe ol{list-style:decimal;}.b2c8sfe ul{list-style:disc;}
2	+ .stfuo83{font-family:var(--fds-internal-markup-root-fontFamily, inherit);font-variant:var(--fds-internal-markup-root-fontVariant, inherit);font-size:var(--fds-internal-markup-root-fontSize, inherit);font-weight:var(--fds-internal-markup-root-fontWeight, inherit);line-height:var(--fds-internal-markup-root-lineHeight, inherit);letter-spacing:var(--fds-internal-markup-root-letterSpacing, inherit);}

package/markup/markup.utils.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { ApplyStyleMap, FontDeclarationProperties } from "../theme";
2	+ export declare const createMarkupFontStyles: (fontDeclarations?: FontDeclarationProperties) => ApplyStyleMap;

package/markup/markup.utils.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{tokens as t}from"./markup.style.js";const o={[t.rootFontFamily]:"font-family",[t.rootFontVariant]:"font-variant",[t.rootFontSize]:"font-size",[t.rootFontWeight]:"font-weight",[t.rootLineHeight]:"line-height",[t.rootLetterSpacing]:"letter-spacing"},r=t=>{return r=o,n=t,Object.fromEntries(Object.entries(r).map((([t,o])=>{var r;return[t,null!==(r=null==n?void 0:n[o])&&void 0!==r?r:null]})));var r,n};export{r as createMarkupFontStyles};
2	+ //# sourceMappingURL=markup.utils.js.map

package/markup/markup.utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"markup.utils.js","sources":["../../src/markup/markup.utils.ts"],"sourcesContent":["import type { ApplyStyleMap, FontDeclarationProperties } from \"../theme\";\nimport { tokens } from \"./markup.style\";\n\nconst rootFontTokenMap: Record<string, keyof FontDeclarationProperties> = {\n [tokens.rootFontFamily]: \"font-family\",\n [tokens.rootFontVariant]: \"font-variant\",\n [tokens.rootFontSize]: \"font-size\",\n [tokens.rootFontWeight]: \"font-weight\",\n [tokens.rootLineHeight]: \"line-height\",\n [tokens.rootLetterSpacing]: \"letter-spacing\",\n} as const;\n\nconst mapFontDeclarationsToStyles = (\n tokenMap: Record<string, keyof FontDeclarationProperties>,\n declarations?: FontDeclarationProperties\n) =>\n Object.fromEntries(\n Object.entries(tokenMap).map(([token, declarationKey]) => [\n token,\n declarations?.[declarationKey] ?? null,\n ])\n );\n\nexport const createMarkupFontStyles = (\n fontDeclarations?: FontDeclarationProperties\n): ApplyStyleMap =>\n mapFontDeclarationsToStyles(rootFontTokenMap, fontDeclarations);\n"],"names":["rootFontTokenMap","tokens","rootFontFamily","rootFontVariant","rootFontSize","rootFontWeight","rootLineHeight","rootLetterSpacing","createMarkupFontStyles","fontDeclarations","mapFontDeclarationsToStyles","tokenMap","declarations","Object","fromEntries","entries","map","token","declarationKey","_a"],"mappings":"2CAGA,MAAMA,EAAoE,CACtE,CAACC,EAAOC,gBAAiB,cACzB,CAACD,EAAOE,iBAAkB,eAC1B,CAACF,EAAOG,cAAe,YACvB,CAACH,EAAOI,gBAAiB,cACzB,CAACJ,EAAOK,gBAAiB,cACzB,CAACL,EAAOM,mBAAoB,kBAcnBC,EACTC,IAEAC,OAbAC,EAa4BX,EAZ5BY,EAY8CH,EAV9CI,OAAOC,YACHD,OAAOE,QAAQJ,GAAUK,KAAI,EAAEC,EAAOC,YAAoB,MAAA,CACtDD,EAC8B,QAA9BE,EAAAP,aAAY,EAAZA,EAAeM,UAAe,IAAAC,EAAAA,EAAI,KACrC,KAR2B,IAChCR,EACAC,CAY8D"}

package/markup/types.d.ts CHANGED Viewed

@@ -1,13 +1,14 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
+import type { ColourCSSVariableString, FontSize } from "../theme";
+type CustomCssString = string & {};
 export interface MarkupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The default font size. If not specified, inherited from the parent */
-    baseTextSize?: V3_TypographySizeType | undefined;
+    baseTextSize?: FontSize | undefined;
     /** The default font color. If not specified, inherited from the parent */
-    baseTextColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    baseTextColor?: ColourCSSVariableString | CustomCssString | undefined;
     /**
      * Specifies if element is rendered as block element `div` or inline
      * element `span`
      */
     inline?: boolean | undefined;
 }
+export {};

package/masked-input/masked-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as a,Fragment as n}from"react/jsx-runtime";import{EyeIcon as t}from"@lifesg/react-icons/eye";import{EyeSlashIcon as i}from"@lifesg/react-icons/eye-slash";import{l as o}from"../external/lodash/lodash.js";import s,{useState as l,useRef as d,useImperativeHandle as u,useEffect as c}from"react";import{VisuallyHidden as m,concatIds as k}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as f}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import{LoadingWrapper as g,Spinner as h,LoadingLabel as v,ClickableErrorWrapper as y,ErrorTextContainer as b,ErrorIcon as C,ErrorLabel as j,TryAgainLabel as R,InputGroupWrapper as M,ReadOnlyClickable as x,ReadOnlyValueText as $,ReadOnlyIconContainer as w,IconContainer as T}from"./masked-input.style.js";const D=s.forwardRef(((s,D)=>{var U,{value:A,readOnly:I,"data-testid":O,maskRange:B,unmaskRange:F,maskRegex:S,maskTransformer:E,iconMask:_=r(i,{}),iconUnmask:L=r(t,{}),iconActiveColor:V,iconInactiveColor:q,maskChar:z="•",error:G,disableMask:H,transformInput:J,loadState:K,onMask:N,onUnmask:P,onChange:Q,onFocus:W,onBlur:X,onTryAgain:Y}=s,Z=e(s,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain"]);const ee=I&&o.isEmpty(A),[re,ae]=l(!H),[ne,te]=l(A||""),[ie]=l((()=>f.generate())),oe=`${null!==(U=Z.id)&&void 0!==U?U:ie}-value`,se=d(null),le=d(null),de=d(null),ue=d(!H),ce=Z["aria-labelledby"];u(D,(()=>se.current),[]),c((()=>{te(A||"")}),[A]),c((()=>{var e,r;I&&("fail"===K&&(null===(e=le.current)||void 0===e||e.focus()),"success"===K&&(null===(r=de.current)||void 0===r||r.focus()))}),[I,K]);const me=e=>{ve(!1),null==W||W(e)},ke=e=>{ve(!0),null==X||X(e)},fe=e=>{let r=e.target.value;switch(J){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}te(r),e.target.value=r,null==Q||Q(e)},pe=()=>{I&&(null==Y||Y())},ge=e=>{e.preventDefault()},he=()=>{var e;const r=!re;ve(r),r||null===(e=se.current)||void 0===e||e.focus()},ve=e=>{ue.current!==e&&(ue.current=e,ae(e),e?null==N||N():null==P||P())},ye=()=>ee?"-":re&&!H?p.maskValue(ne,{maskChar:z,maskRange:B,unmaskRange:F,maskRegex:S,maskTransformer:E}):ne,be=()=>!(null==ne?void 0:ne.toString().length)||H,Ce=()=>{if(ee)return"-";if(re&&!H){return p.getMaskedDescription(ne,"masked",B)||"Masked value"}return ne},je=()=>{if(ee)return r(n,{});const e=be();return r(T,{"data-testid":"icon-"+(re?"masked":"unmasked"),onMouseDown:e?void 0:ge,onClick:e?void 0:he,$isDisabled:e,$inactiveColor:q,$activeColor:V,"aria-hidden":"true",children:re?L:_})};return r("div",{"aria-busy":"loading"===K,children:(()=>{if(I)switch(K){case"fail":return a(y,{ref:le,onClick:pe,"data-testid":"try-again-button",type:"button",children:[a(b,{children:[r(C,{}),r(j,{children:"Error"})]}),r(R,{children:"Try again?"})]});case"loading":return a(g,{children:[r(h,{}),r(v,{children:"Retrieving..."})]});default:return(()=>{const e=be()||ee;return a(n,{children:[r(m,{id:oe,children:Ce()}),a(x,{ref:de,"data-testid":"masked-input-readonly-button",onClick:e?void 0:he,type:"button","aria-labelledby":k(oe,ce),"aria-disabled":e,children:[r($,{children:ye()}),!e&&r(w,{children:re?r(t,{"data-testid":"masked-icon"}):r(i,{"data-testid":"unmasked-icon"})})]})]})})()}return r(M,Object.assign({ref:se,"data-testid":`${O||"masked-input"}${re?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:je()},position:"right"},onFocus:I?void 0:me,onBlur:I?void 0:ke,onClick:I?he:void 0,onChange:fe,value:ye(),readOnly:I,error:G,$isDisabled:be()},Z))})()})}));export{D as MaskedInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as a,Fragment as n}from"react/jsx-runtime";import{EyeIcon as t}from"@lifesg/react-icons/eye";import{EyeSlashIcon as i}from"@lifesg/react-icons/eye-slash";import{l as o}from"../external/lodash/lodash.js";import s,{useState as l,useRef as d,useImperativeHandle as u,useEffect as c}from"react";import{VisuallyHidden as m,concatIds as k}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as f}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import"@react-aria/live-announcer";import{LoadingWrapper as v,Spinner as h,LoadingLabel as g,ClickableErrorWrapper as y,ErrorTextContainer as b,ErrorIcon as C,ErrorLabel as j,TryAgainLabel as R,InputGroupWrapper as M,ReadOnlyClickable as x,ReadOnlyValueText as $,ReadOnlyIconContainer as w,IconContainer as T}from"./masked-input.style.js";const D=s.forwardRef(((s,D)=>{var U,{value:A,readOnly:I,"data-testid":O,maskRange:B,unmaskRange:F,maskRegex:S,maskTransformer:E,iconMask:_=r(i,{}),iconUnmask:L=r(t,{}),iconActiveColor:V,iconInactiveColor:q,maskChar:z="•",error:G,disableMask:H,transformInput:J,loadState:K,onMask:N,onUnmask:P,onChange:Q,onFocus:W,onBlur:X,onTryAgain:Y}=s,Z=e(s,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain"]);const ee=I&&o.isEmpty(A),[re,ae]=l(!H),[ne,te]=l(A||""),ie=f(),oe=`${null!==(U=Z.id)&&void 0!==U?U:ie}-value`,se=d(null),le=d(null),de=d(null),ue=d(!H),ce=Z["aria-labelledby"];u(D,(()=>se.current),[]),c((()=>{te(A||"")}),[A]),c((()=>{var e,r;I&&("fail"===K&&(null===(e=le.current)||void 0===e||e.focus()),"success"===K&&(null===(r=de.current)||void 0===r||r.focus()))}),[I,K]);const me=e=>{ge(!1),null==W||W(e)},ke=e=>{ge(!0),null==X||X(e)},fe=e=>{let r=e.target.value;switch(J){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}te(r),e.target.value=r,null==Q||Q(e)},pe=()=>{I&&(null==Y||Y())},ve=e=>{e.preventDefault()},he=()=>{var e;const r=!re;ge(r),r||null===(e=se.current)||void 0===e||e.focus()},ge=e=>{ue.current!==e&&(ue.current=e,ae(e),e?null==N||N():null==P||P())},ye=()=>ee?"-":re&&!H?p.maskValue(ne,{maskChar:z,maskRange:B,unmaskRange:F,maskRegex:S,maskTransformer:E}):ne,be=()=>!(null==ne?void 0:ne.toString().length)||H,Ce=()=>{if(ee)return"-";if(re&&!H){return p.getMaskedDescription(ne,"masked",B)||"Masked value"}return ne},je=()=>{if(ee)return r(n,{});const e=be();return r(T,{"data-testid":"icon-"+(re?"masked":"unmasked"),onMouseDown:e?void 0:ve,onClick:e?void 0:he,$isDisabled:e,$inactiveColor:q,$activeColor:V,"aria-hidden":"true",children:re?L:_})};return r("div",{"aria-busy":"loading"===K,children:(()=>{if(I)switch(K){case"fail":return a(y,{ref:le,onClick:pe,"data-testid":"try-again-button",type:"button",children:[a(b,{children:[r(C,{}),r(j,{children:"Error"})]}),r(R,{children:"Try again?"})]});case"loading":return a(v,{children:[r(h,{}),r(g,{children:"Retrieving..."})]});default:return(()=>{const e=be()||ee;return a(n,{children:[r(m,{id:oe,children:Ce()}),a(x,{ref:de,"data-testid":"masked-input-readonly-button",onClick:e?void 0:he,type:"button","aria-labelledby":k(oe,ce),"aria-disabled":e,children:[r($,{children:ye()}),!e&&r(w,{children:re?r(t,{"data-testid":"masked-icon"}):r(i,{"data-testid":"unmasked-icon"})})]})]})})()}return r(M,Object.assign({ref:se,"data-testid":`${O||"masked-input"}${re?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:je()},position:"right"},onFocus:I?void 0:me,onBlur:I?void 0:ke,onClick:I?he:void 0,onChange:fe,value:ye(),readOnly:I,error:G,$isDisabled:be()},Z))})()})}));export{D as MaskedInput};
 //# sourceMappingURL=masked-input.js.map