npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.6 → 4.0.0-alpha.7 - Mend

@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.7

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

Files changed (684) hide show

package/cjs/modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\n/*\n A full-screen overlay modal with a slide animation.\n \n Use `Modal` to present content that requires the user's immediate attention\n * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.\n \n Sub-components:\n * - `Modal.Box` — a styled content box with an optional close button.\n /\nexport const Modal = Object.assign(Base, {\n /\n A styled content container for use inside `Modal`. Renders an optional\n * close button and stops click events from propagating to the overlay.\n /\n Box,\n});\n\nexport from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"~~2EAYaA~~,EAAQC,OAAOC,OAAOC,QAAM,KAKrCC,EAAAA"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\n// @catalog\n/*\n A full-screen overlay modal with a slide animation.\n \n Use `Modal` to present content that requires the user's immediate attention\n * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.\n \n Sub-components:\n * - `Modal.Box` — a styled content box with an optional close button.\n /\nexport const Modal = Object.assign(Base, {\n /\n A styled content container for use inside `Modal`. Renders an optional\n * close button and stops click events from propagating to the overlay.\n /\n Box,\n});\n\nexport from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"2EAaaA,EAAQC,OAAOC,OAAOC,QAAM,KAKrCC,EAAAA"}

package/cjs/modal-v2/modal-v2.js.map CHANGED Viewed

	@@ -1 +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 clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\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 className,\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 containerRef = useRef<HTMLDivElement>(null);\n const childWithRef =\n children && React.cloneElement(children, { ref: childRef });\n\n useApplyStyle(containerRef, {\n [styles.tokens.container.verticalHeight]:\n verticalHeight == null ? null : `${verticalHeight}px`,\n });\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 <div\n ref={containerRef}\n data-testid={testId}\n data-status={status}\n data-animation-from={animationFrom}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <ModalContext.Provider value={{ onClose }}>\n {isMounted && (\n <FloatingFocusManager\n context={context}\n initialFocus={\n disableInitialFocus ? -1 : refs.floating\n }\n >\n <div className={styles.scrollContainer}>\n <div\n ref={refs.setFloating}\n {...getFloatingProps()}\n role=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n className={styles.modalContainer}\n >\n {childWithRef}\n </div>\n </div>\n </FloatingFocusManager>\n )}\n </ModalContext.Provider>\n </div>\n </Overlay>\n );\n};\n\n/\n A composable modal dialog with slot-based content layout.\n \n Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n \n Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n /\nexport const ModalV2 = Object.assign(Base, {\n /* Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. /\n Card,\n /* Renders an accessible close button that invokes the modal's `onClose` callback. /\n CloseButton,\n /* Container for the body content of the modal card. /\n Content,\n /* Footer area for primary and secondary action buttons. */\n Footer,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer"],"mappings":"gkCAmBA,~~MA6HaA~~,EAAUC,OAAOC,~~QA7HhBC~~,QAAAC,GACVA,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,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,UAAKC,EAAAA,UAAkB1C,GAAUX,SAE5CiD,MAACK,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAAAA,IAACQ,uBAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWiD,EAAAA,gBAAsB5D,SAClCiD,MAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,EAAAA,wBAEVpC,eAOnB,~~GAgByB~~,MAEvCqC,EAAAA,iBAEAC,EAAAA,oBAEAC,EAAAA,eAEAC,EAAAA"}
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 clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\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 className,\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 containerRef = useRef<HTMLDivElement>(null);\n const childWithRef =\n children && React.cloneElement(children, { ref: childRef });\n\n useApplyStyle(containerRef, {\n [styles.tokens.container.verticalHeight]:\n verticalHeight == null ? null : `${verticalHeight}px`,\n });\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 <div\n ref={containerRef}\n data-testid={testId}\n data-status={status}\n data-animation-from={animationFrom}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <ModalContext.Provider value={{ onClose }}>\n {isMounted && (\n <FloatingFocusManager\n context={context}\n initialFocus={\n disableInitialFocus ? -1 : refs.floating\n }\n >\n <div className={styles.scrollContainer}>\n <div\n ref={refs.setFloating}\n {...getFloatingProps()}\n role=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n className={styles.modalContainer}\n >\n {childWithRef}\n </div>\n </div>\n </FloatingFocusManager>\n )}\n </ModalContext.Provider>\n </div>\n </Overlay>\n );\n};\n\n// @catalog\n/\n A composable modal dialog with slot-based content layout.\n \n Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n \n Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n /\nexport const ModalV2 = Object.assign(Base, {\n /* Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. /\n Card,\n /* Renders an accessible close button that invokes the modal's `onClose` callback. /\n CloseButton,\n /* Container for the body content of the modal card. /\n Content,\n /* Footer area for primary and secondary action buttons. */\n Footer,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer"],"mappings":"gkCAmBA,MA8HaA,EAAUC,OAAOC,QA9HhBC,QAAAC,GACVA,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,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,UAAKC,EAAAA,UAAkB1C,GAAUX,SAE5CiD,MAACK,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAAAA,IAACQ,uBAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWiD,EAAAA,gBAAsB5D,SAClCiD,MAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,EAAAA,wBAEVpC,eAOnB,GAiByB,MAEvCqC,EAAAA,iBAEAC,EAAAA,oBAEAC,EAAAA,eAEAC,EAAAA"}

