@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.
- package/lib/components/FieldGroup/FieldGroup.d.ts +5 -0
- package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +10 -6
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.d.ts +17 -2
- package/lib/components/FieldGroup/FieldGroupList.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +200 -50
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.utils.d.ts +33 -0
- package/lib/components/FieldGroup/FieldGroupList.utils.d.ts.map +1 -0
- package/lib/components/FieldGroup/FieldGroupList.utils.js +74 -0
- package/lib/components/FieldGroup/FieldGroupList.utils.js.map +1 -0
- package/lib/components/FieldGroup/FieldGroupListContext.d.ts +8 -0
- package/lib/components/FieldGroup/FieldGroupListContext.d.ts.map +1 -0
- package/lib/components/FieldGroup/FieldGroupListContext.js +9 -0
- package/lib/components/FieldGroup/FieldGroupListContext.js.map +1 -0
- package/lib/components/FieldGroup/index.d.ts +2 -0
- package/lib/components/FieldGroup/index.d.ts.map +1 -1
- package/lib/components/FieldGroup/index.js +2 -0
- package/lib/components/FieldGroup/index.js.map +1 -1
- package/lib/components/Form/Form.d.ts +2 -0
- package/lib/components/Form/Form.d.ts.map +1 -1
- package/lib/components/Form/Form.js +2 -2
- package/lib/components/Form/Form.js.map +1 -1
- package/lib/components/Lightbox/Lightbox.d.ts +1 -1
- package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
- package/lib/components/Lightbox/Lightbox.js +9 -3
- package/lib/components/Lightbox/Lightbox.js.map +1 -1
- package/lib/components/Lightbox/Lightbox.test-ids.d.ts +1 -1
- package/lib/components/Lightbox/Lightbox.test-ids.d.ts.map +1 -1
- package/lib/components/Lightbox/Lightbox.test-ids.js +1 -0
- package/lib/components/Lightbox/Lightbox.test-ids.js.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.d.ts.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.js +29 -3
- package/lib/components/MultiStepForm/MultiStepForm.js.map +1 -1
- package/lib/hooks/useAnimatedText.d.ts.map +1 -1
- package/lib/hooks/useAnimatedText.js +5 -2
- package/lib/hooks/useAnimatedText.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +2 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/hooks/useItemIntersection.d.ts.map +1 -1
- package/lib/hooks/useItemIntersection.js +3 -1
- package/lib/hooks/useItemIntersection.js.map +1 -1
- package/lib/i18n/default.d.ts +2 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +3 -1
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +2 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/utils/focusNonInteractiveElement.d.ts +9 -0
- package/lib/utils/focusNonInteractiveElement.d.ts.map +1 -0
- package/lib/utils/focusNonInteractiveElement.js +27 -0
- package/lib/utils/focusNonInteractiveElement.js.map +1 -0
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.d.ts.map +1 -1
- package/lib/utils/index.js +1 -0
- package/lib/utils/index.js.map +1 -1
- 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;
|
|
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;
|
|
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;
|
|
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',
|
|
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":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,eAAe,EACf,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,YAAY,EACb,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,QAAQ,GAAmD,UAAU,CAAC,SAAS,QAAQ,CAC3F,EACE,MAAM,EACN,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,KAAK,GAAG,KAAK,EACb,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,GAAG,SAAS,EACmB,EACjC,MAA4B;IAE5B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IACxC,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAC;IAC1D,MAAM,WAAW,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,YAAY,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/F,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,OAAO,CAAC,KAAK,CAAC,CAAC;QAEf,IACE,YAAY,CAAC,OAAO,EAAE,WAAW;YACjC,CAAC,YAAY,CAAC,OAAO,YAAY,WAAW,IAAI,YAAY,CAAC,OAAO,YAAY,UAAU,CAAC;YAE3F,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,SAAiB,EAAE,EAAE;QACrC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;YAClC,CAAC;iBAAM,IAAI,KAAK,EAAE,CAAC;gBACjB,eAAe,CAAC,CAAC,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;aAAM,IAAI,YAAY,GAAG,CAAC,EAAE,CAAC;YAC5B,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAClC,CAAC;aAAM,IAAI,KAAK,EAAE,CAAC;YACjB,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;QAC1C,IAAI,CAAC,CAAC,MAAM;YAAE,OAAO;QAErB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACvB,KAAK,EAAE,CAAC;QACV,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC;YACxC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;YAC1C,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;IACH,CAAC,CAAC;IAEF,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IACpC,YAAY,CAAC,WAAW,CAAC,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,GAAG,WAAW,CAAC,IAAI,KAAK,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,EAAE,CAAC,WAAW,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;QACzC,YAAY,CAAC,OAAO,GAAG,aAAa,CAAC;QACrC,IAAI,aAAa,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC;YAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACnF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,CAAuC,EAAE,EAAE;QAC1C,UAAU,EAAE,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC,CAC7B,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,CAAuC,EAAE,EAAE;QAC1C,WAAW,EAAE,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC,CAC9B,CAAC;IAEF,mFAAmF;IACnF,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,WAAW,CAAC,MAAM,KAAK,KAAK;YAAE,OAAO;QAC9D,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC;QACnC,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC/C,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAEjD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YAClD,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACtD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,IAAI,KAAK,CAAC;IACV,IAAI,YAAY,GAAG,IAAI,CAAC;IACxB,IAAI,cAAc,GAAmB,SAAS,CAAC;IAC/C,IAAI,WAAW,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QACrC,YAAY,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC;IACpC,CAAC;SAAM,CAAC;QACN,MAAM,eAAe,GAAI,SAAoC,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;QAChG,MAAM,OAAO,GAAG,WAAW,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAClE,cAAc,GAAG,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAClF,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QAC9E,YAAY,GAAG,0BAA0B,CAAC,QAAQ,CAAC,cAAc,CAAC;YAChE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG;YACnB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IACvB,CAAC;IAED,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,qBAAqB,GAAG,CAC5B,8BACE,KAAC,IAAI,cACF,CAAC,CAAC,iBAAiB,EAAE;wBACpB,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI;qBACzE,CAAC,GACG,EACN,cAAc,IAAI,CACjB,KAAC,MAAM,kBACO,CAAC,CAAC,UAAU,CAAC,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,iBAChC,OAAO,CAAC,sBAAsB,YAE1C,CAAC,CAAC,UAAU,CAAC,GACP,CACV,IACA,CACJ,CAAC;QAEF,MAAM,cAAc,GAAG,CACrB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAChE,EAAE,EAAE,UAAU,iBACD,OAAO,CAAC,OAAO,aAE5B,KAAC,UAAU,IAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAC,GAAG,GAAG,EAC5C,cAAc,KAAK,MAAM,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAC9C,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,CAAC,GAAG,iBAAe,OAAO,CAAC,IAAI,YACnD,WAAW,CAAC,IAAI,GACZ,CACR,CAAC,CAAC,CAAC,CACF,qBAAqB,CACtB,IACI,CACR,CAAC;QAEF,QAAQ,cAAc,EAAE,CAAC;YACvB,KAAK,OAAO;gBACV,KAAK,GAAG,WAAW,CAAC,GAAG,IAAI,CACzB,KAAC,KAAK,mBACS,OAAO,CAAC,OAAO,EAC5B,GAAG,EAAE,WAAW,CAAC,GAAG,EACpB,GAAG,EAAE,WAAW,CAAC,WAAW,IAAI,CAAC,CAAC,yBAAyB,CAAC,EAC5D,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,QAAuC,GAC5C,CACH,CAAC;gBACF,MAAM;YACR,KAAK,KAAK;gBACR,KAAK,GAAG,WAAW,CAAC,GAAG,IAAI,CACzB,4BACG,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAC5B,KAAC,YAAY,mBACE,OAAO,CAAC,OAAO,EAC5B,IAAI,EAAE,WAAW,CAAC,GAAG,EACrB,IAAI,EAAC,iBAAiB,EACtB,GAAG,EAAE,QAAwC,YAE5C,WAAW,CAAC,WAAW,IAAI,CAAC,CAAC,yBAAyB,CAAC,GAC3C,CAChB,CAAC,CAAC,CAAC,CACF,cAAc,CACf,GACA,CACJ,CAAC;gBACF,MAAM;YACR,KAAK,OAAO;gBACV,KAAK,GAAG,WAAW,CAAC,GAAG,IAAI;gBACzB,sDAAsD;gBACtD,+BACe,OAAO,CAAC,OAAO,EAC5B,GAAG,EAAE,WAAW,CAAC,GAAG,EACpB,QAAQ,QACR,YAAY,EAAE,UAAU,EACxB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,QAAuC,GAC5C,CACH,CAAC;gBACF,MAAM;YACR,KAAK,OAAO;gBACV,KAAK,GAAG,WAAW,CAAC,GAAG,IAAI;gBACzB,sDAAsD;gBACtD,+BACe,OAAO,CAAC,OAAO,EAC5B,GAAG,EAAE,WAAW,CAAC,GAAG,EACpB,QAAQ,QACR,YAAY,EAAE,UAAU,EACxB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,QAAuC,GAC5C,CACH,CAAC;gBACF,MAAM;YACR,OAAO,CAAC,CAAC,CAAC;gBACR,KAAK,GAAG,cAAc,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,KAAK,SAAG,CAAC;IAC/C,CAAC;IAED,MAAM,OAAO,GAAG,CACd,MAAC,cAAc,mBACA,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,sBAEb,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EACzE,KAAK,EAAE,GAAG,EACV,OAAO,EAAC,MAAM,EACd,eAAe,EAAC,MAAM,EACtB,oBAAoB,EAAE,aAAa,EACnC,oBAAoB,EAAE,GAAG,EAAE;YACzB,YAAY,EAAE,CAAC;YACf,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,aAED,MAAC,IAAI,IACH,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,MAAM,EACX,SAAS,EAAE;oBACT,OAAO,EAAE,SAAS;oBAClB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,CAAC;iBACP,EACD,WAAW,EAAE,CAAC,CAA6B,EAAE,EAAE;oBAC7C,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;wBAAE,OAAO;oBAC3B,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;wBAAE,KAAK,EAAE,CAAC;gBAC5C,CAAC,aAED,KAAC,kBAAkB,mBAAc,OAAO,CAAC,UAAU,iCAChD,gBAAgB,GACE,EAErB,MAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,SAAS,EAAE;4BACT,IAAI,EAAE,MAAM;4BACZ,UAAU,EAAE,QAAQ;4BACpB,OAAO,EAAE,QAAQ;4BACjB,MAAM,EAAE,CAAC;4BACT,MAAM,EAAE,GAAG;yBACZ,aAED,KAAC,IAAI,mBAAc,OAAO,CAAC,IAAI,EAAE,OAAO,EAAC,SAAS,EAAC,EAAE,EAAC,IAAI,YACvD,WAAW,CAAC,IAAI,GACZ,EACN,WAAW,CAAC,QAAQ,IAAI,CACvB,KAAC,QAAQ,mBAAc,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,QAAQ,GAAI,CACzE,IACI,EAEP,MAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,eAAe,aAChC,cAAc,KAAK,MAAM,IAAI,cAAc,IAAI,CAC9C,KAAC,MAAM,mBACQ,OAAO,CAAC,QAAQ,EAC7B,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,UAAU,CAAC,EACzB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,YAE7C,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,GAAG,GACjB,CACV,EACD,KAAC,MAAM,mBACQ,OAAO,CAAC,KAAK,EAC1B,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAE,cAAc,gBACP,CAAC,CAAC,OAAO,CAAC,EACtB,IAAI,QACJ,OAAO,EAAE,KAAK,YAEd,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,IACF,EAEP,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EACjC,EAAE,EAAE,mBAAmB,EACvB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,aAE3B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,KAAC,eAAe,mBACD,OAAO,CAAC,IAAI,EACzB,GAAG,EAAE,aAAa,EAClB,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,iBAAiB,CAAC,EAChC,MAAM,EAAE,CAAC,KAAK,IAAI,YAAY,KAAK,CAAC,EACpC,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;wBACf,CAAC,YAED,yBACE,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACrB,GACS,CACnB,EAED,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,oBAAoB,YAC/C,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtD,WAAW,EAAE,CAAC,CAA6B,EAAE,EAAE;gCAC7C,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;oCAAE,OAAO;gCAC3B,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;oCAAE,KAAK,EAAE,CAAC;4BAC5C,CAAC,YAEA,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,oBAAoB,CAAC,GAAI,CAAC,CAAC,CAAC,KAAK,GACxE,GACF,EAEN,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,KAAC,eAAe,mBACD,OAAO,CAAC,IAAI,EACzB,GAAG,EAAE,aAAa,EAClB,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,iBAAiB,CAAC,EAChC,MAAM,EAAE,CAAC,KAAK,IAAI,YAAY,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EACnD,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACd,CAAC,YAED,yBACE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACtB,GACS,CACnB,IACI,EACP,KAAC,gBAAgB,iBAAW,QAAQ,gBAAa,QAAQ,GAAI,IAC9C,CAClB,CAAC;IAEF,OAAO,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AACtE,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","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,
|
|
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"}
|
|
@@ -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;
|
|
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 {
|
|
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
|
-
|
|
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":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,WAAW,EACX,aAAa,EACb,QAAQ,EACR,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAGrD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CACnC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;YACF,UAAU;;;UAGZ,OAAO;QACT,GAAG,CAAA;wCAC6B,KAAK,CAAC,IAAI,CAAC,OAAO;SACjD;;UAEC,OAAO;QACT,GAAG,CAAA;0CAC+B,KAAK,CAAC,IAAI,CAAC,OAAO;SACnD;;;;;sBAKa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,MAAM,EAAE,EACpB,EACF,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;iBACK,YAAY;;;;;;;eAOd,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,aAAa,GAAwD,UAAU,CACnF,SAAS,aAAa,CACpB,EACE,aAAa,EACb,KAAK,EACL,OAAO,EACP,aAAa,EAAE,iBAAiB,EAChC,QAAQ,EACR,GAAG,SAAS,EACwB,EACtC,GAA8B;IAE9B,MAAM,YAAY,GAAG,kBAAkB,CAAkB,GAAG,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1D,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAE,CAAC;IACnE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE;QAC1B,IAAI,iBAAiB,KAAK,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,MAAM,CAAC;QAEpE,IAAI,CAAC,cAAc;YAAE,OAAO,YAAY,CAAC;QAEzC,OAAO,iBAAiB,IAAI,YAAY,CAAC;IAC3C,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;YAC7D,MAAM,UAAU,GAAG;gBACjB,GAAG,oBAAoB,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,aAAa,IAAI,CAAC;aAC3D,CAAC;YACnB,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACzB,CAAC;aAAM,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,0BAA0B,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAChC,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC;YACpF,MAAM,SAAS,GAAG,WAAW,EAAE,aAAa,CAAC,+BAA+B,CAAC,CAAC;YAC9E,IAAI,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC;gBACvC,0BAA0B,CAAC,SAAS,CAAC,CAAC;YACxC,CAAC;iBAAM,CAAC;gBACN,IAAI,KAAyB,CAAC;gBAC9B,IAAI,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE,CAAC;oBAChC,KAAK,GAAG,GAAG,OAAO,MAAM,WAAW,CAAC,IAAI,EAAE,CAAC;gBAC7C,CAAC;qBAAM,IAAI,WAAW,CAAC,IAAI,EAAE,CAAC;oBAC5B,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC;gBAC3B,CAAC;qBAAM,IAAI,OAAO,EAAE,CAAC;oBACnB,KAAK,GAAG,OAAO,CAAC;gBAClB,CAAC;gBAED,0BAA0B,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,2CAA2C;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,aAAa,EAAE,CAAC;YACjC,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,6FAA6F;IAC7F,qBAAqB,CAAC,GAAG,EAAE;QACzB,IACE,mBAAmB,CAAC,OAAO;YAC3B,mBAAmB,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAC5D,CAAC;YACD,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1B,yCAAyC;IACzC,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,QAAQ,aAAa,EAAE,CAAC;QACtB,KAAK,YAAY;YACf,OAAO,IAAI,kBAAkB,CAAC;YAC9B,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,YAAY,CAAC;YACjD,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,gBAAgB,CAAC;YACzD,OAAO,IAAI,WAAW,CAAC;YACvB,MAAM;QACR,KAAK,UAAU;YACb,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,0BAA0B,CAAC;YAC/D,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,8BAA8B,CAAC;YACvE,OAAO,IAAI,yBAAyB,CAAC;YACrC,MAAM;QACR;YACE,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,YAAY,CAAC;YACjD,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,gBAAgB,CAAC;YACzD,OAAO,IAAI,WAAW,CAAC;IAC3B,CAAC;IAED,OAAO,CACL,MAAC,UAAU,IACT,GAAG,EAAE,YAAY,KACb,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBAC9B,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACrE,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,OAAO,aAE7B,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC/C,OAAO,GACH,CACR,EAED,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EACF,aAAa,KAAK,UAAU;wBAC1B,CAAC,CAAC,cAAc,YAAY,CAAC,EAAE,QAAQ;wBACvC,CAAC,CAAC,gBAAgB;oBACtB,KAAK,EAAE,OAAO;oBACd,GAAG,EAAE,CAAC;iBACP,EACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE/B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,MAAC,IAAI,IAAC,GAAG,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,aAC7D,aAAa,KAAK,YAAY,IAAI,CACjC,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAC/B,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,GAC5B,CACH,EACA,aAAa,KAAK,UAAU,IAAI,CAC/B,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAC/B,EAAE,EAAE,oBAAoB,EACxB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,GAC5B,CACH,EACD,KAAC,kBAAkB,iBAAW,QAAQ,YACnC,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,aAAa;oCACvD,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oCAC/C,CAAC,CAAC,EAAE,GACa,IAChB,CACR,EAEA,WAAW,CAAC,OAAO,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAAG,WAAW,CAAC,OAAO,GAAQ,EAEpF,WAAW,CAAC,WAAW,IAAI,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,YACjC,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,CAAC,WAAW,GAAI,GAC/D,CACR,EAED,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,uBAAuB,YACjF,WAAW,CAAC,OAAO,GACf,EAEP,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAC5D,IACG,EACN,WAAW,CAAC,OAAO,IAAI,CACtB,KAAC,iBAAiB,IAAC,UAAU,EAAE,mBAAmB,EAAE,SAAS,EAAE,WAAW,CAAC,OAAO,GAAI,CACvF,IACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","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;;;
|
|
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
|
|
33
|
+
// If there are no more characters to animate
|
|
34
34
|
if (charactersToAnimate <= 0) {
|
|
35
35
|
setCursor(targetLength);
|
|
36
|
-
|
|
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;
|