@lifesg/react-design-system 3.4.0-canary.4 → 3.4.0-canary.6

package/modal-v2/modal-v2.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport React, { useEffect, useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport { Container, ModalContainer, ScrollContainer } from \"./modal-v2.styles\";\nimport { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={isMounted}\n                $animationFrom={animationFrom}\n                data-testid={testId}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                data-status={status}\n                {...otherProps}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <ScrollContainer>\n                                <ModalContainer\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                >\n                                    {childWithRef}\n                                </ModalContainer>\n                            </ScrollContainer>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["ModalV2","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","childWithRef","React","cloneElement","ref","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","ScrollContainer","ModalContainer","setFloating","role"],"mappings":"4wBAeO,MAAMA,EAAWC,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,KACnBC,EAAUC,EAAAjB,EAhBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,wBAqBpB,MAAMkB,eAAEA,EAAcC,UAAEA,GAAcC,IAChCC,EAAWC,EAAuB,MAClCC,EACFlB,GAAYmB,EAAMC,aAAapB,EAAU,CAAEqB,IAAKL,KAK9CM,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAM5B,EACN6B,aAAeC,IACNA,GACD7B,SAAAA,GACJ,KAGF8B,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAWrC,KAETsC,iBAAEA,GAAqBC,EAAgB,CAACL,IAKxCM,EAAkBC,GAAS,aACzBlC,YACAmC,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA/C,OAAA,EAAAA,EAAEgD,6BAC7C,IAYJ,OATAC,GAAU,KACF/C,GACAyC,GACJ,GACD,CAACzC,EAAMyC,IAMNO,EAACC,EAAO,CAAA,cACS,GAAGxC,YAChBT,KAAM+B,EACN3B,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJmD,OAAQ7C,EACR8C,aAAchC,EACdb,OAAQA,EAAMH,SAEd6C,EAACI,EAASC,OAAAC,OAAA,CAAAC,MACCxB,EAASyB,eACAtD,EAAa,cAChBO,EAAMgD,gBACFzC,EAAc0C,WACnBzC,EAAS,cACRe,GACTlB,EAAU,CAAAX,SAEd6C,EAACW,EAAaC,SAAQ,CAACC,MAAO,CAAE5D,WAASE,SACpC4B,GACGiB,EAACc,EAAoB,CACjBpC,QAASA,EACTqC,aACIlD,GAAsB,EAAKY,EAAKuC,SAAQ7D,SAG5C6C,EAACiB,EAAe,CAAA9D,SACZ6C,EAACkB,EAAcb,OAAAC,OAAA,CACX9B,IAAKC,EAAK0C,aACN5B,IAAkB,CACtB6B,KAAK,SAAQ,aACD1D,EAAS,kBACJC,EAAc,mBACbC,EAAeT,SAEhCkB,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport React, { useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport { Container, ModalContainer, ScrollContainer } from \"./modal-v2.styles\";\nimport { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $animationFrom={animationFrom}\n                data-testid={testId}\n                $verticalHeight={verticalHeight}\n                data-status={status}\n                {...otherProps}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <ScrollContainer>\n                                <ModalContainer\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                >\n                                    {childWithRef}\n                                </ModalContainer>\n                            </ScrollContainer>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["ModalV2","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","childWithRef","React","cloneElement","ref","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$animationFrom","$verticalHeight","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","ScrollContainer","ModalContainer","setFloating","role"],"mappings":"6vBAeO,MAAMA,EAAWC,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,KACnBC,EAAUC,EAAAjB,EAhBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,wBAqBpB,MAAMkB,EAAkBC,GAAS,aACzBT,YACAU,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAtB,OAAA,EAAAA,EAAEuB,6BAC7C,KAEEC,eAAEA,GAAmBC,EAAY,CACnCC,QAASxB,EACTyB,cAAeT,IAEbU,EAAWC,EAAuB,MAClCC,EACFzB,GAAY0B,EAAMC,aAAa3B,EAAU,CAAE4B,IAAKL,KAK9CM,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMnC,EACNoC,aAAeC,IACNA,GACDpC,SAAAA,GACJ,KAGFqC,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdpB,UAAWvB,KAET4C,iBAAEA,GAAqBC,EAAgB,CAACJ,IAK9C,OACIK,EAACC,EAAO,CAAA,cACS,GAAGvC,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJkD,OAAQ5C,EACR6C,aAAcxB,EACdpB,OAAQA,EAAMH,SAEd4C,EAACI,EAASC,OAAAC,OAAA,CAAAC,eACUpD,EAAa,cAChBO,EAAM8C,gBACFjC,EAAc,cAClBiB,GACTzB,EAAU,CAAAX,SAEd4C,EAACS,EAAaC,SAAQ,CAACC,MAAO,CAAEzD,oBAC3BqC,GACGS,EAACY,EAAoB,CACjB1B,QAASA,EACT2B,aACI/C,KAA2BmB,EAAK6B,SAAQ1D,SAG5C4C,EAACe,EAAe,CAAA3D,SACZ4C,EAACgB,iBACGhC,IAAKC,EAAKgC,aACNnB,IAAkB,CACtBoB,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAAeT,SAEhCyB,eAOnB"}

package/modal-v2/modal-v2.styles.d.ts

@@ -1,9 +1,7 @@
 import { ModalAnimationDirection } from "./types";
 interface Props {
-    $show: boolean;
     $animationFrom?: ModalAnimationDirection;
     $verticalHeight?: number;
-    $offsetTop?: number;
 }
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof Props> & Props, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof Props> & Props, never>>> & string;
 export declare const ScrollContainer: 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;

package/modal-v2/modal-v2.styles.js

@@ -1,4 +1,4 @@
-import t,{css as i}from"styled-components";import{MediaQuery as e,Motion as a}from"../theme/index.js";const o=t.div`
+import t,{css as i}from"styled-components";import{MediaQuery as e,Motion as a}from"../theme/index.js";const n=t.div`
     position: relative;
     width: 100%;
     height: 100%;
@@ -6,13 +6,13 @@ import t,{css as i}from"styled-components";import{MediaQuery as e,Motion as a}fr
     overflow: auto;
 
     ${e.MaxWidth.sm} {
-        ${t=>i`
-                height: calc(
-                    ${t.$verticalHeight?`${t.$verticalHeight}px`:"1vh"} * 100
-                );
-            `}
+        height: calc(
+            ${t=>t.$verticalHeight?`${t.$verticalHeight}px`:"1vh"} * 100
+        );
+    }
 
-        top: ${t=>t.$offsetTop||0}px;
+    @supports (height: 100dvh) {
+        height: 100dvh;
     }
 
     ${t=>i`
@@ -34,7 +34,7 @@ import t,{css as i}from"styled-components";import{MediaQuery as e,Motion as a}fr
             transition: all ${a["duration-250"]} ${a["ease-exit"]};
         }
     `}
-`,n=t.div`
+`,o=t.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -44,5 +44,5 @@ import t,{css as i}from"styled-components";import{MediaQuery as e,Motion as a}fr
     pointer-events: auto;
     width: 100%;
     outline: none;
-`;export{o as Container,s as ModalContainer,n as ScrollContainer};
+`;export{n as Container,s as ModalContainer,o as ScrollContainer};
 //# sourceMappingURL=modal-v2.styles.js.map

package/modal-v2/modal-v2.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.styles.js","sources":["../../src/modal-v2/modal-v2.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { MediaQuery, Motion } from \"../theme\";\nimport { ModalAnimationDirection } from \"./types\";\n\ninterface Props {\n    $show: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n    $offsetTop?: number;\n}\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${(props) => {\n            return css`\n                height: calc(\n                    ${props.$verticalHeight\n                            ? `${props.$verticalHeight}px`\n                            : \"1vh\"} * 100\n                );\n            `;\n        }}\n\n        top: ${(props) => props.$offsetTop || 0}px;\n    }\n\n    ${(props) => css`\n        &[data-status=\"initial\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n        }\n\n        &[data-status=\"open\"] {\n            opacity: 1;\n            ${props.$animationFrom}: 0;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n            transition-delay: ${Motion[\"duration-150\"]};\n        }\n\n        &[data-status=\"close\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n        }\n    `}\n`;\n\nexport const ScrollContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const ModalContainer = styled.div`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["Container","styled","div","MediaQuery","MaxWidth","sm","props","css","$verticalHeight","$offsetTop","$animationFrom","Motion","ScrollContainer","ModalContainer"],"mappings":"sGAWO,MAAMA,EAAYC,EAAOC,GAAU;;;;;;;MAOpCC,EAAWC,SAASC;UACfC,GACQC,CAAG;;sBAEAD,EAAME,gBACE,GAAGF,EAAME,oBACT;;;;eAKdF,GAAUA,EAAMG,YAAc;;;MAGvCH,GAAUC,CAAG;;;cAGND,EAAMI;;;;;cAKNJ,EAAMI;8BACUC,EAAO,mBAAmBA,EAAO;gCAC/BA,EAAO;;;;;cAKzBL,EAAMI;8BACUC,EAAO,mBAAmBA,EAAO;;;EAKlDC,EAAkBX,EAAOC,GAAG;;;;;;EAQ5BW,EAAiBZ,EAAOC,GAAG;;;;"}
+{"version":3,"file":"modal-v2.styles.js","sources":["../../src/modal-v2/modal-v2.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { MediaQuery, Motion } from \"../theme\";\nimport { ModalAnimationDirection } from \"./types\";\n\ninterface Props {\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n}\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(\n            ${(props) =>\n                    props.$verticalHeight\n                        ? `${props.$verticalHeight}px`\n                        : \"1vh\"} * 100\n        );\n    }\n\n    @supports (height: 100dvh) {\n        height: 100dvh;\n    }\n\n    ${(props) => css`\n        &[data-status=\"initial\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n        }\n\n        &[data-status=\"open\"] {\n            opacity: 1;\n            ${props.$animationFrom}: 0;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n            transition-delay: ${Motion[\"duration-150\"]};\n        }\n\n        &[data-status=\"close\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n        }\n    `}\n`;\n\nexport const ScrollContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const ModalContainer = styled.div`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["Container","styled","div","MediaQuery","MaxWidth","sm","props","$verticalHeight","css","$animationFrom","Motion","ScrollContainer","ModalContainer"],"mappings":"sGASO,MAAMA,EAAYC,EAAOC,GAAU;;;;;;;MAOpCC,EAAWC,SAASC;;cAEXC,GACKA,EAAMC,gBACA,GAAGD,EAAMC,oBACT;;;;;;;;MAQnBD,GAAUE,CAAG;;;cAGNF,EAAMG;;;;;cAKNH,EAAMG;8BACUC,EAAO,mBAAmBA,EAAO;gCAC/BA,EAAO;;;;;cAKzBJ,EAAMG;8BACUC,EAAO,mBAAmBA,EAAO;;;EAKlDC,EAAkBV,EAAOC,GAAG;;;;;;EAQ5BU,EAAiBX,EAAOC,GAAG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.4.0-canary.4",
+  "version": "3.4.0-canary.6",
   "description": "A component design system for LifeSG web apps",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/shared/hooks/useViewport.d.ts

@@ -1,4 +1,9 @@
-export declare const useViewport: () => {
+interface UseViewportProps {
+    enabled?: boolean;
+    onBeforeStart?: () => void;
+}
+export declare const useViewport: ({ enabled, onBeforeStart, }?: UseViewportProps) => {
     verticalHeight: number | undefined;
-    offsetTop: number | undefined;
+    ready: boolean;
 };
+export {};

package/shared/hooks/useViewport.js

@@ -1,2 +1,2 @@
-import e from"../../external/lodash/throttle.js";import{useState as i,useCallback as o,useEffect as t}from"react";const r=()=>{const[r,n]=i(),[w,s]=i(),v=o((()=>{const e=.01*window.innerHeight;n(e)}),[]),d=o((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;n(e),s(window.visualViewport.offsetTop)}}),[]);return t((()=>{if(window.visualViewport){const i=e(d,300);return d(),window.visualViewport.addEventListener("resize",d),window.visualViewport.addEventListener("scroll",i),()=>{var e,o;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",d),null===(o=window.visualViewport)||void 0===o||o.removeEventListener("scroll",i)}}return v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}}),[]),{verticalHeight:r,offsetTop:w}};export{r as useViewport};
+import{useState as e,useRef as r,useEffect as n,useCallback as i}from"react";const t=({enabled:t=!1,onBeforeStart:o}={})=>{const[u,w]=e(),[l,a]=e(!1),s=r([]),c=r(null),d=r(!1),v=r(o);n((()=>{v.current=o}),[o]);const h=i((()=>{const e=.01*window.innerHeight;w(e)}),[]),p=i((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;w(e)}}),[]);return n((()=>window.visualViewport?(p(),window.visualViewport.addEventListener("resize",p),()=>{var e;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",p)}):(h(),window.addEventListener("resize",h),()=>{window.removeEventListener("resize",h)})),[p,h]),n((()=>{var e;const r=e=>{s.current.push(requestAnimationFrame(e))},n=()=>{s.current.forEach((e=>cancelAnimationFrame(e))),s.current=[],null!==c.current&&(clearTimeout(c.current),c.current=null),d.current=!1},i=()=>{d.current||(d.current=!0,a(!0))};return n(),a(!1),t?(null===(e=v.current)||void 0===e||e.call(v),window.visualViewport?((()=>{var e,n;let t=null!==(n=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==n?n:window.innerHeight,o=0;const u=()=>{var e,n;const w=null!==(n=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==n?n:window.innerHeight;Math.abs(w-t)<.5?o+=1:(o=0,t=w),o>=2?i():r(u)};r(u)})(),c.current=setTimeout(i,180),n):(r(i),n)):n}),[t]),{verticalHeight:u,ready:l}};export{t as useViewport};
 //# sourceMappingURL=useViewport.js.map

package/shared/hooks/useViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewport.js","sources":["../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import throttle from \"lodash/throttle\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nexport const useViewport = () => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [offsetTop, setOffsetTop] = useState<number>();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n            setOffsetTop(window.visualViewport.offsetTop);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            const handleViewportScroll = throttle(handleViewportResize, 300);\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            window.visualViewport.addEventListener(\n                \"scroll\",\n                handleViewportScroll\n            );\n\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n                window.visualViewport?.removeEventListener(\n                    \"scroll\",\n                    handleViewportScroll\n                );\n            };\n        } else {\n            // fallback to Window API\n            handleWindowResize();\n            window.addEventListener(\"resize\", handleWindowResize);\n            return () => {\n                window.removeEventListener(\"resize\", handleWindowResize);\n            };\n        }\n    }, []);\n\n    return {\n        verticalHeight,\n        offsetTop,\n    };\n};\n"],"names":["useViewport","verticalHeight","setVerticalHeight","useState","offsetTop","setOffsetTop","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","useEffect","handleViewportScroll","throttle","addEventListener","_a","removeEventListener","_b"],"mappings":"kHAGO,MAAMA,EAAc,KACvB,MAAOC,EAAgBC,GAAqBC,KACrCC,EAAWC,GAAgBF,IAK5BG,EAAqBC,GAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCR,EAAkBM,EAAkB,GACrC,IAEGG,EAAuBJ,GAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDX,EAAkBM,GAClBH,EAAaI,OAAOG,eAAeR,UACvC,IACD,IAsCH,OApCAU,GAAU,KAIN,GAAIL,OAAOG,eAAgB,CACvB,MAAMG,EAAuBC,EAASL,EAAsB,KAW5D,OAVAA,IACAF,OAAOG,eAAeK,iBAClB,SACAN,GAEJF,OAAOG,eAAeK,iBAClB,SACAF,GAGG,aACkB,QAArBG,EAAAT,OAAOG,sBAAc,IAAAM,GAAAA,EAAEC,oBACnB,SACAR,GAEiB,QAArBS,EAAAX,OAAOG,sBAAc,IAAAQ,GAAAA,EAAED,oBACnB,SACAJ,EACH,CAET,CAII,OAFAT,IACAG,OAAOQ,iBAAiB,SAAUX,GAC3B,KACHG,OAAOU,oBAAoB,SAAUb,EAAmB,CAEhE,GACD,IAEI,CACHL,iBACAG,YACH"}
+{"version":3,"file":"useViewport.js","sources":["../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst STABLE_FRAMES = 2;\nconst HEIGHT_OFFSET = 0.5;\n// This 180 ms duration is chosen to align with the mobile Chrome/keyboard animation (150–300 ms range) and the modal’s entrance `transition-delay` (200 ms) before we force it into the `ready` state.\nconst FALLBACK_TIME = 180;\n\ninterface UseViewportProps {\n    enabled?: boolean;\n    onBeforeStart?: () => void;\n}\n\nexport const useViewport = ({\n    enabled = false,\n    onBeforeStart,\n}: UseViewportProps = {}) => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [ready, setReady] = useState(false);\n    const pendingFramesRef = useRef<number[]>([]);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hasResolvedRef = useRef(false);\n    const onBeforeStartRef = useRef(onBeforeStart);\n\n    useEffect(() => {\n        onBeforeStartRef.current = onBeforeStart;\n    }, [onBeforeStart]);\n\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n            };\n        }\n\n        handleWindowResize();\n        window.addEventListener(\"resize\", handleWindowResize);\n        return () => {\n            window.removeEventListener(\"resize\", handleWindowResize);\n        };\n    }, [handleViewportResize, handleWindowResize]);\n\n    useEffect(() => {\n        const scheduleFrame = (fn: FrameRequestCallback) => {\n            pendingFramesRef.current.push(requestAnimationFrame(fn));\n        };\n\n        const clearPending = () => {\n            pendingFramesRef.current.forEach((id) => cancelAnimationFrame(id));\n            pendingFramesRef.current = [];\n\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            hasResolvedRef.current = false;\n        };\n\n        const resolve = () => {\n            if (hasResolvedRef.current) {\n                return;\n            }\n            hasResolvedRef.current = true;\n            setReady(true);\n        };\n        // Compare the viewport height across consecutive frames;\n        // once it remains stable for at least 2 frames, trigger the modal animation\n        const waitForStableViewport = () => {\n            let lastHeight =\n                window.visualViewport?.height ?? window.innerHeight;\n            let stableFrames = 0;\n\n            const checkViewportStability = () => {\n                const currentHeight =\n                    window.visualViewport?.height ?? window.innerHeight;\n                // Use a small offset to account for fluctuations in reported height\n                // even when the viewport hasn’t actually changed\n                if (Math.abs(currentHeight - lastHeight) < HEIGHT_OFFSET) {\n                    stableFrames += 1;\n                } else {\n                    stableFrames = 0;\n                    lastHeight = currentHeight;\n                }\n\n                if (stableFrames >= STABLE_FRAMES) {\n                    resolve();\n                    return;\n                }\n\n                scheduleFrame(checkViewportStability);\n            };\n\n            scheduleFrame(checkViewportStability);\n        };\n\n        clearPending();\n        setReady(false);\n\n        if (!enabled) {\n            return clearPending;\n        }\n\n        onBeforeStartRef.current?.();\n\n        if (!window.visualViewport) {\n            scheduleFrame(resolve);\n            return clearPending;\n        }\n\n        waitForStableViewport();\n        timeoutRef.current = setTimeout(resolve, FALLBACK_TIME);\n\n        return clearPending;\n    }, [enabled]);\n\n    return {\n        verticalHeight,\n        ready,\n    };\n};\n"],"names":["useViewport","enabled","onBeforeStart","verticalHeight","setVerticalHeight","useState","ready","setReady","pendingFramesRef","useRef","timeoutRef","hasResolvedRef","onBeforeStartRef","useEffect","current","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","addEventListener","_a","removeEventListener","scheduleFrame","fn","push","requestAnimationFrame","clearPending","forEach","id","cancelAnimationFrame","clearTimeout","resolve","call","lastHeight","_b","stableFrames","checkViewportStability","currentHeight","Math","abs","waitForStableViewport","setTimeout"],"mappings":"6EAEA,MAUaA,EAAc,EACvBC,WAAU,EACVC,iBACkB,CAAA,KAClB,MAAOC,EAAgBC,GAAqBC,KACrCC,EAAOC,GAAYF,GAAS,GAC7BG,EAAmBC,EAAiB,IACpCC,EAAaD,EAA6C,MAC1DE,EAAiBF,GAAO,GACxBG,EAAmBH,EAAOP,GAEhCW,GAAU,KACND,EAAiBE,QAAUZ,CAAa,GACzC,CAACA,IAEJ,MAAMa,EAAqBC,GAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCf,EAAkBa,EAAkB,GACrC,IAEGG,EAAuBJ,GAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDlB,EAAkBa,EACtB,IACD,IAqGH,OAnGAJ,GAAU,IAIFK,OAAOG,gBACPD,IACAF,OAAOG,eAAeE,iBAClB,SACAH,GAEG,WACkB,QAArBI,EAAAN,OAAOG,sBAAc,IAAAG,GAAAA,EAAEC,oBACnB,SACAL,EACH,IAITL,IACAG,OAAOK,iBAAiB,SAAUR,GAC3B,KACHG,OAAOO,oBAAoB,SAAUV,EAAmB,IAE7D,CAACK,EAAsBL,IAE1BF,GAAU,WACN,MAAMa,EAAiBC,IACnBnB,EAAiBM,QAAQc,KAAKC,sBAAsBF,GAAI,EAGtDG,EAAe,KACjBtB,EAAiBM,QAAQiB,SAASC,GAAOC,qBAAqBD,KAC9DxB,EAAiBM,QAAU,GAEA,OAAvBJ,EAAWI,UACXoB,aAAaxB,EAAWI,SACxBJ,EAAWI,QAAU,MAGzBH,EAAeG,SAAU,CAAK,EAG5BqB,EAAU,KACRxB,EAAeG,UAGnBH,EAAeG,SAAU,EACzBP,GAAS,GAAK,EAmClB,OAHAuB,IACAvB,GAAS,GAEJN,GAImB,QAAxBuB,EAAAZ,EAAiBE,eAAO,IAAAU,GAAAA,EAAAY,KAAAxB,GAEnBM,OAAOG,gBArCkB,cAC1B,IAAIgB,EAC6B,QAA7BC,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YACxCoB,EAAe,EAEnB,MAAMC,EAAyB,aAC3B,MAAMC,EAC2B,QAA7BH,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YAGxCuB,KAAKC,IAAIF,EAAgBJ,GAjGvB,GAkGFE,GAAgB,GAEhBA,EAAe,EACfF,EAAaI,GAGbF,GAzGE,EA0GFJ,IAIJT,EAAcc,EAAuB,EAGzCd,EAAcc,EAAuB,EAiBzCI,GACAlC,EAAWI,QAAU+B,WAAWV,EAhIlB,KAkIPL,IAPHJ,EAAcS,GACPL,IAPAA,CAaQ,GACpB,CAAC7B,IAEG,CACHE,iBACAG,QACH"}

package/shared/standalone-date-input/standalone-date-input.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import a,{useState as o,useRef as l,useEffect as u,useImperativeHandle as i}from"react";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import{DateInputHelper as c}from"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as d}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useStateRef as s}from"../../util/use-state-ref.js";import{InputSection as p,InputContainer as m,DayInputSizer as h,DayInput as f,Divider as v,MonthInputSizer as g,MonthInput as y,YearInputSizer as b,YearInput as Y,Placeholder as x}from"./standalone-date-input.style.js";n.extend(r);const $=({disabled:r,readOnly:a,names:$,value:j,focused:D,hoverValue:M,placeholder:C,label:k,onChange:w,onFocus:B,onBlur:F,hideInputKeyboard:I,inputLabels:V=["Date","Month","Year"]},L)=>{const O=I?"none":"numeric",[E,K,S]=s(""),[P,R,z]=s(""),[T,q,A]=s(""),[G,H]=o("none"),[J,N]=o(!1),Q=l(null),U=l(null),W=l(null),X=l(null),[Z,_,ee]=le(M);u((()=>{var e;const[t="",n="",r=""]=le(j);K(t),R(n),q(r),t||n||r||!Q.current||!Q.current.contains(document.activeElement)||null===(e=U.current)||void 0===e||e.focus()}),[j]),u((()=>{var e;D||H("none"),D&&(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))}),[D]),i(L,(()=>({ref:Q,resetPlaceholder(){N(!1)},resetInput(){const[e="",t="",n=""]=le(j);K(e),R(t),q(n)},focusYearRef(){var e;null===(e=X.current)||void 0===e||e.focus()}})),[K,R,q,j]);const te=e=>{var t;e.preventDefault(),null===(t=U.current)||void 0===t||t.focus()},ne=e=>{e.target.select();const t=e.target.name;H(t)},re=e=>{const[t,r,a]=$,o={[t]:S.current,[r]:z.current,[a]:A.current},l=e.target.name,u=o[l],i=l!==a?d.padValue(u,!0):u;switch(l){case t:o[t]=i,K(i);break;case r:o[r]=i,R(i)}const c=`${o[a]}-${o[r]}-${o[t]}`,s=n(c,"YYYY-MM-DD",!0).isValid(),p=!o[t]&&!o[r]&&!o[a];s&&u!==i&&w(c),Q.current&&!Q.current.contains(e.relatedTarget)&&(H("none"),null==F||F(p||s))},ae=e=>{var t,r;if(M)return;const a=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:E,month:P,year:T};switch(a){case $[0]:l.day=o,K(o),2===o.length&&(null===(t=W.current)||void 0===t||t.focus());break;case $[1]:l.month=o,R(o),2===o.length&&(null===(r=X.current)||void 0===r||r.focus());break;case $[2]:l.year=o,q(o)}if(!l.day&&!l.month&&!l.year)return void w("");const u=`${l.year}-${l.month}-${l.day}`;n(u,"YYYY-MM-DD",!0).isValid()&&w(u)},oe=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(G===$[1]&&0===P.length&&(null===(t=U.current)||void 0===t||t.focus()),G===$[2]&&0===T.length&&(null===(n=W.current)||void 0===n||n.focus()))};function le(e){if(e){const t=c.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const r=n(t,"YYYY-MM-DD",!0);return[d.padValue(r.date().toString()),d.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e(p,{role:"group","aria-label":k,onClick:()=>{var e;r||a||(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))},onFocus:e=>{r||(N(!0),D||null==B||B(e))},children:[e(m,{ref:Q,$hover:!!M,children:[t(h,{children:t(f,{ref:U,name:$[0],maxLength:2,value:null!=Z?Z:E,onFocus:ne,onBlur:re,onChange:ae,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${$[0]}-input`,"aria-label":V[0],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==$[0]||a?"DD":""})}),t(v,{$inactive:0===E.length,children:"/"}),t(g,{children:t(y,{ref:W,name:$[1],maxLength:2,value:null!=_?_:P,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${$[1]}-input`,"aria-label":V[1],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==$[1]||a?"MM":""})}),t(v,{$inactive:0===P.length,children:"/"}),t(b,{children:t(Y,{ref:X,name:$[2],maxLength:4,value:null!=ee?ee:T,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{4}","data-testid":`${$[2]}-input`,"aria-label":V[2],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==$[2]||a?"YYYY":""})})]}),(()=>{if(!j&&!a&&C)return t(x,{$hide:J,$disabled:r,onMouseDown:te,children:C})})()]})},j=a.forwardRef($);export{$ as Component,j as StandaloneDateInput};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import a,{useState as o,useRef as l,useEffect as u,useImperativeHandle as i}from"react";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import{DateInputHelper as c}from"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as d}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useStateRef as s}from"../../util/use-state-ref.js";import{InputSection as p,InputContainer as m,DayInputSizer as h,DayInput as f,Divider as v,MonthInputSizer as g,MonthInput as y,YearInputSizer as b,YearInput as Y,Placeholder as $}from"./standalone-date-input.style.js";n.extend(r);const x=({disabled:r,readOnly:a,names:x,value:j,focused:D,hoverValue:M,placeholder:C,label:k,onChange:w,onFocus:B,onBlur:F,hideInputKeyboard:I,inputLabels:V=["Date","Month","Year"]},L)=>{const O=I?"none":"numeric",[E,K,S]=s(""),[P,R,z]=s(""),[T,q,A]=s(""),[G,H]=o("none"),[J,N]=o(!1),Q=l(null),U=l(null),W=l(null),X=l(null),[Z,_,ee]=le(M);u((()=>{var e;const[t="",n="",r=""]=le(j);K(t),R(n),q(r),t||n||r||!Q.current||!Q.current.contains(document.activeElement)||null===(e=U.current)||void 0===e||e.focus()}),[j]),u((()=>{var e;D||H("none"),D&&(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))}),[D]),i(L,(()=>({ref:Q,resetPlaceholder(){N(!1)},resetInput(){const[e="",t="",n=""]=le(j);K(e),R(t),q(n)},focusYearRef(){var e;null===(e=X.current)||void 0===e||e.focus()}})),[K,R,q,j]);const te=e=>{var t;e.preventDefault(),null===(t=U.current)||void 0===t||t.focus()},ne=e=>{e.target.select();const t=e.target.name;H(t)},re=e=>{const[t,r,a]=x,o={[t]:S.current,[r]:z.current,[a]:A.current},l=e.target.name,u=o[l],i=l!==a?d.padValue(u,!0):u;switch(l){case t:o[t]=i,K(i);break;case r:o[r]=i,R(i)}const c=`${o[a]}-${o[r]}-${o[t]}`,s=n(c,"YYYY-MM-DD",!0).isValid(),p=!o[t]&&!o[r]&&!o[a];s&&u!==i&&w(c),Q.current&&!Q.current.contains(e.relatedTarget)&&(H("none"),null==F||F(p||s))},ae=e=>{var t,r;if(M)return;const a=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:E,month:P,year:T};switch(a){case x[0]:l.day=o,K(o),2===o.length&&(null===(t=W.current)||void 0===t||t.focus());break;case x[1]:l.month=o,R(o),2===o.length&&(null===(r=X.current)||void 0===r||r.focus());break;case x[2]:l.year=o,q(o)}if(!l.day&&!l.month&&!l.year)return void w("");const u=`${l.year}-${l.month}-${l.day}`;n(u,"YYYY-MM-DD",!0).isValid()&&w(u)},oe=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(G===x[1]&&0===P.length&&(null===(t=U.current)||void 0===t||t.focus()),G===x[2]&&0===T.length&&(null===(n=W.current)||void 0===n||n.focus()))};function le(e){if(e){const t=c.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const r=n(t,"YYYY-MM-DD",!0);return[d.padValue(r.date().toString()),d.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e(p,{role:"group","aria-label":k,onClick:()=>{var e;r||a||(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))},onFocus:e=>{r||(N(!0),D||null==B||B(e))},children:[e(m,{ref:Q,$hover:!!M,children:[t(h,{children:t(f,{ref:U,name:x[0],maxLength:2,value:null!=Z?Z:E,onFocus:ne,onBlur:re,onChange:ae,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${x[0]}-input`,"aria-label":V[0],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==x[0]||a?"DD":""})}),t(v,{$inactive:0===E.length,$disabled:r,children:"/"}),t(g,{children:t(y,{ref:W,name:x[1],maxLength:2,value:null!=_?_:P,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${x[1]}-input`,"aria-label":V[1],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==x[1]||a?"MM":""})}),t(v,{$inactive:0===P.length,$disabled:r,children:"/"}),t(b,{children:t(Y,{ref:X,name:x[2],maxLength:4,value:null!=ee?ee:T,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{4}","data-testid":`${x[2]}-input`,"aria-label":V[2],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==x[2]||a?"YYYY":""})})]}),(()=>{if(!j&&!a&&C)return t($,{$hide:J,$disabled:r,onMouseDown:te,children:C})})()]})},j=a.forwardRef(x);export{x as Component,j as StandaloneDateInput};
 //# sourceMappingURL=standalone-date-input.js.map