package/cjs/navbar/navbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navbar.js","sources":["../../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n Breakpoint,\n parsePxOrRemValue,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n BrandType,\n DrawerDismissalMethod,\n NavbarActionButtonsProps,\n NavbarButtonProps,\n NavbarDrawerApi,\n NavbarDrawerHandle,\n NavbarProps,\n NavItemCommonProps,\n NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n {\n items,\n className,\n id,\n selectedId,\n compress = false,\n fixed = true,\n resources,\n hideNavElements = false,\n hideNavBranding = false,\n hideLinkIndicator = false,\n drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n actionButtons,\n onItemClick,\n onActionButtonClick,\n onBrandClick,\n masthead = true,\n layout = \"default\",\n headerLabel = \"Main navigation menu\",\n drawerLabel,\n ...otherProps\n }: NavbarProps<T>,\n ref: React.Ref<NavbarDrawerHandle>\n) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [showDrawer, setShowDrawer] = useState<boolean>(false);\n const [showOverlay, setShowOverlay] = useState<boolean>(false);\n const mobileMenuRef = useRef<HTMLButtonElement>(null);\n const isStretch = layout === \"stretch\";\n const elementRef = useRef<HTMLDivElement>(null);\n const theme = useContext(ThemeContext);\n const defaultResource = getDefaultResourceLogo(theme?.theme);\n const tabletWidth = parsePxOrRemValue(\n useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n );\n\n const primary = resources?.primary \|\| defaultResource.primary;\n const secondary = resources?.secondary;\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, NavbarDrawerApi>(\n elementRef.current!,\n {\n dismissDrawer: () => {\n dismissDrawer();\n },\n }\n ),\n [showDrawer]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const dismissDrawer = () => {\n setShowDrawer(false);\n setTimeout(() => {\n setShowOverlay(false);\n }, 550); // For drawer animation to complete + buffer\n };\n\n const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n return (\n showDrawer &&\n blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n );\n };\n\n const hasCollapsibleActionButtons = (\n actionButtons: NavbarActionButtonsProps\n ) => {\n const drawerActionButtons =\n actionButtons.mobile \|\| actionButtons.desktop;\n if (drawerActionButtons) {\n return (\n drawerActionButtons.length &&\n drawerActionButtons.some(\n (actionButton) => !actionButton.uncollapsible\n )\n );\n }\n\n return false;\n };\n\n // =============================================================================\n // EVENT HANDLER\n // =============================================================================\n const handleResize = () => {\n if (window.innerWidth <= tabletWidth && showDrawer) {\n dismissDrawer();\n }\n };\n\n const handleBrandClick = (\n _event: React.MouseEvent<HTMLAnchorElement>,\n type: BrandType\n ) => {\n if (onBrandClick) {\n onBrandClick(type);\n }\n\n if (shouldDismissDrawer(\"brand-click\")) {\n dismissDrawer();\n }\n };\n\n const handleNavItemClick = <K extends T>(\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<K> \| NavItemCommonProps<K>\n ) => {\n if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item);\n }\n\n if (\n NavbarHelper.isNavItemLink(item) &&\n !item.subMenu &&\n shouldDismissDrawer(\"item-click\")\n ) {\n dismissDrawer();\n }\n };\n\n const handleActionButtonClick = (\n event: React.MouseEvent<HTMLButtonElement> \| React.MouseEvent<Element>,\n actionButton: NavbarButtonProps\n ) => {\n if (\n (actionButton.type === \"button\" \|\|\n actionButton.type === \"download\") &&\n actionButton.args?.onClick\n ) {\n actionButton.args.onClick(\n event as React.MouseEvent<HTMLButtonElement>\n );\n } else if (onActionButtonClick) {\n event.preventDefault();\n onActionButtonClick(actionButton);\n }\n\n if (shouldDismissDrawer(\"item-click\")) {\n dismissDrawer();\n }\n };\n\n const handleMobileMenuButtonClick = () => {\n setShowDrawer(true);\n setShowOverlay(true);\n };\n\n const handleDrawerClose = () => {\n if (shouldDismissDrawer(\"close-button-click\")) {\n dismissDrawer();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDrawer = () => (\n <Overlay\n show={showOverlay}\n enableOverlayClick\n onOverlayClick={handleDrawerClose}\n >\n <Drawer\n show={showDrawer}\n resources={{ primary, secondary }}\n onClose={handleDrawerClose}\n onBrandClick={handleBrandClick}\n actionButtons={actionButtons}\n hideNavBranding={hideNavBranding}\n mobileMenuRef={mobileMenuRef}\n drawerLabel={drawerLabel}\n >\n <NavbarItems\n items={items.mobile \|\| items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n mobile\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n mobile\n />\n </Drawer>\n </Overlay>\n );\n\n const renderBrand = () => (\n <div\n className={clsx(\n styles.navBrandContainer,\n compress\n ? styles.navBrandContainerCompressed\n : styles.navBrandContainerFull,\n styles.navBrandContainerResponsive\n )}\n data-id=\"brand-container\"\n >\n {primary && (\n <Brand\n resources={primary}\n onClick={handleBrandClick}\n data-id=\"brand-primary\"\n data-testid=\"main__brand\"\n type=\"primary\"\n />\n )}\n {secondary && (\n <>\n <div\n className={clsx(\n styles.navSeparator,\n compress\n ? styles.navSeparatorCompressed\n : styles.navSeparatorFull,\n styles.navSeparatorResponsive\n )}\n />\n <Brand\n resources={secondary}\n onClick={handleBrandClick}\n data-id=\"brand-secondary\"\n data-testid=\"main__brand-secondary\"\n type=\"secondary\"\n />\n </>\n )}\n </div>\n );\n\n const renderMobileMenuButton = () => {\n const drawerItems = items.mobile \|\| items.desktop;\n if (\n (drawerItems && drawerItems.length > 0) \|\|\n (actionButtons && hasCollapsibleActionButtons(actionButtons))\n ) {\n return (\n <ClickableIcon\n ref={mobileMenuRef}\n className={styles.mobileMenuButton}\n aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n aria-expanded={showDrawer}\n data-testid=\"button__mobile-menu\"\n onClick={handleMobileMenuButtonClick}\n focusHighlight={true}\n >\n <MenuIcon className={styles.mobileMenuIcon} />\n </ClickableIcon>\n );\n }\n\n return null;\n };\n\n const renderNavbar = () => {\n return (\n <Layout.Content stretch={isStretch}>\n <nav\n className={clsx(\n styles.nav,\n compress && styles.navCompressed,\n theme?.mode === \"dark\" && styles.navDark\n )}\n aria-label={headerLabel}\n >\n {!hideNavBranding && renderBrand()}\n {!hideNavElements && (\n <div\n className={clsx(\n styles.navElementsContainer,\n !hideNavBranding &&\n styles.navElementsContainerWithBranding\n )}\n >\n <NavbarItems\n items={items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n hideNavBranding={hideNavBranding}\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n />\n {renderMobileMenuButton()}\n </div>\n )}\n </nav>\n\n {!hideNavElements && renderDrawer()}\n </Layout.Content>\n );\n };\n\n return (\n <div\n ref={elementRef}\n className={clsx(\n styles.wrapper,\n fixed ? styles.wrapperFixed : styles.wrapperRelative,\n theme?.mode === \"dark\"\n ? styles.wrapperDark\n : styles.wrapperLight,\n className\n )}\n id={id \|\| \"navbar-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"navbar-wrapper\"}\n >\n {masthead && <Masthead stretch={isStretch} />}\n {renderNavbar()}\n </div>\n );\n};\n\n/*\n The main site navigation bar with desktop and mobile drawer views.\n \n Use `Navbar` to render the primary navigation header. It displays brand\n * logos, navigation items, and action buttons in a desktop bar, and\n * automatically collapses items into a slide-in drawer for mobile viewports.\n */\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidth","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}
1	+ {"version":3,"file":"navbar.js","sources":["../../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n Breakpoint,\n parsePxOrRemValue,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n BrandType,\n DrawerDismissalMethod,\n NavbarActionButtonsProps,\n NavbarButtonProps,\n NavbarDrawerApi,\n NavbarDrawerHandle,\n NavbarProps,\n NavItemCommonProps,\n NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n {\n items,\n className,\n id,\n selectedId,\n compress = false,\n fixed = true,\n resources,\n hideNavElements = false,\n hideNavBranding = false,\n hideLinkIndicator = false,\n drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n actionButtons,\n onItemClick,\n onActionButtonClick,\n onBrandClick,\n masthead = true,\n layout = \"default\",\n headerLabel = \"Main navigation menu\",\n drawerLabel,\n ...otherProps\n }: NavbarProps<T>,\n ref: React.Ref<NavbarDrawerHandle>\n) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [showDrawer, setShowDrawer] = useState<boolean>(false);\n const [showOverlay, setShowOverlay] = useState<boolean>(false);\n const mobileMenuRef = useRef<HTMLButtonElement>(null);\n const isStretch = layout === \"stretch\";\n const elementRef = useRef<HTMLDivElement>(null);\n const theme = useContext(ThemeContext);\n const defaultResource = getDefaultResourceLogo(theme?.theme);\n const tabletWidth = parsePxOrRemValue(\n useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n );\n\n const primary = resources?.primary \|\| defaultResource.primary;\n const secondary = resources?.secondary;\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, NavbarDrawerApi>(\n elementRef.current!,\n {\n dismissDrawer: () => {\n dismissDrawer();\n },\n }\n ),\n [showDrawer]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const dismissDrawer = () => {\n setShowDrawer(false);\n setTimeout(() => {\n setShowOverlay(false);\n }, 550); // For drawer animation to complete + buffer\n };\n\n const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n return (\n showDrawer &&\n blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n );\n };\n\n const hasCollapsibleActionButtons = (\n actionButtons: NavbarActionButtonsProps\n ) => {\n const drawerActionButtons =\n actionButtons.mobile \|\| actionButtons.desktop;\n if (drawerActionButtons) {\n return (\n drawerActionButtons.length &&\n drawerActionButtons.some(\n (actionButton) => !actionButton.uncollapsible\n )\n );\n }\n\n return false;\n };\n\n // =============================================================================\n // EVENT HANDLER\n // =============================================================================\n const handleResize = () => {\n if (window.innerWidth <= tabletWidth && showDrawer) {\n dismissDrawer();\n }\n };\n\n const handleBrandClick = (\n _event: React.MouseEvent<HTMLAnchorElement>,\n type: BrandType\n ) => {\n if (onBrandClick) {\n onBrandClick(type);\n }\n\n if (shouldDismissDrawer(\"brand-click\")) {\n dismissDrawer();\n }\n };\n\n const handleNavItemClick = <K extends T>(\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<K> \| NavItemCommonProps<K>\n ) => {\n if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item);\n }\n\n if (\n NavbarHelper.isNavItemLink(item) &&\n !item.subMenu &&\n shouldDismissDrawer(\"item-click\")\n ) {\n dismissDrawer();\n }\n };\n\n const handleActionButtonClick = (\n event: React.MouseEvent<HTMLButtonElement> \| React.MouseEvent<Element>,\n actionButton: NavbarButtonProps\n ) => {\n if (\n (actionButton.type === \"button\" \|\|\n actionButton.type === \"download\") &&\n actionButton.args?.onClick\n ) {\n actionButton.args.onClick(\n event as React.MouseEvent<HTMLButtonElement>\n );\n } else if (onActionButtonClick) {\n event.preventDefault();\n onActionButtonClick(actionButton);\n }\n\n if (shouldDismissDrawer(\"item-click\")) {\n dismissDrawer();\n }\n };\n\n const handleMobileMenuButtonClick = () => {\n setShowDrawer(true);\n setShowOverlay(true);\n };\n\n const handleDrawerClose = () => {\n if (shouldDismissDrawer(\"close-button-click\")) {\n dismissDrawer();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDrawer = () => (\n <Overlay\n show={showOverlay}\n enableOverlayClick\n onOverlayClick={handleDrawerClose}\n >\n <Drawer\n show={showDrawer}\n resources={{ primary, secondary }}\n onClose={handleDrawerClose}\n onBrandClick={handleBrandClick}\n actionButtons={actionButtons}\n hideNavBranding={hideNavBranding}\n mobileMenuRef={mobileMenuRef}\n drawerLabel={drawerLabel}\n >\n <NavbarItems\n items={items.mobile \|\| items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n mobile\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n mobile\n />\n </Drawer>\n </Overlay>\n );\n\n const renderBrand = () => (\n <div\n className={clsx(\n styles.navBrandContainer,\n compress\n ? styles.navBrandContainerCompressed\n : styles.navBrandContainerFull,\n styles.navBrandContainerResponsive\n )}\n data-id=\"brand-container\"\n >\n {primary && (\n <Brand\n resources={primary}\n onClick={handleBrandClick}\n data-id=\"brand-primary\"\n data-testid=\"main__brand\"\n type=\"primary\"\n />\n )}\n {secondary && (\n <>\n <div\n className={clsx(\n styles.navSeparator,\n compress\n ? styles.navSeparatorCompressed\n : styles.navSeparatorFull,\n styles.navSeparatorResponsive\n )}\n />\n <Brand\n resources={secondary}\n onClick={handleBrandClick}\n data-id=\"brand-secondary\"\n data-testid=\"main__brand-secondary\"\n type=\"secondary\"\n />\n </>\n )}\n </div>\n );\n\n const renderMobileMenuButton = () => {\n const drawerItems = items.mobile \|\| items.desktop;\n if (\n (drawerItems && drawerItems.length > 0) \|\|\n (actionButtons && hasCollapsibleActionButtons(actionButtons))\n ) {\n return (\n <ClickableIcon\n ref={mobileMenuRef}\n className={styles.mobileMenuButton}\n aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n aria-expanded={showDrawer}\n data-testid=\"button__mobile-menu\"\n onClick={handleMobileMenuButtonClick}\n focusHighlight={true}\n >\n <MenuIcon className={styles.mobileMenuIcon} />\n </ClickableIcon>\n );\n }\n\n return null;\n };\n\n const renderNavbar = () => {\n return (\n <Layout.Content stretch={isStretch}>\n <nav\n className={clsx(\n styles.nav,\n compress && styles.navCompressed,\n theme?.mode === \"dark\" && styles.navDark\n )}\n aria-label={headerLabel}\n >\n {!hideNavBranding && renderBrand()}\n {!hideNavElements && (\n <div\n className={clsx(\n styles.navElementsContainer,\n !hideNavBranding &&\n styles.navElementsContainerWithBranding\n )}\n >\n <NavbarItems\n items={items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n hideNavBranding={hideNavBranding}\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n />\n {renderMobileMenuButton()}\n </div>\n )}\n </nav>\n\n {!hideNavElements && renderDrawer()}\n </Layout.Content>\n );\n };\n\n return (\n <div\n ref={elementRef}\n className={clsx(\n styles.wrapper,\n fixed ? styles.wrapperFixed : styles.wrapperRelative,\n theme?.mode === \"dark\"\n ? styles.wrapperDark\n : styles.wrapperLight,\n className\n )}\n id={id \|\| \"navbar-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"navbar-wrapper\"}\n >\n {masthead && <Masthead stretch={isStretch} />}\n {renderNavbar()}\n </div>\n );\n};\n\n// @catalog\n/*\n The main site navigation bar with desktop and mobile drawer views.\n \n Use `Navbar` to render the primary navigation header. It displays brand\n * logos, navigation items, and action buttons in a desktop bar, and\n * automatically collapses items into a slide-in drawer for mobile viewports.\n */\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidth","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}

package/cjs/notification-banner/notification-banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n NotificationBannerProps,\n NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n children,\n visible = true,\n dismissible = true,\n sticky = true,\n onDismiss,\n id,\n forwardedRef,\n maxCollapsedHeight,\n onClick,\n actionButton,\n icon,\n className,\n ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const testId = otherProps[\"data-testid\"];\n\n const [isVisible, setVisible] = useState<boolean>(visible);\n const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n const contentTextRef = useRef<HTMLDivElement>(null);\n\n const isCollapsed =\n maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n useApplyStyle(contentTextRef, {\n [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n ? formatUnitValue(maxCollapsedHeight, \"px\")\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setVisible(visible);\n }, [visible]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n setVisible(false);\n\n if (dismissible && onDismiss) onDismiss();\n };\n\n const handleActionButtonOnClick = (\n event: React.MouseEvent<HTMLButtonElement>\n ) => {\n if (!actionButton?.onClick) {\n // let it bubble\n return;\n }\n event.stopPropagation();\n actionButton.onClick(event);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n if (!isVisible) return null;\n\n const renderDismissButton = () => (\n <ClickableIcon\n className={styles.dismissButton}\n tabIndex={0}\n onClick={handleDismiss}\n id={formatId(\"dismiss-button\", id)}\n data-testid={formatId(\"dismiss-button\", testId)}\n focusOutline=\"browser\"\n focusHighlight={false}\n type=\"button\"\n aria-label=\"close\"\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n );\n\n const renderActionButton = () => {\n if (!actionButton) return null;\n\n return (\n <button\n className={styles.actionButton}\n id={formatId(\"action-button\", id)}\n data-testid={formatId(\"action-button\", testId)}\n type=\"button\"\n {...actionButton}\n onClick={handleActionButtonOnClick}\n >\n {actionButton.children}\n </button>\n );\n };\n\n const renderContent = () => (\n <div\n className={styles.content}\n data-testid={formatId(\"text-content\", testId)}\n >\n <div className={styles.contentWrapper}>\n <div\n ref={contentTextRef}\n className={clsx(\n styles.contentText,\n isCollapsed && styles.contentTextCollapsed\n )}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n {renderActionButton()}\n </div>\n </div>\n );\n\n const renderAccessibleBannerButton = () => (\n <VisuallyHidden>\n <button aria-label={\"Clickable banner\"} type=\"button\" />\n </VisuallyHidden>\n );\n\n return (\n <div\n ref={forwardedRef}\n className={clsx(\n styles.wrapper,\n sticky && styles.wrapperSticky,\n !!onClick && styles.wrapperClickable,\n className\n )}\n onClick={onClick}\n role=\"region\"\n {...otherProps}\n >\n <Layout.Content id={formatId(\"container\", id)}>\n {icon && (\n <div className={styles.iconContainer} aria-hidden>\n {icon}\n </div>\n )}\n <div className={styles.contentContainer}>{renderContent()}</div>\n {dismissible && renderDismissButton()}\n </Layout.Content>\n {onClick && renderAccessibleBannerButton()}\n </div>\n );\n};\n\n/*\n Intermediate component to handle passing the ref as a prop\n /\nconst NBWithRef = (\n props: NotificationBannerProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n return (\n <Typography.LinkBL\n ref={ref}\n className={clsx(styles.contentLink, props.className)}\n {...props}\n />\n );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\n\n/\n A full-width informational banner that sits at the top of the page.\n \n Use `NotificationBanner` to surface important or persistent messages that\n * should remain visible until the user dismisses them.\n /\nexport const NotificationBanner = Object.assign(Base, {\n /* Renders an inline link styled for use inside a `NotificationBanner`. */\n Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"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"}
1	+ {"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n NotificationBannerProps,\n NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n children,\n visible = true,\n dismissible = true,\n sticky = true,\n onDismiss,\n id,\n forwardedRef,\n maxCollapsedHeight,\n onClick,\n actionButton,\n icon,\n className,\n ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const testId = otherProps[\"data-testid\"];\n\n const [isVisible, setVisible] = useState<boolean>(visible);\n const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n const contentTextRef = useRef<HTMLDivElement>(null);\n\n const isCollapsed =\n maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n useApplyStyle(contentTextRef, {\n [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n ? formatUnitValue(maxCollapsedHeight, \"px\")\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setVisible(visible);\n }, [visible]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n setVisible(false);\n\n if (dismissible && onDismiss) onDismiss();\n };\n\n const handleActionButtonOnClick = (\n event: React.MouseEvent<HTMLButtonElement>\n ) => {\n if (!actionButton?.onClick) {\n // let it bubble\n return;\n }\n event.stopPropagation();\n actionButton.onClick(event);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n if (!isVisible) return null;\n\n const renderDismissButton = () => (\n <ClickableIcon\n className={styles.dismissButton}\n tabIndex={0}\n onClick={handleDismiss}\n id={formatId(\"dismiss-button\", id)}\n data-testid={formatId(\"dismiss-button\", testId)}\n focusOutline=\"browser\"\n focusHighlight={false}\n type=\"button\"\n aria-label=\"close\"\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n );\n\n const renderActionButton = () => {\n if (!actionButton) return null;\n\n return (\n <button\n className={styles.actionButton}\n id={formatId(\"action-button\", id)}\n data-testid={formatId(\"action-button\", testId)}\n type=\"button\"\n {...actionButton}\n onClick={handleActionButtonOnClick}\n >\n {actionButton.children}\n </button>\n );\n };\n\n const renderContent = () => (\n <div\n className={styles.content}\n data-testid={formatId(\"text-content\", testId)}\n >\n <div className={styles.contentWrapper}>\n <div\n ref={contentTextRef}\n className={clsx(\n styles.contentText,\n isCollapsed && styles.contentTextCollapsed\n )}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n {renderActionButton()}\n </div>\n </div>\n );\n\n const renderAccessibleBannerButton = () => (\n <VisuallyHidden>\n <button aria-label={\"Clickable banner\"} type=\"button\" />\n </VisuallyHidden>\n );\n\n return (\n <div\n ref={forwardedRef}\n className={clsx(\n styles.wrapper,\n sticky && styles.wrapperSticky,\n !!onClick && styles.wrapperClickable,\n className\n )}\n onClick={onClick}\n role=\"region\"\n {...otherProps}\n >\n <Layout.Content id={formatId(\"container\", id)}>\n {icon && (\n <div className={styles.iconContainer} aria-hidden>\n {icon}\n </div>\n )}\n <div className={styles.contentContainer}>{renderContent()}</div>\n {dismissible && renderDismissButton()}\n </Layout.Content>\n {onClick && renderAccessibleBannerButton()}\n </div>\n );\n};\n\n/*\n Intermediate component to handle passing the ref as a prop\n /\nconst NBWithRef = (\n props: NotificationBannerProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n return (\n <Typography.LinkBL\n ref={ref}\n className={clsx(styles.contentLink, props.className)}\n {...props}\n />\n );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\n\n// @catalog\n/\n A full-width informational banner that sits at the top of the page.\n \n Use `NotificationBanner` to surface important or persistent messages that\n * should remain visible until the user dismisses them.\n /\nexport const NotificationBanner = Object.assign(Base, {\n /* Renders an inline link styled for use inside a `NotificationBanner`. */\n Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"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"}

package/cjs/otp-input/otp-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),n=require("react"),a=require("../button/button.js"),i=require("../form/form-label.js"),s=require("../input/input.js"),o=require("../shared/accessibility/index.js"),l=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js"),d=require("../util/string-helper.js");require("@react-aria/live-announcer");var c=require("./otp-input.styles.js"),p=require("./utils.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=f(t);const y=n.forwardRef(((t,f)=>{var{id:y,value:m=[],"data-testid":g,className:j,cooldownDuration:h,actionButtonProps:b,errorMessage:w,numOfInput:x,prefix:O,onChange:C,onCooldownStart:q,onCooldownEnd:$,otpOnly:D,onCountdownChange:T}=t,I=e.__rest(t,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const E=null!=b?b:{},{disabled:P,onClick:R,styleType:B="secondary"}=E,N=e.__rest(E,["disabled","onClick","styleType"]),k=n.useRef([]),A=n.useRef(C),[S,_]=n.useState(new Array(x).fill("")),[H,M]=n.useState(h),[F,L]=n.useState(new Date),V=u.useId(),U=!!w,z=`${V}-error`,K=`${V}-timer`;n.useEffect((()=>{var e;return null===(e=null==k?void 0:k.current[0])||void 0===e||e.focus(),document.addEventListener("paste",W),()=>document.removeEventListener("paste",W)}),[]),n.useEffect((()=>{if(0!==h){q&&q();const e=Y();return()=>e()}}),[F]),n.useImperativeHandle(f,(()=>({startCooldown:()=>{L(new Date),M(h)}}))),n.useEffect((()=>{A.current=C}),[C]),n.useEffect((()=>{m.length===x&&_(m)}),[m]);const G=e=>{if(e&&p.validateUserInput(e,x)){const r=e.split("");return _(r),A.current&&A.current(r),!0}return!1},J=e=>r=>{var t;const n=r.target.value,a=S.every((e=>""===e)),i=p.stripOtpFromAutofill(n,x,O);if(a&&G(i))return;const s=n.replace(/[^0-9]/g,"");if(p.validateUserInput(s)){const r=[...S];r[e]=s.substring(s.length-1),null===(t=k.current[e+1])||void 0===t||t.focus(),_(r),C&&C(r)}},Q=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...S];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=k.current[e-1])||void 0===t||t.focus()),_(r),C&&C(r)}else"ArrowRight"===r.code?null===(n=k.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=k.current[e-1])||void 0===a||a.focus())},W=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=p.stripOtpFromAutofill(r,x,O);G(t)||e.preventDefault()},X=()=>{const e=Date.now(),r=1e3*h;return e<F.valueOf()+r},Y=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*h,n=Math.ceil((F.valueOf()+t-r)/1e3);M(n),n<=0?($&&$(),clearInterval(e)):T&&T(n)}),1e3);return()=>{clearInterval(e)}},Z=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,ee=e=>`${e} second${1===e?"":"s"}`;return r.jsxs("div",{id:y,"data-testid":g,className:v.default(c.wrapper,j),children:[r.jsxs("div",{className:c.inputContainer,role:"group","aria-label":`${x}-digit OTP input field`,children:[O&&r.jsxs(l.Typography.BodyBL,{as:"span",className:c.prefix,"data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(o.VisuallyHidden,{children:"O T P prefix"}),`${O.value} ${O.separator}`]}),S.map(((e,t)=>r.jsx(s.Input,Object.assign({className:c.inputField,id:Z(t,"otp-input",y),"data-testid":Z(t,"otp-input",g),"aria-label":`${d.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":U,"aria-describedby":U?z:void 0,ref:e=>k.current[t]=e,type:"text",inputMode:"numeric",value:e,error:U,onChange:J(t),onKeyDown:Q(t),autoComplete:"off"},I),t)))]}),w&&r.jsx(i.FormErrorMessage,{id:z,"data-testid":"otp-error-message",children:w}),r.jsxs(o.VisuallyHidden,{role:"timer",id:K,children:[ee(H)," remaining"]}),r.jsx(o.VisuallyHidden,{"aria-live":"polite",children:H>0?"":"Ready to resend OTP"}),!D&&r.jsx(a.Button,Object.assign({className:c.ctaButton,styleType:B,type:"button",sizeType:"small"},N,{onClick:e=>{_(new Array(x).fill("")),X()||(L(new Date),M(h)),R&&R(e)},disabled:P||X()},N.children?{children:N.children}:{children:H>0?`Resend OTP in ${ee(H)}`:"Resend OTP","aria-label":H>0?`Resend OTP in ${ee(h)}`:"Resend OTP","aria-describedby":K}))]})}));exports.OtpInput=y;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),n=require("react"),a=require("../button/button.js"),i=require("../form/form-label/form-label.js"),s=require("../input/input.js"),o=require("../shared/accessibility/index.js"),l=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js"),d=require("../util/string-helper.js");require("@react-aria/live-announcer");var c=require("./otp-input.styles.js"),p=require("./utils.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=f(t);const y=n.forwardRef(((t,f)=>{var{id:y,value:m=[],"data-testid":g,className:j,cooldownDuration:h,actionButtonProps:b,errorMessage:w,numOfInput:x,prefix:O,onChange:C,onCooldownStart:q,onCooldownEnd:$,otpOnly:D,onCountdownChange:T}=t,I=e.__rest(t,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const E=null!=b?b:{},{disabled:P,onClick:R,styleType:B="secondary"}=E,N=e.__rest(E,["disabled","onClick","styleType"]),k=n.useRef([]),A=n.useRef(C),[S,_]=n.useState(new Array(x).fill("")),[H,M]=n.useState(h),[F,L]=n.useState(new Date),V=u.useId(),U=!!w,z=`${V}-error`,K=`${V}-timer`;n.useEffect((()=>{var e;return null===(e=null==k?void 0:k.current[0])||void 0===e||e.focus(),document.addEventListener("paste",W),()=>document.removeEventListener("paste",W)}),[]),n.useEffect((()=>{if(0!==h){q&&q();const e=Y();return()=>e()}}),[F]),n.useImperativeHandle(f,(()=>({startCooldown:()=>{L(new Date),M(h)}}))),n.useEffect((()=>{A.current=C}),[C]),n.useEffect((()=>{m.length===x&&_(m)}),[m]);const G=e=>{if(e&&p.validateUserInput(e,x)){const r=e.split("");return _(r),A.current&&A.current(r),!0}return!1},J=e=>r=>{var t;const n=r.target.value,a=S.every((e=>""===e)),i=p.stripOtpFromAutofill(n,x,O);if(a&&G(i))return;const s=n.replace(/[^0-9]/g,"");if(p.validateUserInput(s)){const r=[...S];r[e]=s.substring(s.length-1),null===(t=k.current[e+1])||void 0===t||t.focus(),_(r),C&&C(r)}},Q=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...S];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=k.current[e-1])||void 0===t||t.focus()),_(r),C&&C(r)}else"ArrowRight"===r.code?null===(n=k.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=k.current[e-1])||void 0===a||a.focus())},W=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=p.stripOtpFromAutofill(r,x,O);G(t)||e.preventDefault()},X=()=>{const e=Date.now(),r=1e3*h;return e<F.valueOf()+r},Y=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*h,n=Math.ceil((F.valueOf()+t-r)/1e3);M(n),n<=0?($&&$(),clearInterval(e)):T&&T(n)}),1e3);return()=>{clearInterval(e)}},Z=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,ee=e=>`${e} second${1===e?"":"s"}`;return r.jsxs("div",{id:y,"data-testid":g,className:v.default(c.wrapper,j),children:[r.jsxs("div",{className:c.inputContainer,role:"group","aria-label":`${x}-digit OTP input field`,children:[O&&r.jsxs(l.Typography.BodyBL,{as:"span",className:c.prefix,"data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(o.VisuallyHidden,{children:"O T P prefix"}),`${O.value} ${O.separator}`]}),S.map(((e,t)=>r.jsx(s.Input,Object.assign({className:c.inputField,id:Z(t,"otp-input",y),"data-testid":Z(t,"otp-input",g),"aria-label":`${d.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":U,"aria-describedby":U?z:void 0,ref:e=>k.current[t]=e,type:"text",inputMode:"numeric",value:e,error:U,onChange:J(t),onKeyDown:Q(t),autoComplete:"off"},I),t)))]}),w&&r.jsx(i.FormErrorMessage,{id:z,"data-testid":"otp-error-message",children:w}),r.jsxs(o.VisuallyHidden,{role:"timer",id:K,children:[ee(H)," remaining"]}),r.jsx(o.VisuallyHidden,{"aria-live":"polite",children:H>0?"":"Ready to resend OTP"}),!D&&r.jsx(a.Button,Object.assign({className:c.ctaButton,styleType:B,type:"button",sizeType:"small"},N,{onClick:e=>{_(new Array(x).fill("")),X()||(L(new Date),M(h)),R&&R(e)},disabled:P||X()},N.children?{children:N.children}:{children:H>0?`Resend OTP in ${ee(H)}`:"Resend OTP","aria-label":H>0?`Resend OTP in ${ee(h)}`:"Resend OTP","aria-describedby":K}))]})}));exports.OtpInput=y;
 //# sourceMappingURL=otp-input.js.map

