@pega/cosmos-react-core 3.2.2 → 3.3.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/Configuration/Configuration.d.ts +10 -6
- package/lib/components/Configuration/Configuration.d.ts.map +1 -1
- package/lib/components/Configuration/Configuration.js +42 -22
- package/lib/components/Configuration/Configuration.js.map +1 -1
- package/lib/components/Drawer/Drawer.js +1 -1
- package/lib/components/Drawer/Drawer.js.map +1 -1
- package/lib/components/File/FileInput.d.ts.map +1 -1
- package/lib/components/File/FileInput.js +6 -4
- package/lib/components/File/FileInput.js.map +1 -1
- package/lib/types/types.d.ts +3 -0
- package/lib/types/types.d.ts.map +1 -1
- package/lib/types/types.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { FunctionComponent, ComponentType, ReactNode, Context } from 'react';
|
|
2
|
+
import { createPortal } from 'react-dom';
|
|
3
|
+
import type { StyleSheetManagerProps } from 'styled-components';
|
|
4
|
+
import '../../init';
|
|
2
5
|
import { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
|
|
3
6
|
import { Translation, TranslationPack } from '../../i18n';
|
|
4
7
|
import { FileInputProps } from '../File';
|
|
5
|
-
import '../../init';
|
|
6
8
|
export interface ConfigurationProps {
|
|
7
9
|
/**
|
|
8
10
|
* Any components or nodes that should be impacted by the settings applied by this Configuration component.
|
|
@@ -30,12 +32,14 @@ export interface ConfigurationProps {
|
|
|
30
32
|
disableDefaultFontLoading?: boolean;
|
|
31
33
|
/**
|
|
32
34
|
* Target element for loading styles related to `styled-components`.
|
|
35
|
+
* @deprecated
|
|
33
36
|
*/
|
|
34
|
-
styleSheetTarget?:
|
|
37
|
+
styleSheetTarget?: StyleSheetManagerProps['target'];
|
|
35
38
|
/**
|
|
36
39
|
* Target element for rendering a `ReactDOM` portal.
|
|
40
|
+
* @deprecated
|
|
37
41
|
*/
|
|
38
|
-
portalTarget?:
|
|
42
|
+
portalTarget?: Parameters<typeof createPortal>[1];
|
|
39
43
|
/**
|
|
40
44
|
* Override map to replace Cosmos components.
|
|
41
45
|
*/
|
|
@@ -54,11 +58,11 @@ export interface ConfigurationProps {
|
|
|
54
58
|
}
|
|
55
59
|
export interface ConfigurationContextValue {
|
|
56
60
|
locale: string;
|
|
57
|
-
direction: ConfigurationProps['direction']
|
|
61
|
+
direction: NonNullable<ConfigurationProps['direction']>;
|
|
58
62
|
translations: TranslationPack;
|
|
59
63
|
themeMachine: ThemeMachineLike<DefaultThemeDefinition>;
|
|
60
|
-
styleSheetTarget
|
|
61
|
-
portalTarget
|
|
64
|
+
styleSheetTarget: ConfigurationProps['styleSheetTarget'];
|
|
65
|
+
portalTarget: ConfigurationProps['portalTarget'];
|
|
62
66
|
overrideMap: NonNullable<ConfigurationProps['overrideMap']>;
|
|
63
67
|
renderNativeControls: boolean;
|
|
64
68
|
initialized: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,aAAa,EACb,SAAS,
|
|
1
|
+
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,aAAa,EACb,SAAS,EAGT,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,YAAY,CAAC;AAEpB,OAAO,EAEL,gBAAgB,EAEhB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,WAAW,EACX,eAAe,EAGhB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAKzC,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IACpD;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;KAC3C,CAAC;IACF;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;IACxD,YAAY,EAAE,eAAe,CAAC;IAC9B,YAAY,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IACzD,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,WAAW,EAAE,WAAW,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5D,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,oCAU/B,CAAC;AAIH,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AA4BD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;QAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;KAC3D;CACF;AAcD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAqGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useContext, useMemo,
|
|
2
|
+
import { createContext, useContext, useMemo, useEffect } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
|
-
import { ThemeProvider, StyleSheetManager } from 'styled-components';
|
|
4
|
+
import styled, { ThemeProvider, StyleSheetManager } from 'styled-components';
|
|
5
|
+
import '../../init';
|
|
5
6
|
import { GlobalStyle } from '../../styles';
|
|
6
7
|
import { ThemeMachine, BaseThemeMachine } from '../../theme';
|
|
7
8
|
import { createTranslationPack, DefaultTranslation, direction as directionOfLocale } from '../../i18n';
|
|
8
9
|
import { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';
|
|
9
10
|
import pkg from '../../../package.json';
|
|
10
|
-
import '../../
|
|
11
|
+
import useElement from '../../hooks/useElement';
|
|
11
12
|
const defaultLocale = navigatorIsAvailable ? navigator.language : 'en';
|
|
12
13
|
export const ConfigurationContext = createContext({
|
|
13
14
|
locale: defaultLocale,
|
|
@@ -47,6 +48,9 @@ if (windowIsAvailable) {
|
|
|
47
48
|
}
|
|
48
49
|
window.cosmos.instances.push(instance);
|
|
49
50
|
}
|
|
51
|
+
const StyledConfigurationWrapper = styled.div `
|
|
52
|
+
display: contents;
|
|
53
|
+
`;
|
|
50
54
|
const Configuration = ({ children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls, id }) => {
|
|
51
55
|
const context = windowIsAvailable
|
|
52
56
|
? window.cosmos.configurationContext ?? ConfigurationContext
|
|
@@ -56,10 +60,27 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
56
60
|
? new ThemeMachine({ theme, parent: ctx.themeMachine })
|
|
57
61
|
: ctx.themeMachine;
|
|
58
62
|
const translations = useMemo(() => createTranslationPack({ ...ctx.translations, ...customTranslations }), [ctx.translations, customTranslations]);
|
|
59
|
-
const [
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
const [wrapperEl, setWrapperEl] = useElement();
|
|
64
|
+
// Determine valid style sheet and portal target with ShadowDOM handling.
|
|
65
|
+
const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {
|
|
66
|
+
// When rendering on the server, or before the wrapper is in the DOM, just bail.
|
|
67
|
+
if (!documentIsAvailable || !wrapperEl)
|
|
68
|
+
return [undefined, undefined];
|
|
69
|
+
const rootNode = wrapperEl.getRootNode();
|
|
70
|
+
// When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.
|
|
71
|
+
const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;
|
|
72
|
+
const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;
|
|
73
|
+
// Currently passed prop or previous context value
|
|
74
|
+
const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;
|
|
75
|
+
const requestedPortalTarget = portalTarget ?? ctx.portalTarget;
|
|
76
|
+
// If the "requested" target is within the root node, it is valid, so use that, otherwise fallback to the default.
|
|
77
|
+
return [
|
|
78
|
+
rootNode.contains(requestedStyleSheetTarget ?? null)
|
|
79
|
+
? requestedStyleSheetTarget
|
|
80
|
+
: defaultStyleSheetTarget,
|
|
81
|
+
rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget
|
|
82
|
+
];
|
|
83
|
+
}, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);
|
|
63
84
|
useEffect(() => {
|
|
64
85
|
const sym = Symbol(id);
|
|
65
86
|
mountConfig(sym);
|
|
@@ -67,21 +88,20 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
67
88
|
unmountConfig(sym);
|
|
68
89
|
};
|
|
69
90
|
}, [id]);
|
|
70
|
-
const wrappedChildren = ctx.initialized ? (children) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target:
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children: wrappedChildren }) }));
|
|
91
|
+
const wrappedChildren = ctx.initialized ? (children) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target: resolvedStyleSheetTarget, children: _jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
|
|
92
|
+
resolvedStyleSheetTarget &&
|
|
93
|
+
createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap', "data-cosmos-global-style": true }), resolvedStyleSheetTarget), _jsx(GlobalStyle, {}), children] }) }));
|
|
94
|
+
return (_jsx(StyledConfigurationWrapper, { ref: setWrapperEl, children: _jsx(context.Provider, { value: {
|
|
95
|
+
locale: locale ?? ctx.locale,
|
|
96
|
+
direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),
|
|
97
|
+
translations,
|
|
98
|
+
themeMachine,
|
|
99
|
+
styleSheetTarget: resolvedStyleSheetTarget,
|
|
100
|
+
portalTarget: resolvedPortalTarget,
|
|
101
|
+
overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,
|
|
102
|
+
renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
|
|
103
|
+
initialized: true
|
|
104
|
+
}, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children: wrappedChildren }) }) }));
|
|
85
105
|
};
|
|
86
106
|
export default Configuration;
|
|
87
107
|
//# sourceMappingURL=Configuration.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EAIV,OAAO,EACP,QAAQ,EACR,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EACL,YAAY,EAEZ,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,qBAAqB,EAGrB,kBAAkB,EAClB,SAAS,IAAI,iBAAiB,EAC/B,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAC3F,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,YAAY,CAAC;AAgEpB,MAAM,aAAa,GAAG,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AAEvE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,iBAAiB,CAAC,aAAa,CAAC;IAC3C,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,gBAAgB;IAC9B,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;IACjE,YAAY,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;IAC7D,WAAW,EAAE,EAAE;IACf,oBAAoB,EAAE,KAAK;IAC3B,WAAW,EAAE,KAAK;CACnB,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAI,GAAG,EAAU,CAAC;AASzC,MAAM,QAAQ,GAAmB;IAC/B,OAAO,EAAE,GAAG,CAAC,OAAO;IACpB,cAAc,EAAE,EAAE;IAClB,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IAClC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,QAAQ,CAAC,cAAc,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;IAEnF,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW,IAAI,SAAS,CAAC;IAEjD,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAEtC,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,UAAU,CAAC,EAAE;QACzC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACtC;IACD,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IACpC,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,cAAc,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;AACrF,CAAC,CAAC;AASF,IAAI,iBAAiB,EAAE;IACrB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;QAC5B,MAAM,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;KAC9B;IAED,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;CACxC;AAED,MAAM,aAAa,GAA0C,CAAC,EAC5D,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EAAE,kBAAkB,EAChC,KAAK,EACL,yBAAyB,EACzB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,EAAE,EACiB,EAAE,EAAE;IACvB,MAAM,OAAO,GAAG,iBAAiB;QAC/B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,oBAAoB,IAAI,oBAAoB;QAC5D,CAAC,CAAC,oBAAoB,CAAC;IACzB,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,IAAI,YAAY,CAAyB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC;QAC/E,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC;IACrB,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,qBAAqB,CAAC,EAAE,GAAG,GAAG,CAAC,YAAY,EAAE,GAAG,kBAAkB,EAAE,CAAC,EAC3E,CAAC,GAAG,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACvC,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;QACvB,WAAW,CAAC,GAAG,CAAC,CAAC;QAEjB,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,GAAG,CAAC,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAET,MAAM,eAAe,GAAG,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CACxC,QAAQ,CACT,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,qBAAqB,QAAC,MAAM,EAAE,gBAAgB,IAAI,GAAG,CAAC,gBAAgB,YACvF,8BACG,CAAC,yBAAyB;oBACzB,OAAO;oBACP,mBAAmB;oBACnB,YAAY,CACV,eACE,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,iGAAiG,qCAEtG,EACF,gBAAgB,IAAI,GAAG,CAAC,gBAAgB,IAAI,QAAQ,CAAC,IAAI,CAC1D,EACH,KAAC,WAAW,KAAG,EACd,QAAQ,IACR,GACe,CACrB,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IACf,KAAK,EAAE;YACL,MAAM,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM;YAC5B,SAAS,EAAE,SAAS,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC;YAC1F,YAAY;YACZ,YAAY;YACZ,gBAAgB,EAAE,gBAAgB,IAAI,GAAG,CAAC,gBAAgB;YAC1D,YAAY,EAAE,YAAY,IAAI,GAAG,CAAC,YAAY;YAC9C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW;YACnF,oBAAoB,EAAE,oBAAoB,IAAI,GAAG,CAAC,oBAAoB;YACtE,WAAW,EAAE,IAAI;SAClB,YAED,KAAC,aAAa,IAAC,KAAK,EAAE,YAAY,CAAC,KAAK,YAAG,eAAe,GAAiB,GAC1D,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ComponentType,\n ReactNode,\n useMemo,\n useState,\n useEffect,\n Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n ThemeMachineLike,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport '../../init';\n\nexport interface ConfigurationProps {\n /**\n * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n */\n children: ReactNode;\n /**\n * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n */\n locale?: string;\n /**\n * Override rendering direction of the document. Direction will be based on the locale if now provided.\n */\n direction?: 'ltr' | 'rtl';\n /**\n * Object with (partial) translations.\n */\n translations?: Translation;\n /**\n * Theme object used to override any or all Cosmos theme properties.\n */\n theme?: DefaultSettableTheme;\n /**\n * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n */\n disableDefaultFontLoading?: boolean;\n /**\n * Target element for loading styles related to `styled-components`.\n */\n styleSheetTarget?: HTMLElement;\n /**\n * Target element for rendering a `ReactDOM` portal.\n */\n portalTarget?: Element;\n /**\n * Override map to replace Cosmos components.\n */\n overrideMap?: {\n FileInput?: ComponentType<FileInputProps>;\n };\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /**\n * String to identify this configuration instance.\n */\n id?: string;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: ConfigurationProps['direction'];\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget?: HTMLElement;\n portalTarget?: Element;\n overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n renderNativeControls: boolean;\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n overrideMap: {},\n renderNativeControls: false,\n initialized: false\n});\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance {\n version: string;\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: CosmosInstance[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n overrideMap,\n renderNativeControls,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren = ctx.initialized ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n mounted &&\n documentIsAvailable &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap'\n data-cosmos-global-style\n />,\n styleSheetTarget ?? ctx.styleSheetTarget ?? document.head\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n\n return (\n <context.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n portalTarget: portalTarget ?? ctx.portalTarget,\n overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </context.Provider>\n );\n};\n\nexport default Configuration;\n"]}
|
|
1
|
+
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ComponentType,\n ReactNode,\n useMemo,\n useEffect,\n Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n ThemeMachineLike,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\n\nexport interface ConfigurationProps {\n /**\n * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n */\n children: ReactNode;\n /**\n * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n */\n locale?: string;\n /**\n * Override rendering direction of the document. Direction will be based on the locale if now provided.\n */\n direction?: 'ltr' | 'rtl';\n /**\n * Object with (partial) translations.\n */\n translations?: Translation;\n /**\n * Theme object used to override any or all Cosmos theme properties.\n */\n theme?: DefaultSettableTheme;\n /**\n * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n */\n disableDefaultFontLoading?: boolean;\n /**\n * Target element for loading styles related to `styled-components`.\n * @deprecated\n */\n styleSheetTarget?: StyleSheetManagerProps['target'];\n /**\n * Target element for rendering a `ReactDOM` portal.\n * @deprecated\n */\n portalTarget?: Parameters<typeof createPortal>[1];\n /**\n * Override map to replace Cosmos components.\n */\n overrideMap?: {\n FileInput?: ComponentType<FileInputProps>;\n };\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /**\n * String to identify this configuration instance.\n */\n id?: string;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: NonNullable<ConfigurationProps['direction']>;\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n portalTarget: ConfigurationProps['portalTarget'];\n overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n renderNativeControls: boolean;\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n overrideMap: {},\n renderNativeControls: false,\n initialized: false\n});\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance {\n version: string;\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: CosmosInstance[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n}\n\nconst StyledConfigurationWrapper = styled.div`\n display: contents;\n`;\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n overrideMap,\n renderNativeControls,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n\n // Determine valid style sheet and portal target with ShadowDOM handling.\n const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n // When rendering on the server, or before the wrapper is in the DOM, just bail.\n if (!documentIsAvailable || !wrapperEl) return [undefined, undefined];\n\n const rootNode = wrapperEl.getRootNode();\n\n // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n // Currently passed prop or previous context value\n const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n return [\n rootNode.contains(requestedStyleSheetTarget ?? null)\n ? requestedStyleSheetTarget\n : defaultStyleSheetTarget,\n rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n ];\n }, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren = ctx.initialized ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={resolvedStyleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n resolvedStyleSheetTarget &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap'\n data-cosmos-global-style\n />,\n resolvedStyleSheetTarget\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n\n return (\n <StyledConfigurationWrapper ref={setWrapperEl}>\n <context.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction:\n direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: resolvedStyleSheetTarget,\n portalTarget: resolvedPortalTarget,\n overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </context.Provider>\n </StyledConfigurationWrapper>\n );\n};\n\nexport default Configuration;\n"]}
|
|
@@ -44,7 +44,7 @@ const Drawer = forwardRef((props, ref) => {
|
|
|
44
44
|
let prevState = usePrevious(state);
|
|
45
45
|
if (!prevState)
|
|
46
46
|
prevState = state;
|
|
47
|
-
useOuterEvent('mousedown', [drawerRef
|
|
47
|
+
useOuterEvent('mousedown', [drawerRef], useCallback(() => {
|
|
48
48
|
if (open)
|
|
49
49
|
onOuterClick?.();
|
|
50
50
|
}, [open, onOuterClick]));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useEffect,\n Ref,\n useCallback,\n FunctionComponent,\n forwardRef,\n ReactNode,\n TransitionEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /**\n * If true, the Drawer will be visible.\n * @default false\n */\n open: boolean;\n /** Content of the Drawer. */\n children?: ReactNode;\n /**\n * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n */\n shadow?: boolean;\n /**\n * Used to determine which side of the viewport the Drawer should open from.\n * @default \"right\"\n */\n placement?: 'top' | 'right' | 'bottom' | 'left';\n /**\n * The position of the Drawer.\n * @default \"absolute\"\n */\n position?: 'absolute' | 'fixed';\n /**\n * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n */\n transitionSpeed?: string;\n /**\n * The width or height that the Drawer will open to, depending on its placement.\n * @default \"100%\"\n */\n size?: string;\n /** Callback fired after Drawer opens. */\n onAfterOpen?: () => void;\n /** Callback fired after Drawer closes. */\n onAfterClose?: () => void;\n /** Callback fired before Drawer opens. */\n onBeforeOpen?: () => void;\n /** Callback fired before Drawer closes. */\n onBeforeClose?: () => void;\n /** Callback fired when a click action occurs outside of the Drawer. */\n onOuterClick?: () => void;\n /**\n * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' || placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed || theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${state === 'open'\n ? 'none'\n : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(\n (props: DrawerProps, ref: Ref<HTMLElement>) => {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' || state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' || state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n open={open}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n </StyledDrawer>\n );\n }\n);\n\nexport default Drawer;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,EAQJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AASzF,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAS/D,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,qNAkB3B,CAAC;AAYF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAyHnE,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,aAKtB,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useCallback, useState } from 'react';
|
|
2
|
+
import { forwardRef, useCallback, useState, useRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { hideVisually } from 'polished';
|
|
5
|
-
import { useOverride, useConsolidatedRef, useI18n, useUID, useDirection } from '../../hooks';
|
|
5
|
+
import { useOverride, useConsolidatedRef, useI18n, useUID, useDirection, useTheme } from '../../hooks';
|
|
6
6
|
import FormControl from '../FormControl';
|
|
7
7
|
import { defaultThemeProp } from '../../theme';
|
|
8
8
|
import Flex from '../Flex';
|
|
@@ -53,8 +53,10 @@ StyledInteractiveText.defaultProps = defaultThemeProp;
|
|
|
53
53
|
const BaseFileInput = forwardRef((props, ref) => {
|
|
54
54
|
const uid = useUID();
|
|
55
55
|
const { id = uid, label, labelHidden, info, required = false, disabled = false, files, onFilesAdded, multiple = false, status, ...restProps } = props;
|
|
56
|
+
const { base: { 'content-width': { md } } } = useTheme();
|
|
56
57
|
const icon = _jsx(Icon, { name: 'paper-clip' });
|
|
57
58
|
const inputRef = useConsolidatedRef(ref);
|
|
59
|
+
const containerRef = useRef(null);
|
|
58
60
|
const onChange = useCallback((e) => {
|
|
59
61
|
if (e.target.files) {
|
|
60
62
|
onFilesAdded?.(Array.from(e.target.files));
|
|
@@ -85,9 +87,9 @@ const BaseFileInput = forwardRef((props, ref) => {
|
|
|
85
87
|
}, children: [ltr && icon, _jsxs(Text, { variant: 'primary', children: ["\u00A0", t('file_upload_text_main', [
|
|
86
88
|
_jsx(StyledInteractiveText, { children: t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one') })
|
|
87
89
|
]), "\u00A0"] }), rtl && icon] })] }));
|
|
88
|
-
return (_jsxs(Grid, { container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, required, disabled, status }, children: fileInput })) : (fileInput), !!files?.length && (_jsx(Grid, { container: {
|
|
90
|
+
return (_jsxs(Grid, { ref: containerRef, container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, required, disabled, status }, children: fileInput })) : (fileInput), !!files?.length && (_jsx(Grid, { container: {
|
|
89
91
|
gap: 1,
|
|
90
|
-
cols:
|
|
92
|
+
cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`
|
|
91
93
|
}, as: 'ul', children: files.map(({ name, ...file }, index) => {
|
|
92
94
|
// eslint-disable-next-line react/no-array-index-key
|
|
93
95
|
return _jsx(FileUploadItem, { name: name, ...file }, index);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ChangeEvent,\n useCallback,\n PropsWithoutRef,\n DragEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { useOverride, useConsolidatedRef, useI18n, useUID, useDirection } from '../../hooks';\nimport FormControl, { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp {\n /**\n * Called when files are added either via the input or drop zone.\n */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /** An array of files that have been uploaded. */\n files?: FileUploadItemProps[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(({ dragOver, theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n min-height: 4rem;\n border-style: dashed;\n cursor: pointer;\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n `;\n});\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n ({ theme }) => {\n return css`\n position: relative;\n\n input {\n ${hideVisually}\n }\n\n input:enabled:focus + ${StyledDropZone} {\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n\n input[hidden] + ${StyledDropZone} {\n display: none;\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette.interactive};\n `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileInputProps>, ref: FileInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n files,\n onFilesAdded,\n multiple = false,\n status,\n ...restProps\n } = props;\n\n const icon = <Icon name='paper-clip' />;\n const inputRef = useConsolidatedRef(ref);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const { ltr, rtl } = useDirection();\n\n const fileInput = (\n <StyledFileInput>\n <input\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n />\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n item={{ grow: 1 }}\n as={StyledDropZone}\n dragOver={dragOver}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n onDragOver={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n }}\n onDragEnter={() => setDragOver(true)}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n }}\n >\n {ltr && icon}\n <Text variant='primary'>\n \n {t('file_upload_text_main', [\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n ])}\n \n </Text>\n {rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n return (\n <Grid container={{ rowGap: 1 }}>\n {label ? (\n <FormField {...{ label, labelHidden, id, info, required, disabled, status }}>\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Grid\n container={{\n gap: 1,\n cols: 'repeat(2, minmax(0, 1fr))'\n }}\n as='ul'\n >\n {files.map(({ name, ...file }, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <FileUploadItem key={index} name={name} {...file} />;\n })}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n const Override = useOverride('FileInput');\n if (Override) return <Override {...props} ref={ref} />;\n\n return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}
|
|
1
|
+
{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ChangeEvent,\n useCallback,\n PropsWithoutRef,\n DragEvent,\n useState,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport {\n useOverride,\n useConsolidatedRef,\n useI18n,\n useUID,\n useDirection,\n useTheme\n} from '../../hooks';\nimport FormControl, { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp {\n /**\n * Called when files are added either via the input or drop zone.\n */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /** An array of files that have been uploaded. */\n files?: FileUploadItemProps[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(({ dragOver, theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n min-height: 4rem;\n border-style: dashed;\n cursor: pointer;\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n `;\n});\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n ({ theme }) => {\n return css`\n position: relative;\n\n input {\n ${hideVisually}\n }\n\n input:enabled:focus + ${StyledDropZone} {\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n\n input[hidden] + ${StyledDropZone} {\n display: none;\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette.interactive};\n `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileInputProps>, ref: FileInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n files,\n onFilesAdded,\n multiple = false,\n status,\n ...restProps\n } = props;\n\n const {\n base: {\n 'content-width': { md }\n }\n } = useTheme();\n\n const icon = <Icon name='paper-clip' />;\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const { ltr, rtl } = useDirection();\n\n const fileInput = (\n <StyledFileInput>\n <input\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n />\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n item={{ grow: 1 }}\n as={StyledDropZone}\n dragOver={dragOver}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n onDragOver={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n }}\n onDragEnter={() => setDragOver(true)}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n }}\n >\n {ltr && icon}\n <Text variant='primary'>\n \n {t('file_upload_text_main', [\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n ])}\n \n </Text>\n {rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n return (\n <Grid ref={containerRef} container={{ rowGap: 1 }}>\n {label ? (\n <FormField {...{ label, labelHidden, id, info, required, disabled, status }}>\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Grid\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n }}\n as='ul'\n >\n {files.map(({ name, ...file }, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <FileUploadItem key={index} name={name} {...file} />;\n })}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n const Override = useOverride('FileInput');\n if (Override) return <Override {...props} ref={ref} />;\n\n return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}
|
package/lib/types/types.d.ts
CHANGED
|
@@ -39,6 +39,9 @@ export declare type DeepPartial<T> = T extends (infer U)[] ? DeepPartial<U>[] :
|
|
|
39
39
|
export declare type DeepRequired<T> = T extends (infer U)[] ? DeepRequired<U>[] : T extends Function ? T : T extends object ? {
|
|
40
40
|
[K in keyof T]-?: DeepRequired<T[K]>;
|
|
41
41
|
} : T;
|
|
42
|
+
export declare type Mutable<T> = {
|
|
43
|
+
-readonly [P in keyof T]: T[P];
|
|
44
|
+
};
|
|
42
45
|
export declare type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
|
|
43
46
|
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
|
|
44
47
|
}[Keys];
|
package/lib/types/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,oBAAY,OAAO,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAC;AAClD,MAAM,WAAW,MAAM;IACrB,8DAA8D;IAC9D,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,sEAAsE;IACtE,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,MAAO,SAAQ,YAAY;IAC1C,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,OAAO,CAAC,EAAE,CACR,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,oBAAY,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC5E,oBAAY,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GAC9E,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACtB,oBAAY,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GAC/E,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvB,oBAAY,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAC9C,WAAW,CAAC,CAAC,CAAC,EAAE,GAChB,CAAC,SAAS,MAAM,GAChB;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAC;AAEN,oBAAY,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAC/C,YAAY,CAAC,CAAC,CAAC,EAAE,GACjB,CAAC,SAAS,QAAQ,GAClB,CAAC,GACD,CAAC,SAAS,MAAM,GAChB;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACxC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"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"}
|
package/lib/types/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ElementType, MouseEvent } from 'react';\n\nexport interface BaseProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\nexport interface ForwardProps {\n [prop: string]: unknown;\n}\n\nexport interface NoChildrenProp {\n children?: never;\n}\n\nexport type HTMLTag = keyof JSX.IntrinsicElements;\nexport interface AsProp {\n /** HTML tag or React Component to render the component as. */\n as?: ElementType;\n /** HTML tag or React Component to finally render the component as. */\n forwardedAs?: ElementType;\n}\n\nexport interface Action extends ForwardProps {\n /** A string to uniquely identify this Action within the onClick handler. */\n id: string;\n /** The text content of the Action. */\n text: string;\n /** The name of the Cosmos Icon to render, if any. */\n icon?: string;\n /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n href?: string;\n /** Called when the Action is clicked. */\n onClick?: (\n id: string,\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => void;\n /** Determines if the Action will be disabled. */\n disabled?: boolean;\n}\n\n// https://github.com/microsoft/TypeScript/issues/30825\nexport type OmitStrict<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;\nexport type PartialByKey<T extends object, K extends keyof T> = OmitStrict<T, K> &\n Partial<Pick<T, K>>;\nexport type RequiredByKey<T extends object, K extends keyof T> = OmitStrict<T, K> &\n Required<Pick<T, K>>;\n\nexport type DeepPartial<T> = T extends (infer U)[]\n ? DeepPartial<U>[]\n : T extends object\n ? { [K in keyof T]?: DeepPartial<T[K]> }\n : T;\n\nexport type DeepRequired<T> = T extends (infer U)[]\n ? DeepRequired<U>[]\n : T extends Function\n ? T\n : T extends object\n ? { [K in keyof T]-?: DeepRequired<T[K]> }\n : T;\n\n// https://stackoverflow.com/a/49725198\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &\n {\n [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n }[Keys];\n\n// Lowers type inference precedence without changing the type.\n// https://github.com/Microsoft/TypeScript/issues/14829#issue-216577598\nexport type DeferInfer<T> = T & { [K in keyof T]: T[K] };\n\n/* eslint-disable @typescript-eslint/ban-types */\nexport type PropsWithDefaults<\n Props extends object = {},\n Defaults extends keyof Props = never\n> = OmitStrict<Props, Defaults> & Required<Pick<Props, Defaults>>;\n/* eslint-enable @typescript-eslint/ban-types */\n\nexport type PrettyPrint<T> = T extends object\n ? {\n [K in keyof T]: T[K];\n }\n : T;\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ElementType, MouseEvent } from 'react';\n\nexport interface BaseProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\nexport interface ForwardProps {\n [prop: string]: unknown;\n}\n\nexport interface NoChildrenProp {\n children?: never;\n}\n\nexport type HTMLTag = keyof JSX.IntrinsicElements;\nexport interface AsProp {\n /** HTML tag or React Component to render the component as. */\n as?: ElementType;\n /** HTML tag or React Component to finally render the component as. */\n forwardedAs?: ElementType;\n}\n\nexport interface Action extends ForwardProps {\n /** A string to uniquely identify this Action within the onClick handler. */\n id: string;\n /** The text content of the Action. */\n text: string;\n /** The name of the Cosmos Icon to render, if any. */\n icon?: string;\n /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n href?: string;\n /** Called when the Action is clicked. */\n onClick?: (\n id: string,\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => void;\n /** Determines if the Action will be disabled. */\n disabled?: boolean;\n}\n\n// https://github.com/microsoft/TypeScript/issues/30825\nexport type OmitStrict<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;\nexport type PartialByKey<T extends object, K extends keyof T> = OmitStrict<T, K> &\n Partial<Pick<T, K>>;\nexport type RequiredByKey<T extends object, K extends keyof T> = OmitStrict<T, K> &\n Required<Pick<T, K>>;\n\nexport type DeepPartial<T> = T extends (infer U)[]\n ? DeepPartial<U>[]\n : T extends object\n ? { [K in keyof T]?: DeepPartial<T[K]> }\n : T;\n\nexport type DeepRequired<T> = T extends (infer U)[]\n ? DeepRequired<U>[]\n : T extends Function\n ? T\n : T extends object\n ? { [K in keyof T]-?: DeepRequired<T[K]> }\n : T;\n\nexport type Mutable<T> = {\n -readonly [P in keyof T]: T[P];\n};\n\n// https://stackoverflow.com/a/49725198\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &\n {\n [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n }[Keys];\n\n// Lowers type inference precedence without changing the type.\n// https://github.com/Microsoft/TypeScript/issues/14829#issue-216577598\nexport type DeferInfer<T> = T & { [K in keyof T]: T[K] };\n\n/* eslint-disable @typescript-eslint/ban-types */\nexport type PropsWithDefaults<\n Props extends object = {},\n Defaults extends keyof Props = never\n> = OmitStrict<Props, Defaults> & Required<Pick<Props, Defaults>>;\n/* eslint-enable @typescript-eslint/ban-types */\n\nexport type PrettyPrint<T> = T extends object\n ? {\n [K in keyof T]: T[K];\n }\n : T;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.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",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"@types/emoji-mart": "^3.0.4",
|
|
31
31
|
"@types/emoji-regex": "^8.0.0",
|
|
32
32
|
"@types/google.maps": "^3.49.2",
|
|
33
|
-
"@types/react": "^16.14.
|
|
33
|
+
"@types/react": "^16.14.43 || ^17.0.62",
|
|
34
34
|
"@types/react-color": "^3.0.4",
|
|
35
|
-
"@types/react-dom": "^16.9.
|
|
35
|
+
"@types/react-dom": "^16.9.19 || ^17.0.20",
|
|
36
36
|
"@types/styled-components": "^5.1.26",
|
|
37
37
|
"bignumber.js": "^9.0.1",
|
|
38
38
|
"credit-card-type": "^9.1.0",
|