package/shared/standalone-date-input/standalone-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n    DayInput,\n    DayInputSizer,\n    Divider,\n    InputContainer,\n    InputSection,\n    MonthInput,\n    MonthInputSizer,\n    Placeholder,\n    YearInput,\n    YearInputSizer,\n} from \"./standalone-date-input.style\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <Placeholder\n                $hide={hidePlaceholder}\n                $disabled={disabled}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </Placeholder>\n        );\n    };\n\n    return (\n        <InputSection\n            role=\"group\"\n            aria-label={label}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <InputContainer ref={nodeRef} $hover={!!hoverValue}>\n                <DayInputSizer>\n                    <DayInput\n                        ref={dayInputRef}\n                        name={names[0]}\n                        maxLength={2}\n                        value={hoverDayValue ?? dayValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[0]}-input`}\n                        aria-label={inputLabels[0]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                        }\n                    />\n                </DayInputSizer>\n                <Divider $inactive={dayValue.length === 0}>/</Divider>\n                <MonthInputSizer>\n                    <MonthInput\n                        ref={monthInputRef}\n                        name={names[1]}\n                        maxLength={2}\n                        value={hoverMonthValue ?? monthValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[1]}-input`}\n                        aria-label={inputLabels[1]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                        }\n                    />\n                </MonthInputSizer>\n                <Divider $inactive={monthValue.length === 0}>/</Divider>\n                <YearInputSizer>\n                    <YearInput\n                        ref={yearInputRef}\n                        name={names[2]}\n                        maxLength={4}\n                        value={hoverYearValue ?? yearValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{4}\"\n                        data-testid={`${names[2]}-input`}\n                        aria-label={inputLabels[2]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                        }\n                    />\n                </YearInputSizer>\n            </InputContainer>\n            {renderPlaceholder()}\n        </InputSection>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","InputSection","role","onClick","children","InputContainer","$hover","_jsx","DayInputSizer","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$inactive","MonthInputSizer","MonthInput","onKeyDown","YearInputSizer","YearInput","Placeholder","$hide","$disabled","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n    DayInput,\n    DayInputSizer,\n    Divider,\n    InputContainer,\n    InputSection,\n    MonthInput,\n    MonthInputSizer,\n    Placeholder,\n    YearInput,\n    YearInputSizer,\n} from \"./standalone-date-input.style\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <Placeholder\n                $hide={hidePlaceholder}\n                $disabled={disabled}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </Placeholder>\n        );\n    };\n\n    return (\n        <InputSection\n            role=\"group\"\n            aria-label={label}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <InputContainer ref={nodeRef} $hover={!!hoverValue}>\n                <DayInputSizer>\n                    <DayInput\n                        ref={dayInputRef}\n                        name={names[0]}\n                        maxLength={2}\n                        value={hoverDayValue ?? dayValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[0]}-input`}\n                        aria-label={inputLabels[0]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                        }\n                    />\n                </DayInputSizer>\n                <Divider $inactive={dayValue.length === 0} $disabled={disabled}>\n                    /\n                </Divider>\n                <MonthInputSizer>\n                    <MonthInput\n                        ref={monthInputRef}\n                        name={names[1]}\n                        maxLength={2}\n                        value={hoverMonthValue ?? monthValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[1]}-input`}\n                        aria-label={inputLabels[1]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                        }\n                    />\n                </MonthInputSizer>\n                <Divider\n                    $inactive={monthValue.length === 0}\n                    $disabled={disabled}\n                >\n                    /\n                </Divider>\n                <YearInputSizer>\n                    <YearInput\n                        ref={yearInputRef}\n                        name={names[2]}\n                        maxLength={4}\n                        value={hoverYearValue ?? yearValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{4}\"\n                        data-testid={`${names[2]}-input`}\n                        aria-label={inputLabels[2]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                        }\n                    />\n                </YearInputSizer>\n            </InputContainer>\n            {renderPlaceholder()}\n        </InputSection>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","InputSection","role","onClick","children","InputContainer","$hover","_jsx","DayInputSizer","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$disabled","MonthInputSizer","MonthInput","onKeyDown","$inactive","YearInputSizer","YearInput","Placeholder","$hide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}