package/cjs/otp-input/otp-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { Input } from \"../input\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n {\n id,\n value = [],\n \"data-testid\": dataTestId,\n className,\n cooldownDuration,\n actionButtonProps,\n errorMessage,\n numOfInput,\n prefix,\n onChange,\n onCooldownStart,\n onCooldownEnd,\n otpOnly,\n onCountdownChange,\n ...otherProps\n }: OtpInputProps,\n ref: React.Ref<OtpInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n disabled,\n onClick,\n styleType = \"secondary\",\n ...otherCtaProps\n } = actionButtonProps ?? {};\n\n const inputRefs = useRef<(HTMLInputElement \| null)[]>([]);\n const onChangeRef = useRef(onChange);\n\n const [otpValues, setOtpValues] = useState<string[]>(\n new Array(numOfInput).fill(\"\")\n );\n const [countDown, setCountDown] = useState<number>(cooldownDuration);\n const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n const internalId = useId();\n\n const hasError = !!errorMessage;\n const errorId = `${internalId}-error`;\n const timerId = `${internalId}-timer`;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n inputRefs?.current[0]?.focus();\n document.addEventListener(\"paste\", handlePaste);\n return () => document.removeEventListener(\"paste\", handlePaste);\n }, []);\n\n useEffect(() => {\n if (cooldownDuration !== 0) {\n if (onCooldownStart) onCooldownStart();\n const cleanup = beginCountdown();\n\n return () => cleanup();\n }\n }, [lastCtaTimestamp]);\n\n useImperativeHandle(ref, () => ({\n startCooldown: () => {\n setLastCtaTimestamp(new Date());\n setCountDown(cooldownDuration);\n },\n }));\n\n useEffect(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n useEffect(() => {\n if (value.length === numOfInput) {\n setOtpValues(value);\n }\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleInputFullValue = (incomingValue: string) => {\n if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n const incomingValueArr = incomingValue.split(\"\");\n setOtpValues(incomingValueArr);\n if (onChangeRef.current) {\n onChangeRef.current(incomingValueArr);\n }\n\n return true;\n }\n\n return false;\n };\n\n const handleChange =\n (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n const eventValue = event.target.value;\n\n /* handle autofill /\n const fieldIsEmpty = otpValues.every((num) => num === \"\");\n const autofillOtp = stripOtpFromAutofill(\n eventValue,\n numOfInput,\n prefix\n );\n if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n return;\n }\n\n / handle normal input /\n const value = eventValue.replace(/[^0-9]/g, \"\");\n if (validateUserInput(value)) {\n const newOtpValues = [...otpValues];\n\n newOtpValues[index] = value.substring(value.length - 1);\n inputRefs.current[index + 1]?.focus();\n\n setOtpValues(newOtpValues);\n\n if (onChange) {\n onChange(newOtpValues);\n }\n }\n };\n\n const handleKeyDown =\n (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key, code } = event;\n\n if (key === \"Backspace\" \|\| code === \"Backspace\") {\n const newOtpValues = [...otpValues];\n if (newOtpValues[index] !== \"\") {\n newOtpValues[index] = \"\";\n } else if (index !== 0) {\n newOtpValues[index - 1] = \"\";\n inputRefs.current[index - 1]?.focus();\n }\n\n setOtpValues(newOtpValues);\n\n if (onChange) {\n onChange(newOtpValues);\n }\n } else if (event.code === \"ArrowRight\") {\n inputRefs.current[index + 1]?.focus();\n } else if (event.code === \"ArrowLeft\") {\n inputRefs.current[index - 1]?.focus();\n }\n };\n\n const handlePaste = (event: ClipboardEvent): void => {\n if (!event.clipboardData) return;\n\n const pastedValue = event.clipboardData.getData(\"text\");\n const autofillOtp = stripOtpFromAutofill(\n pastedValue,\n numOfInput,\n prefix\n );\n if (!handleInputFullValue(autofillOtp)) {\n event.preventDefault();\n }\n };\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n setOtpValues(new Array(numOfInput).fill(\"\"));\n\n if (!isWithinCooldown()) {\n setLastCtaTimestamp(new Date());\n setCountDown(cooldownDuration);\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const isWithinCooldown = (): boolean => {\n const currentTime = Date.now();\n const coolDownInMilliseconds = cooldownDuration 1000;\n\n return (\n currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n );\n };\n\n const beginCountdown = () => {\n const interval = setInterval(() => {\n const currentTime = Date.now();\n const coolDownInMilliseconds = cooldownDuration * 1000;\n\n const timer = Math.ceil(\n (lastCtaTimestamp.valueOf() +\n coolDownInMilliseconds -\n currentTime) /\n 1000\n );\n setCountDown(timer);\n if (timer <= 0) {\n if (onCooldownEnd) onCooldownEnd();\n clearInterval(interval);\n } else if (onCountdownChange) {\n onCountdownChange(timer);\n }\n }, 1000);\n\n return () => {\n clearInterval(interval);\n };\n };\n\n const generateId = (index: number, name: string, prefix?: string) => {\n return prefix\n ? `${prefix}-${name}-${index + 1}`\n : `${name}-${index + 1}`;\n };\n\n const displaySeconds = (time: number) => {\n return `${time} second${time === 1 ? \"\" : \"s\"}`;\n };\n\n const getCTALabelProps = (): Partial<\n React.HTMLAttributes<HTMLButtonElement>\n > => {\n return otherCtaProps.children\n ? { children: otherCtaProps.children }\n : {\n children:\n countDown > 0\n ? `Resend OTP in ${displaySeconds(countDown)}`\n : \"Resend OTP\",\n // use a fixed label to avoid repeated screen reader updates when the button is focused\n \"aria-label\":\n countDown > 0\n ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n : \"Resend OTP\",\n // use a secondary element to reflect the latest countdown\n \"aria-describedby\": timerId,\n };\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={clsx(styles.wrapper, className)}\n >\n <div\n className={styles.inputContainer}\n role=\"group\"\n aria-label={`${numOfInput}-digit OTP input field`}\n >\n {prefix && (\n <Typography.BodyBL\n as=\"span\"\n className={styles.prefix}\n data-testid=\"otp-prefix\"\n weight=\"semibold\"\n >\n <VisuallyHidden>O T P prefix</VisuallyHidden>\n {`${prefix.value} ${prefix.separator}`}\n </Typography.BodyBL>\n )}\n {otpValues.map((data, index) => {\n return (\n <Input\n className={styles.inputField}\n id={generateId(index, \"otp-input\", id)}\n data-testid={generateId(\n index,\n \"otp-input\",\n dataTestId\n )}\n aria-label={`${StringHelper.formatOrdinal(\n index + 1\n )} digit`}\n aria-invalid={hasError}\n aria-describedby={hasError ? errorId : undefined}\n key={index}\n ref={(el) => (inputRefs.current[index] = el)}\n type=\"text\"\n inputMode=\"numeric\"\n value={data}\n error={hasError}\n onChange={handleChange(index)}\n onKeyDown={handleKeyDown(index)}\n autoComplete=\"off\"\n {...otherProps}\n />\n );\n })}\n </div>\n {errorMessage && (\n <FormErrorMessage id={errorId} data-testid=\"otp-error-message\">\n {errorMessage}\n </FormErrorMessage>\n )}\n {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button /}\n <VisuallyHidden role=\"timer\" id={timerId}>\n {displaySeconds(countDown)} remaining\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"polite\">\n {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n </VisuallyHidden>\n {!otpOnly && (\n <Button\n className={styles.ctaButton}\n styleType={styleType}\n type=\"button\"\n sizeType=\"small\"\n {...otherCtaProps}\n onClick={handleClick}\n disabled={disabled \|\| isWithinCooldown()}\n {...getCTALabelProps()}\n />\n )}\n </div>\n );\n};\n\n/\n A field composed of individual inputs for a numeric one-time password\n * with an in-built countdown mechanism.\n \n Use `OtpInput` when users must enter the one-time password (OTP)\n * for multi-factored authentication methods.\n */\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","clsx","styles.wrapper","children","styles.inputContainer","role","Typography","BodyBL","as","styles.prefix","weight","_jsx","VisuallyHidden","separator","map","data","Input","Object","assign","styles.inputField","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","Button","styles.ctaButton","sizeType"],"mappings":"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"}
1	+ {"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { Input } from \"../input\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n {\n id,\n value = [],\n \"data-testid\": dataTestId,\n className,\n cooldownDuration,\n actionButtonProps,\n errorMessage,\n numOfInput,\n prefix,\n onChange,\n onCooldownStart,\n onCooldownEnd,\n otpOnly,\n onCountdownChange,\n ...otherProps\n }: OtpInputProps,\n ref: React.Ref<OtpInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n disabled,\n onClick,\n styleType = \"secondary\",\n ...otherCtaProps\n } = actionButtonProps ?? {};\n\n const inputRefs = useRef<(HTMLInputElement \| null)[]>([]);\n const onChangeRef = useRef(onChange);\n\n const [otpValues, setOtpValues] = useState<string[]>(\n new Array(numOfInput).fill(\"\")\n );\n const [countDown, setCountDown] = useState<number>(cooldownDuration);\n const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n const internalId = useId();\n\n const hasError = !!errorMessage;\n const errorId = `${internalId}-error`;\n const timerId = `${internalId}-timer`;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n inputRefs?.current[0]?.focus();\n document.addEventListener(\"paste\", handlePaste);\n return () => document.removeEventListener(\"paste\", handlePaste);\n }, []);\n\n useEffect(() => {\n if (cooldownDuration !== 0) {\n if (onCooldownStart) onCooldownStart();\n const cleanup = beginCountdown();\n\n return () => cleanup();\n }\n }, [lastCtaTimestamp]);\n\n useImperativeHandle(ref, () => ({\n startCooldown: () => {\n setLastCtaTimestamp(new Date());\n setCountDown(cooldownDuration);\n },\n }));\n\n useEffect(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n useEffect(() => {\n if (value.length === numOfInput) {\n setOtpValues(value);\n }\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleInputFullValue = (incomingValue: string) => {\n if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n const incomingValueArr = incomingValue.split(\"\");\n setOtpValues(incomingValueArr);\n if (onChangeRef.current) {\n onChangeRef.current(incomingValueArr);\n }\n\n return true;\n }\n\n return false;\n };\n\n const handleChange =\n (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n const eventValue = event.target.value;\n\n /* handle autofill /\n const fieldIsEmpty = otpValues.every((num) => num === \"\");\n const autofillOtp = stripOtpFromAutofill(\n eventValue,\n numOfInput,\n prefix\n );\n if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n return;\n }\n\n / handle normal input /\n const value = eventValue.replace(/[^0-9]/g, \"\");\n if (validateUserInput(value)) {\n const newOtpValues = [...otpValues];\n\n newOtpValues[index] = value.substring(value.length - 1);\n inputRefs.current[index + 1]?.focus();\n\n setOtpValues(newOtpValues);\n\n if (onChange) {\n onChange(newOtpValues);\n }\n }\n };\n\n const handleKeyDown =\n (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key, code } = event;\n\n if (key === \"Backspace\" \|\| code === \"Backspace\") {\n const newOtpValues = [...otpValues];\n if (newOtpValues[index] !== \"\") {\n newOtpValues[index] = \"\";\n } else if (index !== 0) {\n newOtpValues[index - 1] = \"\";\n inputRefs.current[index - 1]?.focus();\n }\n\n setOtpValues(newOtpValues);\n\n if (onChange) {\n onChange(newOtpValues);\n }\n } else if (event.code === \"ArrowRight\") {\n inputRefs.current[index + 1]?.focus();\n } else if (event.code === \"ArrowLeft\") {\n inputRefs.current[index - 1]?.focus();\n }\n };\n\n const handlePaste = (event: ClipboardEvent): void => {\n if (!event.clipboardData) return;\n\n const pastedValue = event.clipboardData.getData(\"text\");\n const autofillOtp = stripOtpFromAutofill(\n pastedValue,\n numOfInput,\n prefix\n );\n if (!handleInputFullValue(autofillOtp)) {\n event.preventDefault();\n }\n };\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n setOtpValues(new Array(numOfInput).fill(\"\"));\n\n if (!isWithinCooldown()) {\n setLastCtaTimestamp(new Date());\n setCountDown(cooldownDuration);\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const isWithinCooldown = (): boolean => {\n const currentTime = Date.now();\n const coolDownInMilliseconds = cooldownDuration 1000;\n\n return (\n currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n );\n };\n\n const beginCountdown = () => {\n const interval = setInterval(() => {\n const currentTime = Date.now();\n const coolDownInMilliseconds = cooldownDuration * 1000;\n\n const timer = Math.ceil(\n (lastCtaTimestamp.valueOf() +\n coolDownInMilliseconds -\n currentTime) /\n 1000\n );\n setCountDown(timer);\n if (timer <= 0) {\n if (onCooldownEnd) onCooldownEnd();\n clearInterval(interval);\n } else if (onCountdownChange) {\n onCountdownChange(timer);\n }\n }, 1000);\n\n return () => {\n clearInterval(interval);\n };\n };\n\n const generateId = (index: number, name: string, prefix?: string) => {\n return prefix\n ? `${prefix}-${name}-${index + 1}`\n : `${name}-${index + 1}`;\n };\n\n const displaySeconds = (time: number) => {\n return `${time} second${time === 1 ? \"\" : \"s\"}`;\n };\n\n const getCTALabelProps = (): Partial<\n React.HTMLAttributes<HTMLButtonElement>\n > => {\n return otherCtaProps.children\n ? { children: otherCtaProps.children }\n : {\n children:\n countDown > 0\n ? `Resend OTP in ${displaySeconds(countDown)}`\n : \"Resend OTP\",\n // use a fixed label to avoid repeated screen reader updates when the button is focused\n \"aria-label\":\n countDown > 0\n ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n : \"Resend OTP\",\n // use a secondary element to reflect the latest countdown\n \"aria-describedby\": timerId,\n };\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={clsx(styles.wrapper, className)}\n >\n <div\n className={styles.inputContainer}\n role=\"group\"\n aria-label={`${numOfInput}-digit OTP input field`}\n >\n {prefix && (\n <Typography.BodyBL\n as=\"span\"\n className={styles.prefix}\n data-testid=\"otp-prefix\"\n weight=\"semibold\"\n >\n <VisuallyHidden>O T P prefix</VisuallyHidden>\n {`${prefix.value} ${prefix.separator}`}\n </Typography.BodyBL>\n )}\n {otpValues.map((data, index) => {\n return (\n <Input\n className={styles.inputField}\n id={generateId(index, \"otp-input\", id)}\n data-testid={generateId(\n index,\n \"otp-input\",\n dataTestId\n )}\n aria-label={`${StringHelper.formatOrdinal(\n index + 1\n )} digit`}\n aria-invalid={hasError}\n aria-describedby={hasError ? errorId : undefined}\n key={index}\n ref={(el) => (inputRefs.current[index] = el)}\n type=\"text\"\n inputMode=\"numeric\"\n value={data}\n error={hasError}\n onChange={handleChange(index)}\n onKeyDown={handleKeyDown(index)}\n autoComplete=\"off\"\n {...otherProps}\n />\n );\n })}\n </div>\n {errorMessage && (\n <FormErrorMessage id={errorId} data-testid=\"otp-error-message\">\n {errorMessage}\n </FormErrorMessage>\n )}\n {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button /}\n <VisuallyHidden role=\"timer\" id={timerId}>\n {displaySeconds(countDown)} remaining\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"polite\">\n {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n </VisuallyHidden>\n {!otpOnly && (\n <Button\n className={styles.ctaButton}\n styleType={styleType}\n type=\"button\"\n sizeType=\"small\"\n {...otherCtaProps}\n onClick={handleClick}\n disabled={disabled \|\| isWithinCooldown()}\n {...getCTALabelProps()}\n />\n )}\n </div>\n );\n};\n\n// @catalog\n/\n A field composed of individual inputs for a numeric one-time password\n * with an in-built countdown mechanism.\n \n Use `OtpInput` when users must enter the one-time password (OTP)\n * for multi-factored authentication methods.\n */\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","clsx","styles.wrapper","children","styles.inputContainer","role","Typography","BodyBL","as","styles.prefix","weight","_jsx","VisuallyHidden","separator","map","data","Input","Object","assign","styles.inputField","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","Button","styles.ctaButton","sizeType"],"mappings":"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"}

