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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/cjs/data-table/data-table.js +1 -1
  2. package/cjs/data-table/data-table.js.map +1 -1
  3. package/cjs/data-table/data-table.styles.js +14 -12
  4. package/cjs/data-table/data-table.styles.js.map +1 -1
  5. package/cjs/error-display/error-display-data.js +1 -1
  6. package/cjs/error-display/error-display-data.js.map +1 -1
  7. package/cjs/navbar/navbar-items.js +1 -1
  8. package/cjs/navbar/navbar-items.js.map +1 -1
  9. package/cjs/navbar/navbar-items.styles.js +11 -7
  10. package/cjs/navbar/navbar-items.styles.js.map +1 -1
  11. package/cjs/toggle/toggle.js +1 -1
  12. package/cjs/toggle/toggle.js.map +1 -1
  13. package/cjs/toggle/toggle.styles.js +42 -20
  14. package/cjs/toggle/toggle.styles.js.map +1 -1
  15. package/codemods/data.ts +1 -33
  16. package/codemods/index.ts +55 -140
  17. package/data-table/data-table.d.ts +1 -1
  18. package/data-table/data-table.js +1 -1
  19. package/data-table/data-table.js.map +1 -1
  20. package/data-table/data-table.styles.d.ts +1 -0
  21. package/data-table/data-table.styles.js +22 -20
  22. package/data-table/data-table.styles.js.map +1 -1
  23. package/data-table/types.d.ts +9 -0
  24. package/error-display/error-display-data.js +1 -1
  25. package/error-display/error-display-data.js.map +1 -1
  26. package/navbar/navbar-items.js +1 -1
  27. package/navbar/navbar-items.js.map +1 -1
  28. package/navbar/navbar-items.styles.d.ts +20 -4
  29. package/navbar/navbar-items.styles.js +13 -9
  30. package/navbar/navbar-items.styles.js.map +1 -1
  31. package/package.json +1 -1
  32. package/toggle/toggle.js +1 -1
  33. package/toggle/toggle.js.map +1 -1
  34. package/toggle/toggle.styles.d.ts +1 -0
  35. package/toggle/toggle.styles.js +65 -43
  36. package/toggle/toggle.styles.js.map +1 -1