package/shared/standalone-date-input/standalone-date-input.style.d.ts

@@ -4,6 +4,7 @@ interface PlaceholderStyleProps {
 }
 interface DividerStyleProps {
     $inactive?: boolean;
+    $disabled?: boolean | undefined;
 }
 interface InputContainerStyleProps {
     $hover?: boolean;
@@ -124,6 +125,6 @@ export declare const YearInput: import("styled-components/dist/types").IStyledCo
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, never>>> & string;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$inactive"> & DividerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$inactive"> & DividerStyleProps, never>>> & string;
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DividerStyleProps> & DividerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DividerStyleProps> & DividerStyleProps, never>>> & string;
 export declare const Placeholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof PlaceholderStyleProps> & PlaceholderStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof PlaceholderStyleProps> & PlaceholderStyleProps, never>>> & string;
 export {};

package/shared/standalone-date-input/standalone-date-input.style.js

@@ -1,17 +1,17 @@
-import e,{css as t}from"styled-components";import{Spacing as i,Colour as n,Font as o}from"../../theme/index.js";import{BasicInput as r}from"../input-wrapper/input-wrapper.js";const a=e.div`
+import e,{css as t}from"styled-components";import{Spacing as i,Colour as o,Font as r}from"../../theme/index.js";import{BasicInput as n}from"../input-wrapper/input-wrapper.js";const l=e.div`
     display: flex;
     align-items: center;
     position: relative;
 
     flex: 1;
-`,l=e.div`
+`,a=e.div`
     display: flex;
     align-items: center;
     gap: ${i["spacing-4"]};
 
     ${e=>{if(e.$hover)return t`
                 ${b}, ${f} {
-                    color: ${n["text-subtler"]};
+                    color: ${o["text-subtler"]};
                 }
             `}}
 `,s=e.span`
@@ -19,16 +19,16 @@ import e,{css as t}from"styled-components";import{Spacing as i,Colour as n,Font
     position: relative;
 
     &::after {
-        ${o["body-baseline-regular"]}
+        ${r["body-baseline-regular"]}
         visibility: hidden;
         pointer-events: none;
         white-space: pre;
     }
-`,p=e(s)`
+`,d=e(s)`
     &::after {
         content: "DD";
     }
-`,d=e(s)`
+`,p=e(s)`
     &::after {
         content: "MM";
     }
@@ -36,20 +36,23 @@ import e,{css as t}from"styled-components";import{Spacing as i,Colour as n,Font
     &::after {
         content: "YYYY";
     }
-`,b=e(r)`
+`,b=e(n)`
     background: transparent;
     text-align: center;
     position: absolute;
     inset: 0;
 `,$=e(b)``,g=e(b)``,u=e(b)``,f=e.span`
-    ${o["body-baseline-regular"]}
-    ${e=>{if(e.$inactive)return t`
-                color: ${n.text};
-            `}}
-`,m=e.div`
-    ${o["body-baseline-regular"]}
-    background-color: ${n.bg};
-    color: ${n["text-subtler"]};
+    ${r["body-baseline-regular"]}
+    color: ${o.text};
+    ${e=>e.$disabled?t`
+                color: ${o["text-disabled"]};
+            `:e.$inactive?t`
+                color: ${o["text-subtler"]};
+            `:void 0}
+`,x=e.div`
+    ${r["body-baseline-regular"]}
+    background-color: ${o.bg};
+    color: ${o["text-subtler"]};
     position: absolute;
     display: flex;
     align-items: center;
@@ -57,10 +60,10 @@ import e,{css as t}from"styled-components";import{Spacing as i,Colour as n,Font
     height: 100%;
 
     ${e=>e.$disabled?t`
-                background-color: ${n["bg-disabled"]};
+                background-color: ${o["bg-disabled"]};
                 cursor: not-allowed;
             `:e.$hide?t`
                 display: none;
             `:void 0}
-`;export{$ as DayInput,p as DayInputSizer,f as Divider,l as InputContainer,a as InputSection,g as MonthInput,d as MonthInputSizer,m as Placeholder,u as YearInput,c as YearInputSizer};
+`;export{$ as DayInput,d as DayInputSizer,f as Divider,a as InputContainer,l as InputSection,g as MonthInput,p as MonthInputSizer,x as Placeholder,u as YearInput,c as YearInputSizer};
 //# sourceMappingURL=standalone-date-input.style.js.map

package/shared/standalone-date-input/standalone-date-input.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone-date-input.style.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font, Spacing } from \"../../theme\";\nimport { BasicInput } from \"../input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface PlaceholderStyleProps {\n    $hide?: boolean;\n    $disabled?: boolean;\n}\n\ninterface DividerStyleProps {\n    $inactive?: boolean;\n}\n\ninterface InputContainerStyleProps {\n    $hover?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const InputSection = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const InputContainer = styled.div<InputContainerStyleProps>`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${(props) => {\n        if (props.$hover) {\n            return css`\n                ${BaseInput}, ${Divider} {\n                    color: ${Colour[\"text-subtler\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nconst InputSizerBase = styled.span`\n    display: inline-block;\n    position: relative;\n\n    &::after {\n        ${Font[\"body-baseline-regular\"]}\n        visibility: hidden;\n        pointer-events: none;\n        white-space: pre;\n    }\n`;\n\nexport const DayInputSizer = styled(InputSizerBase)`\n    &::after {\n        content: \"DD\";\n    }\n`;\n\nexport const MonthInputSizer = styled(InputSizerBase)`\n    &::after {\n        content: \"MM\";\n    }\n`;\n\nexport const YearInputSizer = styled(InputSizerBase)`\n    &::after {\n        content: \"YYYY\";\n    }\n`;\n\nconst BaseInput = styled(BasicInput)`\n    background: transparent;\n    text-align: center;\n    position: absolute;\n    inset: 0;\n`;\n\nexport const DayInput = styled(BaseInput)``;\nexport const MonthInput = styled(BaseInput)``;\nexport const YearInput = styled(BaseInput)``;\n\nexport const Divider = styled.span<DividerStyleProps>`\n    ${Font[\"body-baseline-regular\"]}\n    ${(props) => {\n        if (props.$inactive) {\n            return css`\n                color: ${Colour[\"text\"]};\n            `;\n        }\n    }}\n`;\n\nexport const Placeholder = styled.div<PlaceholderStyleProps>`\n    ${Font[\"body-baseline-regular\"]}\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                background-color: ${Colour[\"bg-disabled\"]};\n                cursor: not-allowed;\n            `;\n        } else if (props.$hide) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n"],"names":["InputSection","styled","div","InputContainer","Spacing","props","$hover","css","BaseInput","Divider","Colour","InputSizerBase","span","Font","DayInputSizer","MonthInputSizer","YearInputSizer","BasicInput","DayInput","MonthInput","YearInput","$inactive","Placeholder","$disabled","$hide"],"mappings":"+KAyBO,MAAMA,EAAeC,EAAOC,GAAG;;;;;;EAQzBC,EAAiBF,EAAOC,GAA6B;;;WAGvDE,EAAQ;;MAEZC,IACC,GAAIA,EAAMC,OACN,OAAOC,CAAG;kBACJC,MAAcC;6BACHC,EAAO;;aAG5B;EAIFC,EAAiBV,EAAOW,IAAI;;;;;UAKxBC,EAAK;;;;;EAOFC,EAAgBb,EAAOU,EAAe;;;;EAMtCI,EAAkBd,EAAOU,EAAe;;;;EAMxCK,EAAiBf,EAAOU,EAAe;;;;EAM9CH,EAAYP,EAAOgB,EAAW;;;;;EAOvBC,EAAWjB,EAAOO,EAAU,GAC5BW,EAAalB,EAAOO,EAAU,GAC9BY,EAAYnB,EAAOO,EAAU,GAE7BC,EAAUR,EAAOW,IAAuB;MAC/CC,EAAK;MACJR,IACC,GAAIA,EAAMgB,UACN,OAAOd,CAAG;yBACGG,EAAa;aAE9B;EAIKY,EAAcrB,EAAOC,GAA0B;MACtDW,EAAK;wBACaH,EAAW;aACtBA,EAAO;;;;;;;MAObL,GACKA,EAAMkB,UACChB,CAAG;oCACcG,EAAO;;cAGxBL,EAAMmB,MACNjB,CAAG;;mBADP;"}
+{"version":3,"file":"standalone-date-input.style.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font, Spacing } from \"../../theme\";\nimport { BasicInput } from \"../input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface PlaceholderStyleProps {\n    $hide?: boolean;\n    $disabled?: boolean;\n}\n\ninterface DividerStyleProps {\n    $inactive?: boolean;\n    $disabled?: boolean | undefined;\n}\n\ninterface InputContainerStyleProps {\n    $hover?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const InputSection = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const InputContainer = styled.div<InputContainerStyleProps>`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${(props) => {\n        if (props.$hover) {\n            return css`\n                ${BaseInput}, ${Divider} {\n                    color: ${Colour[\"text-subtler\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nconst InputSizerBase = styled.span`\n    display: inline-block;\n    position: relative;\n\n    &::after {\n        ${Font[\"body-baseline-regular\"]}\n        visibility: hidden;\n        pointer-events: none;\n        white-space: pre;\n    }\n`;\n\nexport const DayInputSizer = styled(InputSizerBase)`\n    &::after {\n        content: \"DD\";\n    }\n`;\n\nexport const MonthInputSizer = styled(InputSizerBase)`\n    &::after {\n        content: \"MM\";\n    }\n`;\n\nexport const YearInputSizer = styled(InputSizerBase)`\n    &::after {\n        content: \"YYYY\";\n    }\n`;\n\nconst BaseInput = styled(BasicInput)`\n    background: transparent;\n    text-align: center;\n    position: absolute;\n    inset: 0;\n`;\n\nexport const DayInput = styled(BaseInput)``;\nexport const MonthInput = styled(BaseInput)``;\nexport const YearInput = styled(BaseInput)``;\n\nexport const Divider = styled.span<DividerStyleProps>`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n\n        if (props.$inactive) {\n            return css`\n                color: ${Colour[\"text-subtler\"]};\n            `;\n        }\n    }}\n`;\n\nexport const Placeholder = styled.div<PlaceholderStyleProps>`\n    ${Font[\"body-baseline-regular\"]}\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                background-color: ${Colour[\"bg-disabled\"]};\n                cursor: not-allowed;\n            `;\n        } else if (props.$hide) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n"],"names":["InputSection","styled","div","InputContainer","Spacing","props","$hover","css","BaseInput","Divider","Colour","InputSizerBase","span","Font","DayInputSizer","MonthInputSizer","YearInputSizer","BasicInput","DayInput","MonthInput","YearInput","$disabled","$inactive","Placeholder","$hide"],"mappings":"+KA0BO,MAAMA,EAAeC,EAAOC,GAAG;;;;;;EAQzBC,EAAiBF,EAAOC,GAA6B;;;WAGvDE,EAAQ;;MAEZC,IACC,GAAIA,EAAMC,OACN,OAAOC,CAAG;kBACJC,MAAcC;6BACHC,EAAO;;aAG5B;EAIFC,EAAiBV,EAAOW,IAAI;;;;;UAKxBC,EAAK;;;;;EAOFC,EAAgBb,EAAOU,EAAe;;;;EAMtCI,EAAkBd,EAAOU,EAAe;;;;EAMxCK,EAAiBf,EAAOU,EAAe;;;;EAM9CH,EAAYP,EAAOgB,EAAW;;;;;EAOvBC,EAAWjB,EAAOO,EAAU,GAC5BW,EAAalB,EAAOO,EAAU,GAC9BY,EAAYnB,EAAOO,EAAU,GAE7BC,EAAUR,EAAOW,IAAuB;MAC/CC,EAAK;aACEH,EAAa;MACnBL,GACKA,EAAMgB,UACCd,CAAG;yBACGG,EAAO;cAIpBL,EAAMiB,UACCf,CAAG;yBACGG,EAAO;mBAFxB;EAQKa,EAActB,EAAOC,GAA0B;MACtDW,EAAK;wBACaH,EAAW;aACtBA,EAAO;;;;;;;MAObL,GACKA,EAAMgB,UACCd,CAAG;oCACcG,EAAO;;cAGxBL,EAAMmB,MACNjB,CAAG;;mBADP;"}

