@pega/cosmos-react-core 9.0.0-build.6.14 → 9.0.0-build.6.16

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 (58) hide show
  1. package/lib/components/FieldGroup/FieldGroup.d.ts +5 -0
  2. package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
  3. package/lib/components/FieldGroup/FieldGroup.js +10 -6
  4. package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
  5. package/lib/components/FieldGroup/FieldGroupList.d.ts +17 -2
  6. package/lib/components/FieldGroup/FieldGroupList.d.ts.map +1 -1
  7. package/lib/components/FieldGroup/FieldGroupList.js +200 -50
  8. package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
  9. package/lib/components/FieldGroup/FieldGroupList.utils.d.ts +33 -0
  10. package/lib/components/FieldGroup/FieldGroupList.utils.d.ts.map +1 -0
  11. package/lib/components/FieldGroup/FieldGroupList.utils.js +74 -0
  12. package/lib/components/FieldGroup/FieldGroupList.utils.js.map +1 -0
  13. package/lib/components/FieldGroup/FieldGroupListContext.d.ts +8 -0
  14. package/lib/components/FieldGroup/FieldGroupListContext.d.ts.map +1 -0
  15. package/lib/components/FieldGroup/FieldGroupListContext.js +9 -0
  16. package/lib/components/FieldGroup/FieldGroupListContext.js.map +1 -0
  17. package/lib/components/FieldGroup/index.d.ts +2 -0
  18. package/lib/components/FieldGroup/index.d.ts.map +1 -1
  19. package/lib/components/FieldGroup/index.js +2 -0
  20. package/lib/components/FieldGroup/index.js.map +1 -1
  21. package/lib/components/Form/Form.d.ts +2 -0
  22. package/lib/components/Form/Form.d.ts.map +1 -1
  23. package/lib/components/Form/Form.js +2 -2
  24. package/lib/components/Form/Form.js.map +1 -1
  25. package/lib/components/Lightbox/Lightbox.d.ts +1 -1
  26. package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
  27. package/lib/components/Lightbox/Lightbox.js +9 -3
  28. package/lib/components/Lightbox/Lightbox.js.map +1 -1
  29. package/lib/components/Lightbox/Lightbox.test-ids.d.ts +1 -1
  30. package/lib/components/Lightbox/Lightbox.test-ids.d.ts.map +1 -1
  31. package/lib/components/Lightbox/Lightbox.test-ids.js +1 -0
  32. package/lib/components/Lightbox/Lightbox.test-ids.js.map +1 -1
  33. package/lib/components/MultiStepForm/MultiStepForm.d.ts.map +1 -1
  34. package/lib/components/MultiStepForm/MultiStepForm.js +29 -3
  35. package/lib/components/MultiStepForm/MultiStepForm.js.map +1 -1
  36. package/lib/hooks/useAnimatedText.d.ts.map +1 -1
  37. package/lib/hooks/useAnimatedText.js +5 -2
  38. package/lib/hooks/useAnimatedText.js.map +1 -1
  39. package/lib/hooks/useI18n.d.ts +2 -0
  40. package/lib/hooks/useI18n.d.ts.map +1 -1
  41. package/lib/hooks/useItemIntersection.d.ts.map +1 -1
  42. package/lib/hooks/useItemIntersection.js +3 -1
  43. package/lib/hooks/useItemIntersection.js.map +1 -1
  44. package/lib/i18n/default.d.ts +2 -0
  45. package/lib/i18n/default.d.ts.map +1 -1
  46. package/lib/i18n/default.js +3 -1
  47. package/lib/i18n/default.js.map +1 -1
  48. package/lib/i18n/i18n.d.ts +2 -0
  49. package/lib/i18n/i18n.d.ts.map +1 -1
  50. package/lib/utils/focusNonInteractiveElement.d.ts +9 -0
  51. package/lib/utils/focusNonInteractiveElement.d.ts.map +1 -0
  52. package/lib/utils/focusNonInteractiveElement.js +27 -0
  53. package/lib/utils/focusNonInteractiveElement.js.map +1 -0
  54. package/lib/utils/index.d.ts +1 -0
  55. package/lib/utils/index.d.ts.map +1 -1
  56. package/lib/utils/index.js +1 -0
  57. package/lib/utils/index.js.map +1 -1
  58. package/package.json +1 -1
