@mongodb-js/compass-components 0.8.0 → 0.9.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/accordion.js +7 -7
- package/lib/components/accordion.js.map +1 -1
- package/lib/components/cancel-loader.js +4 -4
- package/lib/components/cancel-loader.js.map +1 -1
- package/lib/components/confirmation-modal.js +1 -1
- package/lib/components/confirmation-modal.js.map +1 -1
- package/lib/components/content-with-fallback.d.ts +11 -2
- package/lib/components/content-with-fallback.js +44 -3
- package/lib/components/content-with-fallback.js.map +1 -1
- package/lib/components/file-input.d.ts +5 -1
- package/lib/components/file-input.js +59 -38
- package/lib/components/file-input.js.map +1 -1
- package/lib/components/inline-definition.d.ts +7 -0
- package/lib/components/inline-definition.js +31 -0
- package/lib/components/inline-definition.js.map +1 -0
- package/lib/components/placeholder.d.ts +8 -0
- package/lib/components/placeholder.js +68 -0
- package/lib/components/placeholder.js.map +1 -0
- package/lib/components/resize-handle.js +5 -5
- package/lib/components/resize-handle.js.map +1 -1
- package/lib/components/spin-loader.js +2 -2
- package/lib/components/spin-loader.js.map +1 -1
- package/lib/components/tooltip.d.ts +13 -0
- package/lib/components/tooltip.js +52 -0
- package/lib/components/tooltip.js.map +1 -0
- package/lib/hooks/use-dom-rect.d.ts +5 -0
- package/lib/hooks/use-dom-rect.js +28 -0
- package/lib/hooks/use-dom-rect.js.map +1 -0
- package/lib/hooks/use-focus-hover.d.ts +2 -1
- package/lib/hooks/use-focus-hover.js +24 -30
- package/lib/hooks/use-focus-hover.js.map +1 -1
- package/lib/index.d.ts +10 -3
- package/lib/index.js +33 -5
- package/lib/index.js.map +1 -1
- package/lib/utils/merge-props.d.ts +2 -0
- package/lib/utils/merge-props.js +24 -0
- package/lib/utils/merge-props.js.map +1 -0
- package/package.json +11 -8
|
@@ -28,12 +28,12 @@ const css_1 = require("@emotion/css");
|
|
|
28
28
|
const icon_1 = __importDefault(require("@leafygreen-ui/icon"));
|
|
29
29
|
const palette_1 = require("@leafygreen-ui/palette");
|
|
30
30
|
const utils_1 = require("@react-aria/utils");
|
|
31
|
-
const labelStyles = css_1.css({
|
|
31
|
+
const labelStyles = (0, css_1.css)({
|
|
32
32
|
padding: 0,
|
|
33
33
|
margin: 0,
|
|
34
34
|
fontWeight: 'bold',
|
|
35
35
|
});
|
|
36
|
-
const buttonStyles = css_1.css({
|
|
36
|
+
const buttonStyles = (0, css_1.css)({
|
|
37
37
|
display: 'flex',
|
|
38
38
|
alignItems: 'center',
|
|
39
39
|
border: 'none',
|
|
@@ -45,18 +45,18 @@ const buttonStyles = css_1.css({
|
|
|
45
45
|
boxShadow: `0 0 0 3px ${palette_1.uiColors.focus}`,
|
|
46
46
|
},
|
|
47
47
|
});
|
|
48
|
-
const containerStyles = css_1.css({
|
|
48
|
+
const containerStyles = (0, css_1.css)({
|
|
49
49
|
marginTop: tokens_1.spacing[3],
|
|
50
50
|
display: 'flex',
|
|
51
51
|
alignItems: 'center',
|
|
52
52
|
});
|
|
53
|
-
const buttonIconStyles = css_1.css({
|
|
53
|
+
const buttonIconStyles = (0, css_1.css)({
|
|
54
54
|
marginRight: tokens_1.spacing[1],
|
|
55
55
|
});
|
|
56
56
|
function Accordion(props) {
|
|
57
|
-
const [open, setOpen] = react_1.useState(false);
|
|
58
|
-
const regionId = utils_1.useId('region-');
|
|
59
|
-
const labelId = utils_1.useId('label-');
|
|
57
|
+
const [open, setOpen] = (0, react_1.useState)(false);
|
|
58
|
+
const regionId = (0, utils_1.useId)('region-');
|
|
59
|
+
const labelId = (0, utils_1.useId)('label-');
|
|
60
60
|
return (react_1.default.createElement("div", { "data-testid": props.dataTestId },
|
|
61
61
|
react_1.default.createElement("div", { className: containerStyles },
|
|
62
62
|
react_1.default.createElement("p", { className: labelStyles, id: labelId },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,kDAAgD;AAChD,sCAAmC;AACnC,+DAAuC;AACvC,oDAAkD;AAClD,6CAA0C;AAE1C,MAAM,WAAW,GAAG,SAAG,
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,kDAAgD;AAChD,sCAAmC;AACnC,+DAAuC;AACvC,oDAAkD;AAClD,6CAA0C;AAE1C,MAAM,WAAW,GAAG,IAAA,SAAG,EAAC;IACtB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAA,SAAG,EAAC;IACvB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,8BAA8B;IAC1C,iBAAiB,EAAE;QACjB,SAAS,EAAE,aAAa,kBAAQ,CAAC,KAAK,EAAE;KACzC;CACF,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,IAAA,SAAG,EAAC;IAC1B,SAAS,EAAE,gBAAO,CAAC,CAAC,CAAC;IACrB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AACH,MAAM,gBAAgB,GAAG,IAAA,SAAG,EAAC;IAC3B,WAAW,EAAE,gBAAO,CAAC,CAAC,CAAC;CACxB,CAAC,CAAC;AAKH,SAAS,SAAS,CAChB,KAA8C;IAE9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,IAAA,aAAK,EAAC,SAAS,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,IAAA,aAAK,EAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,CACL,sDAAkB,KAAK,CAAC,UAAU;QAChC,uCAAK,SAAS,EAAE,eAAe;YAC7B,qCAAG,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,OAAO;gBACpC,0CACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBACvB,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;oBACzC,CAAC;oBAED,8BAAC,cAAI,IACH,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,GAC5C;oBACD,KAAK,CAAC,IAAI,CACJ,CACP,CACA;QAEL,IAAI,IAAI,CACP,uCAAK,IAAI,EAAC,QAAQ,qBAAkB,OAAO,EAAE,EAAE,EAAE,QAAQ,IACtD,KAAK,CAAC,QAAQ,CACX,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,SAAS,CAAC"}
|
|
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const css_1 = require("@emotion/css");
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const cancelLoaderStyle = css_1.css({
|
|
8
|
+
const cancelLoaderStyle = (0, css_1.css)({
|
|
9
9
|
height: '100%',
|
|
10
10
|
display: 'flex',
|
|
11
11
|
flexDirection: 'column',
|
|
@@ -13,14 +13,14 @@ const cancelLoaderStyle = css_1.css({
|
|
|
13
13
|
justifyContent: 'center',
|
|
14
14
|
padding: '10px 0',
|
|
15
15
|
});
|
|
16
|
-
const progressTextStyle = css_1.css({
|
|
16
|
+
const progressTextStyle = (0, css_1.css)({
|
|
17
17
|
margin: '0 auto 30px',
|
|
18
18
|
textAlign: 'left',
|
|
19
19
|
fontSize: '24px',
|
|
20
20
|
color: '#807f7f',
|
|
21
21
|
fontWeight: 200,
|
|
22
22
|
});
|
|
23
|
-
const spinnerStyle = css_1.css({
|
|
23
|
+
const spinnerStyle = (0, css_1.css)({
|
|
24
24
|
animation: 'fa-spin 2s infinite linear',
|
|
25
25
|
width: '40px',
|
|
26
26
|
textAlign: 'center',
|
|
@@ -32,7 +32,7 @@ const spinnerStyle = css_1.css({
|
|
|
32
32
|
content: '"\\f1ce"',
|
|
33
33
|
},
|
|
34
34
|
});
|
|
35
|
-
const buttonStyle = css_1.css({
|
|
35
|
+
const buttonStyle = (0, css_1.css)({
|
|
36
36
|
padding: '0 10px 0 10px',
|
|
37
37
|
height: '28px',
|
|
38
38
|
fontWeight: 'bold',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cancel-loader.js","sourceRoot":"","sources":["../../src/components/cancel-loader.tsx"],"names":[],"mappings":";;;;;AAAA,sCAAmC;AACnC,kDAA0B;AAE1B,MAAM,iBAAiB,GAAG,SAAG,
|
|
1
|
+
{"version":3,"file":"cancel-loader.js","sourceRoot":"","sources":["../../src/components/cancel-loader.tsx"],"names":[],"mappings":";;;;;AAAA,sCAAmC;AACnC,kDAA0B;AAE1B,MAAM,iBAAiB,GAAG,IAAA,SAAG,EAAC;IAC5B,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,IAAA,SAAG,EAAC;IAC5B,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,GAAG;CAChB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAA,SAAG,EAAC;IACvB,SAAS,EAAE,4BAA4B;IACvC,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,cAAc;IACvB,aAAa,EAAE,MAAM;IACrB,IAAI,EAAE,yCAAyC;IAC/C,WAAW,EAAE;QACX,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAA,SAAG,EAAC;IACtB,OAAO,EAAE,eAAe;IACxB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,WAAW;IAC1B,eAAe,EAAE,aAAa;IAC9B,MAAM,EAAE,mBAAmB;IAC3B,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,UAAU;IACtB,oBAAoB,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,CAAC;IACT,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,SAAS,YAAY,CAAC,EACpB,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,GAMT;IACC,OAAO,CACL,sDAAkB,UAAU,EAAE,SAAS,EAAE,iBAAiB;QACxD,uCAAK,SAAS,EAAE,iBAAiB;YAC/B,qCAAG,SAAS,EAAE,YAAY,GAAI;YAC7B,YAAY,CACT;QACN;YACE,0CAAQ,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,IAC9C,UAAU,CACJ,CACL,CACF,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,YAAY,CAAC"}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const confirmation_modal_1 = __importDefault(require("@leafygreen-ui/confirmation-modal"));
|
|
8
8
|
const compass_logging_1 = require("@mongodb-js/compass-logging");
|
|
9
|
-
const { track } = compass_logging_1.createLoggerAndTelemetry('COMPASS-UI');
|
|
9
|
+
const { track } = (0, compass_logging_1.createLoggerAndTelemetry)('COMPASS-UI');
|
|
10
10
|
function ConfirmationModal(props) {
|
|
11
11
|
if (props.open && props.trackingId) {
|
|
12
12
|
track('Screen', { name: props.trackingId });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirmation-modal.js","sourceRoot":"","sources":["../../src/components/confirmation-modal.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,2FAA4E;AAC5E,iEAAuE;AACvE,MAAM,EAAE,KAAK,EAAE,GAAG,0CAAwB,
|
|
1
|
+
{"version":3,"file":"confirmation-modal.js","sourceRoot":"","sources":["../../src/components/confirmation-modal.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,2FAA4E;AAC5E,iEAAuE;AACvE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,0CAAwB,EAAC,YAAY,CAAC,CAAC;AAEzD,SAAS,iBAAiB,CACxB,KAEC;IAED,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAClC,KAAK,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;KAC7C;IACD,OAAO,8BAAC,4BAA2B,OAAK,KAAK,GAAI,CAAC;AACpD,CAAC;AAED,kBAAe,iBAAiB,CAAC"}
|
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const ContentWithFallback: React.FunctionComponent<{
|
|
3
|
-
content(shouldRender: boolean, shouldAnimate: boolean): React.ReactElement | boolean;
|
|
4
|
-
fallback(shouldRender: boolean): React.ReactElement | boolean;
|
|
3
|
+
content(shouldRender: boolean, shouldAnimate: boolean): React.ReactElement | boolean | null;
|
|
4
|
+
fallback(shouldRender: boolean): React.ReactElement | boolean | null;
|
|
5
5
|
isContentReady: boolean;
|
|
6
6
|
contentAfterFallbackTimeout?: number;
|
|
7
7
|
fallbackTimeout?: number;
|
|
8
8
|
}>;
|
|
9
|
+
declare type FadeInPlaceholderProps = {
|
|
10
|
+
isContentReady: boolean;
|
|
11
|
+
content(): React.ReactElement | boolean | null;
|
|
12
|
+
fallback(): React.ReactElement | boolean | null;
|
|
13
|
+
contentContainerProps?: React.HTMLProps<HTMLDivElement>;
|
|
14
|
+
fallbackContainerProps?: React.HTMLProps<HTMLDivElement>;
|
|
15
|
+
};
|
|
16
|
+
export declare const FadeInPlaceholder: React.FunctionComponent<FadeInPlaceholderProps & Omit<React.HTMLProps<HTMLDivElement>, keyof FadeInPlaceholderProps>>;
|
|
17
|
+
export {};
|
|
@@ -19,8 +19,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.ContentWithFallback = void 0;
|
|
22
|
+
exports.FadeInPlaceholder = exports.ContentWithFallback = void 0;
|
|
23
23
|
const react_1 = __importStar(require("react"));
|
|
24
|
+
const emotion_1 = require("@leafygreen-ui/emotion");
|
|
24
25
|
var RenderStatus;
|
|
25
26
|
(function (RenderStatus) {
|
|
26
27
|
RenderStatus["Nothing"] = "Nothing";
|
|
@@ -32,8 +33,8 @@ function isContent(status) {
|
|
|
32
33
|
return [RenderStatus.ContentAnimated, RenderStatus.Content].includes(status);
|
|
33
34
|
}
|
|
34
35
|
function useRenderWithFallback(isContentReady, { contentAfterFallbackTimeout = 200, fallbackTimeout = 30 } = {}) {
|
|
35
|
-
const [renderStatus, setRenderStatus] = react_1.useState(isContentReady ? RenderStatus.Content : RenderStatus.Nothing);
|
|
36
|
-
react_1.useEffect(() => {
|
|
36
|
+
const [renderStatus, setRenderStatus] = (0, react_1.useState)(isContentReady ? RenderStatus.Content : RenderStatus.Nothing);
|
|
37
|
+
(0, react_1.useEffect)(() => {
|
|
37
38
|
if (isContent(renderStatus)) {
|
|
38
39
|
return;
|
|
39
40
|
}
|
|
@@ -75,4 +76,44 @@ const ContentWithFallback = ({ content, fallback, isContentReady, contentAfterFa
|
|
|
75
76
|
fallback(renderStatus === RenderStatus.Fallback)));
|
|
76
77
|
};
|
|
77
78
|
exports.ContentWithFallback = ContentWithFallback;
|
|
79
|
+
const contentWithFallbackContainer = (0, emotion_1.css)({
|
|
80
|
+
position: 'relative',
|
|
81
|
+
});
|
|
82
|
+
const fadeInAnimation = (0, emotion_1.keyframes)({
|
|
83
|
+
from: {
|
|
84
|
+
opacity: 0,
|
|
85
|
+
},
|
|
86
|
+
to: {
|
|
87
|
+
opacity: 1,
|
|
88
|
+
},
|
|
89
|
+
});
|
|
90
|
+
const contentContainer = (0, emotion_1.css)({
|
|
91
|
+
position: 'relative',
|
|
92
|
+
});
|
|
93
|
+
const contentContainerFadeIn = (0, emotion_1.css)({
|
|
94
|
+
animation: `${fadeInAnimation} .16s ease-out`,
|
|
95
|
+
});
|
|
96
|
+
const fallbackContainer = (0, emotion_1.css)({
|
|
97
|
+
position: 'absolute',
|
|
98
|
+
top: 0,
|
|
99
|
+
right: 0,
|
|
100
|
+
bottom: 0,
|
|
101
|
+
left: 0,
|
|
102
|
+
opacity: 0,
|
|
103
|
+
transition: 'opacity .16s ease-out',
|
|
104
|
+
pointerEvents: 'none',
|
|
105
|
+
});
|
|
106
|
+
const fallbackContainerVisible = (0, emotion_1.css)({
|
|
107
|
+
opacity: 1,
|
|
108
|
+
transitionTimingFunction: 'ease-in',
|
|
109
|
+
});
|
|
110
|
+
const FadeInPlaceholder = ({ content, fallback, isContentReady, contentContainerProps = {}, fallbackContainerProps = {}, className, ...props }) => {
|
|
111
|
+
return (react_1.default.createElement("div", { className: (0, emotion_1.cx)(contentWithFallbackContainer, className), ...props },
|
|
112
|
+
react_1.default.createElement(exports.ContentWithFallback, { isContentReady: isContentReady, content: (shouldRender, shouldAnimate) => {
|
|
113
|
+
return (shouldRender && (react_1.default.createElement("div", { ...contentContainerProps, className: (0, emotion_1.cx)(contentContainer, shouldAnimate && contentContainerFadeIn, contentContainerProps.className) }, content())));
|
|
114
|
+
}, fallback: (shouldRender) => {
|
|
115
|
+
return (react_1.default.createElement("div", { ...fallbackContainerProps, className: (0, emotion_1.cx)(fallbackContainer, shouldRender && fallbackContainerVisible, fallbackContainerProps.className) }, fallback()));
|
|
116
|
+
} })));
|
|
117
|
+
};
|
|
118
|
+
exports.FadeInPlaceholder = FadeInPlaceholder;
|
|
78
119
|
//# sourceMappingURL=content-with-fallback.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content-with-fallback.js","sourceRoot":"","sources":["../../src/components/content-with-fallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAmD;
|
|
1
|
+
{"version":3,"file":"content-with-fallback.js","sourceRoot":"","sources":["../../src/components/content-with-fallback.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,14 +3,18 @@ export declare enum Variant {
|
|
|
3
3
|
Horizontal = "HORIZONTAL",
|
|
4
4
|
Vertical = "VERTICAL"
|
|
5
5
|
}
|
|
6
|
-
declare function FileInput({ id, label, onChange, multi, error, variant, link, values, }: {
|
|
6
|
+
declare function FileInput({ id, label, dataTestId, onChange, multi, error, errorMessage, variant, link, description, values, labelAlignment, }: {
|
|
7
7
|
id: string;
|
|
8
8
|
label: string;
|
|
9
|
+
dataTestId: string;
|
|
9
10
|
onChange: (files: string[]) => void;
|
|
10
11
|
multi?: boolean;
|
|
11
12
|
error?: boolean;
|
|
13
|
+
errorMessage?: string;
|
|
12
14
|
variant?: Variant;
|
|
13
15
|
link?: string;
|
|
16
|
+
description?: string;
|
|
14
17
|
values?: string[];
|
|
18
|
+
labelAlignment?: 'right' | 'left' | 'center';
|
|
15
19
|
}): React.ReactElement;
|
|
16
20
|
export default FileInput;
|
|
@@ -6,41 +6,45 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.Variant = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const path_1 = __importDefault(require("path"));
|
|
9
|
-
const
|
|
9
|
+
const emotion_1 = require("@leafygreen-ui/emotion");
|
|
10
|
+
const palette_1 = require("@leafygreen-ui/palette");
|
|
11
|
+
const tokens_1 = require("@leafygreen-ui/tokens");
|
|
10
12
|
const __1 = require("..");
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
const { base: redBaseColor } = palette_1.uiColors.red;
|
|
14
|
+
const formItemHorizontalStyles = (0, emotion_1.css)({
|
|
15
|
+
marginTop: tokens_1.spacing[2],
|
|
16
|
+
marginBottom: tokens_1.spacing[2],
|
|
17
|
+
marginRight: 'auto',
|
|
18
|
+
marginLeft: 'auto',
|
|
19
|
+
display: 'flex',
|
|
20
|
+
alignItems: 'center',
|
|
21
|
+
});
|
|
22
|
+
const formItemVerticalStyles = (0, emotion_1.css) `
|
|
17
23
|
margin: 5px auto 20px;
|
|
18
24
|
`;
|
|
19
|
-
const formItemErrorStyles =
|
|
20
|
-
border: 1px solid
|
|
21
|
-
|
|
25
|
+
const formItemErrorStyles = (0, emotion_1.css) `
|
|
26
|
+
border: 1px solid ${redBaseColor};
|
|
27
|
+
border-radius: 5px;
|
|
22
28
|
&:focus {
|
|
23
|
-
border: 1px solid
|
|
29
|
+
border: 1px solid ${redBaseColor};
|
|
24
30
|
}
|
|
25
31
|
`;
|
|
26
|
-
const buttonStyles =
|
|
32
|
+
const buttonStyles = (0, emotion_1.css) `
|
|
27
33
|
width: 100%;
|
|
28
34
|
`;
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
const labelHorizontalStyles =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
`;
|
|
43
|
-
const labelIconStyles = css_1.css `
|
|
35
|
+
const errorMessageStyles = (0, emotion_1.css)({
|
|
36
|
+
color: `${redBaseColor} !important`,
|
|
37
|
+
});
|
|
38
|
+
const labelHorizontalStyles = (0, emotion_1.css)({
|
|
39
|
+
width: '70%',
|
|
40
|
+
display: 'grid',
|
|
41
|
+
gridTemplateAreas: `'label icon' 'description .'`,
|
|
42
|
+
gridTemplateColumns: '1fr auto',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
columnGap: tokens_1.spacing[1],
|
|
45
|
+
paddingRight: tokens_1.spacing[3],
|
|
46
|
+
});
|
|
47
|
+
const labelIconStyles = (0, emotion_1.css) `
|
|
44
48
|
display: inline-block;
|
|
45
49
|
vertical-align: middle;
|
|
46
50
|
font: normal normal normal 14px/1 FontAwesome;
|
|
@@ -70,7 +74,7 @@ var Variant;
|
|
|
70
74
|
Variant["Horizontal"] = "HORIZONTAL";
|
|
71
75
|
Variant["Vertical"] = "VERTICAL";
|
|
72
76
|
})(Variant = exports.Variant || (exports.Variant = {}));
|
|
73
|
-
function FileInput({ id, label, onChange, multi = false, error = false, variant = Variant.Horizontal, link, values, }) {
|
|
77
|
+
function FileInput({ id, label, dataTestId, onChange, multi = false, error = false, errorMessage, variant = Variant.Horizontal, link, description, values, labelAlignment = 'left', }) {
|
|
74
78
|
const inputRef = react_1.default.useRef(null);
|
|
75
79
|
const buttonText = react_1.default.useMemo(() => {
|
|
76
80
|
if (Array.isArray(values) && values.length > 0) {
|
|
@@ -85,16 +89,33 @@ function FileInput({ id, label, onChange, multi = false, error = false, variant
|
|
|
85
89
|
});
|
|
86
90
|
onChange(files);
|
|
87
91
|
}, [onChange]);
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
react_1.default.createElement(
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
},
|
|
92
|
+
const renderDescription = () => {
|
|
93
|
+
if (!link && !description) {
|
|
94
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
95
|
+
}
|
|
96
|
+
if (!link) {
|
|
97
|
+
return (react_1.default.createElement(__1.Description, { "data-testid": 'file-input-description', style: { gridArea: 'description' } }, description));
|
|
98
|
+
}
|
|
99
|
+
return (react_1.default.createElement(__1.Link, { "data-testid": 'file-input-link', href: link, className: (0, emotion_1.cx)({
|
|
100
|
+
[labelIconStyles]: !description,
|
|
101
|
+
}, (0, emotion_1.css)({
|
|
102
|
+
gridArea: description ? 'description' : 'icon',
|
|
103
|
+
})), hideExternalIcon: !description }, description !== null && description !== void 0 ? description : ''));
|
|
104
|
+
};
|
|
105
|
+
return (react_1.default.createElement("div", null,
|
|
106
|
+
react_1.default.createElement("div", { className: (0, emotion_1.cx)({ [formItemHorizontalStyles]: variant === Variant.Horizontal }, { [formItemVerticalStyles]: variant === Variant.Vertical }, { [formItemErrorStyles]: error }) },
|
|
107
|
+
react_1.default.createElement("label", { htmlFor: `${id}_file_input`, className: (0, emotion_1.cx)({ [labelHorizontalStyles]: variant === Variant.Horizontal }, (0, emotion_1.css)({
|
|
108
|
+
textAlign: labelAlignment,
|
|
109
|
+
})) },
|
|
110
|
+
react_1.default.createElement("span", { style: { gridArea: 'label' } }, label),
|
|
111
|
+
renderDescription()),
|
|
112
|
+
react_1.default.createElement("input", { "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : 'file-input', ref: inputRef, id: `${id}_file_input`, name: id, type: "file", multiple: multi, onChange: onFilesChanged, style: { display: 'none' } }),
|
|
113
|
+
react_1.default.createElement(__1.Button, { id: id, "data-testid": "file-input-button", className: (0, emotion_1.cx)({ [buttonStyles]: true }), onClick: () => {
|
|
114
|
+
if (inputRef.current) {
|
|
115
|
+
inputRef.current.click();
|
|
116
|
+
}
|
|
117
|
+
}, title: "Select a file", leftGlyph: react_1.default.createElement(__1.Icon, { glyph: "AddFile", title: null, fill: "currentColor" }) }, buttonText)),
|
|
118
|
+
error && errorMessage && (react_1.default.createElement(__1.Label, { "data-testid": 'file-input-error', className: errorMessageStyles, htmlFor: '' }, errorMessage))));
|
|
98
119
|
}
|
|
99
120
|
exports.default = FileInput;
|
|
100
121
|
//# sourceMappingURL=file-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../src/components/file-input.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gDAAwB;AACxB,
|
|
1
|
+
{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../src/components/file-input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Tooltip } from './tooltip';
|
|
3
|
+
declare const InlineDefinition: React.FunctionComponent<React.HTMLProps<HTMLSpanElement> & {
|
|
4
|
+
definition: React.ReactNode;
|
|
5
|
+
tooltipProps: Partial<Omit<React.ComponentProps<typeof Tooltip>, 'trigger' | 'children'>>;
|
|
6
|
+
}>;
|
|
7
|
+
export { InlineDefinition };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.InlineDefinition = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const typography_1 = require("@leafygreen-ui/typography");
|
|
9
|
+
const emotion_1 = require("@leafygreen-ui/emotion");
|
|
10
|
+
const tooltip_1 = require("./tooltip");
|
|
11
|
+
const merge_props_1 = require("../utils/merge-props");
|
|
12
|
+
const underline = (0, emotion_1.css)({
|
|
13
|
+
backgroundRepeat: 'repeat-x',
|
|
14
|
+
backgroundPosition: 'center bottom',
|
|
15
|
+
backgroundSize: '3px 2px',
|
|
16
|
+
backgroundImage: 'radial-gradient( circle closest-side, currentColor 75%, transparent 25%)',
|
|
17
|
+
});
|
|
18
|
+
const maxWidth = (0, emotion_1.css)({
|
|
19
|
+
maxWidth: '360px',
|
|
20
|
+
});
|
|
21
|
+
const InlineDefinition = ({ children, definition, tooltipProps, ...props }) => {
|
|
22
|
+
return (react_1.default.createElement(tooltip_1.Tooltip, { justify: "middle", spacing: 5, trigger: ({ children: tooltip, ...triggerProps }) => {
|
|
23
|
+
const merged = (0, merge_props_1.mergeProps)({ className: underline }, triggerProps, props);
|
|
24
|
+
return (react_1.default.createElement("span", { ...merged },
|
|
25
|
+
children,
|
|
26
|
+
tooltip));
|
|
27
|
+
}, ...tooltipProps },
|
|
28
|
+
react_1.default.createElement(typography_1.Body, { className: maxWidth }, definition)));
|
|
29
|
+
};
|
|
30
|
+
exports.InlineDefinition = InlineDefinition;
|
|
31
|
+
//# sourceMappingURL=inline-definition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inline-definition.js","sourceRoot":"","sources":["../../src/components/inline-definition.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,0DAAiD;AACjD,oDAA6C;AAC7C,uCAAoC;AACpC,sDAAkD;AAElD,MAAM,SAAS,GAAG,IAAA,aAAG,EAAC;IACpB,gBAAgB,EAAE,UAAU;IAC5B,kBAAkB,EAAE,eAAe;IACnC,cAAc,EAAE,SAAS;IACzB,eAAe,EACb,0EAA0E;CAC7E,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,IAAA,aAAG,EAAC;IACnB,QAAQ,EAAE,OAAO;CAClB,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAOlB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,CACL,8BAAC,iBAAO,IACN,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,EAAE,EAAE;YAClD,MAAM,MAAM,GAAG,IAAA,wBAAU,EACvB,EAAE,SAAS,EAAE,SAAS,EAAE,EACxB,YAAY,EACZ,KAAK,CACN,CAAC;YACF,OAAO,CACL,2CAAU,MAAM;gBACb,QAAQ;gBACR,OAAO,CACH,CACR,CAAC;QACJ,CAAC,KACG,YAAY;QAEhB,8BAAC,iBAAI,IAAC,SAAS,EAAE,QAAQ,IAAG,UAAU,CAAQ,CACtC,CACX,CAAC;AACJ,CAAC,CAAC;AAEO,4CAAgB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
export declare const Placeholder: React.FunctionComponent<Omit<React.HTMLProps<HTMLDivElement>, 'minChar' | 'maxChar' | 'width' | 'height'> & {
|
|
3
|
+
minChar?: number;
|
|
4
|
+
maxChar?: number;
|
|
5
|
+
width?: CSSProperties['width'];
|
|
6
|
+
height?: CSSProperties['height'];
|
|
7
|
+
darkMode?: boolean;
|
|
8
|
+
}>;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
exports.Placeholder = void 0;
|
|
23
|
+
const react_1 = __importStar(require("react"));
|
|
24
|
+
const __1 = require("../");
|
|
25
|
+
const __2 = require("../");
|
|
26
|
+
const scale = 4;
|
|
27
|
+
const percent = (num) => (num * 100).toFixed(3) + '%';
|
|
28
|
+
const move = (0, __1.keyframes)({
|
|
29
|
+
from: {
|
|
30
|
+
backgroundPosition: `${percent(scale)} 0`,
|
|
31
|
+
},
|
|
32
|
+
to: {
|
|
33
|
+
backgroundPosition: '0 0',
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
const placeholder = (0, __1.css)({
|
|
37
|
+
'--gradient-start': __2.uiColors.gray.light3,
|
|
38
|
+
'--gradient-end': 'rgba(235, 241, 239, 1)',
|
|
39
|
+
alignSelf: 'center',
|
|
40
|
+
borderRadius: 3,
|
|
41
|
+
maxWidth: '80%',
|
|
42
|
+
backgroundColor: 'var(--gradient-start)',
|
|
43
|
+
backgroundImage: `linear-gradient(
|
|
44
|
+
to right,
|
|
45
|
+
var(--gradient-start) 0%,
|
|
46
|
+
var(--gradient-end) ${percent(1 / scale / 2)},
|
|
47
|
+
var(--gradient-start) ${percent(1 / scale)},
|
|
48
|
+
var(--gradient-start) 100%
|
|
49
|
+
)`,
|
|
50
|
+
backgroundSize: `${percent(scale)} 100%`,
|
|
51
|
+
backgroundPosition: '0 0',
|
|
52
|
+
animation: `${move} ${scale}s infinite linear`,
|
|
53
|
+
});
|
|
54
|
+
const placeholderDarkMode = (0, __1.css)({
|
|
55
|
+
'--gradient-start': 'rgba(38, 55, 66, 1)',
|
|
56
|
+
'--gradient-end': 'rgba(47, 64, 74, 1)',
|
|
57
|
+
});
|
|
58
|
+
function getBoundRandom(min, max) {
|
|
59
|
+
return Math.random() * (max - min) + min;
|
|
60
|
+
}
|
|
61
|
+
const Placeholder = ({ className, minChar = 5, maxChar = 15, width: propsWidth, height: propsHeight = __2.spacing[3], darkMode, ...props }) => {
|
|
62
|
+
const width = (0, react_1.useMemo)(() => {
|
|
63
|
+
return propsWidth || `${Math.round(getBoundRandom(minChar, maxChar))}ch`;
|
|
64
|
+
}, [minChar, maxChar, propsWidth]);
|
|
65
|
+
return (react_1.default.createElement("div", { ...props, role: "presentation", "data-testid": "placeholder", className: (0, __1.cx)(placeholder, className, darkMode && placeholderDarkMode), style: { width, height: propsHeight } }));
|
|
66
|
+
};
|
|
67
|
+
exports.Placeholder = Placeholder;
|
|
68
|
+
//# sourceMappingURL=placeholder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"placeholder.js","sourceRoot":"","sources":["../../src/components/placeholder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAsD;AACtD,2BAAyC;AACzC,2BAAwC;AAGxC,MAAM,KAAK,GAAG,CAAC,CAAC;AAEhB,MAAM,OAAO,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAEtE,MAAM,IAAI,GAAG,IAAA,aAAS,EAAC;IACrB,IAAI,EAAE;QACJ,kBAAkB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI;KAC1C;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,KAAK;KAC1B;CACF,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAA,OAAG,EAAC;IACtB,kBAAkB,EAAE,YAAQ,CAAC,IAAI,CAAC,MAAM;IACxC,gBAAgB,EAAE,wBAAwB;IAC1C,SAAS,EAAE,QAAQ;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,uBAAuB;IACxC,eAAe,EAAE;;;8BAGW,OAAO,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;gCACpB,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC;;MAE5C;IACJ,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO;IACxC,kBAAkB,EAAE,KAAK;IACzB,SAAS,EAAE,GAAG,IAAI,IAAI,KAAK,mBAAmB;CAC/C,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,IAAA,OAAG,EAAC;IAC9B,kBAAkB,EAAE,qBAAqB;IACzC,gBAAgB,EAAE,qBAAqB;CACxC,CAAC,CAAC;AAEH,SAAS,cAAc,CAAC,GAAW,EAAE,GAAW;IAC9C,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAC3C,CAAC;AAEM,MAAM,WAAW,GAWpB,CAAC,EACH,SAAS,EACT,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,GAAG,WAAO,CAAC,CAAC,CAAC,EAChC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,OAAO,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3E,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,0CACM,KAAK,EACT,IAAI,EAAC,cAAc,iBACP,aAAa,EACzB,SAAS,EAAE,IAAA,MAAE,EAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,IAAI,mBAAmB,CAAC,EACtE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAChC,CACR,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,WAAW,eAiCtB"}
|
|
@@ -28,7 +28,7 @@ var ResizeDirection;
|
|
|
28
28
|
ResizeDirection["RIGHT"] = "RIGHT";
|
|
29
29
|
})(ResizeDirection || (ResizeDirection = {}));
|
|
30
30
|
exports.ResizeDirection = ResizeDirection;
|
|
31
|
-
const baseResizerStyles = css_1.css({
|
|
31
|
+
const baseResizerStyles = (0, css_1.css)({
|
|
32
32
|
position: 'absolute',
|
|
33
33
|
background: 'transparent',
|
|
34
34
|
padding: 0,
|
|
@@ -55,7 +55,7 @@ const baseResizerStyles = css_1.css({
|
|
|
55
55
|
color: 'none',
|
|
56
56
|
},
|
|
57
57
|
});
|
|
58
|
-
const verticalResizerStyle = css_1.css({
|
|
58
|
+
const verticalResizerStyle = (0, css_1.css)({
|
|
59
59
|
width: '4px !important',
|
|
60
60
|
right: '-2px',
|
|
61
61
|
bottom: 0,
|
|
@@ -64,7 +64,7 @@ const verticalResizerStyle = css_1.css({
|
|
|
64
64
|
cursor: 'ew-resize',
|
|
65
65
|
},
|
|
66
66
|
});
|
|
67
|
-
const horizontalResizerStyle = css_1.css({
|
|
67
|
+
const horizontalResizerStyle = (0, css_1.css)({
|
|
68
68
|
height: '4px !important',
|
|
69
69
|
top: '-2px',
|
|
70
70
|
right: 0,
|
|
@@ -74,7 +74,7 @@ const horizontalResizerStyle = css_1.css({
|
|
|
74
74
|
},
|
|
75
75
|
});
|
|
76
76
|
function ResizeHandle({ direction, step = 10, value, minValue, maxValue, onChange, title, }) {
|
|
77
|
-
const isDragging = react_1.useRef(false);
|
|
77
|
+
const isDragging = (0, react_1.useRef)(false);
|
|
78
78
|
function boundSize(attemptedSize) {
|
|
79
79
|
return Math.min(maxValue, Math.max(minValue, attemptedSize));
|
|
80
80
|
}
|
|
@@ -86,7 +86,7 @@ function ResizeHandle({ direction, step = 10, value, minValue, maxValue, onChang
|
|
|
86
86
|
dimensionTitle = 'Height';
|
|
87
87
|
resizerStyle = horizontalResizerStyle;
|
|
88
88
|
}
|
|
89
|
-
return (react_1.default.createElement("input", { type: "range", "aria-roledescription": `${directionTitle} splitter`, "aria-label": `${dimensionTitle} of the ${title}, resize using arrow keys`, className: css_1.cx(baseResizerStyles, resizerStyle), min: minValue, max: maxValue, value: value, step: step, onChange: (event) => {
|
|
89
|
+
return (react_1.default.createElement("input", { type: "range", "aria-roledescription": `${directionTitle} splitter`, "aria-label": `${dimensionTitle} of the ${title}, resize using arrow keys`, className: (0, css_1.cx)(baseResizerStyles, resizerStyle), min: minValue, max: maxValue, value: value, step: step, onChange: (event) => {
|
|
90
90
|
if (isDragging.current) {
|
|
91
91
|
return;
|
|
92
92
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize-handle.js","sourceRoot":"","sources":["../../src/components/resize-handle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAuC;AACvC,+CAAsC;AAEtC,IAAK,eAGJ;AAHD,WAAK,eAAe;IAClB,8BAAW,CAAA;IACX,kCAAe,CAAA;AACjB,CAAC,EAHI,eAAe,KAAf,eAAe,QAGnB;AAiIsB,0CAAe;AA/HtC,MAAM,iBAAiB,GAAG,SAAG,
|
|
1
|
+
{"version":3,"file":"resize-handle.js","sourceRoot":"","sources":["../../src/components/resize-handle.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,11 +22,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
22
22
|
const react_1 = __importStar(require("react"));
|
|
23
23
|
const css_1 = require("@emotion/css");
|
|
24
24
|
const palette_1 = require("@leafygreen-ui/palette");
|
|
25
|
-
const shellLoaderSpin = css_1.keyframes `
|
|
25
|
+
const shellLoaderSpin = (0, css_1.keyframes) `
|
|
26
26
|
0% { transform: rotate(0deg); }
|
|
27
27
|
100% { transform: rotate(360deg); }
|
|
28
28
|
`;
|
|
29
|
-
const spinLoaderStyle = css_1.css `
|
|
29
|
+
const spinLoaderStyle = (0, css_1.css) `
|
|
30
30
|
border: 2px solid transparent;
|
|
31
31
|
border-top: 2px solid ${palette_1.uiColors.gray.dark3};
|
|
32
32
|
border-radius: 50%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spin-loader.js","sourceRoot":"","sources":["../../src/components/spin-loader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AACzC,sCAA8C;AAC9C,oDAAkD;AAOlD,MAAM,eAAe,GAAG,eAAS,
|
|
1
|
+
{"version":3,"file":"spin-loader.js","sourceRoot":"","sources":["../../src/components/spin-loader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AACzC,sCAA8C;AAC9C,oDAAkD;AAOlD,MAAM,eAAe,GAAG,IAAA,eAAS,EAAA;;;CAGhC,CAAC;AAEF,MAAM,eAAe,GAAG,IAAA,SAAG,EAAA;;0BAED,kBAAQ,CAAC,IAAI,CAAC,KAAK;;;;;;;eAO9B,eAAe;CAC7B,CAAC;AAEF,MAAqB,UAAW,SAAQ,iBAA0B;IAKhE,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,OAAO,CACL,uCACE,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,IAAI;aACb,GACD,CACH,CAAC;IACJ,CAAC;;AAjBH,6BAkBC;AAjBQ,uBAAY,GAAG;IACpB,IAAI,EAAE,MAAM;CACb,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import LeafyGreenTooltip from '@leafygreen-ui/tooltip';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
declare type TooltipTriggerProps = {
|
|
4
|
+
isDisabled?: boolean;
|
|
5
|
+
delay?: number;
|
|
6
|
+
triggerOn?: 'focus';
|
|
7
|
+
};
|
|
8
|
+
declare type LeafyGreenTooltipProps = React.ComponentPropsWithoutRef<typeof LeafyGreenTooltip>;
|
|
9
|
+
declare type TooltipTrigger = React.FunctionComponent;
|
|
10
|
+
declare const Tooltip: React.FunctionComponent<TooltipTriggerProps & Omit<LeafyGreenTooltipProps, 'open' | 'setOpen' | 'trigger'> & {
|
|
11
|
+
trigger: TooltipTrigger;
|
|
12
|
+
}>;
|
|
13
|
+
export { Tooltip };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
+
};
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
exports.Tooltip = void 0;
|
|
26
|
+
const tooltip_1 = require("@react-stately/tooltip");
|
|
27
|
+
const tooltip_2 = require("@react-aria/tooltip");
|
|
28
|
+
const tooltip_3 = __importDefault(require("@leafygreen-ui/tooltip"));
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
30
|
+
const merge_props_1 = require("../utils/merge-props");
|
|
31
|
+
const Tooltip = ({ isDisabled, triggerOn, delay, trigger, ...rest }) => {
|
|
32
|
+
const ref = (0, react_1.useRef)(null);
|
|
33
|
+
const tooltipState = (0, tooltip_1.useTooltipTriggerState)({
|
|
34
|
+
isDisabled,
|
|
35
|
+
trigger: triggerOn,
|
|
36
|
+
delay,
|
|
37
|
+
});
|
|
38
|
+
const { triggerProps, tooltipProps } = (0, tooltip_2.useTooltipTrigger)({ isDisabled, trigger: triggerOn }, tooltipState, ref);
|
|
39
|
+
const setOpen = (0, react_1.useCallback)((isOpen) => {
|
|
40
|
+
if (isOpen) {
|
|
41
|
+
tooltipState.open();
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
tooltipState.close();
|
|
45
|
+
}
|
|
46
|
+
}, [tooltipState]);
|
|
47
|
+
return (react_1.default.createElement(tooltip_3.default, { open: tooltipState.isOpen, setOpen: setOpen, trigger: ({ children, className }) => {
|
|
48
|
+
return trigger((0, merge_props_1.mergeProps)({ children, className }, triggerProps));
|
|
49
|
+
}, ...rest, ...tooltipProps }));
|
|
50
|
+
};
|
|
51
|
+
exports.Tooltip = Tooltip;
|
|
52
|
+
//# sourceMappingURL=tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,oDAAgE;AAChE,iDAAwD;AACxD,qEAAuD;AACvD,+CAAmD;AACnD,sDAAkD;AAoBlD,MAAM,OAAO,GAKT,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACzD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,IAAA,gCAAsB,EAAC;QAC1C,UAAU;QACV,OAAO,EAAE,SAAS;QAClB,KAAK;KACN,CAAC,CAAC;IACH,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAA,2BAAiB,EACtD,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,EAClC,YAAY,EACZ,GAAG,CACJ,CAAC;IACF,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,MAAM,EAAE,EAAE;QACT,IAAI,MAAM,EAAE;YACV,YAAY,CAAC,IAAI,EAAE,CAAC;SACrB;aAAM;YACL,YAAY,CAAC,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IACF,OAAO,CACL,8BAAC,iBAAiB,IAChB,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAgC,EAAE,EAAE;YACjE,OAAO,OAAO,CAAC,IAAA,wBAAU,EAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QACpE,CAAC,KACG,IAAI,KACJ,YAAY,GACG,CACtB,CAAC;AACJ,CAAC,CAAC;AAEO,0BAAO"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useDOMRect = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
function useDOMRect() {
|
|
6
|
+
const [rect, setRect] = (0, react_1.useState)(() => new DOMRectReadOnly());
|
|
7
|
+
const ref = (0, react_1.useRef)(null);
|
|
8
|
+
const observer = (0, react_1.useRef)(null);
|
|
9
|
+
if (observer.current === null) {
|
|
10
|
+
observer.current = new ResizeObserver((entry) => {
|
|
11
|
+
setRect(entry[0].contentRect);
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
15
|
+
var _a;
|
|
16
|
+
if (ref.current) {
|
|
17
|
+
const el = ref.current;
|
|
18
|
+
(_a = observer.current) === null || _a === void 0 ? void 0 : _a.observe(ref.current);
|
|
19
|
+
return () => {
|
|
20
|
+
var _a;
|
|
21
|
+
(_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(el);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}, []);
|
|
25
|
+
return [{ ref }, rect];
|
|
26
|
+
}
|
|
27
|
+
exports.useDOMRect = useDOMRect;
|
|
28
|
+
//# sourceMappingURL=use-dom-rect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-dom-rect.js","sourceRoot":"","sources":["../../src/hooks/use-dom-rect.ts"],"names":[],"mappings":";;;AAAA,iCAA0D;AAE1D,SAAgB,UAAU;IAIxB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAC9B,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,CAC5B,CAAC;IACF,MAAM,GAAG,GAAG,IAAA,cAAM,EAAW,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACrD,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE;QAC7B,QAAQ,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9C,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;KACJ;IACD,IAAA,uBAAe,EAAC,GAAG,EAAE;;QACnB,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;YACvB,MAAA,QAAQ,CAAC,OAAO,0CAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACvC,OAAO,GAAG,EAAE;;gBACV,MAAA,QAAQ,CAAC,OAAO,0CAAE,SAAS,CAAC,EAAE,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CAAC,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC;AAxBD,gCAwBC"}
|
|
@@ -8,6 +8,7 @@ export declare enum FocusState {
|
|
|
8
8
|
}
|
|
9
9
|
export declare function useFocusState(): [
|
|
10
10
|
React.HTMLAttributes<HTMLElement>,
|
|
11
|
-
FocusState
|
|
11
|
+
FocusState,
|
|
12
|
+
React.MutableRefObject<FocusState>
|
|
12
13
|
];
|
|
13
14
|
export declare function useHoverState(): [React.HTMLAttributes<HTMLElement>, boolean];
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useHoverState = exports.useFocusState = exports.FocusState = void 0;
|
|
4
4
|
const interactions_1 = require("@react-aria/interactions");
|
|
5
|
+
const utils_1 = require("@react-aria/utils");
|
|
5
6
|
const react_1 = require("react");
|
|
6
7
|
var FocusState;
|
|
7
8
|
(function (FocusState) {
|
|
@@ -11,44 +12,37 @@ var FocusState;
|
|
|
11
12
|
FocusState["FocusWithinVisible"] = "FocusWithinVisible";
|
|
12
13
|
FocusState["FocusWithin"] = "FocusWithin";
|
|
13
14
|
})(FocusState = exports.FocusState || (exports.FocusState = {}));
|
|
15
|
+
function getFocusState(isFocused, isFocusWithin, isFocusVisible) {
|
|
16
|
+
return isFocused && isFocusVisible
|
|
17
|
+
? FocusState.FocusVisible
|
|
18
|
+
: isFocused
|
|
19
|
+
? FocusState.Focus
|
|
20
|
+
: isFocusWithin && isFocusVisible
|
|
21
|
+
? FocusState.FocusWithinVisible
|
|
22
|
+
: isFocusWithin
|
|
23
|
+
? FocusState.FocusWithin
|
|
24
|
+
: FocusState.NoFocus;
|
|
25
|
+
}
|
|
14
26
|
function useFocusState() {
|
|
15
|
-
const
|
|
16
|
-
const [
|
|
17
|
-
const
|
|
18
|
-
const {
|
|
27
|
+
const focusStateRef = (0, react_1.useRef)(FocusState.NoFocus);
|
|
28
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
29
|
+
const [isFocusWithin, setIsFocusWithin] = (0, react_1.useState)(false);
|
|
30
|
+
const { isFocusVisible } = (0, interactions_1.useFocusVisible)();
|
|
31
|
+
const { focusWithinProps } = (0, interactions_1.useFocusWithin)({
|
|
19
32
|
onFocusWithinChange: setIsFocusWithin,
|
|
20
33
|
});
|
|
21
|
-
const { focusProps } = interactions_1.useFocus({
|
|
34
|
+
const { focusProps } = (0, interactions_1.useFocus)({
|
|
22
35
|
onFocusChange: setIsFocused,
|
|
23
36
|
});
|
|
24
|
-
const mergedProps = {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
onBlur(evt) {
|
|
31
|
-
var _a, _b;
|
|
32
|
-
(_a = focusProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(focusProps, evt);
|
|
33
|
-
(_b = focusWithinProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(focusWithinProps, evt);
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
return [
|
|
37
|
-
mergedProps,
|
|
38
|
-
isFocused && isFocusVisible
|
|
39
|
-
? FocusState.FocusVisible
|
|
40
|
-
: isFocused
|
|
41
|
-
? FocusState.Focus
|
|
42
|
-
: isFocusWithin && isFocusVisible
|
|
43
|
-
? FocusState.FocusWithinVisible
|
|
44
|
-
: isFocusWithin
|
|
45
|
-
? FocusState.FocusWithin
|
|
46
|
-
: FocusState.NoFocus,
|
|
47
|
-
];
|
|
37
|
+
const mergedProps = (0, react_1.useMemo)(() => {
|
|
38
|
+
return (0, utils_1.mergeProps)(focusProps, focusWithinProps);
|
|
39
|
+
}, [focusProps, focusWithinProps]);
|
|
40
|
+
focusStateRef.current = getFocusState(isFocused, isFocusWithin, isFocusVisible);
|
|
41
|
+
return [mergedProps, focusStateRef.current, focusStateRef];
|
|
48
42
|
}
|
|
49
43
|
exports.useFocusState = useFocusState;
|
|
50
44
|
function useHoverState() {
|
|
51
|
-
const [isHovered, setIsHovered] = react_1.useState(false);
|
|
45
|
+
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
52
46
|
const hoverProps = {
|
|
53
47
|
onMouseEnter() {
|
|
54
48
|
setIsHovered(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-hover.js","sourceRoot":"","sources":["../../src/hooks/use-focus-hover.ts"],"names":[],"mappings":";;;AAAA,2DAIkC;AAClC,
|
|
1
|
+
{"version":3,"file":"use-focus-hover.js","sourceRoot":"","sources":["../../src/hooks/use-focus-hover.ts"],"names":[],"mappings":";;;AAAA,2DAIkC;AAClC,6CAA+C;AAC/C,iCAAyD;AAEzD,IAAY,UAMX;AAND,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,2CAA6B,CAAA;IAC7B,6BAAe,CAAA;IACf,uDAAyC,CAAA;IACzC,yCAA2B,CAAA;AAC7B,CAAC,EANW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAMrB;AAED,SAAS,aAAa,CACpB,SAAkB,EAClB,aAAsB,EACtB,cAAuB;IAEvB,OAAO,SAAS,IAAI,cAAc;QAChC,CAAC,CAAC,UAAU,CAAC,YAAY;QACzB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,UAAU,CAAC,KAAK;YAClB,CAAC,CAAC,aAAa,IAAI,cAAc;gBACjC,CAAC,CAAC,UAAU,CAAC,kBAAkB;gBAC/B,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,UAAU,CAAC,WAAW;oBACxB,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;AACzB,CAAC;AAED,SAAgB,aAAa;IAK3B,MAAM,aAAa,GAAG,IAAA,cAAM,EAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,8BAAe,GAAE,CAAC;IAC7C,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,6BAAc,EAAC;QAC1C,mBAAmB,EAAE,gBAAgB;KACtC,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAQ,EAAC;QAC9B,aAAa,EAAE,YAAY;KAC5B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,OAAO,IAAA,kBAAU,EAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACnC,aAAa,CAAC,OAAO,GAAG,aAAa,CACnC,SAAS,EACT,aAAa,EACb,cAAc,CACf,CAAC;IACF,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;AAC7D,CAAC;AAxBD,sCAwBC;AAED,SAAgB,aAAa;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG;QACjB,YAAY;YACV,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;QACD,YAAY;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;KACF,CAAC;IACF,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AACjC,CAAC;AAXD,sCAWC"}
|
package/lib/index.d.ts
CHANGED
|
@@ -26,8 +26,15 @@ export { default as TextInput } from '@leafygreen-ui/text-input';
|
|
|
26
26
|
export { default as Toast, Variant as ToastVariant, } from '@leafygreen-ui/toast';
|
|
27
27
|
export { default as Toggle } from '@leafygreen-ui/toggle';
|
|
28
28
|
export { breakpoints, spacing } from '@leafygreen-ui/tokens';
|
|
29
|
-
export {
|
|
30
|
-
export { H2, H3,
|
|
29
|
+
export { Tooltip } from './components/tooltip';
|
|
30
|
+
export { H1, H2, H3, Subtitle, Body, InlineCode, InlineKeyCode, Disclaimer, Overline, Link, Label, Description, } from '@leafygreen-ui/typography';
|
|
31
31
|
export { Accordion, CancelLoader, ConfirmationModal, FileInput, SpinLoader, ResizeHandle, ResizeDirection, };
|
|
32
32
|
export { useFocusState, useHoverState, FocusState, } from './hooks/use-focus-hover';
|
|
33
|
-
export { ContentWithFallback } from './components/content-with-fallback';
|
|
33
|
+
export { ContentWithFallback, FadeInPlaceholder, } from './components/content-with-fallback';
|
|
34
|
+
export { default as emotion, flush, hydrate, cx, merge, getRegisteredStyles, injectGlobal, keyframes, css, sheet, cache, } from '@leafygreen-ui/emotion';
|
|
35
|
+
export { InlineDefinition } from './components/inline-definition';
|
|
36
|
+
import type { glyphs } from '@leafygreen-ui/icon';
|
|
37
|
+
export declare type IconGlyph = Extract<keyof typeof glyphs, string>;
|
|
38
|
+
export { SegmentedControl, SegmentedControlOption, } from '@leafygreen-ui/segmented-control';
|
|
39
|
+
export { Placeholder } from './components/placeholder';
|
|
40
|
+
export { useDOMRect } from './hooks/use-dom-rect';
|
package/lib/index.js
CHANGED
|
@@ -22,8 +22,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
22
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
23
|
};
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.
|
|
26
|
-
exports.ContentWithFallback = exports.FocusState = exports.useHoverState = exports.useFocusState = void 0;
|
|
25
|
+
exports.Accordion = exports.Description = exports.Label = exports.Link = exports.Overline = exports.Disclaimer = exports.InlineKeyCode = exports.InlineCode = exports.Body = exports.Subtitle = exports.H3 = exports.H2 = exports.H1 = exports.Tooltip = exports.spacing = exports.breakpoints = exports.Toggle = exports.ToastVariant = exports.Toast = exports.TextInput = exports.TextArea = exports.Tab = exports.Tabs = exports.SelectSize = exports.Option = exports.Select = exports.RadioBoxGroup = exports.RadioBox = exports.Portal = exports.compassUIColors = exports.uiColors = exports.Modal = exports.MenuItem = exports.MenuSeparator = exports.Menu = exports.MongoDBLogo = exports.MongoDBLogoMark = exports.AtlasLogoMark = exports.LeafyGreenProvider = exports.IconButton = exports.Icon = exports.Checkbox = exports.Card = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.BannerVariant = exports.Banner = exports.BadgeVariant = exports.Badge = void 0;
|
|
26
|
+
exports.useDOMRect = exports.Placeholder = exports.SegmentedControlOption = exports.SegmentedControl = exports.InlineDefinition = exports.cache = exports.sheet = exports.css = exports.keyframes = exports.injectGlobal = exports.getRegisteredStyles = exports.merge = exports.cx = exports.hydrate = exports.flush = exports.emotion = exports.FadeInPlaceholder = exports.ContentWithFallback = exports.FocusState = exports.useHoverState = exports.useFocusState = exports.ResizeDirection = exports.ResizeHandle = exports.SpinLoader = exports.FileInput = exports.ConfirmationModal = exports.CancelLoader = void 0;
|
|
27
27
|
const cancel_loader_1 = __importDefault(require("./components/cancel-loader"));
|
|
28
28
|
exports.CancelLoader = cancel_loader_1.default;
|
|
29
29
|
const confirmation_modal_1 = __importDefault(require("./components/confirmation-modal"));
|
|
@@ -94,13 +94,19 @@ Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () {
|
|
|
94
94
|
var tokens_1 = require("@leafygreen-ui/tokens");
|
|
95
95
|
Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return tokens_1.breakpoints; } });
|
|
96
96
|
Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
|
|
97
|
-
var tooltip_1 = require("
|
|
98
|
-
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return
|
|
97
|
+
var tooltip_1 = require("./components/tooltip");
|
|
98
|
+
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });
|
|
99
99
|
var typography_1 = require("@leafygreen-ui/typography");
|
|
100
|
+
Object.defineProperty(exports, "H1", { enumerable: true, get: function () { return typography_1.H1; } });
|
|
100
101
|
Object.defineProperty(exports, "H2", { enumerable: true, get: function () { return typography_1.H2; } });
|
|
101
102
|
Object.defineProperty(exports, "H3", { enumerable: true, get: function () { return typography_1.H3; } });
|
|
102
|
-
Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return typography_1.Link; } });
|
|
103
103
|
Object.defineProperty(exports, "Subtitle", { enumerable: true, get: function () { return typography_1.Subtitle; } });
|
|
104
|
+
Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return typography_1.Body; } });
|
|
105
|
+
Object.defineProperty(exports, "InlineCode", { enumerable: true, get: function () { return typography_1.InlineCode; } });
|
|
106
|
+
Object.defineProperty(exports, "InlineKeyCode", { enumerable: true, get: function () { return typography_1.InlineKeyCode; } });
|
|
107
|
+
Object.defineProperty(exports, "Disclaimer", { enumerable: true, get: function () { return typography_1.Disclaimer; } });
|
|
108
|
+
Object.defineProperty(exports, "Overline", { enumerable: true, get: function () { return typography_1.Overline; } });
|
|
109
|
+
Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return typography_1.Link; } });
|
|
104
110
|
Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return typography_1.Label; } });
|
|
105
111
|
Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return typography_1.Description; } });
|
|
106
112
|
var use_focus_hover_1 = require("./hooks/use-focus-hover");
|
|
@@ -109,4 +115,26 @@ Object.defineProperty(exports, "useHoverState", { enumerable: true, get: functio
|
|
|
109
115
|
Object.defineProperty(exports, "FocusState", { enumerable: true, get: function () { return use_focus_hover_1.FocusState; } });
|
|
110
116
|
var content_with_fallback_1 = require("./components/content-with-fallback");
|
|
111
117
|
Object.defineProperty(exports, "ContentWithFallback", { enumerable: true, get: function () { return content_with_fallback_1.ContentWithFallback; } });
|
|
118
|
+
Object.defineProperty(exports, "FadeInPlaceholder", { enumerable: true, get: function () { return content_with_fallback_1.FadeInPlaceholder; } });
|
|
119
|
+
var emotion_1 = require("@leafygreen-ui/emotion");
|
|
120
|
+
Object.defineProperty(exports, "emotion", { enumerable: true, get: function () { return __importDefault(emotion_1).default; } });
|
|
121
|
+
Object.defineProperty(exports, "flush", { enumerable: true, get: function () { return emotion_1.flush; } });
|
|
122
|
+
Object.defineProperty(exports, "hydrate", { enumerable: true, get: function () { return emotion_1.hydrate; } });
|
|
123
|
+
Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return emotion_1.cx; } });
|
|
124
|
+
Object.defineProperty(exports, "merge", { enumerable: true, get: function () { return emotion_1.merge; } });
|
|
125
|
+
Object.defineProperty(exports, "getRegisteredStyles", { enumerable: true, get: function () { return emotion_1.getRegisteredStyles; } });
|
|
126
|
+
Object.defineProperty(exports, "injectGlobal", { enumerable: true, get: function () { return emotion_1.injectGlobal; } });
|
|
127
|
+
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return emotion_1.keyframes; } });
|
|
128
|
+
Object.defineProperty(exports, "css", { enumerable: true, get: function () { return emotion_1.css; } });
|
|
129
|
+
Object.defineProperty(exports, "sheet", { enumerable: true, get: function () { return emotion_1.sheet; } });
|
|
130
|
+
Object.defineProperty(exports, "cache", { enumerable: true, get: function () { return emotion_1.cache; } });
|
|
131
|
+
var inline_definition_1 = require("./components/inline-definition");
|
|
132
|
+
Object.defineProperty(exports, "InlineDefinition", { enumerable: true, get: function () { return inline_definition_1.InlineDefinition; } });
|
|
133
|
+
var segmented_control_1 = require("@leafygreen-ui/segmented-control");
|
|
134
|
+
Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return segmented_control_1.SegmentedControl; } });
|
|
135
|
+
Object.defineProperty(exports, "SegmentedControlOption", { enumerable: true, get: function () { return segmented_control_1.SegmentedControlOption; } });
|
|
136
|
+
var placeholder_1 = require("./components/placeholder");
|
|
137
|
+
Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return placeholder_1.Placeholder; } });
|
|
138
|
+
var use_dom_rect_1 = require("./hooks/use-dom-rect");
|
|
139
|
+
Object.defineProperty(exports, "useDOMRect", { enumerable: true, get: function () { return use_dom_rect_1.useDOMRect; } });
|
|
112
140
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+EAAsD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.mergeProps = void 0;
|
|
4
|
+
const utils_1 = require("@react-aria/utils");
|
|
5
|
+
function mergeProps(...props) {
|
|
6
|
+
const propsWithRefs = props.filter((prop) => prop.ref);
|
|
7
|
+
return {
|
|
8
|
+
...(0, utils_1.mergeProps)(...props),
|
|
9
|
+
...(propsWithRefs.length > 0 && {
|
|
10
|
+
ref(val) {
|
|
11
|
+
propsWithRefs.forEach(({ ref }) => {
|
|
12
|
+
if (typeof ref === 'function') {
|
|
13
|
+
ref(val);
|
|
14
|
+
}
|
|
15
|
+
else if (ref && typeof ref === 'object') {
|
|
16
|
+
ref.current = val;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
},
|
|
20
|
+
}),
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
exports.mergeProps = mergeProps;
|
|
24
|
+
//# sourceMappingURL=merge-props.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"merge-props.js","sourceRoot":"","sources":["../../src/utils/merge-props.ts"],"names":[],"mappings":";;;AACA,6CAA8D;AAE9D,SAAgB,UAAU,CACxB,GAAG,KAA2B;IAE9B,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvD,OAAO;QAEL,GAAG,IAAA,kBAAW,EAAC,GAAG,KAAK,CAAC;QACxB,GAAG,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI;YAC9B,GAAG,CAAC,GAAM;gBACR,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;oBAChC,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;wBAC7B,GAAG,CAAC,GAAG,CAAC,CAAC;qBACV;yBAAM,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;wBACxC,GAAiC,CAAC,OAAO,GAAG,GAAG,CAAC;qBAClD;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;KACH,CAAC;AACJ,CAAC;AAnBD,gCAmBC"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mongodb-js/compass-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "React Components used in Compass",
|
|
5
5
|
"license": "SSPL",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"exports": {
|
|
8
|
+
"types": "./lib/index.d.ts",
|
|
8
9
|
"webpack": "./src/index.ts",
|
|
9
10
|
"require": "./lib/index.js",
|
|
10
11
|
"import": "./lib/.esm-wrapper.mjs"
|
|
@@ -40,6 +41,7 @@
|
|
|
40
41
|
"@leafygreen-ui/card": "^5.1.3",
|
|
41
42
|
"@leafygreen-ui/checkbox": "^6.0.5",
|
|
42
43
|
"@leafygreen-ui/confirmation-modal": "^2.2.1",
|
|
44
|
+
"@leafygreen-ui/emotion": "^4.0.0",
|
|
43
45
|
"@leafygreen-ui/icon": "^11.4.0",
|
|
44
46
|
"@leafygreen-ui/icon-button": "^9.1.6",
|
|
45
47
|
"@leafygreen-ui/leafygreen-provider": "^2.1.2",
|
|
@@ -49,7 +51,8 @@
|
|
|
49
51
|
"@leafygreen-ui/palette": "^3.2.2",
|
|
50
52
|
"@leafygreen-ui/portal": "^3.1.3",
|
|
51
53
|
"@leafygreen-ui/radio-box-group": "^6.1.4",
|
|
52
|
-
"@leafygreen-ui/
|
|
54
|
+
"@leafygreen-ui/segmented-control": "^0.9.1",
|
|
55
|
+
"@leafygreen-ui/select": "^3.0.8",
|
|
53
56
|
"@leafygreen-ui/tabs": "^5.1.3",
|
|
54
57
|
"@leafygreen-ui/text-area": "^4.0.3",
|
|
55
58
|
"@leafygreen-ui/text-input": "^6.0.3",
|
|
@@ -58,9 +61,11 @@
|
|
|
58
61
|
"@leafygreen-ui/tokens": "^0.5.3",
|
|
59
62
|
"@leafygreen-ui/tooltip": "^6.2.2",
|
|
60
63
|
"@leafygreen-ui/typography": "^8.0.2",
|
|
61
|
-
"@mongodb-js/compass-logging": "^0.
|
|
64
|
+
"@mongodb-js/compass-logging": "^0.6.0",
|
|
62
65
|
"@react-aria/interactions": "^3.6.0",
|
|
63
|
-
"@react-aria/
|
|
66
|
+
"@react-aria/tooltip": "^3.1.3",
|
|
67
|
+
"@react-aria/utils": "^3.9.0",
|
|
68
|
+
"@react-stately/tooltip": "^3.0.5"
|
|
64
69
|
},
|
|
65
70
|
"peerDependencies": {
|
|
66
71
|
"@emotion/css": "^11.5.0",
|
|
@@ -69,7 +74,7 @@
|
|
|
69
74
|
"devDependencies": {
|
|
70
75
|
"@emotion/css": "^11.5.0",
|
|
71
76
|
"@mongodb-js/eslint-config-compass": "^0.5.0",
|
|
72
|
-
"@mongodb-js/mocha-config-compass": "^0.
|
|
77
|
+
"@mongodb-js/mocha-config-compass": "^0.7.0",
|
|
73
78
|
"@mongodb-js/prettier-config-compass": "^0.4.0",
|
|
74
79
|
"@mongodb-js/tsconfig-compass": "^0.4.0",
|
|
75
80
|
"@testing-library/dom": "^8.11.1",
|
|
@@ -81,7 +86,6 @@
|
|
|
81
86
|
"@types/react": "^17.0.5",
|
|
82
87
|
"chai": "^4.3.4",
|
|
83
88
|
"eslint": "^7.25.0",
|
|
84
|
-
"jsdom-global": "^3.0.2",
|
|
85
89
|
"mocha": "^8.4.0",
|
|
86
90
|
"nyc": "^15.0.0",
|
|
87
91
|
"prettier": "2.3.2",
|
|
@@ -89,7 +93,6 @@
|
|
|
89
93
|
"react-dom": "^16.14.0",
|
|
90
94
|
"rimraf": "^3.0.2",
|
|
91
95
|
"sinon": "^9.0.0",
|
|
92
|
-
"ts-node": "^10.1.0",
|
|
93
96
|
"typescript": "^4.3.5"
|
|
94
97
|
},
|
|
95
98
|
"repository": {
|
|
@@ -100,5 +103,5 @@
|
|
|
100
103
|
"publishConfig": {
|
|
101
104
|
"access": "public"
|
|
102
105
|
},
|
|
103
|
-
"gitHead": "
|
|
106
|
+
"gitHead": "542e3fa07d48435b1a7acc21c96de20562b843b3"
|
|
104
107
|
}
|