package/theme/colour-primitive/specs/careercompass-colour-set.d.ts

@@ -0,0 +1,3 @@
+import { PrimitiveColourSet } from "../../types";
+export declare const CareerCompassColourSet: PrimitiveColourSet;
+export default CareerCompassColourSet;

package/theme/colour-primitive/specs/careercompass-colour-set.js

@@ -0,0 +1,2 @@
+const r={white:"#FFFFFF",black:"#000000","brand-10":"#001731","brand-20":"#002752","brand-30":"#003874","brand-40":"#004D9F","brand-50":"#1768BE","brand-60":"#3C91EC","brand-70":"#6CB4FF","brand-80":"#A5CDFF","brand-90":"#CFE1FE","brand-95":"#E8F0FE","brand-100":"#F7F9FF","primary-10":"#001731","primary-20":"#002752","primary-30":"#003874","primary-40":"#004D9F","primary-50":"#1768BE","primary-60":"#3C91EC","primary-70":"#6CB4FF","primary-80":"#A5CDFF","primary-90":"#CFE1FE","primary-95":"#E8F0FE","primary-100":"#F7F9FF","secondary-10":"#001A19","secondary-20":"#002D2B","secondary-30":"#00413D","secondary-40":"#005954","secondary-50":"#00756F","secondary-60":"#03A098","secondary-70":"#55BFBA","secondary-80":"#92D6D2","secondary-90":"#BFE7E5","secondary-95":"#DDF2F1","secondary-100":"#F4FBFA","neutral-10":"#161616","neutral-20":"#282828","neutral-30":"#393939","neutral-40":"#4E4E4E","neutral-50":"#686868","neutral-60":"#8E8E8E","neutral-70":"#AFAFB0","neutral-80":"#C7CACA","neutral-90":"#DDE1E2","neutral-95":"#EDEFEF","neutral-100":"#F9F9F9","success-10":"#081A0F","success-20":"#0E2D1B","success-30":"#154126","success-40":"#1C5A34","success-50":"#257645","success-60":"#44A068","success-70":"#64C189","success-80":"#80DCA5","success-90":"#B4ECCB","success-95":"#D5F6E2","success-100":"#EFFCF4","warning-10":"#221302","warning-20":"#3B2204","warning-30":"#543106","warning-40":"#744408","warning-50":"#98590C","warning-60":"#D07A13","warning-70":"#E4A244","warning-80":"#F5C26C","warning-90":"#FADBA6","warning-95":"#FCECD4","warning-100":"#FDF7F0","error-10":"#330505","error-20":"#550808","error-30":"#750C0C","error-40":"#9E130F","error-50":"#CB2213","error-60":"#DE6C6C","error-70":"#E89B9B","error-80":"#EFBEBE","error-90":"#F5D9D9","error-95":"#F9ECEC","error-100":"#FCF7F7","info-10":"#021824","info-20":"#032B3F","info-30":"#053D59","info-40":"#06547B","info-50":"#176E9B","info-60":"#5296BE","info-70":"#82B5DA","info-80":"#ACCFE7","info-90":"#CCE3F1","info-95":"#E3F1F8","info-100":"#F4FAFD","primary-inverse":"#FEAB10"};export{r as CareerCompassColourSet};
+//# sourceMappingURL=careercompass-colour-set.js.map