package/cjs/error-display/error-display-data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"error-display-data.js","sources":["../../../src/error-display/error-display-data.tsx"],"sourcesContent":["import { ResourceScheme, ThemeSpec } from \"../theme/types\";\nimport { renderDescriptionWithProps } from \"./error-display-helper-comp\";\nimport { ErrorDisplayHelper } from \"./helper\";\nimport {\n ErrorDisplayType,\n InactivityAdditionalAttributes,\n MaintenanceAdditionalAttributes,\n} from \"./types\";\n\nconst { imgAttributeHelper } = ErrorDisplayHelper;\n\n// =============================================================================\n// IMAGE PATHS\n// =============================================================================\n\nconst ImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@3x.png\",\n width: 400,\n height: 281,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst BsgImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@3x.png\",\n width: 400,\n height: 215,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@3x.png\",\n width: 400,\n height: 254,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@3x.png\",\n width: 400,\n height: 319,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@3x.png\",\n width: 400,\n height: 330,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@3x.png\",\n width: 400,\n height: 215,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@3x.png\",\n width: 400,\n height: 191,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@3x.png\",\n width: 400,\n height: 261,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@3x.png\",\n width: 400,\n height: 276,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@3x.png\",\n width: 400,\n height: 290,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst CCubeImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst MyLegacyImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> =\n {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n };\n\n// =============================================================================\n// ERROR DISPLAY ATTRIBUTES\n// =============================================================================\n\ninterface ErrorDisplayDataAttrs {\n img?: React.ImgHTMLAttributes<HTMLImageElement> | undefined;\n imgSrc?: string | undefined;\n title?: string | undefined;\n description?: string | JSX.Element | undefined;\n renderDescription?: (\n attrs?: MaintenanceAdditionalAttributes | InactivityAdditionalAttributes\n ) => JSX.Element | string | undefined;\n}\n\nexport const generateErrorDisplayData = (\n ImgPathsObject: Record<string, ErrorDisplayHelper.ImagePathAttributes>,\n theme?: ThemeSpec\n) =>\n new Map<ErrorDisplayType, ErrorDisplayDataAttrs>([\n [\n \"400\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"400\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"403\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"403\"], theme),\n title: \"Error loading page\",\n description:\n \"You may not have permission to view this page. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"404\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"404\"], theme),\n title: \"Page not found\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"408\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"408\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"500\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"500\"], theme),\n title: \"Something went wrong\",\n description:\n \"We're working on a fix for the problem. Please try again later.\",\n },\n ],\n [\n \"502\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"502\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"503\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n },\n ],\n [\n \"504\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"504\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"confirmation\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"confirmation\"], theme),\n title: \"Leave and lose changes?\",\n description:\n \"You have unsaved changes. If you leave this page, you will lose the changes you’ve made.\",\n },\n ],\n [\n \"link-error\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"link-error\"], theme),\n title: \"Link has expired\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know it has expired.\",\n },\n ],\n [\n \"logout\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"logout\"], theme),\n title: \"You’ve been logged out\",\n description:\n \"It looks like you’ve left, so we logged you out to protect your privacy.\",\n },\n ],\n [\n \"insufficient-credits\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"insufficient-credits\"],\n theme\n ),\n title: \"Insufficient credits\",\n description:\n \"You do not have enough credits to make this transaction.\",\n },\n ],\n [\n \"inactivity\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"inactivity\"], theme),\n title: \"Are you still there?\",\n description:\n \"You’ve been inactive for a while. To protect your privacy, you’ll be logged out soon.\\n\\nIf you wish to stay on this page, let us know now.\",\n renderDescription: renderDescriptionWithProps(\"inactivity\"),\n },\n ],\n [\n \"maintenance\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n renderDescription: renderDescriptionWithProps(\"maintenance\"),\n },\n ],\n [\n \"no-item-found\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"no-item-found\"], theme),\n title: \"No results found\",\n description:\n \"Try adjusting your search or filters to find what you’re looking for.\",\n },\n ],\n [\n \"payment-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"payment-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful payment\",\n description: \"Your payment was unsuccessful. Please try again.\",\n },\n ],\n [\n \"transfer-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"transfer-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful transfer\",\n description:\n \"Your transfer was unsuccessful. Please try again.\",\n },\n ],\n [\n \"unsupported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser not supported\",\n description:\n \"Download the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"partially-supported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser version not supported\",\n description:\n \"Update to the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"warning\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"warning\"], theme),\n title: \"Are you sure?\",\n description: \"You will lose your progress.\",\n },\n ],\n ]);\n\nexport const getErrorDisplayData = (\n type: ErrorDisplayType,\n resourceScheme: ResourceScheme,\n theme?: ThemeSpec\n) => {\n switch (resourceScheme) {\n case \"bookingsg\":\n return generateErrorDisplayData(BsgImgPaths, theme).get(type);\n case \"ccube\":\n return generateErrorDisplayData(CCubeImgPaths, theme).get(type);\n case \"mylegacy\":\n case \"smgs\":\n return generateErrorDisplayData(MyLegacyImgPaths, theme).get(type);\n default:\n return generateErrorDisplayData(ImgPaths, theme).get(type);\n }\n};\n"],"names":["imgAttributeHelper","ErrorDisplayHelper","ImgPaths","base","md","lg","width","height","confirmation","inactivity","logout","warning","BsgImgPaths","CCubeImgPaths","Object","assign","MyLegacyImgPaths","generateErrorDisplayData","ImgPathsObject","theme","Map","img","title","description","renderDescription","renderDescriptionWithProps","type","resourceScheme","get"],"mappings":"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"}
1
+ {"version":3,"file":"error-display-data.js","sources":["../../../src/error-display/error-display-data.tsx"],"sourcesContent":["import { ResourceScheme, ThemeSpec } from \"../theme/types\";\nimport { renderDescriptionWithProps } from \"./error-display-helper-comp\";\nimport { ErrorDisplayHelper } from \"./helper\";\nimport {\n ErrorDisplayType,\n InactivityAdditionalAttributes,\n MaintenanceAdditionalAttributes,\n} from \"./types\";\n\nconst { imgAttributeHelper } = ErrorDisplayHelper;\n\n// =============================================================================\n// IMAGE PATHS\n// =============================================================================\n\nconst ImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@3x.png\",\n width: 400,\n height: 281,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst BsgImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@3x.png\",\n width: 400,\n height: 215,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@3x.png\",\n width: 400,\n height: 254,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@3x.png\",\n width: 400,\n height: 319,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@3x.png\",\n width: 400,\n height: 330,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@3x.png\",\n width: 400,\n height: 215,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@3x.png\",\n width: 400,\n height: 191,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@3x.png\",\n width: 400,\n height: 261,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@3x.png\",\n width: 400,\n height: 276,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@3x.png\",\n width: 400,\n height: 290,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst CareerCompassImgPaths: Record<\n string,\n ErrorDisplayHelper.ImagePathAttributes\n> = {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403@3x.png\",\n width: 400,\n height: 284,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503@3x.png\",\n width: 400,\n height: 220,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504@3x.png\",\n width: 400,\n height: 220,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst CCubeImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst MyLegacyImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> =\n {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n };\n\n// =============================================================================\n// ERROR DISPLAY ATTRIBUTES\n// =============================================================================\n\ninterface ErrorDisplayDataAttrs {\n img?: React.ImgHTMLAttributes<HTMLImageElement> | undefined;\n imgSrc?: string | undefined;\n title?: string | undefined;\n description?: string | JSX.Element | undefined;\n renderDescription?: (\n attrs?: MaintenanceAdditionalAttributes | InactivityAdditionalAttributes\n ) => JSX.Element | string | undefined;\n}\n\nexport const generateErrorDisplayData = (\n ImgPathsObject: Record<string, ErrorDisplayHelper.ImagePathAttributes>,\n theme?: ThemeSpec\n) =>\n new Map<ErrorDisplayType, ErrorDisplayDataAttrs>([\n [\n \"400\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"400\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"403\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"403\"], theme),\n title: \"Error loading page\",\n description:\n \"You may not have permission to view this page. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"404\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"404\"], theme),\n title: \"Page not found\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"408\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"408\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"500\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"500\"], theme),\n title: \"Something went wrong\",\n description:\n \"We're working on a fix for the problem. Please try again later.\",\n },\n ],\n [\n \"502\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"502\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"503\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n },\n ],\n [\n \"504\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"504\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"confirmation\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"confirmation\"], theme),\n title: \"Leave and lose changes?\",\n description:\n \"You have unsaved changes. If you leave this page, you will lose the changes you’ve made.\",\n },\n ],\n [\n \"link-error\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"link-error\"], theme),\n title: \"Link has expired\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know it has expired.\",\n },\n ],\n [\n \"logout\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"logout\"], theme),\n title: \"You’ve been logged out\",\n description:\n \"It looks like you’ve left, so we logged you out to protect your privacy.\",\n },\n ],\n [\n \"insufficient-credits\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"insufficient-credits\"],\n theme\n ),\n title: \"Insufficient credits\",\n description:\n \"You do not have enough credits to make this transaction.\",\n },\n ],\n [\n \"inactivity\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"inactivity\"], theme),\n title: \"Are you still there?\",\n description:\n \"You’ve been inactive for a while. To protect your privacy, you’ll be logged out soon.\\n\\nIf you wish to stay on this page, let us know now.\",\n renderDescription: renderDescriptionWithProps(\"inactivity\"),\n },\n ],\n [\n \"maintenance\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n renderDescription: renderDescriptionWithProps(\"maintenance\"),\n },\n ],\n [\n \"no-item-found\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"no-item-found\"], theme),\n title: \"No results found\",\n description:\n \"Try adjusting your search or filters to find what you’re looking for.\",\n },\n ],\n [\n \"payment-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"payment-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful payment\",\n description: \"Your payment was unsuccessful. Please try again.\",\n },\n ],\n [\n \"transfer-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"transfer-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful transfer\",\n description:\n \"Your transfer was unsuccessful. Please try again.\",\n },\n ],\n [\n \"unsupported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser not supported\",\n description:\n \"Download the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"partially-supported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser version not supported\",\n description:\n \"Update to the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"warning\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"warning\"], theme),\n title: \"Are you sure?\",\n description: \"You will lose your progress.\",\n },\n ],\n ]);\n\nexport const getErrorDisplayData = (\n type: ErrorDisplayType,\n resourceScheme: ResourceScheme,\n theme?: ThemeSpec\n) => {\n switch (resourceScheme) {\n case \"bookingsg\":\n return generateErrorDisplayData(BsgImgPaths, theme).get(type);\n case \"careercompass\":\n return generateErrorDisplayData(CareerCompassImgPaths, theme).get(\n type\n );\n case \"ccube\":\n return generateErrorDisplayData(CCubeImgPaths, theme).get(type);\n case \"mylegacy\":\n case \"smgs\":\n return generateErrorDisplayData(MyLegacyImgPaths, theme).get(type);\n default:\n return generateErrorDisplayData(ImgPaths, theme).get(type);\n }\n};\n"],"names":["imgAttributeHelper","ErrorDisplayHelper","ImgPaths","base","md","lg","width","height","confirmation","inactivity","logout","warning","BsgImgPaths","CareerCompassImgPaths","Object","assign","CCubeImgPaths","MyLegacyImgPaths","generateErrorDisplayData","ImgPathsObject","theme","Map","img","title","description","renderDescription","renderDescriptionWithProps","type","resourceScheme","get"],"mappings":"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"}
package/cjs/navbar/navbar-items.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),r=require("../menu/menu.js"),t=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:u,mobile:d=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:h})=>{const[p,j]=i.useState(-1),[m,x]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),k=s.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(x(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const L=(e,n)=>i=>{var r;if(i.stopPropagation(),d&&(null===(r=e.subMenu)||void 0===r?void 0:r.length)){const e=!(p===n&&m);j(n),x(e)}h(i,e)},$=(e,n)=>{e.stopPropagation(),h(e,n),x(!1),j(-1)},f=(e,i)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),q=e=>n.jsx(t.Menu,{items:e,onItemClick:$}),I=(i,t)=>{const{children:s,options:a,subMenu:h}=i,j=e.__rest(i,["children","options","subMenu"]),x=!!(null==h?void 0:h.length),v=(e=>{var n;return e.id===u||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===u))})(i),$=d&&x&&p===t&&m,I=!d&&x&&b===t||$,M=null!==b?b===t:v,C=!c&&M,_=M?d?"bold":"semibold":"regular",O=d?`link__mobile-${t+1}`:`link__${t+1}`,S=()=>C?n.jsx(l.LinkIndicator,{"data-testid":`${O}-indicator`,$selected:M}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:x?(()=>{const e=`navbar-submenu-${k}-${i.id}`;return d?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":O,weight:_,$selected:M,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,"aria-haspopup":"menu","aria-expanded":I,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),S(),d&&x?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${O}-expand-collapse-button`,$selected:$,focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:M})})}):null]})),$&&q(h)]}):n.jsx(r.Menu,{position:"bottom",customOffset:0,menuContent:f(h,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(t),onPopoverDismiss:()=>{g((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":O,weight:_,$selected:M,"aria-haspopup":"menu","aria-expanded":I},a,{children:[n.jsx(l.LinkLabel,{children:s}),S()]}))})})():n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":O,weight:_,$selected:M,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),S()]}))},t)},M=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):I(e,i)}));return a&&a.length>0?d?n.jsx(l.MobileWrapper,{ref:v,children:M()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:M()}):n.jsx(n.Fragment,{})};
1
+ "use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),t=require("../menu/menu.js"),r=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,j]=i.useState(-1),[x,m]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),k=s.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(m(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const $=(e,n)=>i=>{var t;if(i.stopPropagation(),u&&(null===(t=e.subMenu)||void 0===t?void 0:t.length)){const e=!(h===n&&x);j(n),m(e)}p(i,e)},L=(e,n)=>{e.stopPropagation(),p(e,n),m(!1),j(-1)},f=(e,i)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),I=e=>n.jsx(r.Menu,{items:e,onItemClick:L}),q=(i,r)=>{const{children:s,options:p,subMenu:j}=i,m=e.__rest(i,["children","options","subMenu"]),v=!!(null==j?void 0:j.length),L=(e=>{var n;return e.id===d||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===d))})(i),q=u&&v&&h===r&&x,M=!u&&v&&b===r||q,C=null!==b?b===r:L,_=!c&&C,O=C?u?"bold":"semibold":"regular",S=u?`link__mobile-${r+1}`:`link__${r+1}`,w=()=>_?n.jsx(l.LinkIndicator,{"data-testid":`${S}-indicator`,$selected:C}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:v?(e=>{const a=`navbar-submenu-${k}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":S,weight:O,$selected:C,underlineStyle:"none"},m,{"aria-current":L?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:$(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),u&&v?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${S}-expand-collapse-button`,$selected:C,$expanded:M,focusHighlight:!1,focusOutline:"browser","aria-label":M?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:C})})}):null]})),q&&I(j)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:f(j,a),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(r),onPopoverDismiss:()=>{g((e=>e===r?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":S,weight:O,$selected:C,"aria-haspopup":"menu","aria-expanded":M},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),n.jsx(l.ChevronIconDesktop,{$selected:C,$expanded:M})]}))})})(r===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":S,weight:O,$selected:C,underlineStyle:"none"},m,{"aria-current":L?"page":void 0,onClick:$(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))},r)},M=()=>a.map(((e,i)=>{var t;return"component"===e.itemType?n.jsx("li",{children:null!==(t=e.children)&&void 0!==t?t:null},i):q(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:v,children:M()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:M()}):n.jsx(n.Fragment,{})};
2
2
  //# sourceMappingURL=navbar-items.js.map
package/cjs/navbar/navbar-items.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n ChevronIcon,\n ExpandCollapseButton,\n Link,\n LinkButton,\n LinkIconContainer,\n LinkIndicator,\n LinkItem,\n LinkLabel,\n MobileWrapper,\n Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n items: NavItemProps<T>[];\n selectedId?: string | undefined;\n /** toggle for mobile or desktop view */\n mobile?: boolean | undefined;\n hideNavBranding?: boolean | undefined;\n /** hide the selected LinkIndicator */\n hideLinkIndicator?: boolean | undefined;\n onItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<T> | NavItemCommonProps<T>\n ) => void;\n}\n\nexport const NavbarItems = <T,>({\n items,\n selectedId,\n mobile = false,\n hideNavBranding,\n hideLinkIndicator = false,\n onItemClick,\n}: Props<T>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n null\n );\n const listRef = useRef<HTMLUListElement>(null);\n const instanceId = useId();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const resetAll = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n setOpenSubMenuIndex(null);\n };\n\n const closeMobileSubMenu = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n };\n\n const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n if (item.id === selectedId) return true;\n if (item.subMenu?.length) {\n return !!item.subMenu.find((s) => s.id === selectedId);\n }\n return false;\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n listRef.current &&\n !listRef.current.contains(event.target as Node)\n ) {\n resetAll();\n }\n };\n document.addEventListener(\"click\", handleClickOutside, true);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n return (event: React.MouseEvent<HTMLAnchorElement>) => {\n event.stopPropagation();\n\n // mobile expands inline when link has submenu\n if (mobile && item.subMenu?.length) {\n const nextExpanded = !(selectedIndex === index && showSubMenu);\n setSelectedIndex(index);\n setShowSubMenu(nextExpanded);\n }\n\n onItemClick(event, item);\n };\n };\n\n const handleMobileSubLinkClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemCommonProps<T>\n ) => {\n event.stopPropagation();\n onItemClick(event, item);\n closeMobileSubMenu();\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDesktopSubMenu = (\n subMenu: NavItemCommonProps<T>[],\n subMenuId: string\n ) => (\n <DesktopMenu.Content id={subMenuId}>\n <DesktopMenu.Section showDivider={false}>\n {subMenu.map((item, subIndex) => (\n <DesktopMenu.Link\n key={`${item.id}-${subIndex}`}\n href={item.href}\n >\n {item.children}\n </DesktopMenu.Link>\n ))}\n </DesktopMenu.Section>\n </DesktopMenu.Content>\n );\n\n const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n );\n\n const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n const { children, options, subMenu, ...otherItemAttrs } = item;\n\n const hasSubMenu = !!subMenu?.length;\n\n const isRouteSelected = checkSelected(item);\n\n // desktop popover open state\n const isDesktopExpanded =\n !mobile && hasSubMenu && openSubMenuIndex === index;\n\n // mobile inline expanded state\n const isMobileExpanded =\n mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n const selected =\n openSubMenuIndex !== null\n ? openSubMenuIndex === index\n : isRouteSelected;\n\n const showIndicator = !hideLinkIndicator && selected;\n\n const textWeight: TypographyWeight = selected\n ? mobile\n ? \"bold\"\n : \"semibold\"\n : \"regular\";\n\n const testId = mobile\n ? `link__mobile-${index + 1}`\n : `link__${index + 1}`;\n\n const renderIndicator = () =>\n showIndicator ? (\n <LinkIndicator\n data-testid={`${testId}-indicator`}\n $selected={selected}\n />\n ) : null;\n\n const renderMobileChevron = () =>\n mobile && hasSubMenu ? (\n <LinkIconContainer>\n <ExpandCollapseButton\n data-testid={`${testId}-expand-collapse-button`}\n $selected={isMobileExpanded}\n focusHighlight={false}\n focusOutline=\"browser\"\n aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n >\n <ChevronIcon $selected={selected} />\n </ExpandCollapseButton>\n </LinkIconContainer>\n ) : null;\n\n const renderLink = () => (\n <Link\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </Link>\n );\n\n const renderLinkWithSubmenu = () => {\n const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n if (mobile) {\n return (\n <>\n <Link\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n {renderMobileChevron()}\n </Link>\n\n {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n </>\n );\n }\n\n return (\n <DesktopMenu\n position=\"bottom\"\n customOffset={0}\n menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n triggerOnFocus\n isModal={false}\n onPopoverAppear={() => setOpenSubMenuIndex(index)}\n onPopoverDismiss={() => {\n setOpenSubMenuIndex((prev) =>\n prev === index ? null : prev\n );\n }}\n >\n <LinkButton\n type=\"button\"\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </LinkButton>\n </DesktopMenu>\n );\n };\n\n return (\n <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n </LinkItem>\n );\n };\n\n const renderItems = () =>\n items.map((item, index) => {\n switch (item.itemType) {\n case \"component\": {\n return <li key={index}>{item.children ?? null}</li>;\n }\n case \"link\":\n default: {\n return renderLinkItem(item as NavItemLinkProps<T>, index);\n }\n }\n });\n\n if (items && items.length > 0) {\n return mobile ? (\n <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n ) : (\n <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n {renderItems()}\n </Wrapper>\n );\n }\n\n return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
1
+ {"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n ChevronIcon,\n ChevronIconDesktop,\n ExpandCollapseButton,\n Link,\n LinkButton,\n LinkIconContainer,\n LinkIndicator,\n LinkItem,\n LinkLabel,\n MobileWrapper,\n Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n items: NavItemProps<T>[];\n selectedId?: string | undefined;\n /** toggle for mobile or desktop view */\n mobile?: boolean | undefined;\n hideNavBranding?: boolean | undefined;\n /** hide the selected LinkIndicator */\n hideLinkIndicator?: boolean | undefined;\n onItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<T> | NavItemCommonProps<T>\n ) => void;\n}\n\nexport const NavbarItems = <T,>({\n items,\n selectedId,\n mobile = false,\n hideNavBranding,\n hideLinkIndicator = false,\n onItemClick,\n}: Props<T>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n null\n );\n const listRef = useRef<HTMLUListElement>(null);\n const instanceId = useId();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const resetAll = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n setOpenSubMenuIndex(null);\n };\n\n const closeMobileSubMenu = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n };\n\n const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n if (item.id === selectedId) return true;\n if (item.subMenu?.length) {\n return !!item.subMenu.find((s) => s.id === selectedId);\n }\n return false;\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n listRef.current &&\n !listRef.current.contains(event.target as Node)\n ) {\n resetAll();\n }\n };\n document.addEventListener(\"click\", handleClickOutside, true);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n return (event: React.MouseEvent<HTMLAnchorElement>) => {\n event.stopPropagation();\n\n // mobile expands inline when link has submenu\n if (mobile && item.subMenu?.length) {\n const nextExpanded = !(selectedIndex === index && showSubMenu);\n setSelectedIndex(index);\n setShowSubMenu(nextExpanded);\n }\n\n onItemClick(event, item);\n };\n };\n\n const handleMobileSubLinkClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemCommonProps<T>\n ) => {\n event.stopPropagation();\n onItemClick(event, item);\n closeMobileSubMenu();\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDesktopSubMenu = (\n subMenu: NavItemCommonProps<T>[],\n subMenuId: string\n ) => (\n <DesktopMenu.Content id={subMenuId}>\n <DesktopMenu.Section showDivider={false}>\n {subMenu.map((item, subIndex) => (\n <DesktopMenu.Link\n key={`${item.id}-${subIndex}`}\n href={item.href}\n >\n {item.children}\n </DesktopMenu.Link>\n ))}\n </DesktopMenu.Section>\n </DesktopMenu.Content>\n );\n\n const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n );\n\n const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n const { children, options, subMenu, ...otherItemAttrs } = item;\n\n const hasSubMenu = !!subMenu?.length;\n\n const isRouteSelected = checkSelected(item);\n\n // desktop popover open state\n const isDesktopExpanded =\n !mobile && hasSubMenu && openSubMenuIndex === index;\n\n // mobile inline expanded state\n const isMobileExpanded =\n mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n const selected =\n openSubMenuIndex !== null\n ? openSubMenuIndex === index\n : isRouteSelected;\n\n const showIndicator = !hideLinkIndicator && selected;\n\n const textWeight: TypographyWeight = selected\n ? mobile\n ? \"bold\"\n : \"semibold\"\n : \"regular\";\n\n const testId = mobile\n ? `link__mobile-${index + 1}`\n : `link__${index + 1}`;\n\n const renderIndicator = () =>\n showIndicator ? (\n <LinkIndicator\n data-testid={`${testId}-indicator`}\n $selected={selected}\n />\n ) : null;\n\n const renderMobileChevron = () =>\n mobile && hasSubMenu ? (\n <LinkIconContainer>\n <ExpandCollapseButton\n data-testid={`${testId}-expand-collapse-button`}\n $selected={selected}\n $expanded={isExpanded}\n focusHighlight={false}\n focusOutline=\"browser\"\n aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n >\n <ChevronIcon $selected={selected} />\n </ExpandCollapseButton>\n </LinkIconContainer>\n ) : null;\n\n const renderLink = () => (\n <Link\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </Link>\n );\n\n const renderLinkWithSubmenu = (isLastItem: boolean) => {\n const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n if (mobile) {\n return (\n <>\n <Link\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n {renderMobileChevron()}\n </Link>\n\n {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n </>\n );\n }\n\n return (\n <DesktopMenu\n position={isLastItem ? \"bottom-end\" : \"bottom\"}\n customOffset={0}\n menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n triggerOnFocus\n isModal={false}\n onPopoverAppear={() => setOpenSubMenuIndex(index)}\n onPopoverDismiss={() => {\n setOpenSubMenuIndex((prev) =>\n prev === index ? null : prev\n );\n }}\n >\n <LinkButton\n type=\"button\"\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n <ChevronIconDesktop\n $selected={selected}\n $expanded={isExpanded}\n />\n </LinkButton>\n </DesktopMenu>\n );\n };\n\n return (\n <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n {hasSubMenu\n ? renderLinkWithSubmenu(index === items.length - 1)\n : renderLink()}\n </LinkItem>\n );\n };\n\n const renderItems = () =>\n items.map((item, index) => {\n switch (item.itemType) {\n case \"component\": {\n return <li key={index}>{item.children ?? null}</li>;\n }\n case \"link\":\n default: {\n return renderLinkItem(item as NavItemLinkProps<T>, index);\n }\n }\n });\n\n if (items && items.length > 0) {\n return mobile ? (\n <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n ) : (\n <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n {renderItems()}\n </Wrapper>\n );\n }\n\n return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
package/cjs/navbar/navbar-items.styles.js CHANGED
@@ -41,6 +41,7 @@
41
41
  text-align: center;
42
42
  color: ${i.ThemeNavbar["navbar-link-colour-text"]};
43
43
  height: 100%;
44
+ gap: 0.5rem;
44
45
 
45
46
  &:active,
46
47
  &:hover,
@@ -53,7 +54,6 @@
53
54
  width: 100%;
54
55
  padding: 0.5rem 1rem;
55
56
  text-align: left;
56
- align-items: flex-start;
57
57
  }
58
58
  `,u=a.default.a`
59
59
  ${c}
@@ -70,14 +70,13 @@
70
70
  color: inherit;
71
71
  `,p=a.default.div`
72
72
  flex: 1;
73
- margin-top: 0.25rem;
74
73
 
75
74
  overflow: hidden;
76
75
  display: -webkit-box;
77
76
  -webkit-box-orient: vertical;
78
77
  -webkit-line-clamp: 3;
79
78
  white-space: pre-wrap;
80
- `,f=a.default.div`
79
+ `,m=a.default.div`
81
80
  position: absolute;
82
81
  bottom: 0;
83
82
  left: 0;
@@ -104,12 +103,11 @@
104
103
  height: 100%;
105
104
  width: 0.25rem;
106
105
  }
107
- `,m=a.default.div`
108
- padding-left: 0.5rem;
106
+ `,f=a.default.div`
109
107
  margin-right: -0.5rem;
110
108
  `,g=a.default(r.ClickableIcon)`
111
109
  padding: 0.5rem;
112
- transform: rotate(${e=>e.$selected?0:180}deg);
110
+ transform: rotate(${e=>e.$expanded?0:180}deg);
113
111
  transition: transform 300ms ease-in-out;
114
112
  margin: auto 0.25rem auto 0;
115
113
  `,$=a.default(e.ChevronUpIcon)`
@@ -125,5 +123,11 @@
125
123
  ${h}:focus & {
126
124
  color: ${e=>e.$selected?o.Colour["icon-selected-hover"]:o.Colour["icon-hover"]};
127
125
  }
128
- `;exports.ChevronIcon=$,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=m,exports.LinkIndicator=f,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
126
+ `,v=a.default($)`
127
+ transform: rotate(${e=>e.$expanded?0:180}deg);
128
+ transition: transform 300ms ease-in-out;
129
+
130
+ height: 1.125rem;
131
+ width: 1.125rem;
132
+ `;exports.ChevronIcon=$,exports.ChevronIconDesktop=v,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=f,exports.LinkIndicator=m,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
129
133
  //# sourceMappingURL=navbar-items.styles.js.map
package/cjs/navbar/navbar-items.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n align-items: flex-start;\n }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n margin-top: 0.25rem;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${(props) =>\n props.$selected &&\n css`\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n `};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const LinkIconContainer = styled.div`\n padding-left: 0.5rem;\n margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n padding: 0.5rem;\n transform: rotate(${(props) => (props.$selected ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n color: ${(props) =>\n props.$selected\n ? Colour[\"icon-selected-hover\"]\n : Colour[\"icon-hover\"]};\n }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"uTA4BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;;iBAOPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;;EAObW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAAA,QAAO6B,EAAAA,cAA0B;;;aAG/CL,EAAAA,OAAOM;;MAEdb;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;"}
1
+ {"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n gap: 0.5rem;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${(props) =>\n props.$selected &&\n css`\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n `};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const LinkIconContainer = styled.div`\n margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n padding: 0.5rem;\n transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n color: ${(props) =>\n props.$selected\n ? Colour[\"icon-selected-hover\"]\n : Colour[\"icon-hover\"]};\n }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n\n height: 1.125rem;\n width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"uTA6BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;;;iBAQPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;EAMbW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;EAUtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;EAI9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAM0B,UAAY,EAAI;;;EAK7CC,EAAc7B,EAAAA,QAAO8B,EAAAA,cAA0B;;;aAG/CN,EAAAA,OAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;EAIZQ,EAAqBhC,EAAAA,QAAO6B,EAAwB;wBACxC3B,GAAWA,EAAM0B,UAAY,EAAI;;;;;"}
package/cjs/toggle/toggle.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),t=require("@lifesg/react-icons/chevron-up"),a=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:b,childrenMaxLines:h,subLabel:p,disabled:$,error:x,name:j,id:g,className:m,compositeSection:y,removable:v,focusableWhenDisabled:C,useContentWidth:f,onRemove:k,onChange:q,"data-testid":I,"aria-describedby":T}=d,w=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:E=!0,errors:L,children:S,initialExpanded:A}=y||{},[R,W]=a.useState(c),[D,N]=a.useState(!!A),_=a.useMemo((()=>{const e=Array.isArray(L)&&(null==L?void 0:L.length)>0,r=!Array.isArray(L)&&!!L;return e||r}),[L]),B=s.useId(),F=g?`${g}`:`tg-${B}`,M=a.useRef(null),P=!!$&&!!C,H=!!$&&!C,O=!!$;a.useEffect((()=>{W(c)}),[c]),a.useEffect((()=>{R&&N(null==A||A)}),[R]);const U=e=>{if(O)e.preventDefault();else if(q)q(e);else switch(l){case"checkbox":W((e=>!e));break;case"radio":case"yes":case"no":R||W(!0)}},V=()=>{$||N(!D)},z=()=>{$||!k||k()},G=()=>{var e;null===(e=null==M?void 0:M.current)||void 0===e||e.click()},J=e=>{e.stopPropagation()},K=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(n.StyledToggleIcon,{type:e,active:R,disabled:$,$selected:R,$disabled:$})},Q=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(n.SubLabel,{"data-id":"toggle-sublabel",id:`${F}-sublabel`,"aria-hidden":!0,children:e})},X=()=>{const e=!D&&!_;return E&&r.jsxs(n.ExpandButton,{$paddingTopRequired:e,disabled:$,onClick:V,"data-testid":D?"collapse-button":"expand-button",children:[D?"Show less":"Show more",D?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},Y=e=>r.jsxs(r.Fragment,{children:[r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:"Error"}),r.jsx(n.ErrorList,{$disabled:$,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${F}-error-list-item-${i}`,children:r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:e})},i)))})]});return r.jsxs(n.Container,{$selected:R,$disabled:$,className:m,$styleType:u,$error:x,$indicator:o,$useContentWidth:f,id:g,"data-testid":I,children:[(()=>{const e=["string"==typeof p?`${F}-sublabel`:null,T].filter(Boolean).join(" ")||void 0;return r.jsxs(n.HeaderContainer,{id:`${F}-header-container`,$disabled:$,$error:x,$selected:R,$indicator:o,$styleType:u,children:[r.jsx(n.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(n.InputContainer,{id:`${F}-input-container`,onClick:G,children:[r.jsx(n.Input,Object.assign({ref:M,name:j,id:`${F}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:H,"aria-disabled":P,$disabledVisual:$,onChange:U,onClick:J,checked:R,tabIndex:P?0:void 0,"aria-describedby":e},w)),o&&K(),r.jsxs(n.TextContainer,{$selected:R,$disabled:$,children:[r.jsx(n.Label,{htmlFor:`${F}-input`,"data-testid":"toggle-label",id:`${F}-label`,$maxLines:h,$selected:R,children:b}),p&&Q()]})]})}),v&&r.jsx(n.RemoveButton,{type:"button",$disabled:$,onClick:z,id:`${F}-remove-button`,children:"Remove"})]})})(),S&&r.jsxs("div",{children:[(!E||D)&&r.jsx(n.Children,{"data-id":"toggle-composite-children",$isFinalItem:!E,$disabled:$,children:S}),E&&!D&&_&&r.jsx(n.ErrorContainer,{$disabled:$,onClick:V,id:`${F}-error-alert`,children:r.jsx(n.AlertContainer,{type:$?"description":"error",className:m,showIcon:!0,children:Array.isArray(L)?Y(L):L})}),X()]})]})};
1
+ "use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),t=require("@lifesg/react-icons/chevron-up"),a=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:b,childrenMaxLines:h,subLabel:p,disabled:$,error:x,name:j,id:g,className:m,compositeSection:y,removable:v,focusableWhenDisabled:C,useContentWidth:f,onRemove:k,onChange:q,"data-testid":I,"aria-describedby":T}=d,w=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:E=!0,errors:L,children:S,initialExpanded:A}=y||{},[R,W]=a.useState(c),[D,N]=a.useState(!!A),_=a.useMemo((()=>{const e=Array.isArray(L)&&(null==L?void 0:L.length)>0,r=!Array.isArray(L)&&!!L;return e||r}),[L]),B=s.useId(),F=g?`${g}`:`tg-${B}`,M=a.useRef(null),P=!!$&&!!C,H=!!$&&!C,O=!!$;a.useEffect((()=>{W(c)}),[c]),a.useEffect((()=>{R&&N(null==A||A)}),[R]);const U=e=>{if(O)e.preventDefault();else if(q)q(e);else switch(l){case"checkbox":W((e=>!e));break;case"radio":case"yes":case"no":R||W(!0)}},V=()=>{$||N(!D)},z=()=>{$||!k||k()},G=()=>{var e;null===(e=null==M?void 0:M.current)||void 0===e||e.click()},J=e=>{e.stopPropagation()},K=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(n.StyledToggleIcon,{type:e,active:R,disabled:$,$selected:R,$disabled:$,$error:x})},Q=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(n.SubLabel,{"data-id":"toggle-sublabel",id:`${F}-sublabel`,"aria-hidden":!0,children:e})},X=()=>{const e=!D&&!_;return E&&r.jsxs(n.ExpandButton,{$paddingTopRequired:e,disabled:$,onClick:V,"data-testid":D?"collapse-button":"expand-button",children:[D?"Show less":"Show more",D?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},Y=e=>r.jsxs(r.Fragment,{children:[r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:"Error"}),r.jsx(n.ErrorList,{$disabled:$,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${F}-error-list-item-${i}`,children:r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:e})},i)))})]});return r.jsxs(n.Container,{$selected:R,$disabled:$,className:m,$styleType:u,$error:x,$indicator:o,$useContentWidth:f,id:g,"data-testid":I,children:[(()=>{const e=["string"==typeof p?`${F}-sublabel`:null,T].filter(Boolean).join(" ")||void 0;return r.jsxs(n.HeaderContainer,{id:`${F}-header-container`,$disabled:$,$error:x,$selected:R,$indicator:o,$styleType:u,children:[r.jsx(n.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(n.InputContainer,{id:`${F}-input-container`,onClick:G,children:[r.jsx(n.Input,Object.assign({ref:M,name:j,id:`${F}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:H,"aria-disabled":P,$disabledVisual:$,onChange:U,onClick:J,checked:R,tabIndex:P?0:void 0,"aria-describedby":e},w)),o&&K(),r.jsxs(n.TextContainer,{$selected:R,$disabled:$,$error:x,children:[r.jsx(n.Label,{htmlFor:`${F}-input`,"data-testid":"toggle-label",id:`${F}-label`,$maxLines:h,$selected:R,children:b}),p&&Q()]})]})}),v&&r.jsx(n.RemoveButton,{type:"button",$disabled:$,onClick:z,id:`${F}-remove-button`,children:"Remove"})]})})(),S&&r.jsxs("div",{children:[(!E||D)&&r.jsx(n.Children,{"data-id":"toggle-composite-children",$isFinalItem:!E,$disabled:$,children:S}),E&&!D&&_&&r.jsx(n.ErrorContainer,{$disabled:$,onClick:V,id:`${F}-error-alert`,children:r.jsx(n.AlertContainer,{type:$?"description":"error",className:m,showIcon:!0,children:Array.isArray(L)?Y(L):L})}),X()]})]})};
2
2
  //# sourceMappingURL=toggle.js.map