package/cjs/otp-verification/contact-input-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),t=require("clsx"),i=require("../button/button.js"),r=require("../form/form-label.js"),n=require("../input-group/input-group.js"),o=require("../phone-number-input/phone-number-input.js"),d=require("../shared/accessibility/index.js"),l=require("./contact-input-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(t);exports.ContactInputSection=({id:t,"data-testid":c,disabled:u,readOnly:p,inputId:b,type:m,sendOtpPlaceholder:v,emailValue:h,onEmailChange:y,phoneNumberValue:I,onPhoneNumberChange:f,fixedCountry:j,isLoading:g,isVerified:x,countdown:C,onSendOtp:q,onStateReset:N,sendOtpError:O,"aria-labelledby":E,"aria-describedby":P})=>{const S=t?`${t}-contact-error`:void 0,W=e=>{N(),"email"===m&&y&&y(e.target.value)},R=e=>{N(),"phone-number"===m&&f&&f(e)},$=e=>{var a;return`Enter your ${null!==(a=null==e?void 0:e.name)&&void 0!==a?a:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs("div",{id:t,"data-testid":c,className:l.contactSectionWrapper,children:[e.jsxs("div",{className:l.contactInputSectionWrapper,children:[e.jsxs("div",{"data-max-width":"email"===m,className:s.default(l.contactInputWrapper,!!O&&l.contactInputWrapperError,u&&l.contactInputWrapperDisabled,p&&l.contactInputWrapperReadonly),children:["email"===m?e.jsx(n.InputGroup,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter email",value:h,onChange:W,type:"email",noBorder:!0,"aria-invalid":!!O,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.emailContactInput,u&&l.emailContactInputDisabled,p&&l.emailContactInputReadonly)}):e.jsx(o.PhoneNumberInput,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter mobile number",value:I,onChange:R,noBorder:!0,fixedCountry:j,"aria-invalid":!!O,"aria-required":!0,getAriaLabel:$,"aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.phoneContactInput,u&&l.phoneContactInputDisabled,p&&l.phoneContactInputReadonly)}),x&&e.jsx("div",{className:l.verifiedIconWrapper,"aria-label":"Verified",role:"img",children:e.jsx(a.TickCircleFillIcon,{})})]}),!u&&!p&&e.jsx(i.Button,{type:"button","data-testid":c?`${c}-contact-button`:void 0,onClick:q,disabled:C.isRunning||x,loading:g,className:l.contactButton,children:x?"Verified":g?"":C.isRunning?"Sent OTP":"Send OTP"})]}),O&&e.jsx(r.FormErrorMessage,{id:S,"data-testid":c?`${c}-contact-error`:void 0,role:"alert",children:O})]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),t=require("clsx"),r=require("../button/button.js"),i=require("../form/form-label/form-label.js"),n=require("../input-group/input-group.js"),o=require("../phone-number-input/phone-number-input.js"),d=require("../shared/accessibility/index.js"),l=require("./contact-input-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(t);exports.ContactInputSection=({id:t,"data-testid":c,disabled:u,readOnly:p,inputId:b,type:m,sendOtpPlaceholder:v,emailValue:h,onEmailChange:y,phoneNumberValue:f,onPhoneNumberChange:I,fixedCountry:j,isLoading:g,isVerified:x,countdown:C,onSendOtp:q,onStateReset:N,sendOtpError:O,"aria-labelledby":E,"aria-describedby":P})=>{const S=t?`${t}-contact-error`:void 0,W=e=>{N(),"email"===m&&y&&y(e.target.value)},R=e=>{N(),"phone-number"===m&&I&&I(e)},$=e=>{var a;return`Enter your ${null!==(a=null==e?void 0:e.name)&&void 0!==a?a:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs("div",{id:t,"data-testid":c,className:l.contactSectionWrapper,children:[e.jsxs("div",{className:l.contactInputSectionWrapper,children:[e.jsxs("div",{"data-max-width":"email"===m,className:s.default(l.contactInputWrapper,!!O&&l.contactInputWrapperError,u&&l.contactInputWrapperDisabled,p&&l.contactInputWrapperReadonly),children:["email"===m?e.jsx(n.InputGroup,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter email",value:h,onChange:W,type:"email",noBorder:!0,"aria-invalid":!!O,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.emailContactInput,u&&l.emailContactInputDisabled,p&&l.emailContactInputReadonly)}):e.jsx(o.PhoneNumberInput,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter mobile number",value:f,onChange:R,noBorder:!0,fixedCountry:j,"aria-invalid":!!O,"aria-required":!0,getAriaLabel:$,"aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.phoneContactInput,u&&l.phoneContactInputDisabled,p&&l.phoneContactInputReadonly)}),x&&e.jsx("div",{className:l.verifiedIconWrapper,"aria-label":"Verified",role:"img",children:e.jsx(a.TickCircleFillIcon,{})})]}),!u&&!p&&e.jsx(r.Button,{type:"button","data-testid":c?`${c}-contact-button`:void 0,onClick:q,disabled:C.isRunning||x,loading:g,className:l.contactButton,children:x?"Verified":g?"":C.isRunning?"Sent OTP":"Send OTP"})]}),O&&e.jsx(i.FormErrorMessage,{id:S,"data-testid":c?`${c}-contact-error`:void 0,role:"alert",children:O})]})};
 //# sourceMappingURL=contact-input-section.js.map