@@ -0,0 +1,74 @@
1
+ /**
2
+ * Converts a number to a Roman numeral.
3
+ * @param num - The number to convert.
4
+ * @returns The Roman numeral representation.
5
+ */
6
+ export const convertToRoman = (num) => {
7
+ const romanMap = [
8
+ ['m', 1000],
9
+ ['cm', 900],
10
+ ['d', 500],
11
+ ['cd', 400],
12
+ ['c', 100],
13
+ ['xc', 90],
14
+ ['l', 50],
15
+ ['xl', 40],
16
+ ['x', 10],
17
+ ['ix', 9],
18
+ ['v', 5],
19
+ ['iv', 4],
20
+ ['i', 1]
21
+ ];
22
+ let result = '';
23
+ for (const [roman, value] of romanMap) {
24
+ while (num >= value) {
25
+ result += roman;
26
+ num -= value;
27
+ }
28
+ }
29
+ return result;
30
+ };
31
+ /**
32
+ * Converts a number to a base-26 alphabetic string (a, b, c... aa, ab, ac...).
33
+ * @param num - The 0-based index to convert.
34
+ * @returns The alphabetic representation.
35
+ */
36
+ export const convertToAlphabetic = (num) => {
37
+ let result = '';
38
+ while (num >= 0) {
39
+ result = String.fromCharCode((num % 26) + 97) + result;
40
+ num = Math.floor(num / 26) - 1;
41
+ }
42
+ return result;
43
+ };
44
+ /**
45
+ * Generates a list number based on depth and index.
46
+ * @param levelIndex - The index of the item in the list (0-based).
47
+ * @param depth - The depth of the list (0-based).
48
+ * @returns The formatted list number.
49
+ */
50
+ export const getFormattedListNumber = (levelIndex, depth) => {
51
+ if (depth % 3 === 0) {
52
+ return (levelIndex + 1).toString();
53
+ }
54
+ if (depth % 3 === 1) {
55
+ return convertToAlphabetic(levelIndex);
56
+ }
57
+ return convertToRoman(levelIndex + 1);
58
+ };
59
+ /**
60
+ * Generates a compound index and the current list index based on the depth and index of the current item and its ancestors.
61
+ * @param indices - An array of indices representing the position at each depth (e.g., [0, 1, 2]).
62
+ * @returns An object containing:
63
+ * - `rootIndex`: The zero-based index at the root level (e.g., 0 for "1.", 1 for "2.").
64
+ * - `currentIndex`: The index at the latest depth (e.g., "a." or "i.").
65
+ * - `compoundIndex`: The full compound index (e.g., "1.a.i").
66
+ */
67
+ export const getIndexDetails = (indices) => {
68
+ const indexSegments = indices.map((levelIndex, index) => getFormattedListNumber(levelIndex, index));
69
+ const rootIndex = indices[0];
70
+ const currentIndex = `${indexSegments[indexSegments.length - 1]}.`;
71
+ const compoundIndex = indexSegments.join('.');
72
+ return { rootIndex, currentIndex, compoundIndex };
73
+ };
74
+ //# sourceMappingURL=FieldGroupList.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FieldGroupList.utils.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;IAC5C,MAAM,QAAQ,GAAuB;QACnC,CAAC,GAAG,EAAE,IAAI,CAAC;QACX,CAAC,IAAI,EAAE,GAAG,CAAC;QACX,CAAC,GAAG,EAAE,GAAG,CAAC;QACV,CAAC,IAAI,EAAE,GAAG,CAAC;QACX,CAAC,GAAG,EAAE,GAAG,CAAC;QACV,CAAC,IAAI,EAAE,EAAE,CAAC;QACV,CAAC,GAAG,EAAE,EAAE,CAAC;QACT,CAAC,IAAI,EAAE,EAAE,CAAC;QACV,CAAC,GAAG,EAAE,EAAE,CAAC;QACT,CAAC,IAAI,EAAE,CAAC,CAAC;QACT,CAAC,GAAG,EAAE,CAAC,CAAC;QACR,CAAC,IAAI,EAAE,CAAC,CAAC;QACT,CAAC,GAAG,EAAE,CAAC,CAAC;KACT,CAAC;IAEF,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,QAAQ,EAAE,CAAC;QACtC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CAAC;YAChB,GAAG,IAAI,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IACjD,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;QAChB,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC;QACvD,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,UAAkB,EAAE,KAAa,EAAE,EAAE;IAC1E,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IACrC,CAAC;IAED,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,mBAAmB,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;IAED,OAAO,cAAc,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAiB,EACmD,EAAE;IACtE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CACtD,sBAAsB,CAAC,UAAU,EAAE,KAAK,CAAC,CAC1C,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,YAAY,GAAG,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC;IACnE,MAAM,aAAa,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACpD,CAAC,CAAC","sourcesContent":["/**\n * Converts a number to a Roman numeral.\n * @param num - The number to convert.\n * @returns The Roman numeral representation.\n */\nexport const convertToRoman = (num: number) => {\n const romanMap: [string, number][] = [\n ['m', 1000],\n ['cm', 900],\n ['d', 500],\n ['cd', 400],\n ['c', 100],\n ['xc', 90],\n ['l', 50],\n ['xl', 40],\n ['x', 10],\n ['ix', 9],\n ['v', 5],\n ['iv', 4],\n ['i', 1]\n ];\n\n let result = '';\n for (const [roman, value] of romanMap) {\n while (num >= value) {\n result += roman;\n num -= value;\n }\n }\n\n return result;\n};\n\n/**\n * Converts a number to a base-26 alphabetic string (a, b, c... aa, ab, ac...).\n * @param num - The 0-based index to convert.\n * @returns The alphabetic representation.\n */\nexport const convertToAlphabetic = (num: number) => {\n let result = '';\n while (num >= 0) {\n result = String.fromCharCode((num % 26) + 97) + result;\n num = Math.floor(num / 26) - 1;\n }\n\n return result;\n};\n\n/**\n * Generates a list number based on depth and index.\n * @param levelIndex - The index of the item in the list (0-based).\n * @param depth - The depth of the list (0-based).\n * @returns The formatted list number.\n */\nexport const getFormattedListNumber = (levelIndex: number, depth: number) => {\n if (depth % 3 === 0) {\n return (levelIndex + 1).toString();\n }\n\n if (depth % 3 === 1) {\n return convertToAlphabetic(levelIndex);\n }\n\n return convertToRoman(levelIndex + 1);\n};\n\n/**\n * Generates a compound index and the current list index based on the depth and index of the current item and its ancestors.\n * @param indices - An array of indices representing the position at each depth (e.g., [0, 1, 2]).\n * @returns An object containing:\n * - `rootIndex`: The zero-based index at the root level (e.g., 0 for \"1.\", 1 for \"2.\").\n * - `currentIndex`: The index at the latest depth (e.g., \"a.\" or \"i.\").\n * - `compoundIndex`: The full compound index (e.g., \"1.a.i\").\n */\nexport const getIndexDetails = (\n indices: number[]\n): { rootIndex: number; currentIndex: string; compoundIndex: string } => {\n const indexSegments = indices.map((levelIndex, index) =>\n getFormattedListNumber(levelIndex, index)\n );\n\n const rootIndex = indices[0];\n const currentIndex = `${indexSegments[indexSegments.length - 1]}.`;\n const compoundIndex = indexSegments.join('.');\n\n return { rootIndex, currentIndex, compoundIndex };\n};\n"]}
@@ -0,0 +1,8 @@
1
+ export interface FieldGroupListContextValue {
2
+ depth: number;
3
+ ancestorIndices: number[];
4
+ isAncestorHighlighted: boolean;
5
+ }
6
+ declare const FieldGroupListContext: import("react").Context<FieldGroupListContextValue>;
7
+ export default FieldGroupListContext;
8
+ //# sourceMappingURL=FieldGroupListContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FieldGroupListContext.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupListContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,qBAAqB,EAAE,OAAO,CAAC;CAChC;AAQD,QAAA,MAAM,qBAAqB,qDAA4D,CAAC;AAExF,eAAe,qBAAqB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { createContext } from 'react';
2
+ const defaultContext = {
3
+ depth: 1,
4
+ ancestorIndices: [],
5
+ isAncestorHighlighted: false
6
+ };
7
+ const FieldGroupListContext = createContext(defaultContext);
8
+ export default FieldGroupListContext;
9
+ //# sourceMappingURL=FieldGroupListContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FieldGroupListContext.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,cAAc,GAAG;IACrB,KAAK,EAAE,CAAC;IACR,eAAe,EAAE,EAAE;IACnB,qBAAqB,EAAE,KAAK;CAC7B,CAAC;AAEF,MAAM,qBAAqB,GAAG,aAAa,CAA6B,cAAc,CAAC,CAAC;AAExF,eAAe,qBAAqB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport interface FieldGroupListContextValue {\n depth: number;\n ancestorIndices: number[];\n isAncestorHighlighted: boolean;\n}\n\nconst defaultContext = {\n depth: 1,\n ancestorIndices: [],\n isAncestorHighlighted: false\n};\n\nconst FieldGroupListContext = createContext<FieldGroupListContextValue>(defaultContext);\n\nexport default FieldGroupListContext;\n"]}
@@ -2,4 +2,6 @@ export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup'
2
2
  export type { FieldGroupProps } from './FieldGroup';
3
3
  export { default as FieldGroupList } from './FieldGroupList';
4
4
  export type { FieldGroupListProps, FieldGroupListItemProps } from './FieldGroupList';
5
+ export { default as FieldGroupListContext } from './FieldGroupListContext';
6
+ export { getIndexDetails } from './FieldGroupList.utils';
5
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}
@@ -1,3 +1,5 @@
1
1
  export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup';
2
2
  export { default as FieldGroupList } from './FieldGroupList';