package/cjs/toggle/toggle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { useId } from \"../util\";\nimport {\n AlertContainer,\n Children,\n Container,\n ErrorContainer,\n ErrorList,\n ErrorText,\n ExpandButton,\n HeaderContainer,\n IndicatorLabelContainer,\n Input,\n InputContainer,\n Label,\n RemoveButton,\n StyledToggleIcon,\n SubLabel,\n TextContainer,\n} from \"./toggle.styles\";\nimport { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection || {};\n const [selected, setSelected] = useState<boolean | undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList || hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <StyledToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n $selected={selected}\n $disabled={disabled}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string | JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <SubLabel\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n >\n {component}\n </SubLabel>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible || expanded) && (\n <Children\n data-id=\"toggle-composite-children\"\n $isFinalItem={!collapsible}\n $disabled={disabled}\n >\n {compositeSectionChildren}\n </Children>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <ExpandButton\n $paddingTopRequired={collapsedWithoutErrors}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </ExpandButton>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n return (\n <HeaderContainer\n id={`${generatedId}-header-container`}\n $disabled={disabled}\n $error={error}\n $selected={selected}\n $indicator={indicator}\n $styleType={styleType}\n >\n <IndicatorLabelContainer $addPadding={removable}>\n <InputContainer\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n >\n <Input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n $disabledVisual={disabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <TextContainer\n $selected={selected}\n $disabled={disabled}\n >\n <Label\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n $maxLines={childrenMaxLines}\n $selected={selected}\n >\n {children}\n </Label>\n {subLabel && renderSubLabel()}\n </TextContainer>\n </InputContainer>\n </IndicatorLabelContainer>\n\n {removable && (\n <RemoveButton\n type=\"button\"\n $disabled={disabled}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </RemoveButton>\n )}\n </HeaderContainer>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <ErrorText weight=\"semibold\" $disabled={disabled}>\n Error\n </ErrorText>\n <ErrorList $disabled={disabled}>\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <ErrorText\n weight=\"semibold\"\n $disabled={disabled}\n >\n {item}\n </ErrorText>\n </li>\n );\n })}\n </ErrorList>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <ErrorContainer\n $disabled={disabled}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <AlertContainer\n type={disabled ? \"description\" : \"error\"}\n className={className}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </AlertContainer>\n </ErrorContainer>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <Container\n $selected={selected}\n $disabled={disabled}\n className={className}\n $styleType={styleType}\n $error={error}\n $indicator={indicator}\n $useContentWidth={useContentWidth}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </Container>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","renderSubLabel","component","SubLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","ExpandButton","$paddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","IndicatorLabelContainer","InputContainer","Input","ref","tabIndex","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon"],"mappings":"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"}
1
+ {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { useId } from \"../util\";\nimport {\n AlertContainer,\n Children,\n Container,\n ErrorContainer,\n ErrorList,\n ErrorText,\n ExpandButton,\n HeaderContainer,\n IndicatorLabelContainer,\n Input,\n InputContainer,\n Label,\n RemoveButton,\n StyledToggleIcon,\n SubLabel,\n TextContainer,\n} from \"./toggle.styles\";\nimport { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection || {};\n const [selected, setSelected] = useState<boolean | undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList || hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <StyledToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n $selected={selected}\n $disabled={disabled}\n $error={error}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string | JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <SubLabel\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n >\n {component}\n </SubLabel>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible || expanded) && (\n <Children\n data-id=\"toggle-composite-children\"\n $isFinalItem={!collapsible}\n $disabled={disabled}\n >\n {compositeSectionChildren}\n </Children>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <ExpandButton\n $paddingTopRequired={collapsedWithoutErrors}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </ExpandButton>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n return (\n <HeaderContainer\n id={`${generatedId}-header-container`}\n $disabled={disabled}\n $error={error}\n $selected={selected}\n $indicator={indicator}\n $styleType={styleType}\n >\n <IndicatorLabelContainer $addPadding={removable}>\n <InputContainer\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n >\n <Input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n $disabledVisual={disabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <TextContainer\n $selected={selected}\n $disabled={disabled}\n $error={error}\n >\n <Label\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n $maxLines={childrenMaxLines}\n $selected={selected}\n >\n {children}\n </Label>\n {subLabel && renderSubLabel()}\n </TextContainer>\n </InputContainer>\n </IndicatorLabelContainer>\n\n {removable && (\n <RemoveButton\n type=\"button\"\n $disabled={disabled}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </RemoveButton>\n )}\n </HeaderContainer>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <ErrorText weight=\"semibold\" $disabled={disabled}>\n Error\n </ErrorText>\n <ErrorList $disabled={disabled}>\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <ErrorText\n weight=\"semibold\"\n $disabled={disabled}\n >\n {item}\n </ErrorText>\n </li>\n );\n })}\n </ErrorList>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <ErrorContainer\n $disabled={disabled}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <AlertContainer\n type={disabled ? \"description\" : \"error\"}\n className={className}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </AlertContainer>\n </ErrorContainer>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <Container\n $selected={selected}\n $disabled={disabled}\n className={className}\n $styleType={styleType}\n $error={error}\n $indicator={indicator}\n $useContentWidth={useContentWidth}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </Container>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","$error","renderSubLabel","component","SubLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","ExpandButton","$paddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","IndicatorLabelContainer","InputContainer","Input","ref","$disabledVisual","tabIndex","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon"],"mappings":"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"}