package/theme/colour-primitive/specs/careercompass-colour-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"careercompass-colour-set.js","sources":["../../../../src/theme/colour-primitive/specs/careercompass-colour-set.ts"],"sourcesContent":["import { PrimitiveColourSet } from \"../../types\";\n\nexport const CareerCompassColourSet: PrimitiveColourSet = {\n    white: \"#FFFFFF\",\n    black: \"#000000\",\n    \"brand-10\": \"#001731\",\n    \"brand-20\": \"#002752\",\n    \"brand-30\": \"#003874\",\n    \"brand-40\": \"#004D9F\",\n    \"brand-50\": \"#1768BE\",\n    \"brand-60\": \"#3C91EC\",\n    \"brand-70\": \"#6CB4FF\",\n    \"brand-80\": \"#A5CDFF\",\n    \"brand-90\": \"#CFE1FE\",\n    \"brand-95\": \"#E8F0FE\",\n    \"brand-100\": \"#F7F9FF\",\n\n    \"primary-10\": \"#001731\",\n    \"primary-20\": \"#002752\",\n    \"primary-30\": \"#003874\",\n    \"primary-40\": \"#004D9F\",\n    \"primary-50\": \"#1768BE\",\n    \"primary-60\": \"#3C91EC\",\n    \"primary-70\": \"#6CB4FF\",\n    \"primary-80\": \"#A5CDFF\",\n    \"primary-90\": \"#CFE1FE\",\n    \"primary-95\": \"#E8F0FE\",\n    \"primary-100\": \"#F7F9FF\",\n\n    \"secondary-10\": \"#001A19\",\n    \"secondary-20\": \"#002D2B\",\n    \"secondary-30\": \"#00413D\",\n    \"secondary-40\": \"#005954\",\n    \"secondary-50\": \"#00756F\",\n    \"secondary-60\": \"#03A098\",\n    \"secondary-70\": \"#55BFBA\",\n    \"secondary-80\": \"#92D6D2\",\n    \"secondary-90\": \"#BFE7E5\",\n    \"secondary-95\": \"#DDF2F1\",\n    \"secondary-100\": \"#F4FBFA\",\n\n    \"neutral-10\": \"#161616\",\n    \"neutral-20\": \"#282828\",\n    \"neutral-30\": \"#393939\",\n    \"neutral-40\": \"#4E4E4E\",\n    \"neutral-50\": \"#686868\",\n    \"neutral-60\": \"#8E8E8E\",\n    \"neutral-70\": \"#AFAFB0\",\n    \"neutral-80\": \"#C7CACA\",\n    \"neutral-90\": \"#DDE1E2\",\n    \"neutral-95\": \"#EDEFEF\",\n    \"neutral-100\": \"#F9F9F9\",\n\n    \"success-10\": \"#081A0F\",\n    \"success-20\": \"#0E2D1B\",\n    \"success-30\": \"#154126\",\n    \"success-40\": \"#1C5A34\",\n    \"success-50\": \"#257645\",\n    \"success-60\": \"#44A068\",\n    \"success-70\": \"#64C189\",\n    \"success-80\": \"#80DCA5\",\n    \"success-90\": \"#B4ECCB\",\n    \"success-95\": \"#D5F6E2\",\n    \"success-100\": \"#EFFCF4\",\n\n    \"warning-10\": \"#221302\",\n    \"warning-20\": \"#3B2204\",\n    \"warning-30\": \"#543106\",\n    \"warning-40\": \"#744408\",\n    \"warning-50\": \"#98590C\",\n    \"warning-60\": \"#D07A13\",\n    \"warning-70\": \"#E4A244\",\n    \"warning-80\": \"#F5C26C\",\n    \"warning-90\": \"#FADBA6\",\n    \"warning-95\": \"#FCECD4\",\n    \"warning-100\": \"#FDF7F0\",\n\n    \"error-10\": \"#330505\",\n    \"error-20\": \"#550808\",\n    \"error-30\": \"#750C0C\",\n    \"error-40\": \"#9E130F\",\n    \"error-50\": \"#CB2213\",\n    \"error-60\": \"#DE6C6C\",\n    \"error-70\": \"#E89B9B\",\n    \"error-80\": \"#EFBEBE\",\n    \"error-90\": \"#F5D9D9\",\n    \"error-95\": \"#F9ECEC\",\n    \"error-100\": \"#FCF7F7\",\n\n    \"info-10\": \"#021824\",\n    \"info-20\": \"#032B3F\",\n    \"info-30\": \"#053D59\",\n    \"info-40\": \"#06547B\",\n    \"info-50\": \"#176E9B\",\n    \"info-60\": \"#5296BE\",\n    \"info-70\": \"#82B5DA\",\n    \"info-80\": \"#ACCFE7\",\n    \"info-90\": \"#CCE3F1\",\n    \"info-95\": \"#E3F1F8\",\n    \"info-100\": \"#F4FAFD\",\n\n    \"primary-inverse\": \"#FEAB10\",\n};\n\nexport default CareerCompassColourSet;\n"],"names":["CareerCompassColourSet","white","black"],"mappings":"AAEO,MAAMA,EAA6C,CACtDC,MAAO,UACPC,MAAO,UACP,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,YAAa,UAEb,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UAEf,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,eAAgB,UAChB,gBAAiB,UAEjB,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UAEf,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UAEf,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,cAAe,UAEf,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,YAAa,UAEb,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,WAAY,UAEZ,kBAAmB"}