3
+ export { default as FieldGroupListContext } from './FieldGroupListContext';
4
+ export { getIndexDetails } from './FieldGroupList.utils';
3
5
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup';\nexport type { FieldGroupProps } from './FieldGroup';\nexport { default as FieldGroupList } from './FieldGroupList';\nexport type { FieldGroupListProps, FieldGroupListItemProps } from './FieldGroupList';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup';\nexport type { FieldGroupProps } from './FieldGroup';\nexport { default as FieldGroupList } from './FieldGroupList';\nexport type { FieldGroupListProps, FieldGroupListItemProps } from './FieldGroupList';\nexport { default as FieldGroupListContext } from './FieldGroupListContext';\nexport { getIndexDetails } from './FieldGroupList.utils';\n"]}
@@ -3,6 +3,8 @@ import type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
3
3
  export interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {
4
4
  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
5
5
  children: BaseFormProps['content'];
6
+ /** Label for the form. */
7
+ label?: string;
6
8
  }
7
9
  declare const _default: ForwardRefForwardPropsComponent<FormProps> & {
8
10
  getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
@@ -1 +1 @@
1
- {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;;;;AAyCD,wBAAiD"}
1
+ {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;;;AA0CD,wBAAiD"}
@@ -4,13 +4,13 @@ import { useTestIds, useUID } from '../../hooks';
4
4
  import MultiStepForm from '../MultiStepForm';
5
5
  import { withTestIds } from '../../utils';
6
6
  import { getFormTestIds } from './Form.test-ids';
7
- const Form = forwardRef(function Form({ testId, children, actions, progress, heading, description, banners, ...restProps }, ref) {
7
+ const Form = forwardRef(function Form({ testId, children, actions, progress, heading, label, description, banners, ...restProps }, ref) {
8
8
  const stepId = useUID();
9
9
  const testIds = useTestIds(testId, getFormTestIds);
10
10
  return (_jsx(MultiStepForm, { "data-testid": testIds.root, autoComplete: '_off', ...restProps, heading: heading, steps: [
11
11
  {
12
12
  id: stepId,
13
- name: '',
13
+ name: label ?? '',
14
14
  actions,
15
15
  content: children,
16
16
  description,
@@ -1 +1 @@
1
- {"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,EACzB,YAAY,EAAC,MAAM,KACf,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { ForwardRefForwardPropsComponent, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n children: BaseFormProps['content'];\n}\n\nconst Form: ForwardRefForwardPropsComponent<FormProps> = forwardRef(function Form(\n {\n testId,\n children,\n actions,\n progress,\n heading,\n description,\n banners,\n ...restProps\n }: PropsWithoutRef<FormProps>,\n ref: FormProps['ref']\n) {\n const stepId = useUID();\n const testIds = useTestIds(testId, getFormTestIds);\n\n return (\n <MultiStepForm\n data-testid={testIds.root}\n autoComplete='_off'\n {...restProps}\n heading={heading}\n steps={[\n {\n id: stepId,\n name: '',\n actions,\n content: children,\n description,\n banners\n }\n ]}\n currentStepId={stepId}\n progress={progress}\n ref={ref}\n />\n );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}
1
+ {"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASjD,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,EACzB,YAAY,EAAC,MAAM,KACf,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,KAAK,IAAI,EAAE;gBACjB,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { ForwardRefForwardPropsComponent, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n children: BaseFormProps['content'];\n /** Label for the form. */\n label?: string;\n}\n\nconst Form: ForwardRefForwardPropsComponent<FormProps> = forwardRef(function Form(\n {\n testId,\n children,\n actions,\n progress,\n heading,\n label,\n description,\n banners,\n ...restProps\n }: PropsWithoutRef<FormProps>,\n ref: FormProps['ref']\n) {\n const stepId = useUID();\n const testIds = useTestIds(testId, getFormTestIds);\n\n return (\n <MultiStepForm\n data-testid={testIds.root}\n autoComplete='_off'\n {...restProps}\n heading={heading}\n steps={[\n {\n id: stepId,\n name: label ?? '',\n actions,\n content: children,\n description,\n banners\n }\n ]}\n currentStepId={stepId}\n progress={progress}\n ref={ref}\n />\n );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}
@@ -1,7 +1,7 @@
1
1
  import type { ForwardRefForwardPropsComponent } from '../../types';
2
2
  import type { LightboxProps } from './Lightbox.types';
3
3
  declare const _default: ForwardRefForwardPropsComponent<LightboxProps> & {
4
- getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
4
+ getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["content", "name", "metadata", "download", "open-in-new-tab", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
5
5
  };
6
6
  export default _default;
7
7
  //# sourceMappingURL=Lightbox.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAsCnE,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,kBAAkB,CAAC;;;;AAsXpE,wBAAyD"}
1
+ {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AA2CnE,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,kBAAkB,CAAC;;;;AAoYpE,wBAAyD"}
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
4
4
  import { cap, getActiveElement, getFocusables, withTestIds } from '../../utils';
5
5
  import Flex from '../Flex';
6
6
  import MetaList from '../MetaList';
7
- import Icon from '../Icon';
7
+ import Icon, { registerIcon } from '../Icon';
8
8
  import Image from '../Image';
9
9
  import Text from '../Text';
10
10
  import { useConfiguration, useConsolidatedRef, useDirection, useEvent, useFocusTrap, useI18n, useScrollToggle, useTestIds } from '../../hooks';
@@ -15,8 +15,14 @@ import Button from '../Button';
15
15
  import Link from '../Link/Link';
16
16
  import mimeTypes from '../File/mimeTypes.json';
17
17
  import { getKindFromMimeType } from '../File/utils';
18
+ import * as openIcon from '../Icon/icons/open.icon';
19
+ import * as timesIcon from '../Icon/icons/times.icon';
20
+ import * as downloadIcon from '../Icon/icons/download.icon';
21
+ import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
22
+ import * as caretRightIcon from '../Icon/icons/caret-right.icon';
18
23
  import { StyledHeader, StyledCountTracker, StyledInfo, StyledPreviewRegion, StyledNavButton, StyledMediaContainer, StyledLiveRegion, StyledLightbox, StyledContainer, StyledObject } from './Lightbox.styles';
19
24
  import { getLightboxTestIds } from './Lightbox.test-ids';
25
+ registerIcon(openIcon, timesIcon, downloadIcon, caretLeftIcon, caretRightIcon);
20
26
  const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0, cycle = false, onItemLoad, onItemError, onNavigate, onItemDownload, onAfterClose, ...restProps }, refArg) {
21
27
  const t = useI18n();
22
28
  const { start, end } = useDirection();
@@ -34,6 +40,7 @@ const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0,
34
40
  const [liveText, setLiveText] = useState('');
35
41
  const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';
36
42
  const testIds = useTestIds(testId, getLightboxTestIds);
43
+ const previewableAttachmentTypes = ['pdf', 'image', 'link', 'video', 'audio'];
37
44
  const initiatorRef = useRef(null);
38
45
  const close = () => {
39
46
  setOpen(false);
@@ -113,7 +120,6 @@ const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0,
113
120
  const extractMimeType = mimeTypes[currentItem.format.toLowerCase()];
114
121
  const getType = currentItem.format === 'url' ? 'link' : 'generic';
115
122
  attachmentType = extractMimeType ? getKindFromMimeType(extractMimeType) : getType;
116
- const previewableAttachmentTypes = ['pdf', 'image', 'link', 'video', 'audio'];
117
123
  validContent = previewableAttachmentTypes.includes(attachmentType)
118
124
  ? !!currentItem.src
119
125
  : !!attachmentType;
@@ -166,7 +172,7 @@ const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0,
166
172
  justify: 'center',
167
173
  colGap: 2,
168
174
  rowGap: 0.5
169
- }, children: [_jsx(Text, { "data-testid": testIds.name, variant: 'primary', as: 'h2', children: currentItem.name }), currentItem.metadata && (_jsx(MetaList, { "data-testid": testIds.metadata, items: currentItem.metadata }))] }), _jsxs(Flex, { container: true, as: StyledContainer, children: [attachmentType !== 'link' && onItemDownload && (_jsx(Button, { "data-testid": testIds.download, variant: 'simple', "aria-label": t('download'), icon: true, onClick: () => onItemDownload(currentItem.id), children: _jsx(Icon, { name: 'download' }) })), _jsx(Button, { "data-testid": testIds.close, variant: 'simple', ref: closeButtonRef, "aria-label": t('close'), icon: true, onClick: close, children: _jsx(Icon, { name: 'times' }) })] })] }), _jsxs(Flex, { container: { justify: 'between' }, as: StyledPreviewRegion, item: { grow: 1, shrink: 0 }, children: [items.length > 1 && (_jsx(StyledNavButton, { "data-testid": testIds.prev, ref: prevButtonRef, variant: 'simple', "aria-label": t('pagination_prev'), hidden: !cycle && currentIndex === 0, icon: true, onClick: () => {
175
+ }, children: [_jsx(Text, { "data-testid": testIds.name, variant: 'primary', as: 'h2', children: currentItem.name }), currentItem.metadata && (_jsx(MetaList, { "data-testid": testIds.metadata, items: currentItem.metadata }))] }), _jsxs(Flex, { container: true, as: StyledContainer, children: [attachmentType !== 'link' && onItemDownload && (_jsx(Button, { "data-testid": testIds.download, variant: 'simple', label: t('download'), icon: true, onClick: () => onItemDownload(currentItem.id), children: _jsx(Icon, { name: 'download' }) })), previewableAttachmentTypes.includes(attachmentType) && currentItem.src && (_jsx(Button, { "data-testid": testIds.openInNewTab, variant: 'simple', label: t('link_open_in_tab_text'), icon: true, href: currentItem.src, target: '_blank', children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { "data-testid": testIds.close, variant: 'simple', ref: closeButtonRef, label: t('close'), icon: true, onClick: close, children: _jsx(Icon, { name: 'times' }) })] })] }), _jsxs(Flex, { container: { justify: 'between' }, as: StyledPreviewRegion, item: { grow: 1, shrink: 0 }, children: [items.length > 1 && (_jsx(StyledNavButton, { "data-testid": testIds.prev, ref: prevButtonRef, variant: 'simple', "aria-label": t('pagination_prev'), hidden: !cycle && currentIndex === 0, icon: true, onClick: () => {
170
176
  navigate(-1);
171
177
  }, children: _jsx("span", { children: _jsx(Icon, { name: 'caret-left' }) }) })), _jsx(Flex, { item: { grow: 1 }, as: StyledMediaContainer, children: _jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, onMouseDown: (e) => {
172
178
  if (e.button !== 0)
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, forwardRef, useCallback } from 'react';\nimport type { PropsWithoutRef, MouseEvent, SyntheticEvent, RefObject } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { cap, getActiveElement, getFocusables, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport MetaList from '../MetaList';\nimport Icon from '../Icon';\nimport Image from '../Image';\nimport Text from '../Text';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useDirection,\n useEvent,\n useFocusTrap,\n useI18n,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport ErrorState from '../ErrorState';\nimport Progress from '../Progress';\nimport FileVisual from '../File/FileVisual';\nimport Button from '../Button';\nimport Link from '../Link/Link';\nimport mimeTypes from '../File/mimeTypes.json';\nimport { getKindFromMimeType } from '../File/utils';\nimport type { AttachmentType } from '../File/utils';\n\nimport {\n StyledHeader,\n StyledCountTracker,\n StyledInfo,\n StyledPreviewRegion,\n StyledNavButton,\n StyledMediaContainer,\n StyledLiveRegion,\n StyledLightbox,\n StyledContainer,\n StyledObject\n} from './Lightbox.styles';\nimport type { LightboxProps, MediaElement } from './Lightbox.types';\nimport { getLightboxTestIds } from './Lightbox.test-ids';\n\nconst Lightbox: ForwardRefForwardPropsComponent<LightboxProps> = forwardRef(function Lightbox(\n {\n testId,\n items,\n defaultIndex = 0,\n cycle = false,\n onItemLoad,\n onItemError,\n onNavigate,\n onItemDownload,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<LightboxProps>,\n refArg: LightboxProps['ref']\n) {\n const t = useI18n();\n const { start, end } = useDirection();\n const { portalTarget } = useConfiguration();\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const currentItem = items[currentIndex];\n const { disableScroll, enableScroll } = useScrollToggle();\n const lightboxRef = useConsolidatedRef(refArg);\n const headerRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const prevButtonRef = useRef<HTMLButtonElement>(null);\n const nextButtonRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(true);\n const mediaRef = useConsolidatedRef(currentItem.ref);\n const [liveText, setLiveText] = useState('');\n const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';\n const testIds = useTestIds(testId, getLightboxTestIds);\n\n const initiatorRef = useRef<Element | null>(null);\n\n const close = () => {\n setOpen(false);\n\n if (\n initiatorRef.current?.isConnected &&\n (initiatorRef.current instanceof HTMLElement || initiatorRef.current instanceof SVGElement)\n )\n initiatorRef.current.focus();\n };\n\n const navigate = (direction: 1 | -1) => {\n if (direction === 1) {\n if (currentIndex < items.length - 1) {\n setCurrentIndex(cur => cur + 1);\n } else if (cycle) {\n setCurrentIndex(0);\n }\n } else if (currentIndex > 0) {\n setCurrentIndex(cur => cur - 1);\n } else if (cycle) {\n setCurrentIndex(items.length - 1);\n }\n };\n const keyDownHandler = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n close();\n } else if (e.key === `Arrow${cap(end)}`) {\n navigate(1);\n } else if (e.key === `Arrow${cap(start)}`) {\n navigate(-1);\n }\n };\n\n useEvent('keydown', keyDownHandler);\n useFocusTrap(lightboxRef);\n\n useEffect(() => {\n setLiveText(`${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''}`);\n }, [currentItem.name, countTrackerText]);\n\n useEffect(() => {\n onNavigate?.(currentItem.id, currentIndex);\n }, [currentIndex]);\n\n useEffect(() => {\n const activeElement = getActiveElement();\n initiatorRef.current = activeElement;\n if (getFocusables(lightboxRef).length > 0) getFocusables(lightboxRef)[0].focus();\n }, []);\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<MediaElement> | Event) => {\n onItemLoad?.(currentItem.id, e);\n },\n [onItemLoad, currentItem.id]\n );\n\n const handleError = useCallback(\n (e: SyntheticEvent<MediaElement> | Event) => {\n onItemError?.(currentItem.id, e);\n },\n [onItemError, currentItem.id]\n );\n\n // Object elements appear to need native event handlers bound as JSX does not work.\n // TODO: Follow up on reason why.\n useEffect(() => {\n if (!mediaRef.current || currentItem.format !== 'pdf') return;\n const pdfObject = mediaRef.current;\n pdfObject.addEventListener('load', handleLoad);\n pdfObject.addEventListener('error', handleError);\n\n return () => {\n pdfObject.removeEventListener('load', handleLoad);\n pdfObject.removeEventListener('error', handleError);\n };\n }, [currentItem]);\n\n let media;\n let validContent = true;\n let attachmentType: AttachmentType = 'generic';\n if (currentItem.format === undefined) {\n validContent = !currentItem.error;\n } else {\n const extractMimeType = (mimeTypes as Record<string, string>)[currentItem.format.toLowerCase()];\n const getType = currentItem.format === 'url' ? 'link' : 'generic';\n attachmentType = extractMimeType ? getKindFromMimeType(extractMimeType) : getType;\n const previewableAttachmentTypes = ['pdf', 'image', 'link', 'video', 'audio'];\n validContent = previewableAttachmentTypes.includes(attachmentType)\n ? !!currentItem.src\n : !!attachmentType;\n }\n\n if (validContent) {\n const nonPreviewableContent = (\n <>\n <Text>\n {t('non_previewable', [\n currentItem.format ? currentItem.format.toUpperCase() : currentItem.name\n ])}\n </Text>\n {onItemDownload && (\n <Button\n aria-label={t('download')}\n onClick={() => onItemDownload(currentItem.id)}\n data-testid={testIds.nonPreviewableDownload}\n >\n {t('download')}\n </Button>\n )}\n </>\n );\n\n const defaultContent = (\n <Flex\n container={{ direction: 'column', gap: 2, alignItems: 'center' }}\n as={StyledInfo}\n data-testid={testIds.content}\n >\n <FileVisual type={attachmentType} size='l' />\n {attachmentType === 'link' && currentItem.src ? (\n <Link href={currentItem.src} data-testid={testIds.link}>\n {currentItem.name}\n </Link>\n ) : (\n nonPreviewableContent\n )}\n </Flex>\n );\n\n switch (attachmentType) {\n case 'image':\n media = currentItem.src && (\n <Image\n data-testid={testIds.content}\n src={currentItem.src}\n alt={currentItem.description ?? t('description_unavailable')}\n onLoad={handleLoad}\n onError={handleError}\n ref={mediaRef as RefObject<HTMLImageElement>}\n />\n );\n break;\n case 'pdf':\n media = currentItem.src && (\n <>\n {navigator.pdfViewerEnabled ? (\n <StyledObject\n data-testid={testIds.content}\n data={currentItem.src}\n type='application/pdf'\n ref={mediaRef as RefObject<HTMLObjectElement>}\n >\n {currentItem.description ?? t('description_unavailable')}\n </StyledObject>\n ) : (\n defaultContent\n )}\n </>\n );\n break;\n case 'video':\n media = currentItem.src && (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <video\n data-testid={testIds.content}\n src={currentItem.src}\n controls\n onLoadedData={handleLoad}\n onError={handleError}\n ref={mediaRef as RefObject<HTMLVideoElement>}\n />\n );\n break;\n case 'audio':\n media = currentItem.src && (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <audio\n data-testid={testIds.content}\n src={currentItem.src}\n controls\n onLoadedData={handleLoad}\n onError={handleError}\n ref={mediaRef as RefObject<HTMLAudioElement>}\n />\n );\n break;\n default: {\n media = defaultContent;\n }\n }\n } else {\n media = <Progress placement='block' delay />;\n }\n\n const content = (\n <StyledLightbox\n data-testid={testIds.root}\n {...restProps}\n tabIndex={-1}\n ref={lightboxRef}\n open={open}\n role='dialog'\n aria-modal\n container={{ alignItems: 'start', justify: 'start', direction: 'column' }}\n alpha={0.9}\n variant='dark'\n transitionSpeed='slow'\n onBeforeTransitionIn={disableScroll}\n onAfterTransitionOut={() => {\n enableScroll();\n onAfterClose?.();\n }}\n >\n <Flex\n as={StyledHeader}\n ref={headerRef}\n role='none'\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 2\n }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n <StyledCountTracker data-testid={testIds.pagination} aria-hidden>\n {countTrackerText}\n </StyledCountTracker>\n\n <Flex\n as={StyledInfo}\n container={{\n wrap: 'wrap',\n alignItems: 'center',\n justify: 'center',\n colGap: 2,\n rowGap: 0.5\n }}\n >\n <Text data-testid={testIds.name} variant='primary' as='h2'>\n {currentItem.name}\n </Text>\n {currentItem.metadata && (\n <MetaList data-testid={testIds.metadata} items={currentItem.metadata} />\n )}\n </Flex>\n\n <Flex container as={StyledContainer}>\n {attachmentType !== 'link' && onItemDownload && (\n <Button\n data-testid={testIds.download}\n variant='simple'\n aria-label={t('download')}\n icon\n onClick={() => onItemDownload(currentItem.id)}\n >\n <Icon name='download' />\n </Button>\n )}\n <Button\n data-testid={testIds.close}\n variant='simple'\n ref={closeButtonRef}\n aria-label={t('close')}\n icon\n onClick={close}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n </Flex>\n\n <Flex\n container={{ justify: 'between' }}\n as={StyledPreviewRegion}\n item={{ grow: 1, shrink: 0 }}\n >\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.prev}\n ref={prevButtonRef}\n variant='simple'\n aria-label={t('pagination_prev')}\n hidden={!cycle && currentIndex === 0}\n icon\n onClick={() => {\n navigate(-1);\n }}\n >\n <span>\n <Icon name='caret-left' />\n </span>\n </StyledNavButton>\n )}\n\n <Flex item={{ grow: 1 }} as={StyledMediaContainer}>\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n {currentItem.error ? <ErrorState message={t('content_load_error')} /> : media}\n </Flex>\n </Flex>\n\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.next}\n ref={nextButtonRef}\n variant='simple'\n aria-label={t('pagination_next')}\n hidden={!cycle && currentIndex === items.length - 1}\n icon\n onClick={() => {\n navigate(1);\n }}\n >\n <span>\n <Icon name='caret-right' />\n </span>\n </StyledNavButton>\n )}\n </Flex>\n <StyledLiveRegion aria-live='polite' aria-label={liveText} />\n </StyledLightbox>\n );\n\n return portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default withTestIds(Lightbox, getLightboxTestIds);\n"]}
1
+ {"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, forwardRef, useCallback } from 'react';\nimport type { PropsWithoutRef, MouseEvent, SyntheticEvent, RefObject } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { cap, getActiveElement, getFocusables, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport MetaList from '../MetaList';\nimport Icon, { registerIcon } from '../Icon';\nimport Image from '../Image';\nimport Text from '../Text';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useDirection,\n useEvent,\n useFocusTrap,\n useI18n,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport ErrorState from '../ErrorState';\nimport Progress from '../Progress';\nimport FileVisual from '../File/FileVisual';\nimport Button from '../Button';\nimport Link from '../Link/Link';\nimport mimeTypes from '../File/mimeTypes.json';\nimport { getKindFromMimeType } from '../File/utils';\nimport type { AttachmentType } from '../File/utils';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as downloadIcon from '../Icon/icons/download.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport {\n StyledHeader,\n StyledCountTracker,\n StyledInfo,\n StyledPreviewRegion,\n StyledNavButton,\n StyledMediaContainer,\n StyledLiveRegion,\n StyledLightbox,\n StyledContainer,\n StyledObject\n} from './Lightbox.styles';\nimport type { LightboxProps, MediaElement } from './Lightbox.types';\nimport { getLightboxTestIds } from './Lightbox.test-ids';\n\nregisterIcon(openIcon, timesIcon, downloadIcon, caretLeftIcon, caretRightIcon);\n\nconst Lightbox: ForwardRefForwardPropsComponent<LightboxProps> = forwardRef(function Lightbox(\n {\n testId,\n items,\n defaultIndex = 0,\n cycle = false,\n onItemLoad,\n onItemError,\n onNavigate,\n onItemDownload,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<LightboxProps>,\n refArg: LightboxProps['ref']\n) {\n const t = useI18n();\n const { start, end } = useDirection();\n const { portalTarget } = useConfiguration();\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const currentItem = items[currentIndex];\n const { disableScroll, enableScroll } = useScrollToggle();\n const lightboxRef = useConsolidatedRef(refArg);\n const headerRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const prevButtonRef = useRef<HTMLButtonElement>(null);\n const nextButtonRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(true);\n const mediaRef = useConsolidatedRef(currentItem.ref);\n const [liveText, setLiveText] = useState('');\n const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';\n const testIds = useTestIds(testId, getLightboxTestIds);\n const previewableAttachmentTypes = ['pdf', 'image', 'link', 'video', 'audio'];\n\n const initiatorRef = useRef<Element | null>(null);\n\n const close = () => {\n setOpen(false);\n\n if (\n initiatorRef.current?.isConnected &&\n (initiatorRef.current instanceof HTMLElement || initiatorRef.current instanceof SVGElement)\n )\n initiatorRef.current.focus();\n };\n\n const navigate = (direction: 1 | -1) => {\n if (direction === 1) {\n if (currentIndex < items.length - 1) {\n setCurrentIndex(cur => cur + 1);\n } else if (cycle) {\n setCurrentIndex(0);\n }\n } else if (currentIndex > 0) {\n setCurrentIndex(cur => cur - 1);\n } else if (cycle) {\n setCurrentIndex(items.length - 1);\n }\n };\n const keyDownHandler = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n close();\n } else if (e.key === `Arrow${cap(end)}`) {\n navigate(1);\n } else if (e.key === `Arrow${cap(start)}`) {\n navigate(-1);\n }\n };\n\n useEvent('keydown', keyDownHandler);\n useFocusTrap(lightboxRef);\n\n useEffect(() => {\n setLiveText(`${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''}`);\n }, [currentItem.name, countTrackerText]);\n\n useEffect(() => {\n onNavigate?.(currentItem.id, currentIndex);\n }, [currentIndex]);\n\n useEffect(() => {\n const activeElement = getActiveElement();\n initiatorRef.current = activeElement;\n if (getFocusables(lightboxRef).length > 0) getFocusables(lightboxRef)[0].focus();\n }, []);\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<MediaElement> | Event) => {\n onItemLoad?.(currentItem.id, e);\n },\n [onItemLoad, currentItem.id]\n );\n\n const handleError = useCallback(\n (e: SyntheticEvent<MediaElement> | Event) => {\n onItemError?.(currentItem.id, e);\n },\n [onItemError, currentItem.id]\n );\n\n // Object elements appear to need native event handlers bound as JSX does not work.\n // TODO: Follow up on reason why.\n useEffect(() => {\n if (!mediaRef.current || currentItem.format !== 'pdf') return;\n const pdfObject = mediaRef.current;\n pdfObject.addEventListener('load', handleLoad);\n pdfObject.addEventListener('error', handleError);\n\n return () => {\n pdfObject.removeEventListener('load', handleLoad);\n pdfObject.removeEventListener('error', handleError);\n };\n }, [currentItem]);\n\n let media;\n let validContent = true;\n let attachmentType: AttachmentType = 'generic';\n if (currentItem.format === undefined) {\n validContent = !currentItem.error;\n } else {\n const extractMimeType = (mimeTypes as Record<string, string>)[currentItem.format.toLowerCase()];\n const getType = currentItem.format === 'url' ? 'link' : 'generic';\n attachmentType = extractMimeType ? getKindFromMimeType(extractMimeType) : getType;\n validContent = previewableAttachmentTypes.includes(attachmentType)\n ? !!currentItem.src\n : !!attachmentType;\n }\n\n if (validContent) {\n const nonPreviewableContent = (\n <>\n <Text>\n {t('non_previewable', [\n currentItem.format ? currentItem.format.toUpperCase() : currentItem.name\n ])}\n </Text>\n {onItemDownload && (\n <Button\n aria-label={t('download')}\n onClick={() => onItemDownload(currentItem.id)}\n data-testid={testIds.nonPreviewableDownload}\n >\n {t('download')}\n </Button>\n )}\n </>\n );\n\n const defaultContent = (\n <Flex\n container={{ direction: 'column', gap: 2, alignItems: 'center' }}\n as={StyledInfo}\n data-testid={testIds.content}\n >\n <FileVisual type={attachmentType} size='l' />\n {attachmentType === 'link' && currentItem.src ? (\n <Link href={currentItem.src} data-testid={testIds.link}>\n {currentItem.name}\n </Link>\n ) : (\n nonPreviewableContent\n )}\n </Flex>\n );\n\n switch (attachmentType) {\n case 'image':\n media = currentItem.src && (\n <Image\n data-testid={testIds.content}\n src={currentItem.src}\n alt={currentItem.description ?? t('description_unavailable')}\n onLoad={handleLoad}\n onError={handleError}\n ref={mediaRef as RefObject<HTMLImageElement>}\n />\n );\n break;\n case 'pdf':\n media = currentItem.src && (\n <>\n {navigator.pdfViewerEnabled ? (\n <StyledObject\n data-testid={testIds.content}\n data={currentItem.src}\n type='application/pdf'\n ref={mediaRef as RefObject<HTMLObjectElement>}\n >\n {currentItem.description ?? t('description_unavailable')}\n </StyledObject>\n ) : (\n defaultContent\n )}\n </>\n );\n break;\n case 'video':\n media = currentItem.src && (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <video\n data-testid={testIds.content}\n src={currentItem.src}\n controls\n onLoadedData={handleLoad}\n onError={handleError}\n ref={mediaRef as RefObject<HTMLVideoElement>}\n />\n );\n break;\n case 'audio':\n media = currentItem.src && (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <audio\n data-testid={testIds.content}\n src={currentItem.src}\n controls\n onLoadedData={handleLoad}\n onError={handleError}\n ref={mediaRef as RefObject<HTMLAudioElement>}\n />\n );\n break;\n default: {\n media = defaultContent;\n }\n }\n } else {\n media = <Progress placement='block' delay />;\n }\n\n const content = (\n <StyledLightbox\n data-testid={testIds.root}\n {...restProps}\n tabIndex={-1}\n ref={lightboxRef}\n open={open}\n role='dialog'\n aria-modal\n container={{ alignItems: 'start', justify: 'start', direction: 'column' }}\n alpha={0.9}\n variant='dark'\n transitionSpeed='slow'\n onBeforeTransitionIn={disableScroll}\n onAfterTransitionOut={() => {\n enableScroll();\n onAfterClose?.();\n }}\n >\n <Flex\n as={StyledHeader}\n ref={headerRef}\n role='none'\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 2\n }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n <StyledCountTracker data-testid={testIds.pagination} aria-hidden>\n {countTrackerText}\n </StyledCountTracker>\n\n <Flex\n as={StyledInfo}\n container={{\n wrap: 'wrap',\n alignItems: 'center',\n justify: 'center',\n colGap: 2,\n rowGap: 0.5\n }}\n >\n <Text data-testid={testIds.name} variant='primary' as='h2'>\n {currentItem.name}\n </Text>\n {currentItem.metadata && (\n <MetaList data-testid={testIds.metadata} items={currentItem.metadata} />\n )}\n </Flex>\n\n <Flex container as={StyledContainer}>\n {attachmentType !== 'link' && onItemDownload && (\n <Button\n data-testid={testIds.download}\n variant='simple'\n label={t('download')}\n icon\n onClick={() => onItemDownload(currentItem.id)}\n >\n <Icon name='download' />\n </Button>\n )}\n {previewableAttachmentTypes.includes(attachmentType) && currentItem.src && (\n <Button\n data-testid={testIds.openInNewTab}\n variant='simple'\n label={t('link_open_in_tab_text')}\n icon\n href={currentItem.src}\n target='_blank'\n >\n <Icon name='open' />\n </Button>\n )}\n <Button\n data-testid={testIds.close}\n variant='simple'\n ref={closeButtonRef}\n label={t('close')}\n icon\n onClick={close}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n </Flex>\n\n <Flex\n container={{ justify: 'between' }}\n as={StyledPreviewRegion}\n item={{ grow: 1, shrink: 0 }}\n >\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.prev}\n ref={prevButtonRef}\n variant='simple'\n aria-label={t('pagination_prev')}\n hidden={!cycle && currentIndex === 0}\n icon\n onClick={() => {\n navigate(-1);\n }}\n >\n <span>\n <Icon name='caret-left' />\n </span>\n </StyledNavButton>\n )}\n\n <Flex item={{ grow: 1 }} as={StyledMediaContainer}>\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n {currentItem.error ? <ErrorState message={t('content_load_error')} /> : media}\n </Flex>\n </Flex>\n\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.next}\n ref={nextButtonRef}\n variant='simple'\n aria-label={t('pagination_next')}\n hidden={!cycle && currentIndex === items.length - 1}\n icon\n onClick={() => {\n navigate(1);\n }}\n >\n <span>\n <Icon name='caret-right' />\n </span>\n </StyledNavButton>\n )}\n </Flex>\n <StyledLiveRegion aria-live='polite' aria-label={liveText} />\n </StyledLightbox>\n );\n\n return portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default withTestIds(Lightbox, getLightboxTestIds);\n"]}
@@ -1,2 +1,2 @@
1
- export declare const getLightboxTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
1
+ export declare const getLightboxTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["content", "name", "metadata", "download", "open-in-new-tab", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
2
2
  //# sourceMappingURL=Lightbox.test-ids.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,uNAWpB,CAAC"}
1
+ {"version":3,"file":"Lightbox.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,0OAYpB,CAAC"}
@@ -4,6 +4,7 @@ export const getLightboxTestIds = createTestIds('lightbox', [
4
4
  'name',
5
5
  'metadata',
6
6
  'download',
7
+ 'open-in-new-tab',
7
8
  'close',
8
9
  'prev',
9
10
  'next',
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.test-ids.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE;IAC1D,SAAS;IACT,MAAM;IACN,UAAU;IACV,UAAU;IACV,OAAO;IACP,MAAM;IACN,MAAM;IACN,YAAY;IACZ,0BAA0B;IAC1B,MAAM;CACE,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getLightboxTestIds = createTestIds('lightbox', [\n 'content',\n 'name',\n 'metadata',\n 'download',\n 'close',\n 'prev',\n 'next',\n 'pagination',\n 'non-previewable-download',\n 'link'\n] as const);\n"]}
1
+ {"version":3,"file":"Lightbox.test-ids.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE;IAC1D,SAAS;IACT,MAAM;IACN,UAAU;IACV,UAAU;IACV,iBAAiB;IACjB,OAAO;IACP,MAAM;IACN,MAAM;IACN,YAAY;IACZ,0BAA0B;IAC1B,MAAM;CACE,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getLightboxTestIds = createTestIds('lightbox', [\n 'content',\n 'name',\n 'metadata',\n 'download',\n 'open-in-new-tab',\n 'close',\n 'prev',\n 'next',\n 'pagination',\n 'non-previewable-download',\n 'link'\n] as const);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAWnE,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAI5D,eAAO,MAAM,UAAU;cAA2B,OAAO;cAAY,OAAO;SAkB3E,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,yBAAyB,gKAqBpC,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAyKtE,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAWnE,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAI5D,eAAO,MAAM,UAAU;cAA2B,OAAO;cAAY,OAAO;SAuB3E,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,yBAAyB,gKAqBpC,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CA2LtE,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useRef, useEffect } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
4
  import { useAfterInitialEffect, useUID, useI18n, usePrevious, useBreakpoint, useTheme, useConsolidatedRef } from '../../hooks';
5
- import { focusHeadingOrContainer } from '../../utils';
5
+ import { focusNonInteractiveElement, isInstance } from '../../utils';
6
6
  import { calculateFontSize } from '../../styles';
7
7
  import Text from '../Text';
8
8
  import HTML from '../HTML';
@@ -28,6 +28,11 @@ export const StyledForm = styled.form(({ actions, heading, theme }) => {
28
28
  padding-block-start: calc(2 * ${theme.base.spacing});
29
29
  `}
30
30
  }
31
+
32
+ &:focus-visible {
33
+ outline: none;
34
+ box-shadow: ${theme.base.shadow.focus};
35
+ }
31
36
  `;
32
37
  });
33
38
  StyledForm.defaultProps = defaultThemeProp;
@@ -50,6 +55,7 @@ export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
50
55
  StyledRequiredFieldLegend.defaultProps = defaultThemeProp;
51
56
  const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps, heading, stepIndicator: stepIndicatorProp, progress, ...restProps }, ref) {
52
57
  const multiStepRef = useConsolidatedRef(ref);
58
+ const headingRef = useRef(null);
53
59
  const progressIndicatorRef = useRef(null);
54
60
  const multiStepFormContentRef = useRef(null);
55
61
  const multiStepActionsRef = useRef(null);
@@ -76,8 +82,28 @@ const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps,
76
82
  ];
77
83
  focusables[0]?.focus();
78
84
  }
85
+ else if (headingRef.current) {
86
+ focusNonInteractiveElement(headingRef.current);
87
+ }
79
88
  else if (multiStepRef.current) {
80
- focusHeadingOrContainer(multiStepRef.current, currentStep.name);
89
+ const containerEl = multiStepRef.current.closest('[data-focusable-form-container]');
90
+ const headingEl = containerEl?.querySelector('[data-focusable-form-heading]');
91
+ if (isInstance(headingEl, HTMLElement)) {
92
+ focusNonInteractiveElement(headingEl);
93
+ }
94
+ else {
95
+ let label;
96
+ if (heading && currentStep.name) {
97
+ label = `${heading} - ${currentStep.name}`;
98
+ }
99
+ else if (currentStep.name) {
100
+ label = currentStep.name;
101
+ }
102
+ else if (heading) {
103
+ label = heading;
104
+ }
105
+ focusNonInteractiveElement(multiStepRef.current, label);
106
+ }
81
107
  }
82
108
  };
83
109
  // Set focus if the current step id updates
@@ -123,7 +149,7 @@ const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps,
123
149
  areaDef += '"description" ';
124
150
  areaDef += '"content"';
125
151
  }
126
- return (_jsxs(StyledForm, { ref: multiStepRef, ...restProps, "aria-labelledby": heading ? headingId : undefined, "aria-describedby": currentStep.description ? descriptionId : undefined, heading: !!heading, actions: !!currentStep.actions, children: [heading && (_jsx(Text, { id: headingId, variant: 'h3', children: heading })), _jsxs(Grid, { container: {
152
+ return (_jsxs(StyledForm, { ref: multiStepRef, ...restProps, "aria-labelledby": heading ? headingId : undefined, "aria-describedby": currentStep.description ? descriptionId : undefined, heading: !!heading, actions: !!currentStep.actions, children: [heading && (_jsx(Text, { ref: headingRef, id: headingId, variant: 'h3', children: heading })), _jsxs(Grid, { container: {
127
153
  cols: stepIndicator === 'vertical'
128
154
  ? `2fr minmax(${contentWidth.xs}, 1fr)`
129
155
  : 'minmax(0, 1fr)',
@@ -1 +1 @@
1
- {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme,\n useConsolidatedRef\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { focusHeadingOrContainer } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nconst MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n function MultiStepForm(\n {\n currentStepId,\n steps,\n heading,\n stepIndicator: stepIndicatorProp,\n progress,\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) {\n const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n const progressIndicatorRef = useRef<HTMLDivElement>(null);\n const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const stepIndicator = (() => {\n if (stepIndicatorProp === 'none' || steps.length < 2) return 'none';\n\n if (!isSmallOrAbove) return 'horizontal';\n\n return stepIndicatorProp ?? 'horizontal';\n })();\n\n const setFocus = () => {\n if (progress) return;\n\n if (stepIndicator !== 'none' && progressIndicatorRef.current) {\n const focusables = [\n ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n ] as HTMLElement[];\n focusables[0]?.focus();\n } else if (multiStepRef.current) {\n focusHeadingOrContainer(multiStepRef.current, currentStep.name);\n }\n };\n\n // Set focus if the current step id updates\n useEffect(() => {\n if (previousId !== currentStepId) {\n setFocus();\n }\n }, [currentStepId, previousId]);\n\n // Set focus if the form content updates while focus is within the actions region of the form\n useAfterInitialEffect(() => {\n if (\n multiStepActionsRef.current &&\n multiStepActionsRef.current.contains(document.activeElement)\n ) {\n setFocus();\n }\n }, [currentStep.content]);\n\n // Set focus if a progress state resolves\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n let areaDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n break;\n case 'vertical':\n if (currentStep.banners) areaDef += '\"banners stepIndicator\" ';\n if (currentStep.description) areaDef += '\"description stepIndicator\" ';\n areaDef += '\"content stepIndicator\"';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n }\n\n return (\n <StyledForm\n ref={multiStepRef}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols:\n stepIndicator === 'vertical'\n ? `2fr minmax(${contentWidth.xs}, 1fr)`\n : 'minmax(0, 1fr)',\n areas: areaDef,\n gap: 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid ref={progressIndicatorRef} item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n {stepIndicator === 'vertical' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <Grid item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </Grid>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}
1
+ {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme,\n useConsolidatedRef\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { focusNonInteractiveElement, isInstance } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nconst MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n function MultiStepForm(\n {\n currentStepId,\n steps,\n heading,\n stepIndicator: stepIndicatorProp,\n progress,\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) {\n const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n const headingRef = useRef<HTMLHeadingElement>(null);\n const progressIndicatorRef = useRef<HTMLDivElement>(null);\n const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const stepIndicator = (() => {\n if (stepIndicatorProp === 'none' || steps.length < 2) return 'none';\n\n if (!isSmallOrAbove) return 'horizontal';\n\n return stepIndicatorProp ?? 'horizontal';\n })();\n\n const setFocus = () => {\n if (progress) return;\n\n if (stepIndicator !== 'none' && progressIndicatorRef.current) {\n const focusables = [\n ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n ] as HTMLElement[];\n focusables[0]?.focus();\n } else if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current);\n } else if (multiStepRef.current) {\n const containerEl = multiStepRef.current.closest('[data-focusable-form-container]');\n const headingEl = containerEl?.querySelector('[data-focusable-form-heading]');\n if (isInstance(headingEl, HTMLElement)) {\n focusNonInteractiveElement(headingEl);\n } else {\n let label: string | undefined;\n if (heading && currentStep.name) {\n label = `${heading} - ${currentStep.name}`;\n } else if (currentStep.name) {\n label = currentStep.name;\n } else if (heading) {\n label = heading;\n }\n\n focusNonInteractiveElement(multiStepRef.current, label);\n }\n }\n };\n\n // Set focus if the current step id updates\n useEffect(() => {\n if (previousId !== currentStepId) {\n setFocus();\n }\n }, [currentStepId, previousId]);\n\n // Set focus if the form content updates while focus is within the actions region of the form\n useAfterInitialEffect(() => {\n if (\n multiStepActionsRef.current &&\n multiStepActionsRef.current.contains(document.activeElement)\n ) {\n setFocus();\n }\n }, [currentStep.content]);\n\n // Set focus if a progress state resolves\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n let areaDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n break;\n case 'vertical':\n if (currentStep.banners) areaDef += '\"banners stepIndicator\" ';\n if (currentStep.description) areaDef += '\"description stepIndicator\" ';\n areaDef += '\"content stepIndicator\"';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n }\n\n return (\n <StyledForm\n ref={multiStepRef}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text ref={headingRef} id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols:\n stepIndicator === 'vertical'\n ? `2fr minmax(${contentWidth.xs}, 1fr)`\n : 'minmax(0, 1fr)',\n areas: areaDef,\n gap: 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid ref={progressIndicatorRef} item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n {stepIndicator === 'vertical' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <Grid item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </Grid>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"useAnimatedText.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimatedText.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,eAAe,GAAI,yDAKtB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;CA8GA,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"useAnimatedText.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimatedText.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,eAAe,GAAI,yDAKtB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;CAiHA,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -30,10 +30,13 @@ const useAnimatedText = ({ text, allContentReceived = false, enabled = true, tok
30
30
  const tokens = getTokens(text);
31
31
  const targetLength = tokens.length;
32
32
  const charactersToAnimate = targetLength - startingCursor;
33
- // If there are no more characters, return
33
+ // If there are no more characters to animate
34
34
  if (charactersToAnimate <= 0) {
35
35
  setCursor(targetLength);
36
- setIsAnimationDone(true);
36
+ // Only set animation done if we have all content AND no more characters to animate
37
+ if (allContentReceivedRef.current) {
38
+ setIsAnimationDone(true);
39
+ }
37
40
  return;
38
41
  }
39
42
  let intervalId;