package/cjs/otp-verification/contact-input-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport type {\n CountryValue,\n PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport * as styles from \"./contact-input-section.styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n id,\n \"data-testid\": dataTestId,\n disabled,\n readOnly,\n inputId,\n type,\n sendOtpPlaceholder,\n emailValue,\n onEmailChange,\n phoneNumberValue,\n onPhoneNumberChange,\n fixedCountry,\n isLoading,\n isVerified,\n countdown,\n onSendOtp,\n onStateReset,\n sendOtpError,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onStateReset();\n if (type === \"email\" && onEmailChange) {\n onEmailChange(e.target.value);\n }\n };\n\n const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n onStateReset();\n if (type === \"phone-number\" && onPhoneNumberChange) {\n onPhoneNumberChange(value);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getContactButtonText = () => {\n if (isVerified) {\n return \"Verified\";\n }\n\n if (isLoading) {\n return \"\";\n }\n\n if (countdown.isRunning) {\n return \"Sent OTP\";\n }\n\n return \"Send OTP\";\n };\n\n const getMobileAriaLabel = (country?: CountryValue) =>\n `Enter your ${\n country?.name ?? \"\"\n } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContactInput = () =>\n type === \"email\" ? (\n <InputGroup\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter email\"}\n value={emailValue}\n onChange={handleEmailInputChange}\n type=\"email\"\n noBorder\n aria-invalid={!!sendOtpError}\n aria-required={true}\n aria-label=\"Enter your email address to receive a verification OTP\"\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.emailContactInput,\n disabled && styles.emailContactInputDisabled,\n readOnly && styles.emailContactInputReadonly\n )}\n />\n ) : (\n <PhoneNumberInput\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter mobile number\"}\n value={phoneNumberValue}\n onChange={handlePhoneInputChange}\n noBorder\n fixedCountry={fixedCountry}\n aria-invalid={!!sendOtpError}\n aria-required={true}\n getAriaLabel={getMobileAriaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.phoneContactInput,\n disabled && styles.phoneContactInputDisabled,\n readOnly && styles.phoneContactInputReadonly\n )}\n />\n );\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={styles.contactSectionWrapper}\n >\n <div className={styles.contactInputSectionWrapper}>\n <div\n data-max-width={type === \"email\"}\n className={clsx(\n styles.contactInputWrapper,\n !!sendOtpError && styles.contactInputWrapperError,\n disabled && styles.contactInputWrapperDisabled,\n readOnly && styles.contactInputWrapperReadonly\n )}\n >\n {renderContactInput()}\n {isVerified && (\n <div\n className={styles.verifiedIconWrapper}\n aria-label=\"Verified\"\n role=\"img\"\n >\n <TickCircleFillIcon />\n </div>\n )}\n </div>\n {!disabled && !readOnly && (\n <Button\n type=\"button\"\n data-testid={\n dataTestId\n ? `${dataTestId}-contact-button`\n : undefined\n }\n onClick={onSendOtp}\n disabled={countdown.isRunning \|\| isVerified}\n loading={isLoading}\n className={styles.contactButton}\n >\n {getContactButtonText()}\n </Button>\n )}\n </div>\n {sendOtpError && (\n <FormErrorMessage\n id={contactErrorId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-error` : undefined\n }\n role=\"alert\"\n >\n {sendOtpError}\n </FormErrorMessage>\n )}\n </div>\n );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","className","styles.contactSectionWrapper","styles.contactInputSectionWrapper","children","clsx","styles.contactInputWrapper","styles.contactInputWrapperError","styles.contactInputWrapperDisabled","styles.contactInputWrapperReadonly","_jsx","InputGroup","placeholder","onChange","noBorder","concatIds","styles.emailContactInput","styles.emailContactInputDisabled","styles.emailContactInputReadonly","PhoneNumberInput","getAriaLabel","styles.phoneContactInput","styles.phoneContactInputDisabled","styles.phoneContactInputReadonly","styles.verifiedIconWrapper","role","TickCircleFillIcon","Button","onClick","isRunning","loading","styles.contactButton","FormErrorMessage"],"mappings":"udAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAiEvE,OACIC,EAAAA,YACIhC,GAAIA,EAAE,cACOC,EACbgC,UAAWC,EAAAA,gCAEXF,EAAAA,KAAA,MAAA,CAAKC,UAAWE,EAAAA,2BAAiCC,SAAA,CAC7CJ,EAAAA,KAAA,MAAA,CAAA,iBAC6B,UAAT3B,EAChB4B,UAAWI,EAAAA,QACPC,EAAAA,sBACErB,GAAgBsB,EAAAA,yBAClBrC,GAAYsC,EAAAA,4BACZrC,GAAYsC,EAAAA,6BACfL,SAAA,CAzEJ,UAAT/B,EACIqC,EAAAA,IAACC,EAAAA,YACG3C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,cACnCmB,MAAOlB,EACPsC,SAAUvB,EACVjB,KAAK,QACLyC,6BACgB7B,EAAY,iBACb,eACJ,yDAAwD,kBAClDC,EAAc,mBACb6B,EAAAA,UACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPW,EAAAA,kBACA9C,GAAY+C,EAAAA,0BACZ9C,GAAY+C,+BAIpBR,EAAAA,IAACS,EAAAA,iBAAgB,CACbnD,GAAII,gBAEAH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,sBACnCmB,MAAOhB,EACPoC,SAAUnB,EACVoB,UAAQ,EACRnC,aAAcA,mBACEM,EAAY,iBACb,EACfmC,aAAczB,oBACGT,EAAc,mBACb6B,YACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPgB,oBACAnD,GAAYoD,EAAAA,0BACZnD,GAAYoD,EAAAA,6BAyBX1C,GACG6B,EAAAA,IAAA,MAAA,CACIT,UAAWuB,EAAAA,oBAA0B,aAC1B,WACXC,KAAK,MAAKrB,SAEVM,EAAAA,IAACgB,EAAAA,mBAAkB,CAAA,SAI7BxD,IAAaC,GACXuC,EAAAA,IAACiB,EAAAA,QACGtD,KAAK,SAAQ,cAETJ,EACM,GAAGA,wBACHoB,EAEVuC,QAAS7C,EACTb,SAAUY,EAAU+C,WAAahD,EACjCiD,QAASlD,EACTqB,UAAW8B,EAAAA,cAAoB3B,SAzH3CvB,EACO,WAGPD,EACO,GAGPE,EAAU+C,UACH,WAGJ,gBAmHF5C,GACGyB,EAAAA,IAACsB,EAAAA,iBAAgB,CACbhE,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjDoC,KAAK,QAAOrB,SAEXnB,MAGP"}
1	+ {"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport type {\n CountryValue,\n PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport * as styles from \"./contact-input-section.styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n id,\n \"data-testid\": dataTestId,\n disabled,\n readOnly,\n inputId,\n type,\n sendOtpPlaceholder,\n emailValue,\n onEmailChange,\n phoneNumberValue,\n onPhoneNumberChange,\n fixedCountry,\n isLoading,\n isVerified,\n countdown,\n onSendOtp,\n onStateReset,\n sendOtpError,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onStateReset();\n if (type === \"email\" && onEmailChange) {\n onEmailChange(e.target.value);\n }\n };\n\n const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n onStateReset();\n if (type === \"phone-number\" && onPhoneNumberChange) {\n onPhoneNumberChange(value);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getContactButtonText = () => {\n if (isVerified) {\n return \"Verified\";\n }\n\n if (isLoading) {\n return \"\";\n }\n\n if (countdown.isRunning) {\n return \"Sent OTP\";\n }\n\n return \"Send OTP\";\n };\n\n const getMobileAriaLabel = (country?: CountryValue) =>\n `Enter your ${\n country?.name ?? \"\"\n } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContactInput = () =>\n type === \"email\" ? (\n <InputGroup\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter email\"}\n value={emailValue}\n onChange={handleEmailInputChange}\n type=\"email\"\n noBorder\n aria-invalid={!!sendOtpError}\n aria-required={true}\n aria-label=\"Enter your email address to receive a verification OTP\"\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.emailContactInput,\n disabled && styles.emailContactInputDisabled,\n readOnly && styles.emailContactInputReadonly\n )}\n />\n ) : (\n <PhoneNumberInput\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter mobile number\"}\n value={phoneNumberValue}\n onChange={handlePhoneInputChange}\n noBorder\n fixedCountry={fixedCountry}\n aria-invalid={!!sendOtpError}\n aria-required={true}\n getAriaLabel={getMobileAriaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.phoneContactInput,\n disabled && styles.phoneContactInputDisabled,\n readOnly && styles.phoneContactInputReadonly\n )}\n />\n );\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={styles.contactSectionWrapper}\n >\n <div className={styles.contactInputSectionWrapper}>\n <div\n data-max-width={type === \"email\"}\n className={clsx(\n styles.contactInputWrapper,\n !!sendOtpError && styles.contactInputWrapperError,\n disabled && styles.contactInputWrapperDisabled,\n readOnly && styles.contactInputWrapperReadonly\n )}\n >\n {renderContactInput()}\n {isVerified && (\n <div\n className={styles.verifiedIconWrapper}\n aria-label=\"Verified\"\n role=\"img\"\n >\n <TickCircleFillIcon />\n </div>\n )}\n </div>\n {!disabled && !readOnly && (\n <Button\n type=\"button\"\n data-testid={\n dataTestId\n ? `${dataTestId}-contact-button`\n : undefined\n }\n onClick={onSendOtp}\n disabled={countdown.isRunning \|\| isVerified}\n loading={isLoading}\n className={styles.contactButton}\n >\n {getContactButtonText()}\n </Button>\n )}\n </div>\n {sendOtpError && (\n <FormErrorMessage\n id={contactErrorId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-error` : undefined\n }\n role=\"alert\"\n >\n {sendOtpError}\n </FormErrorMessage>\n )}\n </div>\n );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","className","styles.contactSectionWrapper","styles.contactInputSectionWrapper","children","clsx","styles.contactInputWrapper","styles.contactInputWrapperError","styles.contactInputWrapperDisabled","styles.contactInputWrapperReadonly","_jsx","InputGroup","placeholder","onChange","noBorder","concatIds","styles.emailContactInput","styles.emailContactInputDisabled","styles.emailContactInputReadonly","PhoneNumberInput","getAriaLabel","styles.phoneContactInput","styles.phoneContactInputDisabled","styles.phoneContactInputReadonly","styles.verifiedIconWrapper","role","TickCircleFillIcon","Button","onClick","isRunning","loading","styles.contactButton","FormErrorMessage"],"mappings":"keAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAiEvE,OACIC,EAAAA,YACIhC,GAAIA,EAAE,cACOC,EACbgC,UAAWC,EAAAA,gCAEXF,EAAAA,KAAA,MAAA,CAAKC,UAAWE,EAAAA,2BAAiCC,SAAA,CAC7CJ,EAAAA,KAAA,MAAA,CAAA,iBAC6B,UAAT3B,EAChB4B,UAAWI,EAAAA,QACPC,EAAAA,sBACErB,GAAgBsB,EAAAA,yBAClBrC,GAAYsC,EAAAA,4BACZrC,GAAYsC,EAAAA,6BACfL,SAAA,CAzEJ,UAAT/B,EACIqC,EAAAA,IAACC,EAAAA,YACG3C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,cACnCmB,MAAOlB,EACPsC,SAAUvB,EACVjB,KAAK,QACLyC,6BACgB7B,EAAY,iBACb,eACJ,yDAAwD,kBAClDC,EAAc,mBACb6B,EAAAA,UACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPW,EAAAA,kBACA9C,GAAY+C,EAAAA,0BACZ9C,GAAY+C,+BAIpBR,EAAAA,IAACS,EAAAA,iBAAgB,CACbnD,GAAII,gBAEAH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,sBACnCmB,MAAOhB,EACPoC,SAAUnB,EACVoB,UAAQ,EACRnC,aAAcA,mBACEM,EAAY,iBACb,EACfmC,aAAczB,oBACGT,EAAc,mBACb6B,YACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPgB,oBACAnD,GAAYoD,EAAAA,0BACZnD,GAAYoD,EAAAA,6BAyBX1C,GACG6B,EAAAA,IAAA,MAAA,CACIT,UAAWuB,EAAAA,oBAA0B,aAC1B,WACXC,KAAK,MAAKrB,SAEVM,EAAAA,IAACgB,EAAAA,mBAAkB,CAAA,SAI7BxD,IAAaC,GACXuC,EAAAA,IAACiB,EAAAA,QACGtD,KAAK,SAAQ,cAETJ,EACM,GAAGA,wBACHoB,EAEVuC,QAAS7C,EACTb,SAAUY,EAAU+C,WAAahD,EACjCiD,QAASlD,EACTqB,UAAW8B,EAAAA,cAAoB3B,SAzH3CvB,EACO,WAGPD,EACO,GAGPE,EAAU+C,UACH,WAGJ,gBAmHF5C,GACGyB,EAAAA,IAACsB,EAAAA,iBAAgB,CACbhE,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjDoC,KAAK,QAAOrB,SAEXnB,MAGP"}