package/theme/colour-primitive/theme-helper.js

@@ -1,2 +1,2 @@
-import{getCollection as r,getValue as s}from"../helpers.js";import{BookingSgColourSet as e}from"./specs/bookingsg-colour-set.js";import{CCubeColourSet as o}from"./specs/ccube-colour-set.js";import{LifeSgColourSet as n}from"./specs/lifesg-colour-set.js";import{MyLegacyColourSet as a}from"./specs/mylegacy-colour-set.js";import{OneServiceColourSet as i}from"./specs/oneservice-colour-set.js";import{PAColourSet as c}from"./specs/pa-colour-set.js";import{RBSColourSet as u}from"./specs/rbs-colour-set.js";import{A11yPlaygroundColourSet as l}from"./specs/a11yplayground-colour-set.js";import{SupportGoWhereColourSet as p}from"./specs/supportgowhere-colour-set.js";import{IMDAColourSet as t}from"./specs/imda-colour-set.js";import{SPFColourSet as m}from"./specs/spf-colour-set.js";import{SMGSColourSet as d}from"./specs/smgs-colour-set.js";const y={collections:{lifesg:n,bookingsg:e,rbs:u,mylegacy:a,ccube:o,oneservice:i,pa:c,a11yplayground:l,supportgowhere:p,sgwdigitallobby:p,imda:t,spf:m,smgs:d},defaultValue:"lifesg"},g={collections:{lifesg:n,bookingsg:e,rbs:u,mylegacy:a,ccube:o,oneservice:i,pa:c,a11yplayground:l,supportgowhere:p,sgwdigitallobby:p,imda:t,spf:m,smgs:d},defaultValue:"lifesg"},f=e=>o=>{var n;const a=o.theme,i="dark"===(null==a?void 0:a.colourMode),c=r(i?g:y,null==a?void 0:a.colourScheme),u=i?"primitiveColourDark":"primitiveColour",l=null===(n=null==a?void 0:a.overrides)||void 0===n?void 0:n[u];return l?s(c,e,l):c[e]},b={"brand-10":f("brand-10"),"brand-20":f("brand-20"),"brand-30":f("brand-30"),"brand-40":f("brand-40"),"brand-50":f("brand-50"),"brand-60":f("brand-60"),"brand-70":f("brand-70"),"brand-80":f("brand-80"),"brand-90":f("brand-90"),"brand-95":f("brand-95"),"brand-100":f("brand-100"),"primary-10":f("primary-10"),"primary-20":f("primary-20"),"primary-30":f("primary-30"),"primary-40":f("primary-40"),"primary-50":f("primary-50"),"primary-60":f("primary-60"),"primary-70":f("primary-70"),"primary-80":f("primary-80"),"primary-90":f("primary-90"),"primary-95":f("primary-95"),"primary-100":f("primary-100"),"secondary-10":f("secondary-10"),"secondary-20":f("secondary-20"),"secondary-30":f("secondary-30"),"secondary-40":f("secondary-40"),"secondary-50":f("secondary-50"),"secondary-60":f("secondary-60"),"secondary-70":f("secondary-70"),"secondary-80":f("secondary-80"),"secondary-90":f("secondary-90"),"secondary-95":f("secondary-95"),"secondary-100":f("secondary-100"),"neutral-10":f("neutral-10"),"neutral-20":f("neutral-20"),"neutral-30":f("neutral-30"),"neutral-40":f("neutral-40"),"neutral-50":f("neutral-50"),"neutral-60":f("neutral-60"),"neutral-70":f("neutral-70"),"neutral-80":f("neutral-80"),"neutral-90":f("neutral-90"),"neutral-95":f("neutral-95"),"neutral-100":f("neutral-100"),"success-10":f("success-10"),"success-20":f("success-20"),"success-30":f("success-30"),"success-40":f("success-40"),"success-50":f("success-50"),"success-60":f("success-60"),"success-70":f("success-70"),"success-80":f("success-80"),"success-90":f("success-90"),"success-95":f("success-95"),"success-100":f("success-100"),"warning-10":f("warning-10"),"warning-20":f("warning-20"),"warning-30":f("warning-30"),"warning-40":f("warning-40"),"warning-50":f("warning-50"),"warning-60":f("warning-60"),"warning-70":f("warning-70"),"warning-80":f("warning-80"),"warning-90":f("warning-90"),"warning-95":f("warning-95"),"warning-100":f("warning-100"),"error-10":f("error-10"),"error-20":f("error-20"),"error-30":f("error-30"),"error-40":f("error-40"),"error-50":f("error-50"),"error-60":f("error-60"),"error-70":f("error-70"),"error-80":f("error-80"),"error-90":f("error-90"),"error-95":f("error-95"),"error-100":f("error-100"),"info-10":f("info-10"),"info-20":f("info-20"),"info-30":f("info-30"),"info-40":f("info-40"),"info-50":f("info-50"),"info-60":f("info-60"),"info-70":f("info-70"),"info-80":f("info-80"),"info-90":f("info-90"),"info-95":f("info-95"),"info-100":f("info-100"),white:f("white"),black:f("black"),"primary-inverse":f("primary-inverse")};export{y as ColourSpec,g as DarkColourSpec,b as PrimitiveColour,f as getPrimitiveColour};
+import{getCollection as r,getValue as s}from"../helpers.js";import{BookingSgColourSet as e}from"./specs/bookingsg-colour-set.js";import{CCubeColourSet as o}from"./specs/ccube-colour-set.js";import{LifeSgColourSet as n}from"./specs/lifesg-colour-set.js";import{MyLegacyColourSet as a}from"./specs/mylegacy-colour-set.js";import{OneServiceColourSet as c}from"./specs/oneservice-colour-set.js";import{PAColourSet as i}from"./specs/pa-colour-set.js";import{RBSColourSet as u}from"./specs/rbs-colour-set.js";import{A11yPlaygroundColourSet as l}from"./specs/a11yplayground-colour-set.js";import{SupportGoWhereColourSet as p}from"./specs/supportgowhere-colour-set.js";import{IMDAColourSet as m}from"./specs/imda-colour-set.js";import{SPFColourSet as t}from"./specs/spf-colour-set.js";import{SMGSColourSet as d}from"./specs/smgs-colour-set.js";import{CareerCompassColourSet as y}from"./specs/careercompass-colour-set.js";const g={collections:{lifesg:n,bookingsg:e,rbs:u,mylegacy:a,ccube:o,oneservice:c,pa:i,a11yplayground:l,supportgowhere:p,sgwdigitallobby:p,imda:m,spf:t,careercompass:y,smgs:d},defaultValue:"lifesg"},f={collections:{lifesg:n,bookingsg:e,rbs:u,mylegacy:a,ccube:o,oneservice:c,pa:i,a11yplayground:l,supportgowhere:p,sgwdigitallobby:p,imda:m,spf:t,careercompass:y,smgs:d},defaultValue:"lifesg"},b=e=>o=>{var n;const a=o.theme,c="dark"===(null==a?void 0:a.colourMode),i=r(c?f:g,null==a?void 0:a.colourScheme),u=c?"primitiveColourDark":"primitiveColour",l=null===(n=null==a?void 0:a.overrides)||void 0===n?void 0:n[u];return l?s(i,e,l):i[e]},w={"brand-10":b("brand-10"),"brand-20":b("brand-20"),"brand-30":b("brand-30"),"brand-40":b("brand-40"),"brand-50":b("brand-50"),"brand-60":b("brand-60"),"brand-70":b("brand-70"),"brand-80":b("brand-80"),"brand-90":b("brand-90"),"brand-95":b("brand-95"),"brand-100":b("brand-100"),"primary-10":b("primary-10"),"primary-20":b("primary-20"),"primary-30":b("primary-30"),"primary-40":b("primary-40"),"primary-50":b("primary-50"),"primary-60":b("primary-60"),"primary-70":b("primary-70"),"primary-80":b("primary-80"),"primary-90":b("primary-90"),"primary-95":b("primary-95"),"primary-100":b("primary-100"),"secondary-10":b("secondary-10"),"secondary-20":b("secondary-20"),"secondary-30":b("secondary-30"),"secondary-40":b("secondary-40"),"secondary-50":b("secondary-50"),"secondary-60":b("secondary-60"),"secondary-70":b("secondary-70"),"secondary-80":b("secondary-80"),"secondary-90":b("secondary-90"),"secondary-95":b("secondary-95"),"secondary-100":b("secondary-100"),"neutral-10":b("neutral-10"),"neutral-20":b("neutral-20"),"neutral-30":b("neutral-30"),"neutral-40":b("neutral-40"),"neutral-50":b("neutral-50"),"neutral-60":b("neutral-60"),"neutral-70":b("neutral-70"),"neutral-80":b("neutral-80"),"neutral-90":b("neutral-90"),"neutral-95":b("neutral-95"),"neutral-100":b("neutral-100"),"success-10":b("success-10"),"success-20":b("success-20"),"success-30":b("success-30"),"success-40":b("success-40"),"success-50":b("success-50"),"success-60":b("success-60"),"success-70":b("success-70"),"success-80":b("success-80"),"success-90":b("success-90"),"success-95":b("success-95"),"success-100":b("success-100"),"warning-10":b("warning-10"),"warning-20":b("warning-20"),"warning-30":b("warning-30"),"warning-40":b("warning-40"),"warning-50":b("warning-50"),"warning-60":b("warning-60"),"warning-70":b("warning-70"),"warning-80":b("warning-80"),"warning-90":b("warning-90"),"warning-95":b("warning-95"),"warning-100":b("warning-100"),"error-10":b("error-10"),"error-20":b("error-20"),"error-30":b("error-30"),"error-40":b("error-40"),"error-50":b("error-50"),"error-60":b("error-60"),"error-70":b("error-70"),"error-80":b("error-80"),"error-90":b("error-90"),"error-95":b("error-95"),"error-100":b("error-100"),"info-10":b("info-10"),"info-20":b("info-20"),"info-30":b("info-30"),"info-40":b("info-40"),"info-50":b("info-50"),"info-60":b("info-60"),"info-70":b("info-70"),"info-80":b("info-80"),"info-90":b("info-90"),"info-95":b("info-95"),"info-100":b("info-100"),white:b("white"),black:b("black"),"primary-inverse":b("primary-inverse")};export{g as ColourSpec,f as DarkColourSpec,w as PrimitiveColour,b as getPrimitiveColour};
 //# sourceMappingURL=theme-helper.js.map