@lifesg/react-design-system 3.4.0 → 3.5.0-canary.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/e-signature/e-signature-canvas.js +1 -1
- package/cjs/e-signature/e-signature-canvas.js.map +1 -1
- package/cjs/e-signature/e-signature.styles.js +19 -15
- package/cjs/e-signature/e-signature.styles.js.map +1 -1
- package/cjs/file-download/file-list-card/file-list-card.styles.js +1 -1
- package/cjs/file-download/file-list-card/file-list-card.styles.js.map +1 -1
- package/cjs/file-upload/file-item-edit.js +1 -1
- package/cjs/file-upload/file-item-edit.js.map +1 -1
- package/cjs/file-upload/file-item-edit.styles.js +12 -7
- package/cjs/file-upload/file-item-edit.styles.js.map +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.js +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.js.map +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.styles.js +74 -52
- package/cjs/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
- package/cjs/file-upload/file-list.js +1 -1
- package/cjs/file-upload/file-list.js.map +1 -1
- package/cjs/file-upload/file-list.styles.js +4 -11
- package/cjs/file-upload/file-list.styles.js.map +1 -1
- package/cjs/file-upload/file-upload.js +1 -1
- package/cjs/file-upload/file-upload.js.map +1 -1
- package/cjs/footer/footer-helper.js +1 -1
- package/cjs/footer/footer-helper.js.map +1 -1
- package/cjs/form/form-label.style.js +11 -8
- package/cjs/form/form-label.style.js.map +1 -1
- package/cjs/index.js +1 -1
- package/cjs/navbar/drawer.js +1 -1
- package/cjs/navbar/drawer.js.map +1 -1
- package/cjs/navbar/navbar-logo-data.js +1 -1
- package/cjs/navbar/navbar-logo-data.js.map +1 -1
- package/cjs/navbar/navbar.js +1 -1
- package/cjs/navbar/navbar.js.map +1 -1
- package/cjs/shared/internal-calendar/calendar-manager.style.js +18 -17
- package/cjs/shared/internal-calendar/calendar-manager.style.js.map +1 -1
- package/cjs/theme/colour-primitive/specs/toteboard-colour-set.js +2 -0
- package/cjs/theme/colour-primitive/specs/toteboard-colour-set.js.map +1 -0
- package/cjs/theme/colour-primitive/theme-helper.js +1 -1
- package/cjs/theme/colour-primitive/theme-helper.js.map +1 -1
- package/cjs/theme/colour-semantic/theme-helper.js +1 -1
- package/cjs/theme/colour-semantic/theme-helper.js.map +1 -1
- package/cjs/theme/font/specs/toteboard-font-set.js +2 -0
- package/cjs/theme/font/specs/toteboard-font-set.js.map +1 -0
- package/cjs/theme/font/theme-helper.js +1 -1
- package/cjs/theme/font/theme-helper.js.map +1 -1
- package/cjs/theme/font-spec/specs/bookingsg-font-spec-set.js +1 -1
- package/cjs/theme/font-spec/specs/bookingsg-font-spec-set.js.map +1 -1
- package/cjs/theme/font-spec/specs/default-font-spec-set.js +1 -1
- package/cjs/theme/font-spec/specs/default-font-spec-set.js.map +1 -1
- package/cjs/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js +1 -1
- package/cjs/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js.map +1 -1
- package/cjs/theme/font-spec/specs/toteboard-font-spec-set.js +2 -0
- package/cjs/theme/font-spec/specs/toteboard-font-spec-set.js.map +1 -0
- package/cjs/theme/font-spec/theme-helper.js +1 -1
- package/cjs/theme/font-spec/theme-helper.js.map +1 -1
- package/cjs/theme/index.js +1 -1
- package/cjs/theme/index.js.map +1 -1
- package/cjs/time-range-picker/combobox-picker/combobox-picker.js +1 -1
- package/cjs/time-range-picker/combobox-picker/combobox-picker.js.map +1 -1
- package/cjs/time-range-picker/common.styles.js +7 -3
- package/cjs/time-range-picker/common.styles.js.map +1 -1
- package/cjs/time-range-picker/dial-picker/dial-picker.js +1 -1
- package/cjs/time-range-picker/dial-picker/dial-picker.js.map +1 -1
- package/cjs/timepicker/timepicker.styles.js +7 -3
- package/cjs/timepicker/timepicker.styles.js.map +1 -1
- package/cjs/typography/typography.styles.js +6 -6
- package/cjs/typography/typography.styles.js.map +1 -1
- package/cjs/util/merge-refs.js +1 -1
- package/cjs/util/merge-refs.js.map +1 -1
- package/e-signature/e-signature-canvas.js +1 -1
- package/e-signature/e-signature-canvas.js.map +1 -1
- package/e-signature/e-signature.styles.js +20 -16
- package/e-signature/e-signature.styles.js.map +1 -1
- package/file-download/file-list-card/file-list-card.styles.js +1 -1
- package/file-download/file-list-card/file-list-card.styles.js.map +1 -1
- package/file-upload/file-item-edit.d.ts +4 -1
- package/file-upload/file-item-edit.js +1 -1
- package/file-upload/file-item-edit.js.map +1 -1
- package/file-upload/file-item-edit.styles.js +21 -16
- package/file-upload/file-item-edit.styles.js.map +1 -1
- package/file-upload/file-list-item/file-list-item.d.ts +3 -1
- package/file-upload/file-list-item/file-list-item.js +1 -1
- package/file-upload/file-list-item/file-list-item.js.map +1 -1
- package/file-upload/file-list-item/file-list-item.styles.d.ts +14 -0
- package/file-upload/file-list-item/file-list-item.styles.js +67 -45
- package/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
- package/file-upload/file-list.d.ts +3 -0
- package/file-upload/file-list.js +1 -1
- package/file-upload/file-list.js.map +1 -1
- package/file-upload/file-list.styles.js +4 -11
- package/file-upload/file-list.styles.js.map +1 -1
- package/file-upload/file-upload.d.ts +1 -1
- package/file-upload/file-upload.js +1 -1
- package/file-upload/file-upload.js.map +1 -1
- package/file-upload/types.d.ts +5 -0
- package/footer/footer-helper.js +1 -1
- package/footer/footer-helper.js.map +1 -1
- package/form/form-label.style.js +12 -9
- package/form/form-label.style.js.map +1 -1
- package/index.js +1 -1
- package/navbar/drawer.js +1 -1
- package/navbar/drawer.js.map +1 -1
- package/navbar/navbar-logo-data.js +1 -1
- package/navbar/navbar-logo-data.js.map +1 -1
- package/navbar/navbar.js +1 -1
- package/navbar/navbar.js.map +1 -1
- package/package.json +1 -1
- package/shared/internal-calendar/calendar-manager.style.js +18 -17
- package/shared/internal-calendar/calendar-manager.style.js.map +1 -1
- package/theme/colour-primitive/specs/toteboard-colour-set.d.ts +2 -0
- package/theme/colour-primitive/specs/toteboard-colour-set.js +2 -0
- package/theme/colour-primitive/specs/toteboard-colour-set.js.map +1 -0
- package/theme/colour-primitive/theme-helper.js +1 -1
- package/theme/colour-primitive/theme-helper.js.map +1 -1
- package/theme/colour-semantic/theme-helper.js +1 -1
- package/theme/colour-semantic/theme-helper.js.map +1 -1
- package/theme/font/specs/toteboard-font-set.d.ts +2 -0
- package/theme/font/specs/toteboard-font-set.js +2 -0
- package/theme/font/specs/toteboard-font-set.js.map +1 -0
- package/theme/font/theme-helper.js +1 -1
- package/theme/font/theme-helper.js.map +1 -1
- package/theme/font-spec/specs/bookingsg-font-spec-set.js +1 -1
- package/theme/font-spec/specs/bookingsg-font-spec-set.js.map +1 -1
- package/theme/font-spec/specs/default-font-spec-set.js +1 -1
- package/theme/font-spec/specs/default-font-spec-set.js.map +1 -1
- package/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js +1 -1
- package/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js.map +1 -1
- package/theme/font-spec/specs/toteboard-font-spec-set.d.ts +2 -0
- package/theme/font-spec/specs/toteboard-font-spec-set.js +2 -0
- package/theme/font-spec/specs/toteboard-font-spec-set.js.map +1 -0
- package/theme/font-spec/theme-helper.js +1 -1
- package/theme/font-spec/theme-helper.js.map +1 -1
- package/theme/index.d.ts +19 -0
- package/theme/index.js +1 -1
- package/theme/index.js.map +1 -1
- package/theme/types.d.ts +3 -3
- package/time-range-picker/combobox-picker/combobox-picker.js +1 -1
- package/time-range-picker/combobox-picker/combobox-picker.js.map +1 -1
- package/time-range-picker/common.styles.d.ts +6 -2
- package/time-range-picker/common.styles.js +9 -5
- package/time-range-picker/common.styles.js.map +1 -1
- package/time-range-picker/dial-picker/dial-picker.js +1 -1
- package/time-range-picker/dial-picker/dial-picker.js.map +1 -1
- package/timepicker/timepicker.styles.js +7 -3
- package/timepicker/timepicker.styles.js.map +1 -1
- package/typography/typography.styles.js +4 -4
- package/typography/typography.styles.js.map +1 -1
- package/util/merge-refs.d.ts +1 -1
- package/util/merge-refs.js +1 -1
- package/util/merge-refs.js.map +1 -1
package/cjs/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/theme/index.ts"],"sourcesContent":["import { BorderUtilValues } from \"./border-util/theme-helper\";\nimport { BorderValues } from \"./border/theme-helper\";\nimport { MediaQuery as MediaQueryValues } from \"./breakpoint/media-query-helper\";\nimport { BreakpointValues } from \"./breakpoint/theme-helper\";\nimport { PrimitiveColour } from \"./colour-primitive/theme-helper\";\nimport { ColourSemantic } from \"./colour-semantic/theme-helper\";\nimport { ThemeButton, ThemeNavbar } from \"./components/theme-helper\";\nimport { FontSpecValues } from \"./font-spec/theme-helper\";\nimport { FontValues } from \"./font/theme-helper\";\nimport { MotionValues } from \"./motion/theme-helper\";\nimport { RadiusValues } from \"./radius/theme-helper\";\nimport { ShadowValues } from \"./shadow/theme-helper\";\nimport { SpacingValues } from \"./spacing/theme-helper\";\nimport { ThemeSpec } from \"./types\";\nimport { createThemeWithColourMode } from \"./use-theme-mode\";\n\nexport * from \"./types\";\nexport * from \"./ds-theme-provider\";\nexport * from \"./use-theme-mode\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\n\nexport const Colour = {\n ...ColourSemantic,\n Primitive: PrimitiveColour,\n};\n\nexport const Font = {\n ...FontValues,\n Spec: FontSpecValues,\n};\n\nexport const Motion = MotionValues;\n\nexport const Border = {\n ...BorderValues,\n Util: BorderUtilValues,\n};\n\nexport const Spacing = SpacingValues;\n\nexport const Radius = RadiusValues;\n\nexport const Shadow = ShadowValues;\n\nexport const Breakpoint = BreakpointValues;\n\nexport const MediaQuery = MediaQueryValues;\n\nexport const ThemeComponent = {\n Button: ThemeButton,\n Navbar: ThemeNavbar,\n};\n\n// =============================================================================\n// THEME PRESETS\n// =============================================================================\n\n// Theme definitions\nconst LifeSGThemeBase: ThemeSpec = {\n colourScheme: \"lifesg\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"lifesg\",\n componentScheme: \"lifesg\",\n _v2: {\n colorScheme: \"base\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"base\",\n },\n};\n\nconst BookingSGThemeBase: ThemeSpec = {\n colourScheme: \"bookingsg\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"bookingsg\",\n _v2: {\n colorScheme: \"bookingsg\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"bookingsg\",\n },\n};\n\nconst CCubeThemeBase: ThemeSpec = {\n colourScheme: \"ccube\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"ccube\",\n _v2: {\n colorScheme: \"ccube\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"ccube\",\n },\n};\n\nconst CareerCompassThemeBase: ThemeSpec = {\n colourScheme: \"careercompass\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"careercompass\",\n componentScheme: \"default\",\n};\n\nconst MyLegacyThemeBase: ThemeSpec = {\n colourScheme: \"mylegacy\",\n fontScheme: \"mylegacy\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"mylegacy\",\n _v2: {\n colorScheme: \"mylegacy\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"mylegacy\",\n },\n};\n\nconst RBSThemeBase: ThemeSpec = {\n colourScheme: \"rbs\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"rbs\",\n _v2: {\n colorScheme: \"rbs\",\n textStyleScheme: \"base\",\n designTokenScheme: \"rbs\",\n resourceScheme: \"rbs\",\n },\n};\n\nconst OneServiceThemeBase: ThemeSpec = {\n colourScheme: \"oneservice\",\n fontScheme: \"oneservice\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"oneservice\",\n};\n\nconst PAThemeBase: ThemeSpec = {\n colourScheme: \"pa\",\n fontScheme: \"pa\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"pa\",\n componentScheme: \"pa\",\n};\n\nconst A11yPlaygroundThemeBase: ThemeSpec = {\n colourScheme: \"a11yplayground\",\n fontScheme: \"a11yplayground\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"a11yplayground\",\n componentScheme: \"a11yplayground\",\n};\n\nexport const SupportGoWhereThemeBase: ThemeSpec = {\n colourScheme: \"supportgowhere\",\n fontScheme: \"supportgowhere\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nexport const SGWDigitalLobbyThemeBase: ThemeSpec = {\n colourScheme: \"sgwdigitallobby\",\n fontScheme: \"sgwdigitallobby\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nconst IMDAThemeBase: ThemeSpec = {\n colourScheme: \"imda\",\n fontScheme: \"imda\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"imda\",\n componentScheme: \"default\",\n};\n\nconst SPFThemeBase: ThemeSpec = {\n colourScheme: \"spf\",\n fontScheme: \"spf\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"spf\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"spf\",\n componentScheme: \"spf\",\n};\n\nconst SMGSThemeBase: ThemeSpec = {\n colourScheme: \"smgs\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"smgs\",\n componentScheme: \"smgs\",\n};\n\n// =============================================================================\n// THEME COLLECTIONS\n// =============================================================================\n\n// Theme presets with backward compatibility and light/dark variants\nexport const LifeSGTheme = {\n ...LifeSGThemeBase,\n light: createThemeWithColourMode(LifeSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(LifeSGThemeBase, \"dark\"),\n};\n\nexport const BookingSGTheme = {\n ...BookingSGThemeBase,\n light: createThemeWithColourMode(BookingSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(BookingSGThemeBase, \"dark\"),\n};\n\nexport const CCubeTheme = {\n ...CCubeThemeBase,\n light: createThemeWithColourMode(CCubeThemeBase, \"light\"),\n dark: createThemeWithColourMode(CCubeThemeBase, \"dark\"),\n};\n\nexport const CareerCompassTheme = {\n ...CareerCompassThemeBase,\n light: createThemeWithColourMode(CareerCompassThemeBase, \"light\"),\n dark: createThemeWithColourMode(CareerCompassThemeBase, \"dark\"),\n};\n\nexport const MyLegacyTheme = {\n ...MyLegacyThemeBase,\n light: createThemeWithColourMode(MyLegacyThemeBase, \"light\"),\n dark: createThemeWithColourMode(MyLegacyThemeBase, \"dark\"),\n};\n\nexport const RBSTheme = {\n ...RBSThemeBase,\n light: createThemeWithColourMode(RBSThemeBase, \"light\"),\n dark: createThemeWithColourMode(RBSThemeBase, \"dark\"),\n};\n\nexport const OneServiceTheme = {\n ...OneServiceThemeBase,\n light: createThemeWithColourMode(OneServiceThemeBase, \"light\"),\n dark: createThemeWithColourMode(OneServiceThemeBase, \"dark\"),\n};\n\nexport const PATheme = {\n ...PAThemeBase,\n light: createThemeWithColourMode(PAThemeBase, \"light\"),\n dark: createThemeWithColourMode(PAThemeBase, \"dark\"),\n};\n\nexport const A11yPlaygroundTheme = {\n ...A11yPlaygroundThemeBase,\n light: createThemeWithColourMode(A11yPlaygroundThemeBase, \"light\"),\n dark: createThemeWithColourMode(A11yPlaygroundThemeBase, \"dark\"),\n};\n\nexport const SupportGoWhereTheme = {\n ...SupportGoWhereThemeBase,\n light: createThemeWithColourMode(SupportGoWhereThemeBase, \"light\"),\n dark: createThemeWithColourMode(SupportGoWhereThemeBase, \"dark\"),\n};\n\nexport const SGWDigitalLobbyTheme = {\n ...SGWDigitalLobbyThemeBase,\n light: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"light\"),\n dark: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"dark\"),\n};\n\nexport const IMDATheme = {\n ...IMDAThemeBase,\n light: createThemeWithColourMode(IMDAThemeBase, \"light\"),\n dark: createThemeWithColourMode(IMDAThemeBase, \"dark\"),\n};\n\nexport const SPFTheme = {\n ...SPFThemeBase,\n light: createThemeWithColourMode(SPFThemeBase, \"light\"),\n dark: createThemeWithColourMode(SPFThemeBase, \"dark\"),\n};\n\nexport const SMGSTheme = {\n ...SMGSThemeBase,\n light: createThemeWithColourMode(SMGSThemeBase, \"light\"),\n dark: createThemeWithColourMode(SMGSThemeBase, \"dark\"),\n};\n"],"names":["Colour","Object","assign","ColourSemantic","Primitive","PrimitiveColour","Font","FontValues","Spec","FontSpecValues","Motion","MotionValues","Border","BorderValues","Util","BorderUtilValues","Spacing","SpacingValues","Radius","RadiusValues","Shadow","ShadowValues","Breakpoint","BreakpointValues","MediaQuery","MediaQueryValues","ThemeComponent","Button","ThemeButton","Navbar","ThemeNavbar","LifeSGThemeBase","colourScheme","fontScheme","motionScheme","borderScheme","spacingScheme","radiusScheme","shadowScheme","breakpointScheme","resourceScheme","componentScheme","_v2","colorScheme","textStyleScheme","designTokenScheme","BookingSGThemeBase","CCubeThemeBase","CareerCompassThemeBase","MyLegacyThemeBase","RBSThemeBase","OneServiceThemeBase","PAThemeBase","A11yPlaygroundThemeBase","SupportGoWhereThemeBase","SGWDigitalLobbyThemeBase","IMDAThemeBase","SPFThemeBase","SMGSThemeBase","LifeSGTheme","light","createThemeWithColourMode","dark","BookingSGTheme","CCubeTheme","CareerCompassTheme","MyLegacyTheme","RBSTheme","OneServiceTheme","PATheme","A11yPlaygroundTheme","SupportGoWhereTheme","SGWDigitalLobbyTheme","IMDATheme","SPFTheme","SMGSTheme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/theme/index.ts"],"sourcesContent":["import { BorderUtilValues } from \"./border-util/theme-helper\";\nimport { BorderValues } from \"./border/theme-helper\";\nimport { MediaQuery as MediaQueryValues } from \"./breakpoint/media-query-helper\";\nimport { BreakpointValues } from \"./breakpoint/theme-helper\";\nimport { PrimitiveColour } from \"./colour-primitive/theme-helper\";\nimport { ColourSemantic } from \"./colour-semantic/theme-helper\";\nimport { ThemeButton, ThemeNavbar } from \"./components/theme-helper\";\nimport { FontSpecValues } from \"./font-spec/theme-helper\";\nimport { FontValues } from \"./font/theme-helper\";\nimport { MotionValues } from \"./motion/theme-helper\";\nimport { RadiusValues } from \"./radius/theme-helper\";\nimport { ShadowValues } from \"./shadow/theme-helper\";\nimport { SpacingValues } from \"./spacing/theme-helper\";\nimport { ThemeSpec } from \"./types\";\nimport { createThemeWithColourMode } from \"./use-theme-mode\";\n\nexport * from \"./types\";\nexport * from \"./ds-theme-provider\";\nexport * from \"./use-theme-mode\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\n\nexport const Colour = {\n ...ColourSemantic,\n Primitive: PrimitiveColour,\n};\n\nexport const Font = {\n ...FontValues,\n Spec: FontSpecValues,\n};\n\nexport const Motion = MotionValues;\n\nexport const Border = {\n ...BorderValues,\n Util: BorderUtilValues,\n};\n\nexport const Spacing = SpacingValues;\n\nexport const Radius = RadiusValues;\n\nexport const Shadow = ShadowValues;\n\nexport const Breakpoint = BreakpointValues;\n\nexport const MediaQuery = MediaQueryValues;\n\nexport const ThemeComponent = {\n Button: ThemeButton,\n Navbar: ThemeNavbar,\n};\n\n// =============================================================================\n// THEME PRESETS\n// =============================================================================\n\n// Theme definitions\nconst LifeSGThemeBase: ThemeSpec = {\n colourScheme: \"lifesg\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"lifesg\",\n componentScheme: \"lifesg\",\n _v2: {\n colorScheme: \"base\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"base\",\n },\n};\n\nconst BookingSGThemeBase: ThemeSpec = {\n colourScheme: \"bookingsg\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"bookingsg\",\n _v2: {\n colorScheme: \"bookingsg\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"bookingsg\",\n },\n};\n\nconst CCubeThemeBase: ThemeSpec = {\n colourScheme: \"ccube\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"ccube\",\n _v2: {\n colorScheme: \"ccube\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"ccube\",\n },\n};\n\nconst CareerCompassThemeBase: ThemeSpec = {\n colourScheme: \"careercompass\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"careercompass\",\n componentScheme: \"default\",\n};\n\nconst MyLegacyThemeBase: ThemeSpec = {\n colourScheme: \"mylegacy\",\n fontScheme: \"mylegacy\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"mylegacy\",\n _v2: {\n colorScheme: \"mylegacy\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"mylegacy\",\n },\n};\n\nconst RBSThemeBase: ThemeSpec = {\n colourScheme: \"rbs\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"rbs\",\n _v2: {\n colorScheme: \"rbs\",\n textStyleScheme: \"base\",\n designTokenScheme: \"rbs\",\n resourceScheme: \"rbs\",\n },\n};\n\nconst OneServiceThemeBase: ThemeSpec = {\n colourScheme: \"oneservice\",\n fontScheme: \"oneservice\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"oneservice\",\n};\n\nconst PAThemeBase: ThemeSpec = {\n colourScheme: \"pa\",\n fontScheme: \"pa\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"pa\",\n componentScheme: \"pa\",\n};\n\nconst A11yPlaygroundThemeBase: ThemeSpec = {\n colourScheme: \"a11yplayground\",\n fontScheme: \"a11yplayground\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"a11yplayground\",\n componentScheme: \"a11yplayground\",\n};\n\nexport const SupportGoWhereThemeBase: ThemeSpec = {\n colourScheme: \"supportgowhere\",\n fontScheme: \"supportgowhere\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nexport const SGWDigitalLobbyThemeBase: ThemeSpec = {\n colourScheme: \"sgwdigitallobby\",\n fontScheme: \"sgwdigitallobby\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nconst IMDAThemeBase: ThemeSpec = {\n colourScheme: \"imda\",\n fontScheme: \"imda\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"imda\",\n componentScheme: \"default\",\n};\n\nconst SPFThemeBase: ThemeSpec = {\n colourScheme: \"spf\",\n fontScheme: \"spf\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"spf\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"spf\",\n componentScheme: \"spf\",\n};\n\nconst SMGSThemeBase: ThemeSpec = {\n colourScheme: \"smgs\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"smgs\",\n componentScheme: \"smgs\",\n};\n\nconst ToteBoardThemeBase: ThemeSpec = {\n colourScheme: \"toteboard\",\n fontScheme: \"toteboard\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"toteboard\",\n componentScheme: \"default\",\n};\n\n// =============================================================================\n// THEME COLLECTIONS\n// =============================================================================\n\n// Theme presets with backward compatibility and light/dark variants\nexport const LifeSGTheme = {\n ...LifeSGThemeBase,\n light: createThemeWithColourMode(LifeSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(LifeSGThemeBase, \"dark\"),\n};\n\nexport const BookingSGTheme = {\n ...BookingSGThemeBase,\n light: createThemeWithColourMode(BookingSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(BookingSGThemeBase, \"dark\"),\n};\n\nexport const CCubeTheme = {\n ...CCubeThemeBase,\n light: createThemeWithColourMode(CCubeThemeBase, \"light\"),\n dark: createThemeWithColourMode(CCubeThemeBase, \"dark\"),\n};\n\nexport const CareerCompassTheme = {\n ...CareerCompassThemeBase,\n light: createThemeWithColourMode(CareerCompassThemeBase, \"light\"),\n dark: createThemeWithColourMode(CareerCompassThemeBase, \"dark\"),\n};\n\nexport const MyLegacyTheme = {\n ...MyLegacyThemeBase,\n light: createThemeWithColourMode(MyLegacyThemeBase, \"light\"),\n dark: createThemeWithColourMode(MyLegacyThemeBase, \"dark\"),\n};\n\nexport const RBSTheme = {\n ...RBSThemeBase,\n light: createThemeWithColourMode(RBSThemeBase, \"light\"),\n dark: createThemeWithColourMode(RBSThemeBase, \"dark\"),\n};\n\nexport const OneServiceTheme = {\n ...OneServiceThemeBase,\n light: createThemeWithColourMode(OneServiceThemeBase, \"light\"),\n dark: createThemeWithColourMode(OneServiceThemeBase, \"dark\"),\n};\n\nexport const PATheme = {\n ...PAThemeBase,\n light: createThemeWithColourMode(PAThemeBase, \"light\"),\n dark: createThemeWithColourMode(PAThemeBase, \"dark\"),\n};\n\nexport const A11yPlaygroundTheme = {\n ...A11yPlaygroundThemeBase,\n light: createThemeWithColourMode(A11yPlaygroundThemeBase, \"light\"),\n dark: createThemeWithColourMode(A11yPlaygroundThemeBase, \"dark\"),\n};\n\nexport const SupportGoWhereTheme = {\n ...SupportGoWhereThemeBase,\n light: createThemeWithColourMode(SupportGoWhereThemeBase, \"light\"),\n dark: createThemeWithColourMode(SupportGoWhereThemeBase, \"dark\"),\n};\n\nexport const SGWDigitalLobbyTheme = {\n ...SGWDigitalLobbyThemeBase,\n light: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"light\"),\n dark: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"dark\"),\n};\n\nexport const IMDATheme = {\n ...IMDAThemeBase,\n light: createThemeWithColourMode(IMDAThemeBase, \"light\"),\n dark: createThemeWithColourMode(IMDAThemeBase, \"dark\"),\n};\n\nexport const SPFTheme = {\n ...SPFThemeBase,\n light: createThemeWithColourMode(SPFThemeBase, \"light\"),\n dark: createThemeWithColourMode(SPFThemeBase, \"dark\"),\n};\n\nexport const SMGSTheme = {\n ...SMGSThemeBase,\n light: createThemeWithColourMode(SMGSThemeBase, \"light\"),\n dark: createThemeWithColourMode(SMGSThemeBase, \"dark\"),\n};\n\nexport const ToteBoardTheme = {\n ...ToteBoardThemeBase,\n light: createThemeWithColourMode(ToteBoardThemeBase, \"light\"),\n dark: createThemeWithColourMode(ToteBoardThemeBase, \"dark\"),\n};\n"],"names":["Colour","Object","assign","ColourSemantic","Primitive","PrimitiveColour","Font","FontValues","Spec","FontSpecValues","Motion","MotionValues","Border","BorderValues","Util","BorderUtilValues","Spacing","SpacingValues","Radius","RadiusValues","Shadow","ShadowValues","Breakpoint","BreakpointValues","MediaQuery","MediaQueryValues","ThemeComponent","Button","ThemeButton","Navbar","ThemeNavbar","LifeSGThemeBase","colourScheme","fontScheme","motionScheme","borderScheme","spacingScheme","radiusScheme","shadowScheme","breakpointScheme","resourceScheme","componentScheme","_v2","colorScheme","textStyleScheme","designTokenScheme","BookingSGThemeBase","CCubeThemeBase","CareerCompassThemeBase","MyLegacyThemeBase","RBSThemeBase","OneServiceThemeBase","PAThemeBase","A11yPlaygroundThemeBase","SupportGoWhereThemeBase","SGWDigitalLobbyThemeBase","IMDAThemeBase","SPFThemeBase","SMGSThemeBase","ToteBoardThemeBase","LifeSGTheme","light","createThemeWithColourMode","dark","BookingSGTheme","CCubeTheme","CareerCompassTheme","MyLegacyTheme","RBSTheme","OneServiceTheme","PATheme","A11yPlaygroundTheme","SupportGoWhereTheme","SGWDigitalLobbyTheme","IMDATheme","SPFTheme","SMGSTheme","ToteBoardTheme"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../../form/form-label.style.js"),a=require("../../input-range-select/input-range-select.style.js"),l=require("../../input/input.style.js"),n=require("../../shared/accessibility/index.js");require("styled-components"),require("../../theme/index.js"),require("../../util/string-helper.js"),require("../../shared/dropdown-list/dropdown-label.styles.js");var s=require("../../shared/dropdown-list/dropdown-list.js"),o=require("../../shared/dropdown-list/dropdown-list-state.js");require("../../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../../button/button.style.js"),require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js");var d=require("../../util/simple-id-generator.js");require("@react-aria/live-announcer");var u=require("../../shared/dropdown-wrapper/element-with-dropdown.js");require("../../shared/dropdown-list/dropdown-list.styles.js"),require("../../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../../external/lodash/_getTag.js"),require("../../external/lodash/isArguments.js"),require("../../external/lodash/_baseGetTag.js"),require("../../external/lodash/isBuffer.js"),require("../../external/lodash/isTypedArray.js"),require("../../external/lodash/_Stack.js"),require("../../external/lodash/_SetCache.js"),require("../../external/lodash/_equalByTag.js"),require("../../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../../shared/dropdown-list/virtuoso-components.js");var c=require("../../shared/range-input-inner-container/range-input-inner-container.js"),m=require("../../util/time-helper.js"),p=require("../common.styles.js"),v=require("./combobox-picker.styles.js");exports.ComboboxPicker=h=>{var{id:b,disabled:g=!1,error:j,value:x,format:f="12hr",readOnly:q,onChange:y,onFocus:I,onBlur:w,alignment:S="left",dropdownZIndex:T,startLimit:C,endLimit:E,initialScrollStartTime:k,initialScrollEndTime:H,interval:O=15,dropdownRootNode
|
|
1
|
+
"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../../form/form-label.style.js"),a=require("../../input-range-select/input-range-select.style.js"),l=require("../../input/input.style.js"),n=require("../../shared/accessibility/index.js");require("styled-components"),require("../../theme/index.js"),require("../../util/string-helper.js"),require("../../shared/dropdown-list/dropdown-label.styles.js");var s=require("../../shared/dropdown-list/dropdown-list.js"),o=require("../../shared/dropdown-list/dropdown-list-state.js");require("../../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../../button/button.style.js"),require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js");var d=require("../../util/simple-id-generator.js");require("@react-aria/live-announcer");var u=require("../../shared/dropdown-wrapper/element-with-dropdown.js");require("../../shared/dropdown-list/dropdown-list.styles.js"),require("../../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../../external/lodash/_getTag.js"),require("../../external/lodash/isArguments.js"),require("../../external/lodash/_baseGetTag.js"),require("../../external/lodash/isBuffer.js"),require("../../external/lodash/isTypedArray.js"),require("../../external/lodash/_Stack.js"),require("../../external/lodash/_SetCache.js"),require("../../external/lodash/_equalByTag.js"),require("../../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../../shared/dropdown-list/virtuoso-components.js");var c=require("../../shared/range-input-inner-container/range-input-inner-container.js"),m=require("../../util/time-helper.js"),p=require("../common.styles.js"),v=require("./combobox-picker.styles.js");exports.ComboboxPicker=h=>{var{id:b,disabled:g=!1,error:j,value:x,format:f="12hr",readOnly:q,onChange:y,onFocus:I,onBlur:w,alignment:S="left",dropdownZIndex:T,startLimit:C,endLimit:E,initialScrollStartTime:k,initialScrollEndTime:H,interval:O=15,dropdownRootNode:$,"aria-labelledby":F,"aria-describedby":B,"aria-invalid":L}=h,_=e.__rest(h,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const D=d.useId(),[M,R]=t.useState(null),[N,A]=t.useState(!1),[W,Z]=t.useState(""),[K,P]=t.useState(""),[V,G]=t.useState(""),[z,J]=t.useState(""),[Q,U]=t.useState(""),X=t.useRef(null),Y=t.useRef(null),ee=t.useRef(null),re=`${D}-listbox`,te=`${D}-start-label`,ie=`${D}-end-label`,ae=`${D}-error-message`,le=t.useMemo((()=>m.TimeHelper.generateTimings(O,f,C,E)),[O,f,C,E]),ne=t.useMemo((()=>{if(""===z)return le;const e=m.TimeHelper.findClosestFlooredTime(z,le);return e?le.slice(le.indexOf(e)):[]}),[le,z]),se=t.useCallback((e=>m.TimeHelper.parseInput(e,f)),[f]),oe=t.useMemo((()=>{var e;return null!==(e=se(k))&&void 0!==e?e:""}),[k,se]),de=t.useMemo((()=>{var e;return null!==(e=se(H))&&void 0!==e?e:""}),[H,se]);t.useEffect((()=>{var e,r;if(x){const t=null!==(e=se(x.start))&&void 0!==e?e:"",i=null!==(r=se(x.end))&&void 0!==r?r:"";P(t),G(i),J(t),U(i)}}),[x,se]),t.useEffect((()=>{if(j)return void A(!1);const e=se(K),r=se(V);if(void 0===e)Z("Invalid start time");else if(void 0===r)Z("Invalid end time");else{if(!(""!==e&&""!==r&&m.TimeHelper.to24Hour(r)<m.TimeHelper.to24Hour(e)))return Z(""),void(document.activeElement!==Y.current&&document.activeElement!==ee.current||A(!0));Z("End time must be after start time")}A(!1)}),[K,V,se,j]);const ue=()=>"start"===M?"Selecting for: Start time":"end"===M?"Selecting for: End time":void 0,ce=e=>n.concatIds(F,"start"===e?te:ie),me=()=>n.concatIds(B,!j&&W?ae:void 0),pe=e=>{g||q||(M||N||null==I||I(),R(e),A(!0))},ve=e=>{var r;g||q||(R(e),A(!0),null===(r=("start"===e?Y:ee).current)||void 0===r||r.select())};function he(e){var r;switch(e.code){case"Enter":"start"===M?be(K):"end"===M&&(N&&ge(V),null===(r=ee.current)||void 0===r||r.blur());break;case"Tab":je(K,V,{})}}const be=e=>{je(e,V,{goToNextInput:!0})},ge=e=>{je(K,e,{triggerOnBlur:!0})},je=(e,r,{goToNextInput:t,triggerOnBlur:i})=>{var a,l,n;const s=null!==(a=se(e))&&void 0!==a?a:z,o=null!==(l=se(r))&&void 0!==l?l:Q;P(s),G(o);s===z&&o===Q||null==y||y({start:s,end:o}),t&&void 0!==se(e)&&(R("end"),null===(n=ee.current)||void 0===n||n.select()),i&&(R(null),A(!1),null==w||w()),J(s),U(o)},xe=e=>{e.stopPropagation(),P(""),G(""),J(""),U("");null==y||y({start:"",end:""}),R(null),A(!1)},fe=e=>{var r,t;const i=e.relatedTarget,a=(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focusable]"))||(null===(t=null==i?void 0:i.matches)||void 0===t?void 0:t.call(i,"[data-floating-ui-focus-guard]")),l=X.current&&X.current.contains(i);M&&!N&&!l&&!a&&je(K,V,{triggerOnBlur:!0})},qe=()=>{if(!q&&!g&&((null==K?void 0:K.length)>0||(null==V?void 0:V.length)>0))return r.jsx(a.ClearIconContainer,{onClick:xe,type:"button","aria-label":"Clear",children:r.jsx(l.ClearIcon,{"aria-hidden":!0})})};return r.jsxs(p.Wrapper,Object.assign({id:b},_,{children:[r.jsx(o.DropdownListState,{children:r.jsx(u.ElementWithDropdown,{enabled:!q&&!g,isOpen:N,renderElement:()=>r.jsxs(v.TimeFieldContainer,{ref:X,$disabled:g,$error:j||!!W,$readOnly:q,onBlur:fe,role:"group",children:[r.jsx(n.VisuallyHidden,{id:te,children:"Start time"}),r.jsx(n.VisuallyHidden,{id:ie,children:"End time"}),r.jsxs(c.RangeInputInnerContainer,{error:j||!!W,currentActive:null===M?"none":M,children:[r.jsx(p.SelectorInput,{ref:Y,onFocus:()=>pe("start"),placeholder:"start"===M?"hh:mm":"From",onChange:e=>P(e.target.value),value:K,readOnly:q||g,"data-testid":_["data-testid"]?`${_["data-testid"]}-timepicker-selector-start`:"timepicker-selector-start",onClick:()=>ve("start"),onKeyDown:he,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":ce("start"),"aria-describedby":me(),"aria-expanded":N&&"start"===M,"aria-controls":re,"aria-autocomplete":"list","aria-invalid":j||L||!!W,"aria-disabled":g,"aria-readonly":q,$disabled:g}),r.jsx(p.SelectorInput,{ref:ee,onFocus:()=>pe("end"),placeholder:"end"===M?"hh:mm":"To",onChange:e=>G(e.target.value),value:V,readOnly:q||g,"data-testid":_["data-testid"]?`${_["data-testid"]}-timepicker-selector-end`:"timepicker-selector-end",onClick:()=>ve("end"),onKeyDown:he,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":ce("end"),"aria-describedby":me(),"aria-expanded":N&&"end"===M,"aria-controls":re,"aria-autocomplete":"list","aria-invalid":j||L||!!W||void 0,"aria-disabled":g||void 0,"aria-readonly":q||void 0,$disabled:g})]}),qe()]}),renderDropdown:()=>{if("start"===M){const e=se(K)||oe;return r.jsx(s.DropdownList,{listItems:le,onSelectItem:be,selectedItems:[K],topScrollItem:m.TimeHelper.findClosestFlooredTime(e,le),listboxId:re,ariaLabel:ue(),disableItemFocus:!0,matchElementWidth:!0})}{const e=se(V)||de;return r.jsx(s.DropdownList,{listItems:ne,onSelectItem:ge,selectedItems:[V],topScrollItem:m.TimeHelper.findClosestFlooredTime(e,ne),listboxId:re,ariaLabel:ue(),disableItemFocus:!0,matchElementWidth:!0})}},onClose:e=>{"outside-press"===e?(R(null),A(!1),null==w||w()):je(K,V,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===M?Y:ee).current)||void 0===e||e.focus(),A(!1)},offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:T,rootNode:$})}),!j&&W&&r.jsxs(i.ErrorMessageContainer,{children:[r.jsx(i.ErrorIcon,{"aria-hidden":!0}),r.jsx(i.ErrorMessage,{id:ae,tabIndex:0,"data-testid":b?`${b}-error-message`:"error-message",children:W})]})]}))};
|
|
2
2
|
//# sourceMappingURL=combobox-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-picker.js","sources":["../../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import { OpenChangeReason } from \"@floating-ui/react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n ErrorIcon,\n ErrorMessage,\n ErrorMessageContainer,\n} from \"../../form/form-label.style\";\nimport { ClearIconContainer } from \"../../input-range-select/input-range-select.style\";\nimport { ClearIcon } from \"../../input/input.style\";\nimport { VisuallyHidden, concatIds } from \"../../shared/accessibility\";\nimport { DropdownListState } from \"../../shared/dropdown-list\";\nimport { DropdownList } from \"../../shared/dropdown-list/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, Wrapper } from \"../common.styles\";\nimport { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport { TimeFieldContainer } from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n goToNextInput?: boolean | undefined;\n triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n id,\n disabled = false,\n error,\n value,\n format = \"12hr\",\n readOnly,\n onChange,\n onFocus,\n onBlur,\n alignment = \"left\",\n dropdownZIndex,\n startLimit,\n endLimit,\n initialScrollStartTime,\n initialScrollEndTime,\n interval = 15,\n dropdownRootNode,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n ...otherProps\n}: TimeRangePickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const internalId = useId();\n const [activeTimeSelector, setActiveTimeSelector] =\n useState<TimeRangeInputType | null>(null);\n const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n const [validationError, setValidationError] = useState<string>(\"\");\n\n const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const startInputRef = useRef<HTMLInputElement>(null);\n const endInputRef = useRef<HTMLInputElement>(null);\n\n const listboxId = `${internalId}-listbox`;\n const startLabelId = `${internalId}-start-label`;\n const endLabelId = `${internalId}-end-label`;\n const errorId = `${internalId}-error-message`;\n\n const startOptions = useMemo(\n () =>\n TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n [interval, format, startLimit, endLimit]\n );\n const endOptions = useMemo(() => {\n if (initialStartTimeVal === \"\") return startOptions;\n\n const flooredStartVal = TimeHelper.findClosestFlooredTime(\n initialStartTimeVal,\n startOptions\n );\n return flooredStartVal\n ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n : [];\n }, [startOptions, initialStartTimeVal]);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n const parseInput = useCallback(\n (input: string | undefined): string | undefined => {\n return TimeHelper.parseInput(input, format);\n },\n [format]\n );\n\n const parsedInitialStartScrollTime = useMemo(\n () => parseInput(initialScrollStartTime) ?? \"\",\n [initialScrollStartTime, parseInput]\n );\n\n const parsedInitialEndScrollTime = useMemo(\n () => parseInput(initialScrollEndTime) ?? \"\",\n [initialScrollEndTime, parseInput]\n );\n\n useEffect(() => {\n if (value) {\n const start = parseInput(value.start) ?? \"\";\n const end = parseInput(value.end) ?? \"\";\n\n setStartTimeVal(start);\n setEndTimeVal(end);\n setInitialStartTimeVal(start);\n setInitialEndTimeVal(end);\n }\n }, [value, parseInput]);\n\n // Validation for keyboard input\n useEffect(() => {\n if (error) {\n setDropdownOpen(false);\n return;\n }\n\n const start = parseInput(startTimeVal);\n const end = parseInput(endTimeVal);\n\n if (start === undefined) {\n setValidationError(\"Invalid start time\");\n } else if (end === undefined) {\n setValidationError(\"Invalid end time\");\n } else if (\n start !== \"\" &&\n end !== \"\" &&\n TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n ) {\n setValidationError(\"End time must be after start time\");\n } else {\n setValidationError(\"\");\n // Re-open dropdown if error was corrected\n if (\n document.activeElement === startInputRef.current ||\n document.activeElement === endInputRef.current\n ) {\n setDropdownOpen(true);\n }\n return;\n }\n\n // Hide dropdown so error message is visible\n setDropdownOpen(false);\n }, [startTimeVal, endTimeVal, parseInput, error]);\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const getDropdownAriaLabel = () => {\n if (activeTimeSelector === \"start\") {\n return \"Selecting for: Start time\";\n }\n\n if (activeTimeSelector === \"end\") {\n return \"Selecting for: End time\";\n }\n\n return undefined;\n };\n\n const getInputLabelledBy = (type: TimeRangeInputType) => {\n return concatIds(\n ariaLabelledBy,\n type === \"start\" ? startLabelId : endLabelId\n );\n };\n\n const getInputDescribedBy = () => {\n return concatIds(\n ariaDescribedBy,\n !error && validationError ? errorId : undefined\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleInputFocus = (selector: TimeRangeInputType) => {\n if (disabled || readOnly) return;\n\n // Only run onFocus if not already focused\n if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n setActiveTimeSelector(selector);\n setDropdownOpen(true);\n };\n\n const handleInputClick = (selector: TimeRangeInputType) => {\n if (disabled || readOnly) return;\n\n setActiveTimeSelector(selector);\n setDropdownOpen(true);\n (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n };\n\n function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n switch (event.code) {\n case \"Enter\":\n if (activeTimeSelector === \"start\") {\n handleStartTime(startTimeVal);\n } else if (activeTimeSelector === \"end\") {\n // Let handleBlur call handleTimeChange instead\n if (dropdownOpen) handleEndTime(endTimeVal);\n endInputRef.current?.blur();\n }\n break;\n case \"Tab\":\n handleTimeChange(startTimeVal, endTimeVal, {});\n break;\n default:\n break;\n }\n }\n\n const handleStartTime = (input: string) => {\n handleTimeChange(input, endTimeVal, { goToNextInput: true });\n };\n\n const handleEndTime = (input: string) => {\n handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n };\n\n const handleTimeChange = (\n startInput: string,\n endInput: string,\n {\n goToNextInput, // Used by handleStart to move to end input automatically\n triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n }: TimeChangeOptions\n ) => {\n const start = parseInput(startInput) ?? initialStartTimeVal;\n const end = parseInput(endInput) ?? initialEndTimeVal;\n\n setStartTimeVal(start);\n setEndTimeVal(end);\n\n const timeValue: TimeRangePickerValue = { start, end };\n\n // Trigger onChange if values have changed\n if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n onChange?.(timeValue);\n }\n\n // Go to end input only if start is a valid time\n if (goToNextInput && parseInput(startInput) !== undefined) {\n setActiveTimeSelector(\"end\");\n endInputRef.current?.select();\n }\n\n if (triggerOnBlur) {\n setActiveTimeSelector(null);\n setDropdownOpen(false);\n onBlur?.();\n }\n\n setInitialStartTimeVal(start);\n setInitialEndTimeVal(end);\n };\n\n const handleClear = (event: React.MouseEvent) => {\n event.stopPropagation();\n setStartTimeVal(\"\");\n setEndTimeVal(\"\");\n setInitialStartTimeVal(\"\");\n setInitialEndTimeVal(\"\");\n\n const timeValue: TimeRangePickerValue = {\n start: \"\",\n end: \"\",\n };\n\n onChange?.(timeValue);\n setActiveTimeSelector(null);\n setDropdownOpen(false);\n };\n\n const handleDismiss = () => {\n (activeTimeSelector === \"start\"\n ? startInputRef\n : endInputRef\n ).current?.focus();\n setDropdownOpen(false);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n const target = event.relatedTarget as HTMLElement;\n\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") ||\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n activeTimeSelector &&\n !dropdownOpen &&\n !isInsideNode &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed) {\n handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n }\n };\n\n // NOTE: Dropdown dismissal (esc) does not trigger onClose\n const handleClose = (reason: OpenChangeReason | undefined) => {\n if (reason === \"outside-press\") {\n // No handleTimeChange to avoid duplicate call from handleBlur\n setActiveTimeSelector(null);\n setDropdownOpen(false);\n onBlur?.();\n } else {\n // Dropdown closed via exiting component (eg. tab)\n handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderClearButton = () => {\n if (\n !readOnly &&\n !disabled &&\n (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n ) {\n return (\n <ClearIconContainer\n onClick={handleClear}\n type=\"button\"\n aria-label=\"Clear\"\n >\n <ClearIcon aria-hidden />\n </ClearIconContainer>\n );\n }\n };\n\n const renderDropdown = () => {\n if (activeTimeSelector === \"start\") {\n // Prioritise start time value. If non existent, use initial scroll time\n // If both are non existent, DropdownList will default to first option\n const startScrollTime =\n parseInput(startTimeVal) || parsedInitialStartScrollTime;\n\n return (\n <DropdownList\n listItems={startOptions}\n onSelectItem={handleStartTime}\n selectedItems={[startTimeVal]}\n topScrollItem={TimeHelper.findClosestFlooredTime(\n startScrollTime,\n startOptions\n )}\n listboxId={listboxId}\n ariaLabel={getDropdownAriaLabel()}\n disableItemFocus\n matchElementWidth\n />\n );\n } else {\n const endScrollTime =\n parseInput(endTimeVal) || parsedInitialEndScrollTime;\n\n return (\n <DropdownList\n listItems={endOptions}\n onSelectItem={handleEndTime}\n selectedItems={[endTimeVal]}\n topScrollItem={TimeHelper.findClosestFlooredTime(\n endScrollTime,\n endOptions\n )}\n listboxId={listboxId}\n ariaLabel={getDropdownAriaLabel()}\n disableItemFocus\n matchElementWidth\n />\n );\n }\n };\n\n const renderElement = () => (\n <TimeFieldContainer\n ref={nodeRef}\n $disabled={disabled}\n $error={error || !!validationError}\n $readOnly={readOnly}\n onBlur={handleBlur}\n role=\"group\"\n >\n <VisuallyHidden id={startLabelId}>Start time</VisuallyHidden>\n <VisuallyHidden id={endLabelId}>End time</VisuallyHidden>\n\n <RangeInputInnerContainer\n error={error || !!validationError}\n currentActive={\n activeTimeSelector === null ? \"none\" : activeTimeSelector\n }\n >\n {/* From */}\n <SelectorInput\n ref={startInputRef}\n onFocus={() => handleInputFocus(\"start\")}\n placeholder={\n activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n }\n onChange={(e) => setStartTimeVal(e.target.value)}\n value={startTimeVal}\n readOnly={readOnly}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-start`\n : \"timepicker-selector-start\"\n }\n onClick={() => handleInputClick(\"start\")}\n onKeyDown={handleKeyDownEvent}\n autoComplete=\"off\"\n type=\"text\"\n role=\"combobox\"\n aria-labelledby={getInputLabelledBy(\"start\")}\n aria-describedby={getInputDescribedBy()}\n aria-expanded={\n dropdownOpen && activeTimeSelector === \"start\"\n }\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-invalid={error || ariaInvalid || !!validationError}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n />\n {/* To */}\n <SelectorInput\n ref={endInputRef}\n onFocus={() => handleInputFocus(\"end\")}\n placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n onChange={(e) => setEndTimeVal(e.target.value)}\n value={endTimeVal}\n readOnly={readOnly}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-end`\n : \"timepicker-selector-end\"\n }\n onClick={() => handleInputClick(\"end\")}\n onKeyDown={handleKeyDownEvent}\n autoComplete=\"off\"\n type=\"text\"\n role=\"combobox\"\n aria-labelledby={getInputLabelledBy(\"end\")}\n aria-describedby={getInputDescribedBy()}\n aria-expanded={dropdownOpen && activeTimeSelector === \"end\"}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-invalid={\n error || ariaInvalid || !!validationError || undefined\n }\n aria-disabled={disabled || undefined}\n aria-readonly={readOnly || undefined}\n />\n </RangeInputInnerContainer>\n {renderClearButton()}\n </TimeFieldContainer>\n );\n\n const renderError = () =>\n // Only display internal error message if user does not provide one\n !error &&\n validationError && (\n <ErrorMessageContainer>\n <ErrorIcon aria-hidden />\n <ErrorMessage\n id={errorId}\n tabIndex={0}\n data-testid={id ? `${id}-error-message` : \"error-message\"}\n >\n {validationError}\n </ErrorMessage>\n </ErrorMessageContainer>\n );\n\n return (\n <Wrapper id={id} {...otherProps}>\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={dropdownOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n {renderError()}\n </Wrapper>\n );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","internalId","useId","activeTimeSelector","setActiveTimeSelector","useState","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","listboxId","startLabelId","endLabelId","errorId","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","parsedInitialStartScrollTime","parsedInitialEndScrollTime","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","getDropdownAriaLabel","getInputLabelledBy","type","concatIds","getInputDescribedBy","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","ClearIconContainer","onClick","children","ClearIcon","_jsxs","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","TimeFieldContainer","ref","$disabled","$error","$readOnly","role","VisuallyHidden","RangeInputInnerContainer","currentActive","SelectorInput","placeholder","e","onKeyDown","autoComplete","renderDropdown","startScrollTime","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","ariaLabel","disableItemFocus","matchElementWidth","endScrollTime","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"combobox-picker.js","sources":["../../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import { OpenChangeReason } from \"@floating-ui/react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n ErrorIcon,\n ErrorMessage,\n ErrorMessageContainer,\n} from \"../../form/form-label.style\";\nimport { ClearIconContainer } from \"../../input-range-select/input-range-select.style\";\nimport { ClearIcon } from \"../../input/input.style\";\nimport { VisuallyHidden, concatIds } from \"../../shared/accessibility\";\nimport { DropdownListState } from \"../../shared/dropdown-list\";\nimport { DropdownList } from \"../../shared/dropdown-list/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, Wrapper } from \"../common.styles\";\nimport { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport { TimeFieldContainer } from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n goToNextInput?: boolean | undefined;\n triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n id,\n disabled = false,\n error,\n value,\n format = \"12hr\",\n readOnly,\n onChange,\n onFocus,\n onBlur,\n alignment = \"left\",\n dropdownZIndex,\n startLimit,\n endLimit,\n initialScrollStartTime,\n initialScrollEndTime,\n interval = 15,\n dropdownRootNode,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n ...otherProps\n}: TimeRangePickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const internalId = useId();\n const [activeTimeSelector, setActiveTimeSelector] =\n useState<TimeRangeInputType | null>(null);\n const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n const [validationError, setValidationError] = useState<string>(\"\");\n\n const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const startInputRef = useRef<HTMLInputElement>(null);\n const endInputRef = useRef<HTMLInputElement>(null);\n\n const listboxId = `${internalId}-listbox`;\n const startLabelId = `${internalId}-start-label`;\n const endLabelId = `${internalId}-end-label`;\n const errorId = `${internalId}-error-message`;\n\n const startOptions = useMemo(\n () =>\n TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n [interval, format, startLimit, endLimit]\n );\n const endOptions = useMemo(() => {\n if (initialStartTimeVal === \"\") return startOptions;\n\n const flooredStartVal = TimeHelper.findClosestFlooredTime(\n initialStartTimeVal,\n startOptions\n );\n return flooredStartVal\n ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n : [];\n }, [startOptions, initialStartTimeVal]);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n const parseInput = useCallback(\n (input: string | undefined): string | undefined => {\n return TimeHelper.parseInput(input, format);\n },\n [format]\n );\n\n const parsedInitialStartScrollTime = useMemo(\n () => parseInput(initialScrollStartTime) ?? \"\",\n [initialScrollStartTime, parseInput]\n );\n\n const parsedInitialEndScrollTime = useMemo(\n () => parseInput(initialScrollEndTime) ?? \"\",\n [initialScrollEndTime, parseInput]\n );\n\n useEffect(() => {\n if (value) {\n const start = parseInput(value.start) ?? \"\";\n const end = parseInput(value.end) ?? \"\";\n\n setStartTimeVal(start);\n setEndTimeVal(end);\n setInitialStartTimeVal(start);\n setInitialEndTimeVal(end);\n }\n }, [value, parseInput]);\n\n // Validation for keyboard input\n useEffect(() => {\n if (error) {\n setDropdownOpen(false);\n return;\n }\n\n const start = parseInput(startTimeVal);\n const end = parseInput(endTimeVal);\n\n if (start === undefined) {\n setValidationError(\"Invalid start time\");\n } else if (end === undefined) {\n setValidationError(\"Invalid end time\");\n } else if (\n start !== \"\" &&\n end !== \"\" &&\n TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n ) {\n setValidationError(\"End time must be after start time\");\n } else {\n setValidationError(\"\");\n // Re-open dropdown if error was corrected\n if (\n document.activeElement === startInputRef.current ||\n document.activeElement === endInputRef.current\n ) {\n setDropdownOpen(true);\n }\n return;\n }\n\n // Hide dropdown so error message is visible\n setDropdownOpen(false);\n }, [startTimeVal, endTimeVal, parseInput, error]);\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const getDropdownAriaLabel = () => {\n if (activeTimeSelector === \"start\") {\n return \"Selecting for: Start time\";\n }\n\n if (activeTimeSelector === \"end\") {\n return \"Selecting for: End time\";\n }\n\n return undefined;\n };\n\n const getInputLabelledBy = (type: TimeRangeInputType) => {\n return concatIds(\n ariaLabelledBy,\n type === \"start\" ? startLabelId : endLabelId\n );\n };\n\n const getInputDescribedBy = () => {\n return concatIds(\n ariaDescribedBy,\n !error && validationError ? errorId : undefined\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleInputFocus = (selector: TimeRangeInputType) => {\n if (disabled || readOnly) return;\n\n // Only run onFocus if not already focused\n if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n setActiveTimeSelector(selector);\n setDropdownOpen(true);\n };\n\n const handleInputClick = (selector: TimeRangeInputType) => {\n if (disabled || readOnly) return;\n\n setActiveTimeSelector(selector);\n setDropdownOpen(true);\n (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n };\n\n function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n switch (event.code) {\n case \"Enter\":\n if (activeTimeSelector === \"start\") {\n handleStartTime(startTimeVal);\n } else if (activeTimeSelector === \"end\") {\n // Let handleBlur call handleTimeChange instead\n if (dropdownOpen) handleEndTime(endTimeVal);\n endInputRef.current?.blur();\n }\n break;\n case \"Tab\":\n handleTimeChange(startTimeVal, endTimeVal, {});\n break;\n default:\n break;\n }\n }\n\n const handleStartTime = (input: string) => {\n handleTimeChange(input, endTimeVal, { goToNextInput: true });\n };\n\n const handleEndTime = (input: string) => {\n handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n };\n\n const handleTimeChange = (\n startInput: string,\n endInput: string,\n {\n goToNextInput, // Used by handleStart to move to end input automatically\n triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n }: TimeChangeOptions\n ) => {\n const start = parseInput(startInput) ?? initialStartTimeVal;\n const end = parseInput(endInput) ?? initialEndTimeVal;\n\n setStartTimeVal(start);\n setEndTimeVal(end);\n\n const timeValue: TimeRangePickerValue = { start, end };\n\n // Trigger onChange if values have changed\n if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n onChange?.(timeValue);\n }\n\n // Go to end input only if start is a valid time\n if (goToNextInput && parseInput(startInput) !== undefined) {\n setActiveTimeSelector(\"end\");\n endInputRef.current?.select();\n }\n\n if (triggerOnBlur) {\n setActiveTimeSelector(null);\n setDropdownOpen(false);\n onBlur?.();\n }\n\n setInitialStartTimeVal(start);\n setInitialEndTimeVal(end);\n };\n\n const handleClear = (event: React.MouseEvent) => {\n event.stopPropagation();\n setStartTimeVal(\"\");\n setEndTimeVal(\"\");\n setInitialStartTimeVal(\"\");\n setInitialEndTimeVal(\"\");\n\n const timeValue: TimeRangePickerValue = {\n start: \"\",\n end: \"\",\n };\n\n onChange?.(timeValue);\n setActiveTimeSelector(null);\n setDropdownOpen(false);\n };\n\n const handleDismiss = () => {\n (activeTimeSelector === \"start\"\n ? startInputRef\n : endInputRef\n ).current?.focus();\n setDropdownOpen(false);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n const target = event.relatedTarget as HTMLElement;\n\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") ||\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n activeTimeSelector &&\n !dropdownOpen &&\n !isInsideNode &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed) {\n handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n }\n };\n\n // NOTE: Dropdown dismissal (esc) does not trigger onClose\n const handleClose = (reason: OpenChangeReason | undefined) => {\n if (reason === \"outside-press\") {\n // No handleTimeChange to avoid duplicate call from handleBlur\n setActiveTimeSelector(null);\n setDropdownOpen(false);\n onBlur?.();\n } else {\n // Dropdown closed via exiting component (eg. tab)\n handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderClearButton = () => {\n if (\n !readOnly &&\n !disabled &&\n (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n ) {\n return (\n <ClearIconContainer\n onClick={handleClear}\n type=\"button\"\n aria-label=\"Clear\"\n >\n <ClearIcon aria-hidden />\n </ClearIconContainer>\n );\n }\n };\n\n const renderDropdown = () => {\n if (activeTimeSelector === \"start\") {\n // Prioritise start time value. If non existent, use initial scroll time\n // If both are non existent, DropdownList will default to first option\n const startScrollTime =\n parseInput(startTimeVal) || parsedInitialStartScrollTime;\n\n return (\n <DropdownList\n listItems={startOptions}\n onSelectItem={handleStartTime}\n selectedItems={[startTimeVal]}\n topScrollItem={TimeHelper.findClosestFlooredTime(\n startScrollTime,\n startOptions\n )}\n listboxId={listboxId}\n ariaLabel={getDropdownAriaLabel()}\n disableItemFocus\n matchElementWidth\n />\n );\n } else {\n const endScrollTime =\n parseInput(endTimeVal) || parsedInitialEndScrollTime;\n\n return (\n <DropdownList\n listItems={endOptions}\n onSelectItem={handleEndTime}\n selectedItems={[endTimeVal]}\n topScrollItem={TimeHelper.findClosestFlooredTime(\n endScrollTime,\n endOptions\n )}\n listboxId={listboxId}\n ariaLabel={getDropdownAriaLabel()}\n disableItemFocus\n matchElementWidth\n />\n );\n }\n };\n\n const renderElement = () => (\n <TimeFieldContainer\n ref={nodeRef}\n $disabled={disabled}\n $error={error || !!validationError}\n $readOnly={readOnly}\n onBlur={handleBlur}\n role=\"group\"\n >\n <VisuallyHidden id={startLabelId}>Start time</VisuallyHidden>\n <VisuallyHidden id={endLabelId}>End time</VisuallyHidden>\n\n <RangeInputInnerContainer\n error={error || !!validationError}\n currentActive={\n activeTimeSelector === null ? \"none\" : activeTimeSelector\n }\n >\n {/* From */}\n <SelectorInput\n ref={startInputRef}\n onFocus={() => handleInputFocus(\"start\")}\n placeholder={\n activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n }\n onChange={(e) => setStartTimeVal(e.target.value)}\n value={startTimeVal}\n readOnly={readOnly || disabled}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-start`\n : \"timepicker-selector-start\"\n }\n onClick={() => handleInputClick(\"start\")}\n onKeyDown={handleKeyDownEvent}\n autoComplete=\"off\"\n type=\"text\"\n role=\"combobox\"\n aria-labelledby={getInputLabelledBy(\"start\")}\n aria-describedby={getInputDescribedBy()}\n aria-expanded={\n dropdownOpen && activeTimeSelector === \"start\"\n }\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-invalid={error || ariaInvalid || !!validationError}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n $disabled={disabled}\n />\n {/* To */}\n <SelectorInput\n ref={endInputRef}\n onFocus={() => handleInputFocus(\"end\")}\n placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n onChange={(e) => setEndTimeVal(e.target.value)}\n value={endTimeVal}\n readOnly={readOnly || disabled}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-end`\n : \"timepicker-selector-end\"\n }\n onClick={() => handleInputClick(\"end\")}\n onKeyDown={handleKeyDownEvent}\n autoComplete=\"off\"\n type=\"text\"\n role=\"combobox\"\n aria-labelledby={getInputLabelledBy(\"end\")}\n aria-describedby={getInputDescribedBy()}\n aria-expanded={dropdownOpen && activeTimeSelector === \"end\"}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-invalid={\n error || ariaInvalid || !!validationError || undefined\n }\n aria-disabled={disabled || undefined}\n aria-readonly={readOnly || undefined}\n $disabled={disabled}\n />\n </RangeInputInnerContainer>\n {renderClearButton()}\n </TimeFieldContainer>\n );\n\n const renderError = () =>\n // Only display internal error message if user does not provide one\n !error &&\n validationError && (\n <ErrorMessageContainer>\n <ErrorIcon aria-hidden />\n <ErrorMessage\n id={errorId}\n tabIndex={0}\n data-testid={id ? `${id}-error-message` : \"error-message\"}\n >\n {validationError}\n </ErrorMessage>\n </ErrorMessageContainer>\n );\n\n return (\n <Wrapper id={id} {...otherProps}>\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={dropdownOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n {renderError()}\n </Wrapper>\n );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","internalId","useId","activeTimeSelector","setActiveTimeSelector","useState","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","listboxId","startLabelId","endLabelId","errorId","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","parsedInitialStartScrollTime","parsedInitialEndScrollTime","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","getDropdownAriaLabel","getInputLabelledBy","type","concatIds","getInputDescribedBy","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","ClearIconContainer","onClick","children","ClearIcon","_jsxs","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","TimeFieldContainer","ref","$error","$readOnly","role","VisuallyHidden","RangeInputInnerContainer","currentActive","SelectorInput","placeholder","e","onKeyDown","autoComplete","$disabled","renderDropdown","startScrollTime","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","ariaLabel","disableItemFocus","matchElementWidth","endScrollTime","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"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"}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
"use strict";var e=require("styled-components"),t=require("../shared/input-wrapper/input-wrapper.js"),r=require("../theme/index.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=p(e);const a=i.default.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
`,
|
|
3
|
+
`,o=i.default(t.InputWrapper)`
|
|
4
4
|
height: 3rem;
|
|
5
5
|
gap: ${r.Spacing["spacing-8"]};
|
|
6
|
-
`,
|
|
6
|
+
`,s=i.default(t.BasicInput)`
|
|
7
7
|
display: block;
|
|
8
8
|
width: 100%;
|
|
9
9
|
flex: 1;
|
|
10
|
-
|
|
10
|
+
${t=>t.$disabled&&e.css`
|
|
11
|
+
color: ${r.Colour["text-subtler"]};
|
|
12
|
+
cursor: not-allowed;
|
|
13
|
+
`}
|
|
14
|
+
`;exports.SelectorInput=s,exports.TimeContainer=o,exports.Wrapper=a;
|
|
11
15
|
//# sourceMappingURL=common.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.styles.js","sources":["../../../src/time-range-picker/common.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport {\n BasicInput,\n InputWrapper,\n} from \"../shared/input-wrapper/input-wrapper\";\nimport { Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const TimeContainer = styled(InputWrapper)`\n height: 3rem;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectorInput = styled(BasicInput)
|
|
1
|
+
{"version":3,"file":"common.styles.js","sources":["../../../src/time-range-picker/common.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport {\n BasicInput,\n InputWrapper,\n} from \"../shared/input-wrapper/input-wrapper\";\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const TimeContainer = styled(InputWrapper)`\n height: 3rem;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectorInput = styled(BasicInput)<{\n $disabled?: boolean | undefined;\n}>`\n display: block;\n width: 100%;\n flex: 1;\n ${(props) =>\n props.$disabled &&\n css`\n color: ${Colour[\"text-subtler\"]};\n cursor: not-allowed;\n `}\n`;\n"],"names":["Wrapper","styled","div","TimeContainer","InputWrapper","Spacing","SelectorInput","BasicInput","props","$disabled","css","Colour"],"mappings":"wNAUO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;EAIpBC,EAAgBF,EAAAA,QAAOG,EAAAA,aAAa;;WAEtCC,EAAAA,QAAQ;EAGNC,EAAgBL,EAAAA,QAAOM,EAAAA,WAElC;;;;MAIKC,GACCA,EAAMC,WACNC,KAAG;qBACUC,EAAAA,OAAO;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../../shared/accessibility/index.js"),t=require("../../shared/dropdown-wrapper/element-with-dropdown.js"),n=require("../../shared/range-input-inner-container/range-input-inner-container.js"),
|
|
1
|
+
"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../../shared/accessibility/index.js"),t=require("../../shared/dropdown-wrapper/element-with-dropdown.js"),n=require("../../shared/range-input-inner-container/range-input-inner-container.js"),l=require("../../shared/timepicker-dropdown/timepicker-dropdown.js");require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js");var o=require("../../util/simple-id-generator.js");require("../../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("../../util/time-helper.js"),s=require("../common.styles.js");exports.DialPicker=u=>{var{id:c,disabled:p=!1,error:m,value:v,format:b="24hr",readOnly:g,onChange:f,onFocus:h,onBlur:j,alignment:y="left",dropdownZIndex:x,dropdownRootNode:k,"aria-labelledby":w,"aria-describedby":q,"aria-invalid":F}=u,$=e.__rest(u,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const[C,I]=a.useState(!1),[S,T]=a.useState("none"),[D,O]=a.useState(""),[R,B]=a.useState(""),[E,_]=a.useState(!1),N=!g&&!p,Z=a.useRef(null),H=o.useId(),P=`${H}-start-label`,V=`${H}-end-label`,W=e=>i.concatIds(w,"start"===e?P:V),A=()=>i.concatIds(q);a.useEffect((()=>{v&&(O(v.start),B(v.end))}),[v]);const z=e=>{N&&(E||C||null==h||h(),_(!0),T(e),I(!0))},G=e=>{var r,a;const i=!!(null==e?void 0:e.keepFocus),t=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!i;I(!1),T("none"),_(i),t&&(null==j||j()),i&&(null===(a=Z.current)||void 0===a||a.focus())},J=e=>{var r,a,i;if(!E||C)return;const t=e.relatedTarget,n=(null===(r=null==t?void 0:t.matches)||void 0===r?void 0:r.call(t,"[data-floating-ui-focusable]"))||(null===(a=null==t?void 0:t.matches)||void 0===a?void 0:a.call(t,"[data-floating-ui-focus-guard]"));!(!t||!(null===(i=Z.current)||void 0===i?void 0:i.contains(t)))||n||(_(!1),null==j||j())},K=e=>{O(e),null==f||f({start:e,end:R}),T("end"),I(!0),_(!0)},L=e=>{B(e),null==f||f({start:D,end:e}),""===D?(T("start"),I(!0),_(!0)):G({keepFocus:!0})};return r.jsx(s.Wrapper,Object.assign({id:c},$,{children:r.jsx(t.ElementWithDropdown,{enabled:N,isOpen:C,renderElement:()=>r.jsx(s.TimeContainer,{ref:Z,tabIndex:-1,onBlur:J,"data-testid":"timepicker-container",role:"group",$disabled:p,$error:m,$readOnly:g,$focused:E,children:r.jsxs(n.RangeInputInnerContainer,{error:m,currentActive:S,children:[r.jsx(s.SelectorInput,{onFocus:()=>z("start"),onClick:()=>z("start"),readOnly:!0,placeholder:"From",value:d.TimeHelper.formatDisplayValue(D,b),"data-testid":$["data-testid"]?`${$["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from",role:"combobox","aria-expanded":!p&&!g&&C,"aria-invalid":m||F,"aria-disabled":p,"aria-readonly":g,"aria-labelledby":W("start"),"aria-describedby":A(),$disabled:p}),r.jsx(s.SelectorInput,{onClick:()=>z("end"),readOnly:!0,placeholder:"To",value:d.TimeHelper.formatDisplayValue(R,b),"data-testid":$["data-testid"]?`${$["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to",role:"combobox","aria-expanded":!p&&!g&&C,"aria-invalid":m||F||void 0,"aria-disabled":p||void 0,"aria-readonly":g||void 0,"aria-labelledby":W("end"),"aria-describedby":A(),$disabled:p})]})}),renderDropdown:({styles:e,setFloatingRef:a,getFloatingProps:i})=>C?r.jsxs("div",Object.assign({ref:a,style:e,role:"dialog","aria-label":"start"===S?"Selecting for: Start time":"end"===S?"Selecting for: End time":void 0},i(),{children:["start"===S&&r.jsx(l.TimepickerDropdown,{id:c?`${c}-start`:void 0,show:!0,value:D,format:b,onCancel:()=>G({keepFocus:!0}),onChange:K}),"end"===S&&r.jsx(l.TimepickerDropdown,{id:c?`${c}-end`:void 0,show:!0,value:R,format:b,onCancel:()=>G({keepFocus:!1}),onChange:L})]}),S):null,onClose:()=>G({keepFocus:!1}),onDismiss:()=>G({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:y,customZIndex:x,rootNode:k})}))};
|
|
2
2
|
//# sourceMappingURL=dial-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dial-picker.js","sources":["../../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { concatIds } from \"../../shared/accessibility\";\nimport {\n DropdownRenderProps,\n ElementWithDropdown,\n} from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, TimeContainer, Wrapper } from \"../common.styles\";\nimport { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n id,\n disabled = false,\n error,\n value,\n format = \"24hr\",\n readOnly,\n onChange,\n onFocus,\n onBlur,\n alignment = \"left\",\n dropdownZIndex,\n dropdownRootNode,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n ...otherProps\n}: TimeRangePickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const [active, setActive] = useState<Active>(\"none\");\n const [startTimeVal, setStartTimeVal] = useState(\"\");\n const [endTimeVal, setEndTimeVal] = useState(\"\");\n const [focused, setFocused] = useState(false);\n\n const enabled = !readOnly && !disabled;\n const nodeRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const startLabelId = `${internalId}-start-label`;\n const endLabelId = `${internalId}-end-label`;\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDropdownAriaLabel = () => {\n if (active === \"start\") {\n return \"Selecting for: Start time\";\n }\n\n if (active === \"end\") {\n return \"Selecting for: End time\";\n }\n\n return undefined;\n };\n\n const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n return concatIds(\n ariaLabelledBy,\n type === \"start\" ? startLabelId : endLabelId\n );\n };\n\n const getInputDescribedBy = () => {\n return concatIds(ariaDescribedBy);\n };\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (value) {\n setStartTimeVal(value.start);\n setEndTimeVal(value.end);\n }\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOpen = (next: Exclude<Active, \"none\">) => {\n if (!enabled) return;\n if (!focused && !isOpen) onFocus?.();\n setFocused(true);\n setActive(next);\n setIsOpen(true);\n };\n\n const handleClose = (opts?: {\n keepFocus?: boolean;\n triggerBlur?: boolean;\n }) => {\n const keepFocus = !!opts?.keepFocus;\n const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n setIsOpen(false);\n setActive(\"none\");\n setFocused(keepFocus);\n\n if (triggerBlur) onBlur?.();\n\n if (keepFocus) nodeRef.current?.focus();\n };\n\n const handleContainerBlur = (\n event: React.FocusEvent<HTMLDivElement, Element>\n ) => {\n if (!focused || isOpen) return;\n\n const target = event.relatedTarget as HTMLElement | null;\n\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") ||\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n if (!isInsideNode && !isFloatingElement) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleStartTime = (value: string) => {\n setStartTimeVal(value);\n onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n setActive(\"end\");\n setIsOpen(true);\n setFocused(true);\n };\n\n const handleEndTime = (value: string) => {\n setEndTimeVal(value);\n onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n if (startTimeVal === \"\") {\n setActive(\"start\");\n setIsOpen(true);\n setFocused(true);\n } else {\n handleClose({ keepFocus: true });\n }\n };\n\n const renderElement = () => (\n <TimeContainer\n ref={nodeRef}\n tabIndex={-1}\n onBlur={handleContainerBlur}\n data-testid=\"timepicker-container\"\n role=\"group\"\n $disabled={disabled}\n $error={error}\n $readOnly={readOnly}\n $focused={focused}\n >\n <RangeInputInnerContainer error={error} currentActive={active}>\n <SelectorInput\n onFocus={() => handleOpen(\"start\")}\n onClick={() => handleOpen(\"start\")}\n readOnly\n placeholder=\"From\"\n value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n : \"timepicker-selector-from\"\n }\n role=\"combobox\"\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n aria-invalid={error || ariaInvalid}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n aria-labelledby={getInputLabelledBy(\"start\")}\n aria-describedby={getInputDescribedBy()}\n />\n <SelectorInput\n onClick={() => handleOpen(\"end\")}\n readOnly\n placeholder=\"To\"\n value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n : \"timepicker-selector-to\"\n }\n role=\"combobox\"\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n aria-invalid={error || ariaInvalid || undefined}\n aria-disabled={disabled || undefined}\n aria-readonly={readOnly || undefined}\n aria-labelledby={getInputLabelledBy(\"end\")}\n aria-describedby={getInputDescribedBy()}\n />\n </RangeInputInnerContainer>\n </TimeContainer>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => {\n if (!isOpen) return null;\n\n return (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n key={active}\n aria-label={getDropdownAriaLabel()}\n {...getFloatingProps()}\n >\n {active === \"start\" && (\n <TimepickerDropdown\n id={id ? `${id}-start` : undefined}\n show\n value={startTimeVal}\n format={format}\n onCancel={() => handleClose({ keepFocus: true })}\n onChange={handleStartTime}\n />\n )}\n {active === \"end\" && (\n <TimepickerDropdown\n id={id ? `${id}-end` : undefined}\n show\n value={endTimeVal}\n format={format}\n onCancel={() => handleClose({ keepFocus: false })}\n onChange={handleEndTime}\n />\n )}\n </div>\n );\n };\n\n return (\n <Wrapper id={id} {...otherProps}>\n <ElementWithDropdown\n enabled={enabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onClose={() => handleClose({ keepFocus: false })}\n onDismiss={() => handleClose({ keepFocus: true })}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </Wrapper>\n );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Wrapper","Object","assign","children","ElementWithDropdown","renderElement","TimeContainer","ref","tabIndex","role","$error","$readOnly","_jsxs","RangeInputInnerContainer","currentActive","SelectorInput","onClick","placeholder","TimeHelper","formatDisplayValue","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dial-picker.js","sources":["../../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { concatIds } from \"../../shared/accessibility\";\nimport {\n DropdownRenderProps,\n ElementWithDropdown,\n} from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, TimeContainer, Wrapper } from \"../common.styles\";\nimport { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n id,\n disabled = false,\n error,\n value,\n format = \"24hr\",\n readOnly,\n onChange,\n onFocus,\n onBlur,\n alignment = \"left\",\n dropdownZIndex,\n dropdownRootNode,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n ...otherProps\n}: TimeRangePickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const [active, setActive] = useState<Active>(\"none\");\n const [startTimeVal, setStartTimeVal] = useState(\"\");\n const [endTimeVal, setEndTimeVal] = useState(\"\");\n const [focused, setFocused] = useState(false);\n\n const enabled = !readOnly && !disabled;\n const nodeRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const startLabelId = `${internalId}-start-label`;\n const endLabelId = `${internalId}-end-label`;\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDropdownAriaLabel = () => {\n if (active === \"start\") {\n return \"Selecting for: Start time\";\n }\n\n if (active === \"end\") {\n return \"Selecting for: End time\";\n }\n\n return undefined;\n };\n\n const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n return concatIds(\n ariaLabelledBy,\n type === \"start\" ? startLabelId : endLabelId\n );\n };\n\n const getInputDescribedBy = () => {\n return concatIds(ariaDescribedBy);\n };\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (value) {\n setStartTimeVal(value.start);\n setEndTimeVal(value.end);\n }\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOpen = (next: Exclude<Active, \"none\">) => {\n if (!enabled) return;\n if (!focused && !isOpen) onFocus?.();\n setFocused(true);\n setActive(next);\n setIsOpen(true);\n };\n\n const handleClose = (opts?: {\n keepFocus?: boolean;\n triggerBlur?: boolean;\n }) => {\n const keepFocus = !!opts?.keepFocus;\n const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n setIsOpen(false);\n setActive(\"none\");\n setFocused(keepFocus);\n\n if (triggerBlur) onBlur?.();\n\n if (keepFocus) nodeRef.current?.focus();\n };\n\n const handleContainerBlur = (\n event: React.FocusEvent<HTMLDivElement, Element>\n ) => {\n if (!focused || isOpen) return;\n\n const target = event.relatedTarget as HTMLElement | null;\n\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") ||\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n if (!isInsideNode && !isFloatingElement) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleStartTime = (value: string) => {\n setStartTimeVal(value);\n onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n setActive(\"end\");\n setIsOpen(true);\n setFocused(true);\n };\n\n const handleEndTime = (value: string) => {\n setEndTimeVal(value);\n onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n if (startTimeVal === \"\") {\n setActive(\"start\");\n setIsOpen(true);\n setFocused(true);\n } else {\n handleClose({ keepFocus: true });\n }\n };\n\n const renderElement = () => (\n <TimeContainer\n ref={nodeRef}\n tabIndex={-1}\n onBlur={handleContainerBlur}\n data-testid=\"timepicker-container\"\n role=\"group\"\n $disabled={disabled}\n $error={error}\n $readOnly={readOnly}\n $focused={focused}\n >\n <RangeInputInnerContainer error={error} currentActive={active}>\n <SelectorInput\n onFocus={() => handleOpen(\"start\")}\n onClick={() => handleOpen(\"start\")}\n readOnly\n placeholder=\"From\"\n value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n : \"timepicker-selector-from\"\n }\n role=\"combobox\"\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n aria-invalid={error || ariaInvalid}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n aria-labelledby={getInputLabelledBy(\"start\")}\n aria-describedby={getInputDescribedBy()}\n $disabled={disabled}\n />\n <SelectorInput\n onClick={() => handleOpen(\"end\")}\n readOnly\n placeholder=\"To\"\n value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n data-testid={\n otherProps[\"data-testid\"]\n ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n : \"timepicker-selector-to\"\n }\n role=\"combobox\"\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n aria-invalid={error || ariaInvalid || undefined}\n aria-disabled={disabled || undefined}\n aria-readonly={readOnly || undefined}\n aria-labelledby={getInputLabelledBy(\"end\")}\n aria-describedby={getInputDescribedBy()}\n $disabled={disabled}\n />\n </RangeInputInnerContainer>\n </TimeContainer>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => {\n if (!isOpen) return null;\n\n return (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n key={active}\n aria-label={getDropdownAriaLabel()}\n {...getFloatingProps()}\n >\n {active === \"start\" && (\n <TimepickerDropdown\n id={id ? `${id}-start` : undefined}\n show\n value={startTimeVal}\n format={format}\n onCancel={() => handleClose({ keepFocus: true })}\n onChange={handleStartTime}\n />\n )}\n {active === \"end\" && (\n <TimepickerDropdown\n id={id ? `${id}-end` : undefined}\n show\n value={endTimeVal}\n format={format}\n onCancel={() => handleClose({ keepFocus: false })}\n onChange={handleEndTime}\n />\n )}\n </div>\n );\n };\n\n return (\n <Wrapper id={id} {...otherProps}>\n <ElementWithDropdown\n enabled={enabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onClose={() => handleClose({ keepFocus: false })}\n onDismiss={() => handleClose({ keepFocus: true })}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </Wrapper>\n );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Wrapper","Object","assign","children","ElementWithDropdown","renderElement","TimeContainer","ref","tabIndex","role","$error","$readOnly","_jsxs","RangeInputInnerContainer","currentActive","SelectorInput","onClick","placeholder","TimeHelper","formatDisplayValue","$disabled","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),t=require("../shared/input-wrapper/input-wrapper.js");function
|
|
1
|
+
"use strict";var e=require("styled-components"),t=require("../shared/input-wrapper/input-wrapper.js"),r=require("../theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(e);u.default.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
`;const
|
|
3
|
+
`;const i=u.default(t.BasicInput)`
|
|
4
4
|
height: calc(3rem - 2px); // exclude top and bottom borders
|
|
5
5
|
cursor: inherit;
|
|
6
|
-
|
|
6
|
+
${t=>t.$disabled&&e.css`
|
|
7
|
+
color: ${r.Colour["text-subtler"]};
|
|
8
|
+
cursor: not-allowed;
|
|
9
|
+
`}
|
|
10
|
+
`;exports.InputSelectorElement=i;
|
|
7
11
|
//# sourceMappingURL=timepicker.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timepicker.styles.js","sources":["../../../src/timepicker/timepicker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { BasicInput } from \"../shared/input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)<{\n $disabled?: boolean | undefined;\n}>`\n height: calc(3rem - 2px); // exclude top and bottom borders\n cursor: inherit;\n`;\n"],"names":["styled","div","InputSelectorElement","BasicInput"],"mappings":"
|
|
1
|
+
{"version":3,"file":"timepicker.styles.js","sources":["../../../src/timepicker/timepicker.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicInput } from \"../shared/input-wrapper/input-wrapper\";\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)<{\n $disabled?: boolean | undefined;\n}>`\n height: calc(3rem - 2px); // exclude top and bottom borders\n cursor: inherit;\n ${(props) =>\n props.$disabled &&\n css`\n color: ${Colour[\"text-subtler\"]};\n cursor: not-allowed;\n `}\n`;\n"],"names":["styled","div","InputSelectorElement","BasicInput","props","$disabled","css","Colour"],"mappings":"wNAOuBA,EAAAA,QAAOC,GAAG;;QAIpBC,EAAuBF,EAAAA,QAAOG,EAAAA,WAEzC;;;MAGKC,GACCA,EAAMC,WACNC,KAAG;qBACUC,EAAAA,OAAO;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";var e=require("@lifesg/react-icons/external"),t=require("styled-components"),r=require("../theme/index.js"),l=require("./helper.js");function
|
|
1
|
+
"use strict";var e=require("@lifesg/react-icons/external"),t=require("styled-components"),r=require("../theme/index.js"),l=require("./helper.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);const i=a.default.div`
|
|
2
2
|
${e=>l.createTypographyStyles(e.$textStyle,e.$weight,e.$inline,e.$paragraph,e.$maxLines)}
|
|
3
|
-
`,
|
|
4
|
-
${e=>{var
|
|
3
|
+
`,n=a.default.a`
|
|
4
|
+
${e=>{var o;return t.css`
|
|
5
5
|
${l.getTextStyle(e.$textStyle,e.$weight||"regular")}
|
|
6
6
|
color: ${r.Colour.hyperlink};
|
|
7
|
-
text-decoration: ${null!==(
|
|
7
|
+
text-decoration: ${null!==(o=e.$underlineStyle)&&void 0!==o?o:"underline"};
|
|
8
8
|
|
|
9
9
|
&:hover,
|
|
10
10
|
&:active,
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
height: 1lh;
|
|
17
17
|
width: 1em;
|
|
18
18
|
margin-left: 0.4em;
|
|
19
|
-
vertical-align:
|
|
20
|
-
`;exports.HyperlinkBase=
|
|
19
|
+
vertical-align: top;
|
|
20
|
+
`;exports.HyperlinkBase=n,exports.StyledExternalIcon=u,exports.TypographyBase=i;
|
|
21
21
|
//# sourceMappingURL=typography.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n $textStyle: TypographySizeType;\n $weight?: TypographyWeight | undefined;\n $inline?: boolean | undefined;\n $paragraph?: boolean | undefined;\n $maxLines?: number | undefined;\n $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n ${(props) =>\n createTypographyStyles(\n props.$textStyle,\n props.$weight,\n props.$inline,\n props.$paragraph,\n props.$maxLines\n )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n ${(props) => css`\n ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n color: ${Colour.hyperlink};\n text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align:
|
|
1
|
+
{"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n $textStyle: TypographySizeType;\n $weight?: TypographyWeight | undefined;\n $inline?: boolean | undefined;\n $paragraph?: boolean | undefined;\n $maxLines?: number | undefined;\n $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n ${(props) =>\n createTypographyStyles(\n props.$textStyle,\n props.$weight,\n props.$inline,\n props.$paragraph,\n props.$maxLines\n )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n ${(props) => css`\n ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n color: ${Colour.hyperlink};\n text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: top;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"qOAuBO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAgB;MAC9CC,GACCC,EAAAA,uBACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAAA,QAAOU,CAAc;MAC3CR,UAAU,OAAAS,KAAG;UACVC,EAAAA,aAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAAA,OAAOC;2BACwB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAAA,OAAO;;KAEvB;EAGQI,EAAqBjB,EAAAA,QAAOkB,EAAAA,aAAa;;;;;"}
|
package/cjs/util/merge-refs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./version.js");exports.mergeRefs=(...r)=>t=>{const n=[];for(const e of r)if("function"==typeof e){const r=e(t),o="function"==typeof r;n.push(o?r:()=>e(null))}else e.current=t,n.push((()=>{e.current=null}));if(e.isReact19())return()=>{for(const e of n)e()}};
|
|
1
|
+
"use strict";var e=require("./version.js");exports.mergeRefs=(...r)=>t=>{const n=[];for(const e of r)if("function"==typeof e){const r=e(t),o="function"==typeof r;n.push(o?r:()=>e(null))}else e&&(e.current=t,n.push((()=>{e.current=null})));if(e.isReact19())return()=>{for(const e of n)e()}};
|
|
2
2
|
//# sourceMappingURL=merge-refs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-refs.js","sources":["../../../src/util/merge-refs.ts"],"sourcesContent":["import { MutableRefObject, Ref } from \"react\";\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: Ref<T>[]) => {\n return (value: T | null) => {\n const cleanups: (() => void)[] = [];\n\n for (const ref of refs) {\n if (typeof ref === \"function\") {\n const cleanup = ref(value);\n const isCleanup = typeof cleanup === \"function\";\n cleanups.push(isCleanup ? cleanup : () => ref(null));\n } else {\n (ref as MutableRefObject<T | null>).current = value;\n cleanups.push(() => {\n (ref as MutableRefObject<T | null>).current = null;\n });\n }\n }\n\n if (isReact19()) {\n return () => {\n for (const cleanup of cleanups) cleanup();\n };\n }\n };\n};\n"],"names":["refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"
|
|
1
|
+
{"version":3,"file":"merge-refs.js","sources":["../../../src/util/merge-refs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: Ref<T>[]) => {\n return (value: T | null) => {\n const cleanups: (() => void)[] = [];\n\n for (const ref of refs) {\n if (typeof ref === \"function\") {\n const cleanup = ref(value);\n const isCleanup = typeof cleanup === \"function\";\n cleanups.push(isCleanup ? cleanup : () => ref(null));\n } else if (ref) {\n (ref as MutableRefObject<T | null>).current = value;\n cleanups.push(() => {\n (ref as MutableRefObject<T | null>).current = null;\n });\n }\n }\n\n if (isReact19()) {\n return () => {\n for (const cleanup of cleanups) cleanup();\n };\n }\n };\n};\n"],"names":["refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"6DAIyB,IAAOA,IACpBC,IACJ,MAAMC,EAA2B,GAEjC,IAAK,MAAMC,KAAOH,EACd,GAAmB,mBAARG,EAAoB,CAC3B,MAAMC,EAAUD,EAAIF,GACdI,EAA+B,mBAAZD,EACzBF,EAASI,KAAKD,EAAYD,EAAU,IAAMD,EAAI,MAClD,MAAWA,IACNA,EAAmCI,QAAUN,EAC9CC,EAASI,MAAK,KACTH,EAAmCI,QAAU,IAAI,KAK9D,GAAIC,EAAAA,YACA,MAAO,KACH,IAAK,MAAMJ,KAAWF,EAAUE,GAAS,CAEjD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__awaiter as r}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{Canvas as t,PencilBrush as n,FabricImage as i}from"fabric";import{forwardRef as c,useRef as
|
|
1
|
+
import{__awaiter as r}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{Canvas as t,PencilBrush as n,FabricImage as i}from"fabric";import{forwardRef as c,useRef as o,useContext as u,useImperativeHandle as a,useCallback as s,useEffect as l}from"react";import{ThemeContext as d}from"styled-components";import{Colour as m}from"../theme/index.js";import{SignatureCanvasContainer as v,SignatureCanvas as f}from"./e-signature.styles.js";const h=c(((c,h)=>{const{baseImageDataURL:g}=c,w=o(null),p=o(null),b=o(),j=o(),L=u(d);a(h,(()=>({clear:()=>{var r;return null===(r=b.current)||void 0===r?void 0:r.clear()},export:()=>O()})));const O=()=>{if(!b.current)return null;if(!b.current.getObjects().length)return null;return b.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},x=s((()=>r(void 0,void 0,void 0,(function*(){if(yield new Promise((r=>setTimeout(r))),w.current&&p.current&&b.current){const r=w.current.clientWidth,e=w.current.clientHeight;p.current.width=r,p.current.height=e,b.current.setDimensions({width:r,height:e}),b.current.forEachObject((r=>{b.current&&b.current.centerObject(r)}))}}))),[]);return l((()=>{if(w.current&&p.current)return b.current=new t("eSignatureCanvas"),b.current.selection=!1,b.current.isDrawingMode=!0,j.current=new n(b.current),j.current.color=L?m.text({theme:Object.assign(Object.assign({},L),{colourMode:"light"})}):"#000000",j.current.width=3,b.current.freeDrawingBrush=j.current,()=>{var r;null===(r=b.current)||void 0===r||r.dispose()}}),[]),l((()=>{var r;if(window)return window.addEventListener("resize",x),null===(r=screen.orientation)||void 0===r||r.addEventListener("change",x),x(),()=>{var r;window.removeEventListener("resize",x),null===(r=screen.orientation)||void 0===r||r.removeEventListener("change",x)}}),[x]),l((()=>{r(void 0,void 0,void 0,(function*(){if(g){const r=yield i.fromURL(g);b.current&&(b.current.clear(),r.selectable=!1,r.hoverCursor="default",b.current.width&&r.width&&r.scale(b.current.width/r.width),b.current.add(r),b.current.centerObject(r))}}))}),[g]),e(v,{ref:w,children:e(f,{id:"eSignatureCanvas",ref:p})})}));export{h as ESignatureCanvas};
|
|
2
2
|
//# sourceMappingURL=e-signature-canvas.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"e-signature-canvas.js","sources":["../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport {\n Ref,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport {\n SignatureCanvas,\n SignatureCanvasContainer,\n} from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string | null | undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string | null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const theme = useContext(ThemeContext);\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n pencilBrush.current.color = Colour[\"text\"]({ theme });\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <SignatureCanvasContainer ref={containerRef}>\n <SignatureCanvas id=\"eSignatureCanvas\" ref={canvasRef} />\n </SignatureCanvasContainer>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","theme","useContext","ThemeContext","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","Colour","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","SignatureCanvasContainer","SignatureCanvas","id"],"mappings":"wcA2BA,
|
|
1
|
+
{"version":3,"file":"e-signature-canvas.js","sources":["../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport {\n Ref,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport {\n SignatureCanvas,\n SignatureCanvasContainer,\n} from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string | null | undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string | null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const theme = useContext(ThemeContext);\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n if (theme) {\n pencilBrush.current.color = Colour[\"text\"]({\n theme: {\n ...theme,\n colourMode: \"light\",\n },\n });\n } else {\n pencilBrush.current.color = \"#000000\";\n }\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <SignatureCanvasContainer ref={containerRef}>\n <SignatureCanvas id=\"eSignatureCanvas\" ref={canvasRef} />\n </SignatureCanvasContainer>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","theme","useContext","ThemeContext","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","Colour","colourMode","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","SignatureCanvasContainer","SignatureCanvas","id"],"mappings":"wcA2BA,MAsIaA,EAAmBC,GAtId,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAuB,MACtCC,EAAYD,EAA0B,MACtCE,EAAeF,IACfG,EAAcH,IACdI,EAAQC,EAAWC,GAKzBC,EAAoBV,GAAK,KAAA,CACrBW,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAP,EAAaQ,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKV,EAAaQ,QAAS,OAAO,KAClC,IAAKR,EAAaQ,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBZ,EAAaQ,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,GAAY,IAAWC,OAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtCzB,EAAaW,SAAWT,EAAUS,SAAWR,EAAaQ,QAAS,CACnE,MAAMgB,EAAc3B,EAAaW,QAAQiB,YACnCC,EAAe7B,EAAaW,QAAQmB,aAC1C5B,EAAUS,QAAQoB,MAAQJ,EAC1BzB,EAAUS,QAAQqB,OAASH,EAC3B1B,EAAaQ,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ1B,EAAaQ,QAAQuB,eAAeC,IAC5BhC,EAAaQ,SACbR,EAAaQ,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IAuEH,OAjEAE,GAAU,KACN,GAAIrC,EAAaW,SAAWT,EAAUS,QAoBlC,OAnBAR,EAAaQ,QAAU,IAAI2B,EAAa,oBACxCnC,EAAaQ,QAAQ4B,WAAY,EACjCpC,EAAaQ,QAAQ6B,eAAgB,EAErCpC,EAAYO,QAAU,IAAI8B,EAAYtC,EAAaQ,SAE/CP,EAAYO,QAAQ+B,MADpBrC,EAC4BsC,EAAa,KAAE,CACvCtC,qCACOA,GAAK,CACRuC,WAAY,YAIQ,UAEhCxC,EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,QAAQkC,iBAAmBzC,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,EAAEoC,SAAS,CAEvC,GACD,IAGHT,GAAU,WACN,GAAIU,OAIA,OAHAA,OAAOC,iBAAiB,SAAU3B,GAChB,QAAlBX,EAAAuC,OAAOC,mBAAW,IAAAxC,GAAAA,EAAEsC,iBAAiB,SAAU3B,GAC/CA,IACO,WACH0B,OAAOI,oBAAoB,SAAU9B,GACnB,QAAlBX,EAAAuC,OAAOC,mBAAW,IAAAxC,GAAAA,EAAEyC,oBAAoB,SAAU9B,EAAa,CAEvE,GACD,CAACA,IAGJgB,GAAU,KACyBd,OAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,MAAMqD,QAAYC,EAAYC,QAAQvD,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,QACrB2C,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdrD,EAAaQ,QAAQoB,OAASqB,EAAIrB,OAClCqB,EAAIK,MAAMtD,EAAaQ,QAAQoB,MAAQqB,EAAIrB,OAE/C5B,EAAaQ,QAAQ+C,IAAIN,GACzBjD,EAAaQ,QAAQyB,aAAagB,GAE1C,CACJ,GAEa,GACd,CAACrD,IAMA4D,EAACC,EAAwB,CAAC9D,IAAKE,WAC3B2D,EAACE,GAAgBC,GAAG,mBAAmBhE,IAAKI,KACrB"}
|