package/cjs/otp-verification/otp-verification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport * as styles from \"./otp-verification.styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\n/*\n A multi-step form component that guides users through OTP-based verification.\n \n Use `OtpVerification` when you need to verify a user's identity through\n * email address or phone number.\n */\nexport const OtpVerification = (props: OtpVerificationProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n id,\n \"data-testid\": dataTestId,\n className,\n inputId,\n onSendOtp,\n onVerifyOtp,\n verifyOtpCountdownTimer = 60,\n sendOtpError,\n verifyOtpError,\n otpValue,\n onOtpChange,\n otpState,\n onOtpStateChange,\n otpReminderInterval = 120,\n } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n const countdown = useCountdown({\n duration: verifyOtpCountdownTimer,\n reminderInterval: otpReminderInterval,\n getStartMessage: (duration) =>\n `You can resend the OTP in ${duration} seconds`,\n getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n getCompletionMessage: () => \"You can now resend the OTP\",\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n // Send OTP\n const handleSendOtp = async () => {\n if (!onSendOtp \|\| isLoading) return;\n\n try {\n setIsLoading(true);\n await onSendOtp();\n onOtpStateChange(\"sent\");\n countdown.reset();\n countdown.start();\n } catch {\n // do nothing\n } finally {\n setIsLoading(false);\n }\n };\n\n // Verify OTP\n const handleVerifyOtp = async () => {\n if (!onVerifyOtp \|\| isVerifyLoading \|\| !otpValue?.value) return;\n\n try {\n setIsVerifyLoading(true);\n await onVerifyOtp(otpValue.value);\n\n onOtpStateChange(\"verified\");\n\n clearAnnouncer(\"polite\");\n announce(\n \"Success. Your email or mobile number has been verified.\",\n \"polite\"\n );\n\n // Reset the countdown and clear the OTP code in case user enter new OTP later\n countdown.reset();\n onOtpChange?.(\"\");\n } catch {\n // do nothing\n } finally {\n setIsVerifyLoading(false);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const resetToDefault = () => {\n if (otpState === \"verified\") {\n onOtpStateChange(\"default\");\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={clsx(styles.otpInputWrapper, className)}\n >\n <ContactInputSection\n {...props}\n inputId={inputId}\n data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n isLoading={isLoading}\n isVerified={otpState === \"verified\"}\n countdown={countdown}\n onSendOtp={handleSendOtp}\n onStateReset={resetToDefault}\n sendOtpError={sendOtpError}\n fixedCountry={\n props.type === \"phone-number\" ? props.fixedCountry : true\n }\n />\n\n {otpState === \"sent\" && (\n <VerificationSection\n {...props}\n data-testid={\n dataTestId ? `${dataTestId}-verification` : undefined\n }\n otpCode={otpValue?.value}\n otpPrefix={otpValue?.prefix}\n otpSeparator={otpValue?.separator}\n setOtpCode={onOtpChange}\n isVerifyLoading={isVerifyLoading}\n countdown={countdown}\n onVerifyOtp={handleVerifyOtp}\n verifyOtpError={verifyOtpError}\n />\n )}\n </div>\n );\n};\n"],"names":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","clsx","styles.otpInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"~~4kBAgBgCA~~,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,OAAA,MAAA,CACI3B,GAAIA,gBACSC,EACbC,UAAW0B,UAAKC,EAAAA,gBAAwB3B,GAAU4B,SAAA,CAElDC,MAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAAA,EACZnC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBkC,EACpDrB,UAAWA,EACXsB,WAAyB,aAAbzB,EACZQ,UAAWA,EACXf,UAnEU,IAAWiC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAKjC,IAAaU,EAElB,IACIC,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUmB,QACVnB,EAAUoB,OACd,CAAE,MAAAC,GAEF,SACIzB,GAAa,EACjB,CACJ,IAsDY0B,aAvBW,KACF,aAAb9B,GACAC,EAAiB,UACrB,EAqBQL,aAAcA,EACdmC,aACmB,iBAAf3C,EAAM4C,MAA0B5C,EAAM2C,gBAIhC,SAAb/B,GACGoB,EAAAA,IAACa,EAAAA,qCACO7C,EAAK,CAAA,cAELE,EAAa,GAAGA,sBAA4BkC,EAEhDU,QAASpC,eAAAA,EAAUqC,MACnBC,UAAWtC,aAAQ,EAARA,EAAUuC,OACrBC,aAAcxC,aAAQ,EAARA,EAAUyC,UACxBC,WAAYzC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAtEQ,IAAWgC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKhC,IAAeY,IAAoBR,aAAQ,EAARA,EAAUqC,OAElD,IACI5B,GAAmB,SACbb,EAAYI,EAASqC,OAE3BlC,EAAiB,YAEjBwC,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,UAIJlC,EAAUmB,QACV5B,SAAAA,EAAc,GAClB,CAAE,MAAA8B,GAEF,SACItB,GAAmB,EACvB,CACJ,IAgDgBV,eAAgBA,OAGtB"}
1	+ {"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport * as styles from \"./otp-verification.styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\n// @catalog\n/*\n A multi-step form component that guides users through OTP-based verification.\n \n Use `OtpVerification` when you need to verify a user's identity through\n * email address or phone number.\n */\nexport const OtpVerification = (props: OtpVerificationProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n id,\n \"data-testid\": dataTestId,\n className,\n inputId,\n onSendOtp,\n onVerifyOtp,\n verifyOtpCountdownTimer = 60,\n sendOtpError,\n verifyOtpError,\n otpValue,\n onOtpChange,\n otpState,\n onOtpStateChange,\n otpReminderInterval = 120,\n } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n const countdown = useCountdown({\n duration: verifyOtpCountdownTimer,\n reminderInterval: otpReminderInterval,\n getStartMessage: (duration) =>\n `You can resend the OTP in ${duration} seconds`,\n getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n getCompletionMessage: () => \"You can now resend the OTP\",\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n // Send OTP\n const handleSendOtp = async () => {\n if (!onSendOtp \|\| isLoading) return;\n\n try {\n setIsLoading(true);\n await onSendOtp();\n onOtpStateChange(\"sent\");\n countdown.reset();\n countdown.start();\n } catch {\n // do nothing\n } finally {\n setIsLoading(false);\n }\n };\n\n // Verify OTP\n const handleVerifyOtp = async () => {\n if (!onVerifyOtp \|\| isVerifyLoading \|\| !otpValue?.value) return;\n\n try {\n setIsVerifyLoading(true);\n await onVerifyOtp(otpValue.value);\n\n onOtpStateChange(\"verified\");\n\n clearAnnouncer(\"polite\");\n announce(\n \"Success. Your email or mobile number has been verified.\",\n \"polite\"\n );\n\n // Reset the countdown and clear the OTP code in case user enter new OTP later\n countdown.reset();\n onOtpChange?.(\"\");\n } catch {\n // do nothing\n } finally {\n setIsVerifyLoading(false);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const resetToDefault = () => {\n if (otpState === \"verified\") {\n onOtpStateChange(\"default\");\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={clsx(styles.otpInputWrapper, className)}\n >\n <ContactInputSection\n {...props}\n inputId={inputId}\n data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n isLoading={isLoading}\n isVerified={otpState === \"verified\"}\n countdown={countdown}\n onSendOtp={handleSendOtp}\n onStateReset={resetToDefault}\n sendOtpError={sendOtpError}\n fixedCountry={\n props.type === \"phone-number\" ? props.fixedCountry : true\n }\n />\n\n {otpState === \"sent\" && (\n <VerificationSection\n {...props}\n data-testid={\n dataTestId ? `${dataTestId}-verification` : undefined\n }\n otpCode={otpValue?.value}\n otpPrefix={otpValue?.prefix}\n otpSeparator={otpValue?.separator}\n setOtpCode={onOtpChange}\n isVerifyLoading={isVerifyLoading}\n countdown={countdown}\n onVerifyOtp={handleVerifyOtp}\n verifyOtpError={verifyOtpError}\n />\n )}\n </div>\n );\n};\n"],"names":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","clsx","styles.otpInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"4kBAiBgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,OAAA,MAAA,CACI3B,GAAIA,gBACSC,EACbC,UAAW0B,UAAKC,EAAAA,gBAAwB3B,GAAU4B,SAAA,CAElDC,MAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAAA,EACZnC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBkC,EACpDrB,UAAWA,EACXsB,WAAyB,aAAbzB,EACZQ,UAAWA,EACXf,UAnEU,IAAWiC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAKjC,IAAaU,EAElB,IACIC,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUmB,QACVnB,EAAUoB,OACd,CAAE,MAAAC,GAEF,SACIzB,GAAa,EACjB,CACJ,IAsDY0B,aAvBW,KACF,aAAb9B,GACAC,EAAiB,UACrB,EAqBQL,aAAcA,EACdmC,aACmB,iBAAf3C,EAAM4C,MAA0B5C,EAAM2C,gBAIhC,SAAb/B,GACGoB,EAAAA,IAACa,EAAAA,qCACO7C,EAAK,CAAA,cAELE,EAAa,GAAGA,sBAA4BkC,EAEhDU,QAASpC,eAAAA,EAAUqC,MACnBC,UAAWtC,aAAQ,EAARA,EAAUuC,OACrBC,aAAcxC,aAAQ,EAARA,EAAUyC,UACxBC,WAAYzC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAtEQ,IAAWgC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKhC,IAAeY,IAAoBR,aAAQ,EAARA,EAAUqC,OAElD,IACI5B,GAAmB,SACbb,EAAYI,EAASqC,OAE3BlC,EAAiB,YAEjBwC,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,UAIJlC,EAAUmB,QACV5B,SAAAA,EAAc,GAClB,CAAE,MAAA8B,GAEF,SACItB,GAAmB,EACvB,CACJ,IAgDgBV,eAAgBA,OAGtB"}

