@pega/cosmos-react-core 5.0.0-dev.10.6 → 5.0.0-dev.11.0
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/TextArea/TextArea.d.ts +1 -1
- package/lib/components/TextArea/TextArea.d.ts.map +1 -1
- package/lib/components/TextArea/TextArea.js +16 -8
- package/lib/components/TextArea/TextArea.js.map +1 -1
- package/lib/components/TextArea/TextArea.styles.d.ts +1 -0
- package/lib/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/lib/components/TextArea/TextArea.styles.js +32 -4
- package/lib/components/TextArea/TextArea.styles.js.map +1 -1
- package/lib/styles/GlobalStyle.d.ts.map +1 -1
- package/lib/styles/GlobalStyle.js +11 -1
- package/lib/styles/GlobalStyle.js.map +1 -1
- package/lib/utils/focusHeadingOrContainer.d.ts +1 -1
- package/lib/utils/focusHeadingOrContainer.d.ts.map +1 -1
- package/lib/utils/focusHeadingOrContainer.js +1 -1
- package/lib/utils/focusHeadingOrContainer.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenPr
|
|
|
7
7
|
/** Maximum length of characters that can be input. */
|
|
8
8
|
maxLength?: number;
|
|
9
9
|
/**
|
|
10
|
-
* Allows the user to resize the Text Area.
|
|
10
|
+
* Allows the user to resize the Text Area. This prop is ignored if autoResize is true.
|
|
11
11
|
* @default false
|
|
12
12
|
*/
|
|
13
13
|
resizable?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAqC,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;;;;
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAqC,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;;;;AAoID,wBAAyD"}
|
|
@@ -1,27 +1,34 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useCallback, useState, useEffect } from 'react';
|
|
2
|
+
import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';
|
|
3
3
|
import FormField from '../FormField';
|
|
4
4
|
import { StyledFormControl } from '../FormControl';
|
|
5
5
|
import { hasProp, withTestIds } from '../../utils';
|
|
6
|
-
import {
|
|
6
|
+
import { useI18n, useTestIds, useUID } from '../../hooks';
|
|
7
7
|
import Text from '../Text';
|
|
8
|
-
import StyledTextArea from './TextArea.styles';
|
|
8
|
+
import StyledTextArea, { AutoResizeWrapper } from './TextArea.styles';
|
|
9
9
|
import { getTextAreaTestIds } from './TextArea.test-ids';
|
|
10
10
|
const TextArea = forwardRef(function TextArea(props, ref) {
|
|
11
11
|
const uid = useUID();
|
|
12
12
|
const { testId, additionalInfo, id = uid, value, defaultValue, required = false, disabled = false, readOnly = false, label, labelHidden, info, status, resizable = false, autoResize = true, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, onResolveSuggestion, ...restProps } = props;
|
|
13
13
|
const t = useI18n();
|
|
14
14
|
const testIds = useTestIds(testId, getTextAreaTestIds);
|
|
15
|
-
const
|
|
16
|
-
const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
|
|
15
|
+
const autoResizeRef = useRef(null);
|
|
17
16
|
const [charCount, setCharCount] = useState(0);
|
|
18
17
|
const controlProp = {};
|
|
18
|
+
// Sets the content for the hidden pseudo element that calculates the height of the textarea
|
|
19
|
+
const updateAutoResizeEl = (content) => {
|
|
20
|
+
if (autoResize && autoResizeRef.current) {
|
|
21
|
+
autoResizeRef.current.dataset.textareaContent = content ?? '';
|
|
22
|
+
}
|
|
23
|
+
};
|
|
19
24
|
useEffect(() => {
|
|
20
25
|
if ('value' in props) {
|
|
21
26
|
setCharCount(props.value ? props.value.length : 0);
|
|
27
|
+
updateAutoResizeEl(props.value);
|
|
22
28
|
}
|
|
23
29
|
else if ('defaultValue' in props) {
|
|
24
30
|
setCharCount(props.defaultValue ? props.defaultValue.length : 0);
|
|
31
|
+
updateAutoResizeEl(props.defaultValue);
|
|
25
32
|
}
|
|
26
33
|
}, [props]);
|
|
27
34
|
// Conditionally render component as controlled/uncontrolled
|
|
@@ -35,10 +42,11 @@ const TextArea = forwardRef(function TextArea(props, ref) {
|
|
|
35
42
|
if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {
|
|
36
43
|
onChangeProp?.(e);
|
|
37
44
|
setCharCount(e.target.value.length);
|
|
38
|
-
|
|
45
|
+
updateAutoResizeEl(e.target.value);
|
|
39
46
|
}
|
|
40
|
-
}, [onChangeProp,
|
|
41
|
-
const
|
|
47
|
+
}, [onChangeProp, hardStop, maxLength]);
|
|
48
|
+
const TextAreaControl = (_jsx(StyledFormControl, { "data-testid": testIds.control, ref: ref, id: id, required: required, disabled: disabled, status: status, readOnly: readOnly, resizable: autoResize ? false : resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!onResolveSuggestion, ...controlProp, ...restProps, onChange: onChange, as: StyledTextArea }));
|
|
49
|
+
const Comp = autoResize ? (_jsx(AutoResizeWrapper, { ref: autoResizeRef, children: TextAreaControl })) : (_jsx("div", { children: TextAreaControl }));
|
|
42
50
|
return label || displayCharCount ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, readOnly: readOnly, info: info, status: status, charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { readOnly: readOnly, variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount })) : undefined, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
|
|
43
51
|
});
|
|
44
52
|
export default withTestIds(TextArea, getTextAreaTestIds);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';\nimport type { FC, Ref, PropsWithoutRef, ChangeEvent, ChangeEventHandler } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport { useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea, { AutoResizeWrapper } from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. */\n minLength?: number;\n /** Maximum length of characters that can be input. */\n maxLength?: number;\n /**\n * Allows the user to resize the Text Area. This prop is ignored if autoResize is true.\n * @default false\n */\n resizable?: boolean;\n /**\n * Enables the Text Area to resize itself automatically.\n * @default true\n */\n autoResize?: boolean;\n /**\n * Display a live character count in relation to the maxLength.\n * @default false\n */\n displayCharCount?: boolean;\n /**\n * Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n const autoResizeRef = useRef<HTMLDivElement>(null);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n // Sets the content for the hidden pseudo element that calculates the height of the textarea\n const updateAutoResizeEl = (content?: string) => {\n if (autoResize && autoResizeRef.current) {\n autoResizeRef.current.dataset.textareaContent = content ?? '';\n }\n };\n\n useEffect(() => {\n if ('value' in props) {\n setCharCount(props.value ? props.value.length : 0);\n updateAutoResizeEl(props.value);\n } else if ('defaultValue' in props) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n updateAutoResizeEl(props.defaultValue);\n }\n }, [props]);\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n updateAutoResizeEl(e.target.value);\n }\n },\n [onChangeProp, hardStop, maxLength]\n );\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={ref}\n id={id}\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n resizable={autoResize ? false : resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n as={StyledTextArea}\n />\n );\n\n const Comp = autoResize ? (\n <AutoResizeWrapper ref={autoResizeRef}>{TextAreaControl}</AutoResizeWrapper>\n ) : (\n <div>{TextAreaControl}</div>\n );\n\n return label || displayCharCount ? (\n <FormField\n testId={testIds}\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n readOnly={readOnly}\n info={info}\n status={status}\n charLimitDisplay={\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\n readOnly={readOnly}\n variant='secondary'\n aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n >\n {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {
|
|
2
2
|
resizable: boolean;
|
|
3
3
|
}, never>;
|
|
4
|
+
export declare const AutoResizeWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
5
|
export default StyledTextArea;
|
|
5
6
|
//# sourceMappingURL=TextArea.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;
|
|
1
|
+
{"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;SAczD,CAAC;AAMH,eAAO,MAAM,iBAAiB,yGAqB5B,CAAC;AAIH,eAAe,cAAc,CAAC"}
|
|
@@ -6,12 +6,40 @@ const StyledTextArea = styled.textarea(({ resizable }) => {
|
|
|
6
6
|
min-height: ${props => props.theme.components['text-area']['min-height']};
|
|
7
7
|
padding: ${props => props.theme.components['text-area'].padding};
|
|
8
8
|
-webkit-appearance: none;
|
|
9
|
-
${
|
|
10
|
-
css `
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
${resizable
|
|
10
|
+
? css `
|
|
11
|
+
resize: vertical;
|
|
12
|
+
`
|
|
13
|
+
: css `
|
|
14
|
+
resize: none;
|
|
15
|
+
`}
|
|
13
16
|
`;
|
|
14
17
|
});
|
|
15
18
|
StyledTextArea.defaultProps = defaultThemeProp;
|
|
19
|
+
// Creates a hidden pseudo element identical in size and content to the textarea element
|
|
20
|
+
// The hidden element mimics the textarea and is used to automatically calculate the necessary height
|
|
21
|
+
export const AutoResizeWrapper = styled.div(({ theme }) => {
|
|
22
|
+
return css `
|
|
23
|
+
display: grid;
|
|
24
|
+
grid-template-columns: minmax(0, 1fr);
|
|
25
|
+
|
|
26
|
+
${StyledTextArea} {
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
grid-area: 1 / 1 / -1 / -1;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&::after {
|
|
32
|
+
content: attr(data-textarea-content);
|
|
33
|
+
white-space: pre-wrap;
|
|
34
|
+
overflow-wrap: break-word;
|
|
35
|
+
visibility: hidden;
|
|
36
|
+
border-width: ${theme.components['form-control']['border-width']};
|
|
37
|
+
padding: ${theme.components['text-area'].padding};
|
|
38
|
+
font: inherit;
|
|
39
|
+
grid-area: 1 / 1 / -1 / -1;
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
});
|
|
43
|
+
AutoResizeWrapper.defaultProps = defaultThemeProp;
|
|
16
44
|
export default StyledTextArea;
|
|
17
45
|
//# sourceMappingURL=TextArea.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;kBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;eAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;MAE7D,CAAC,
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;kBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;eAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;MAE7D,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,wFAAwF;AACxF,qGAAqG;AACrG,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;;;MAIN,cAAc;;;;;;;;;;sBAUE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;iBACrD,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;;;GAInD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean }>(({ resizable }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n -webkit-appearance: none;\n ${resizable\n ? css`\n resize: vertical;\n `\n : css`\n resize: none;\n `}\n `;\n});\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\n// Creates a hidden pseudo element identical in size and content to the textarea element\n// The hidden element mimics the textarea and is used to automatically calculate the necessary height\nexport const AutoResizeWrapper = styled.div(({ theme }) => {\n return css`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n\n ${StyledTextArea} {\n overflow: hidden;\n grid-area: 1 / 1 / -1 / -1;\n }\n\n &::after {\n content: attr(data-textarea-content);\n white-space: pre-wrap;\n overflow-wrap: break-word;\n visibility: hidden;\n border-width: ${theme.components['form-control']['border-width']};\n padding: ${theme.components['text-area'].padding};\n font: inherit;\n grid-area: 1 / 1 / -1 / -1;\n }\n `;\n});\n\nAutoResizeWrapper.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,eAAO,MAAM,mBAAmB,wDAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wBAAyB,YAAY,WAUvE,CAAC;AAEF,eAAO,MAAM,sBAAsB,uMAShC,YAAY,WAgBd,CAAC;;AAEF,
|
|
1
|
+
{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,eAAO,MAAM,mBAAmB,wDAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wBAAyB,YAAY,WAUvE,CAAC;AAEF,eAAO,MAAM,sBAAsB,uMAShC,YAAY,WAgBd,CAAC;;AAEF,wBAyGG"}
|
|
@@ -38,7 +38,7 @@ export const createGlobalBodyStyles = ({ base: { 'font-size': baseFontSize, 'fon
|
|
|
38
38
|
`.join('');
|
|
39
39
|
};
|
|
40
40
|
export default createGlobalStyle(({ theme }) => {
|
|
41
|
-
const { base: { 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, palette: { 'foreground-color': foreground, 'scrollbar-track': scrollbarTrack, 'scrollbar-thumb': scrollbarThumb, 'scrollbar-thumb-hover': scrollbarThumbHover }, transparency: { 'transparent-3': transparent } }, components: { 'form-control': { 'background-color': backgroundColor } } } = theme;
|
|
41
|
+
const { base: { 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, palette: { 'foreground-color': foreground, 'scrollbar-track': scrollbarTrack, 'scrollbar-thumb': scrollbarThumb, 'scrollbar-thumb-hover': scrollbarThumbHover }, shadow: { focus }, transparency: { 'transparent-3': transparent } }, components: { 'form-control': { 'background-color': backgroundColor } } } = theme;
|
|
42
42
|
return css `
|
|
43
43
|
${globalSpacingStyles}
|
|
44
44
|
|
|
@@ -46,6 +46,16 @@ export default createGlobalStyle(({ theme }) => {
|
|
|
46
46
|
overscroll-behavior: none;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
h1:focus-visible,
|
|
50
|
+
h2:focus-visible,
|
|
51
|
+
h3:focus-visible,
|
|
52
|
+
h4:focus-visible,
|
|
53
|
+
h5:focus-visible,
|
|
54
|
+
h6:focus-visible {
|
|
55
|
+
outline: transparent;
|
|
56
|
+
box-shadow: ${focus};
|
|
57
|
+
}
|
|
58
|
+
|
|
49
59
|
::placeholder {
|
|
50
60
|
color: ${mix(transparent, foreground, backgroundColor)};
|
|
51
61
|
opacity: unset;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAgB,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK;;GAE1B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EAAE,EACJ,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,aAAa,EAAE,UAAU,EAC1B,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACP,EAAE,EAAE;IACjB,yBAAyB;IACzB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;;;;;;mBAMO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;qBAC7C,UAAU;eAChB,eAAe;qBACT,UAAU;;GAE5B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EACJ,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,EACP,kBAAkB,EAAE,UAAU,EAC9B,iBAAiB,EAAE,cAAc,EACjC,iBAAiB,EAAE,cAAc,EACjC,uBAAuB,EAAE,mBAAmB,EAC7C,EACD,YAAY,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAC/C,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACxD,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;MACN,mBAAmB
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAgB,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK;;GAE1B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EAAE,EACJ,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,aAAa,EAAE,UAAU,EAC1B,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACP,EAAE,EAAE;IACjB,yBAAyB;IACzB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;;;;;;mBAMO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;qBAC7C,UAAU;eAChB,eAAe;qBACT,UAAU;;GAE5B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EACJ,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,EACP,kBAAkB,EAAE,UAAU,EAC9B,iBAAiB,EAAE,cAAc,EACjC,iBAAiB,EAAE,cAAc,EACjC,uBAAuB,EAAE,mBAAmB,EAC7C,EACD,MAAM,EAAE,EAAE,KAAK,EAAE,EACjB,YAAY,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAC/C,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACxD,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;MACN,mBAAmB;;;;;;;;;;;;;oBAaL,KAAK;;;;eAIV,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,eAAe,CAAC;;;;MAItD,eAAe;QACjB,GAAG,CAAA;;2BAEoB,cAAc,IAAI,cAAc;;;;;;;;;;;;8BAY7B,cAAc;;;;8BAId,cAAc;;;;;;;wCAOJ,YAAY;0CACV,cAAc;;;;0CAId,mBAAmB;;;;;;;;;;;;;;;;;KAiBxD;;MAEC,sBAAsB,CAAC,KAAK,CAAC;;QAE3B,sBAAsB,CAAC,KAAK,CAAC;;;;;;;;;;;;GAYlC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { mix } from 'polished';\nimport { createGlobalStyle, css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { calculateFontSize } from './utils';\nimport type { FontSize } from './utils';\n\nexport const globalSpacingStyles = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n`;\n\nexport const createGlobalRootStyles = ({ base: { scale } }: DefaultTheme) => {\n return css`\n :root,\n :host {\n height: 100%;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n font-size: calc(${scale} * 1rem);\n }\n `.join('');\n};\n\nexport const createGlobalBodyStyles = ({\n base: {\n 'font-size': baseFontSize,\n 'font-scale': baseFontScale,\n 'font-family': fontFamily,\n palette: { 'foreground-color': foregroundColor },\n 'line-height': lineHeight\n },\n components: { text }\n}: DefaultTheme) => {\n // Can't call a hook here\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n return css`\n body,\n :host {\n min-height: 100%;\n margin: 0;\n padding: 0;\n font-size: ${fontSize[text.primary['font-size'] as FontSize]};\n font-family: ${fontFamily};\n color: ${foregroundColor};\n line-height: ${lineHeight};\n }\n `.join('');\n};\n\nexport default createGlobalStyle(({ theme }) => {\n const {\n base: {\n 'custom-scrollbar': customScrollbar,\n 'border-radius': borderRadius,\n palette: {\n 'foreground-color': foreground,\n 'scrollbar-track': scrollbarTrack,\n 'scrollbar-thumb': scrollbarThumb,\n 'scrollbar-thumb-hover': scrollbarThumbHover\n },\n shadow: { focus },\n transparency: { 'transparent-3': transparent }\n },\n components: {\n 'form-control': { 'background-color': backgroundColor }\n }\n } = theme;\n return css`\n ${globalSpacingStyles}\n\n body {\n overscroll-behavior: none;\n }\n\n h1:focus-visible,\n h2:focus-visible,\n h3:focus-visible,\n h4:focus-visible,\n h5:focus-visible,\n h6:focus-visible {\n outline: transparent;\n box-shadow: ${focus};\n }\n\n ::placeholder {\n color: ${mix(transparent, foreground, backgroundColor)};\n opacity: unset;\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-color: ${scrollbarThumb} ${scrollbarTrack};\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: ${scrollbarTrack};\n }\n\n *::-webkit-scrollbar-corner {\n background-color: ${scrollbarTrack};\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${borderRadius});\n box-shadow: inset 0 0 2px 4px ${scrollbarThumb};\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px ${scrollbarThumbHover};\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n ${createGlobalRootStyles(theme)}\n\n ${createGlobalBodyStyles(theme)}\n\n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n `;\n});\n"]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* @param label Fallback label to apply to the container if focused.
|
|
5
5
|
* @returns boolean whether the focus was successful or not (eg. element is not visible).
|
|
6
6
|
*/
|
|
7
|
-
declare const focusHeadingOrContainer: (container: ParentNode, label
|
|
7
|
+
declare const focusHeadingOrContainer: (container: ParentNode, label?: string) => boolean;
|
|
8
8
|
export default focusHeadingOrContainer;
|
|
9
9
|
//# sourceMappingURL=focusHeadingOrContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,uBAAuB,cAAe,UAAU,
|
|
1
|
+
{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,uBAAuB,cAAe,UAAU,UAAU,MAAM,KAAG,OAmCxE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
|
|
@@ -9,7 +9,7 @@ const focusHeadingOrContainer = (container, label) => {
|
|
|
9
9
|
const target = heading ?? container;
|
|
10
10
|
if (!(target instanceof HTMLElement || target instanceof SVGElement))
|
|
11
11
|
return false;
|
|
12
|
-
if (target === container && !target.hasAttribute('aria-label')) {
|
|
12
|
+
if (target === container && !target.hasAttribute('aria-label') && label) {
|
|
13
13
|
target.setAttribute('aria-label', label);
|
|
14
14
|
target.addEventListener('focusout', () => {
|
|
15
15
|
target.removeAttribute('aria-label');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,KAAc,EAAW,EAAE;IACjF,MAAM,OAAO,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC,MAAM,CACpE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,EAC/C,IAAI,CACL,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,CAAC;IAEpC,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,MAAM,YAAY,UAAU,CAAC;QAAE,OAAO,KAAK,CAAC;IAEnF,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,KAAK,EAAE;QACvE,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IAED,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;QACnC,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB;SAAM;QACL,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IACD,OAAO,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["/**\n * Focuses the highest level heading element in a container, or the container itself if there are no headings.\n * @param container Node to query for a heading.\n * @param label Fallback label to apply to the container if focused.\n * @returns boolean whether the focus was successful or not (eg. element is not visible).\n */\nconst focusHeadingOrContainer = (container: ParentNode, label?: string): boolean => {\n const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n (el, tag) => el ?? container.querySelector(tag),\n null\n );\n\n const target = heading ?? container;\n\n if (!(target instanceof HTMLElement || target instanceof SVGElement)) return false;\n\n if (target === container && !target.hasAttribute('aria-label') && label) {\n target.setAttribute('aria-label', label);\n target.addEventListener(\n 'focusout',\n () => {\n target.removeAttribute('aria-label');\n },\n { once: true }\n );\n }\n\n if (target.hasAttribute('tabindex')) {\n target.focus();\n } else {\n target.setAttribute('tabindex', '-1');\n target.focus();\n target.addEventListener(\n 'focusout',\n () => {\n target.removeAttribute('tabindex');\n },\n { once: true }\n );\n }\n return document.activeElement === target;\n};\n\nexport default focusHeadingOrContainer;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.11.0",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|