package/cjs/otp-verification/verification-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("../button/button.js"),r=require("../form/form-label.js"),t=require("../input-group/input-group.js"),a=require("../shared/accessibility/index.js"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("react");var d=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./thumbnail/email-thumbnail.js"),o=require("./thumbnail/phone-thumbnail.js"),l=require("./verification-section.styles.js");exports.VerificationSection=({id:u,"data-testid":p,type:c,showVerifyOtpThumbnail:v=!1,verifyOtpTitle:y,verifyOtpMessage:h,otpCode:j,setOtpCode:m,isVerifyLoading:g,countdown:b,onVerifyOtp:f,verifyOtpError:x,otpPrefix:q,otpSeparator:$})=>{const T=d.useId(),O=`${T}-title`,w=`${T}-message`,M=`${T}-verify-input-addon`,B=`${T}-verify-error`;return e.jsxs("div",{id:u,"data-testid":p,role:"group",className:l.verificationSectionWrapper,children:[v?e.jsx("div",{"aria-hidden":!0,children:"email"===c?e.jsx(n.EmailThumbnail,{}):e.jsx(o.PhoneThumbnail,{})}):null,e.jsxs("div",{className:l.sectionContainer,children:[e.jsxs("div",{children:[e.jsx(s.Typography.BodyMD,{weight:"semibold",id:O,"data-testid":p?`${p}-title`:void 0,children:y}),e.jsx(s.Typography.BodyMD,{weight:"regular",id:w,"data-testid":p?`${p}-message`:void 0,children:h})]}),e.jsxs("div",{children:[e.jsxs("div",{className:l.verifyInputWrapper,children:[e.jsx(t.InputGroup,{id:u?`${u}-verify-input`:void 0,"data-testid":p?`${p}-verify-input`:void 0,value:j,onChange:e=>null==m?void 0:m(e.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=q?q:""}${null!=$?$:""}`}},type:"number",error:!!x,"aria-labelledby":O,"aria-describedby":a.concatIds(w,M,x?B:void 0),"aria-invalid":!!x,"aria-required":!0}),e.jsx(i.Button,{id:u?`${u}-verify-button`:void 0,type:"button","data-testid":p?`${p}-verify-button`:void 0,onClick:f,loading:g,styleType:"light",disabled:!j||0===j.length,className:l.verifyButton,children:!g&&"Verify"})]}),x&&e.jsx(r.FormErrorMessage,{id:B,"data-testid":p?`${p}-verify-error`:void 0,role:"alert",children:x})]}),b.isRunning&&e.jsxs(s.Typography.BodyMD,{id:u?`${u}-countdown`:void 0,"data-testid":p?`${p}-countdown`:void 0,className:l.resendMessage,children:["Resend OTP in ",b.formatTime()]})]})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("../button/button.js"),r=require("../form/form-label/form-label.js"),t=require("../input-group/input-group.js"),a=require("../shared/accessibility/index.js"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("react");var d=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./thumbnail/email-thumbnail.js"),o=require("./thumbnail/phone-thumbnail.js"),l=require("./verification-section.styles.js");exports.VerificationSection=({id:u,"data-testid":p,type:c,showVerifyOtpThumbnail:v=!1,verifyOtpTitle:y,verifyOtpMessage:h,otpCode:j,setOtpCode:m,isVerifyLoading:b,countdown:f,onVerifyOtp:g,verifyOtpError:x,otpPrefix:q,otpSeparator:$})=>{const T=d.useId(),O=`${T}-title`,w=`${T}-message`,M=`${T}-verify-input-addon`,B=`${T}-verify-error`;return e.jsxs("div",{id:u,"data-testid":p,role:"group",className:l.verificationSectionWrapper,children:[v?e.jsx("div",{"aria-hidden":!0,children:"email"===c?e.jsx(n.EmailThumbnail,{}):e.jsx(o.PhoneThumbnail,{})}):null,e.jsxs("div",{className:l.sectionContainer,children:[e.jsxs("div",{children:[e.jsx(s.Typography.BodyMD,{weight:"semibold",id:O,"data-testid":p?`${p}-title`:void 0,children:y}),e.jsx(s.Typography.BodyMD,{weight:"regular",id:w,"data-testid":p?`${p}-message`:void 0,children:h})]}),e.jsxs("div",{children:[e.jsxs("div",{className:l.verifyInputWrapper,children:[e.jsx(t.InputGroup,{id:u?`${u}-verify-input`:void 0,"data-testid":p?`${p}-verify-input`:void 0,value:j,onChange:e=>null==m?void 0:m(e.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=q?q:""}${null!=$?$:""}`}},type:"number",error:!!x,"aria-labelledby":O,"aria-describedby":a.concatIds(w,M,x?B:void 0),"aria-invalid":!!x,"aria-required":!0}),e.jsx(i.Button,{id:u?`${u}-verify-button`:void 0,type:"button","data-testid":p?`${p}-verify-button`:void 0,onClick:g,loading:b,styleType:"light",disabled:!j||0===j.length,className:l.verifyButton,children:!b&&"Verify"})]}),x&&e.jsx(r.FormErrorMessage,{id:B,"data-testid":p?`${p}-verify-error`:void 0,role:"alert",children:x})]}),f.isRunning&&e.jsxs(s.Typography.BodyMD,{id:u?`${u}-countdown`:void 0,"data-testid":p?`${p}-countdown`:void 0,className:l.resendMessage,children:["Resend OTP in ",f.formatTime()]})]})]})};
 //# sourceMappingURL=verification-section.js.map

package/cjs/otp-verification/verification-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verification-section.js","sources":["../../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport * as styles from \"./verification-section.styles\";\n\nexport const VerificationSection = ({\n id,\n \"data-testid\": dataTestId,\n type,\n showVerifyOtpThumbnail = false,\n verifyOtpTitle,\n verifyOtpMessage,\n otpCode,\n setOtpCode,\n isVerifyLoading,\n countdown,\n onVerifyOtp,\n verifyOtpError,\n otpPrefix,\n otpSeparator,\n}: VerificationSectionProps) => {\n const internalId = useId();\n\n const titleId = `${internalId}-title`;\n const messageId = `${internalId}-message`;\n const otpAddonId = `${internalId}-verify-input-addon`;\n const verifyErrorId = `${internalId}-verify-error`;\n\n const renderThumbnail = () => {\n if (!showVerifyOtpThumbnail) return null;\n\n return (\n <div aria-hidden>\n {type === \"email\" ? <EmailThumbnail /> : <PhoneThumbnail />}\n </div>\n );\n };\n\n return (\n <div\n id={id}\n data-testid={dataTestId}\n role=\"group\"\n className={styles.verificationSectionWrapper}\n >\n {renderThumbnail()}\n <div className={styles.sectionContainer}>\n <div>\n <Typography.BodyMD\n weight=\"semibold\"\n id={titleId}\n data-testid={\n dataTestId ? `${dataTestId}-title` : undefined\n }\n >\n {verifyOtpTitle}\n </Typography.BodyMD>\n <Typography.BodyMD\n weight=\"regular\"\n id={messageId}\n data-testid={\n dataTestId ? `${dataTestId}-message` : undefined\n }\n >\n {verifyOtpMessage}\n </Typography.BodyMD>\n </div>\n <div>\n <div className={styles.verifyInputWrapper}>\n <InputGroup\n id={id ? `${id}-verify-input` : undefined}\n data-testid={\n dataTestId\n ? `${dataTestId}-verify-input`\n : undefined\n }\n value={otpCode}\n onChange={(e) => setOtpCode?.(e.target.value)}\n placeholder=\"Enter OTP\"\n addon={{\n type: \"label\",\n attributes: {\n value: `${otpPrefix ?? \"\"}${\n otpSeparator ?? \"\"\n }`,\n },\n }}\n type=\"number\"\n error={!!verifyOtpError}\n aria-labelledby={titleId}\n aria-describedby={concatIds(\n messageId,\n otpAddonId,\n verifyOtpError ? verifyErrorId : undefined\n )}\n aria-invalid={!!verifyOtpError}\n aria-required={true}\n />\n <Button\n id={id ? `${id}-verify-button` : undefined}\n type=\"button\"\n data-testid={\n dataTestId\n ? `${dataTestId}-verify-button`\n : undefined\n }\n onClick={onVerifyOtp}\n loading={isVerifyLoading}\n styleType=\"light\"\n disabled={!otpCode \|\| otpCode.length === 0}\n className={styles.verifyButton}\n >\n {!isVerifyLoading && \"Verify\"}\n </Button>\n </div>\n {verifyOtpError && (\n <FormErrorMessage\n id={verifyErrorId}\n data-testid={\n dataTestId\n ? `${dataTestId}-verify-error`\n : undefined\n }\n role=\"alert\"\n >\n {verifyOtpError}\n </FormErrorMessage>\n )}\n </div>\n {countdown.isRunning && (\n <Typography.BodyMD\n id={id ? `${id}-countdown` : undefined}\n data-testid={\n dataTestId ? `${dataTestId}-countdown` : undefined\n }\n className={styles.resendMessage}\n >\n Resend OTP in {countdown.formatTime()}\n </Typography.BodyMD>\n )}\n </div>\n </div>\n );\n};\n"],"names":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","role","className","styles.verificationSectionWrapper","children","_jsx","EmailThumbnail","PhoneThumbnail","styles.sectionContainer","Typography","BodyMD","weight","undefined","styles.verifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","Button","onClick","loading","styleType","disabled","length","styles.verifyButton","FormErrorMessage","isRunning","styles.resendMessage","formatTime"],"mappings":"~~knBAUmC~~,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAYzB,OACIM,EAAAA,KAAA,MAAA,CACIpB,GAAIA,gBACSC,EACboB,KAAK,QACLC,UAAWC,6BAAiCC,SAAA,CAd3CrB,EAGDsB,EAAAA,IAAA,MAAA,CAAA,eAAA,EAAAD,SACc,UAATtB,EAAmBuB,EAAAA,IAACC,EAAAA,eAAc,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAAc,CAAA,KAJ5B,KAiBhCP,EAAAA,KAAA,MAAA,CAAKE,UAAWM,mBAAuBJ,SAAA,CACnCJ,OAAA,MAAA,CAAAI,SAAA,CACIC,EAAAA,IAACI,aAAWC,QACRC,OAAO,WACP/B,GAAIgB,EAAO,cAEPf,EAAa,GAAGA,eAAqB+B,EAASR,SAGjDpB,IAELqB,EAAAA,IAACI,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACP/B,GAAIiB,gBAEAhB,EAAa,GAAGA,iBAAuB+B,EAASR,SAGnDnB,OAGTe,EAAAA,KAAA,MAAA,CAAAI,SAAA,CACIJ,EAAAA,KAAA,MAAA,CAAKE,UAAWW,EAAAA,mBAAyBT,SAAA,CACrCC,EAAAA,IAACS,aAAU,CACPlC,GAAIA,EAAK,GAAGA,sBAAoBgC,EAAS,cAErC/B,EACM,GAAGA,sBACH+B,EAEVG,MAAO7B,EACP8B,SAAWC,GAAM9B,aAAU,EAAVA,EAAa8B,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHtC,KAAM,QACNuC,WAAY,CACRN,MAAO,GAAGvB,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLwC,QAAS/B,EAAc,kBACNK,EAAO,mBACN2B,EAAAA,UACd1B,EACAC,EACAP,EAAiBQ,OAAgBa,oBAErBrB,EAAc,iBACf,IAEnBc,EAAAA,IAACmB,EAAAA,OAAM,CACH5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EACjC9B,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACH+B,EAEVa,QAASnC,EACToC,QAAStC,EACTuC,UAAU,QACVC,UAAW1C,GAA8B,IAAnBA,EAAQ2C,OAC9B3B,UAAW4B,EAAAA,aAAmB1B,UAE5BhB,GAAmB,cAG5BG,GACGc,EAAAA,IAAC0B,EAAAA,kBACGnD,GAAImB,EAAa,cAEblB,EACM,GAAGA,sBACH+B,EAEVX,KAAK,QAAOG,SAEXb,OAIZF,EAAU2C,WACPhC,EAAAA,KAACS,EAAAA,WAAWC,OAAM,CACd9B,GAAIA,EAAK,GAAGA,mBAAiBgC,EAAS,cAElC/B,EAAa,GAAGA,mBAAyB+B,EAE7CV,UAAW+B,EAAAA,cAAoB7B,SAAA,CAAA,iBAEhBf,EAAU6C,qBAInC"}
1	+ {"version":3,"file":"verification-section.js","sources":["../../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport * as styles from \"./verification-section.styles\";\n\nexport const VerificationSection = ({\n id,\n \"data-testid\": dataTestId,\n type,\n showVerifyOtpThumbnail = false,\n verifyOtpTitle,\n verifyOtpMessage,\n otpCode,\n setOtpCode,\n isVerifyLoading,\n countdown,\n onVerifyOtp,\n verifyOtpError,\n otpPrefix,\n otpSeparator,\n}: VerificationSectionProps) => {\n const internalId = useId();\n\n const titleId = `${internalId}-title`;\n const messageId = `${internalId}-message`;\n const otpAddonId = `${internalId}-verify-input-addon`;\n const verifyErrorId = `${internalId}-verify-error`;\n\n const renderThumbnail = () => {\n if (!showVerifyOtpThumbnail) return null;\n\n return (\n <div aria-hidden>\n {type === \"email\" ? <EmailThumbnail /> : <PhoneThumbnail />}\n </div>\n );\n };\n\n return (\n <div\n id={id}\n data-testid={dataTestId}\n role=\"group\"\n className={styles.verificationSectionWrapper}\n >\n {renderThumbnail()}\n <div className={styles.sectionContainer}>\n <div>\n <Typography.BodyMD\n weight=\"semibold\"\n id={titleId}\n data-testid={\n dataTestId ? `${dataTestId}-title` : undefined\n }\n >\n {verifyOtpTitle}\n </Typography.BodyMD>\n <Typography.BodyMD\n weight=\"regular\"\n id={messageId}\n data-testid={\n dataTestId ? `${dataTestId}-message` : undefined\n }\n >\n {verifyOtpMessage}\n </Typography.BodyMD>\n </div>\n <div>\n <div className={styles.verifyInputWrapper}>\n <InputGroup\n id={id ? `${id}-verify-input` : undefined}\n data-testid={\n dataTestId\n ? `${dataTestId}-verify-input`\n : undefined\n }\n value={otpCode}\n onChange={(e) => setOtpCode?.(e.target.value)}\n placeholder=\"Enter OTP\"\n addon={{\n type: \"label\",\n attributes: {\n value: `${otpPrefix ?? \"\"}${\n otpSeparator ?? \"\"\n }`,\n },\n }}\n type=\"number\"\n error={!!verifyOtpError}\n aria-labelledby={titleId}\n aria-describedby={concatIds(\n messageId,\n otpAddonId,\n verifyOtpError ? verifyErrorId : undefined\n )}\n aria-invalid={!!verifyOtpError}\n aria-required={true}\n />\n <Button\n id={id ? `${id}-verify-button` : undefined}\n type=\"button\"\n data-testid={\n dataTestId\n ? `${dataTestId}-verify-button`\n : undefined\n }\n onClick={onVerifyOtp}\n loading={isVerifyLoading}\n styleType=\"light\"\n disabled={!otpCode \|\| otpCode.length === 0}\n className={styles.verifyButton}\n >\n {!isVerifyLoading && \"Verify\"}\n </Button>\n </div>\n {verifyOtpError && (\n <FormErrorMessage\n id={verifyErrorId}\n data-testid={\n dataTestId\n ? `${dataTestId}-verify-error`\n : undefined\n }\n role=\"alert\"\n >\n {verifyOtpError}\n </FormErrorMessage>\n )}\n </div>\n {countdown.isRunning && (\n <Typography.BodyMD\n id={id ? `${id}-countdown` : undefined}\n data-testid={\n dataTestId ? `${dataTestId}-countdown` : undefined\n }\n className={styles.resendMessage}\n >\n Resend OTP in {countdown.formatTime()}\n </Typography.BodyMD>\n )}\n </div>\n </div>\n );\n};\n"],"names":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","role","className","styles.verificationSectionWrapper","children","_jsx","EmailThumbnail","PhoneThumbnail","styles.sectionContainer","Typography","BodyMD","weight","undefined","styles.verifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","Button","onClick","loading","styleType","disabled","length","styles.verifyButton","FormErrorMessage","isRunning","styles.resendMessage","formatTime"],"mappings":"6nBAUmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAYzB,OACIM,EAAAA,KAAA,MAAA,CACIpB,GAAIA,gBACSC,EACboB,KAAK,QACLC,UAAWC,6BAAiCC,SAAA,CAd3CrB,EAGDsB,EAAAA,IAAA,MAAA,CAAA,eAAA,EAAAD,SACc,UAATtB,EAAmBuB,EAAAA,IAACC,EAAAA,eAAc,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAAc,CAAA,KAJ5B,KAiBhCP,EAAAA,KAAA,MAAA,CAAKE,UAAWM,mBAAuBJ,SAAA,CACnCJ,OAAA,MAAA,CAAAI,SAAA,CACIC,EAAAA,IAACI,aAAWC,QACRC,OAAO,WACP/B,GAAIgB,EAAO,cAEPf,EAAa,GAAGA,eAAqB+B,EAASR,SAGjDpB,IAELqB,EAAAA,IAACI,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACP/B,GAAIiB,gBAEAhB,EAAa,GAAGA,iBAAuB+B,EAASR,SAGnDnB,OAGTe,EAAAA,KAAA,MAAA,CAAAI,SAAA,CACIJ,EAAAA,KAAA,MAAA,CAAKE,UAAWW,EAAAA,mBAAyBT,SAAA,CACrCC,EAAAA,IAACS,aAAU,CACPlC,GAAIA,EAAK,GAAGA,sBAAoBgC,EAAS,cAErC/B,EACM,GAAGA,sBACH+B,EAEVG,MAAO7B,EACP8B,SAAWC,GAAM9B,aAAU,EAAVA,EAAa8B,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHtC,KAAM,QACNuC,WAAY,CACRN,MAAO,GAAGvB,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLwC,QAAS/B,EAAc,kBACNK,EAAO,mBACN2B,EAAAA,UACd1B,EACAC,EACAP,EAAiBQ,OAAgBa,oBAErBrB,EAAc,iBACf,IAEnBc,EAAAA,IAACmB,EAAAA,OAAM,CACH5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EACjC9B,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACH+B,EAEVa,QAASnC,EACToC,QAAStC,EACTuC,UAAU,QACVC,UAAW1C,GAA8B,IAAnBA,EAAQ2C,OAC9B3B,UAAW4B,EAAAA,aAAmB1B,UAE5BhB,GAAmB,cAG5BG,GACGc,EAAAA,IAAC0B,EAAAA,kBACGnD,GAAImB,EAAa,cAEblB,EACM,GAAGA,sBACH+B,EAEVX,KAAK,QAAOG,SAEXb,OAIZF,EAAU2C,WACPhC,EAAAA,KAACS,EAAAA,WAAWC,OAAM,CACd9B,GAAIA,EAAK,GAAGA,mBAAiBgC,EAAS,cAElC/B,EAAa,GAAGA,mBAAyB+B,EAE7CV,UAAW+B,EAAAA,cAAoB7B,SAAA,CAAA,iBAEhBf,EAAU6C,qBAInC"}