@toptal/picasso 17.1.1 → 17.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/Container/Container.d.ts +1 -1
- package/List/styles.js +2 -1
- package/List/styles.js.map +1 -1
- package/Modal/Modal.js +2 -1
- package/Modal/Modal.js.map +1 -1
- package/Modal/ModalContext.d.ts +2 -0
- package/Modal/ModalContext.js +3 -0
- package/Modal/ModalContext.js.map +1 -0
- package/Popper/Popper.d.ts +2 -1
- package/Popper/Popper.js +18 -4
- package/Popper/Popper.js.map +1 -1
- package/Select/hooks/use-select-props/use-select-keydown-handler/use-select-keydown-handler.js +9 -9
- package/Select/hooks/use-select-props/use-select-keydown-handler/use-select-keydown-handler.js.map +1 -1
- package/TreeView/PointNode/TreeNodeAvatar.d.ts +2 -0
- package/TreeView/PointNode/TreeNodeAvatar.js +16 -4
- package/TreeView/PointNode/TreeNodeAvatar.js.map +1 -1
- package/package.json +3 -3
package/Container/Container.d.ts
CHANGED
|
@@ -48,4 +48,4 @@ export declare const Container: import("../utils/forward-ref").Component<(<V ext
|
|
|
48
48
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
49
49
|
}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null), unknown>;
|
|
50
50
|
export default Container;
|
|
51
|
-
export { VariantType };
|
|
51
|
+
export type { VariantType };
|
package/List/styles.js
CHANGED
package/List/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KAC5B;CACF,CAAC,CAAA"}
|
package/Modal/Modal.js
CHANGED
|
@@ -22,6 +22,7 @@ import ModalContent from '../ModalContent';
|
|
|
22
22
|
import ModalActions from '../ModalActions';
|
|
23
23
|
import Button from '../Button';
|
|
24
24
|
import styles from './styles';
|
|
25
|
+
import ModalContext from './ModalContext';
|
|
25
26
|
const useStyles = makeStyles(styles, {
|
|
26
27
|
name: 'PicassoModal'
|
|
27
28
|
});
|
|
@@ -119,7 +120,7 @@ export const Modal = forwardRef(function Modal(props, ref) {
|
|
|
119
120
|
})
|
|
120
121
|
}, className: className, style: style, fullScreen: isSmall, container: container || picassoRootContainer, PaperProps: Object.assign(Object.assign({}, paperProps), { elevation: 2 }), hideBackdrop: hideBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, onEnter: onOpen, open: open, transitionDuration: transitionDuration, maxWidth: false, disableEnforceFocus // we need our own mechanism to keep focus inside the Modals
|
|
121
122
|
: true, disableBackdropClick: true, TransitionProps: transitionProps }),
|
|
122
|
-
children,
|
|
123
|
+
React.createElement(ModalContext.Provider, { value: true }, children),
|
|
123
124
|
onClose && (React.createElement(Button.Circular, { variant: 'flat', className: classes.closeButton, onClick: onClose, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.closeButton },
|
|
124
125
|
React.createElement(CloseMinor16, null)))));
|
|
125
126
|
});
|
package/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EAGV,SAAS,EACT,MAAM,EACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAE7C,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,MAAM,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../src/Modal/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,eAAe,aAAa,CAAU,KAAK,CAAC,CAAA"}
|
package/Popper/Popper.d.ts
CHANGED
|
@@ -30,7 +30,7 @@ export interface Props extends BaseProps {
|
|
|
30
30
|
/** Take full window width on small and medium screens */
|
|
31
31
|
enableCompactMode?: boolean;
|
|
32
32
|
}
|
|
33
|
-
export declare const getPopperOptions: (popperOptions: PopperOptions) => {
|
|
33
|
+
export declare const getPopperOptions: (popperOptions: PopperOptions, isInsideModal?: boolean) => {
|
|
34
34
|
modifiers: {
|
|
35
35
|
flip: {
|
|
36
36
|
order?: number | undefined;
|
|
@@ -53,6 +53,7 @@ export declare const getPopperOptions: (popperOptions: PopperOptions) => {
|
|
|
53
53
|
};
|
|
54
54
|
shift?: PopperJs.BaseModifier | undefined;
|
|
55
55
|
offset?: (PopperJs.BaseModifier & {
|
|
56
|
+
/** Popper width */
|
|
56
57
|
offset?: string | number | undefined;
|
|
57
58
|
}) | undefined;
|
|
58
59
|
keepTogether?: PopperJs.BaseModifier | undefined;
|
package/Popper/Popper.js
CHANGED
|
@@ -9,18 +9,31 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React, { forwardRef, useLayoutEffect } from 'react';
|
|
12
|
+
import React, { forwardRef, useContext, useLayoutEffect } from 'react';
|
|
13
13
|
import cx from 'classnames';
|
|
14
14
|
import MUIPopper from '@material-ui/core/Popper';
|
|
15
15
|
import { makeStyles } from '@material-ui/core/styles';
|
|
16
16
|
import { usePicassoRoot, useBreakpoint } from '@toptal/picasso-provider';
|
|
17
|
+
import ModalContext from '@toptal/picasso/Modal/ModalContext';
|
|
17
18
|
import useWidthOf from '../utils/use-width-of';
|
|
18
19
|
import styles from './styles';
|
|
19
20
|
const useStyles = makeStyles(styles, { name: 'PicassoPopper' });
|
|
20
21
|
const getAnchorEl = (anchorEl) => (typeof anchorEl === 'function' ? anchorEl() : anchorEl);
|
|
21
|
-
|
|
22
|
+
const getPreventOverflowOptions = (isInsideModal) => {
|
|
23
|
+
if (isInsideModal) {
|
|
24
|
+
return {
|
|
25
|
+
boundariesElement: 'scrollParent',
|
|
26
|
+
padding: 0
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
return {
|
|
30
|
+
boundariesElement: 'viewport',
|
|
31
|
+
padding: 5
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export const getPopperOptions = (popperOptions, isInsideModal = false) => {
|
|
22
35
|
var _a, _b;
|
|
23
|
-
return (Object.assign(Object.assign({}, popperOptions), { modifiers: Object.assign(Object.assign({}, popperOptions.modifiers), { flip: Object.assign({ enabled: true }, (_a = popperOptions.modifiers) === null || _a === void 0 ? void 0 : _a.flip), preventOverflow: Object.assign({ enabled: true
|
|
36
|
+
return (Object.assign(Object.assign({}, popperOptions), { modifiers: Object.assign(Object.assign({}, popperOptions.modifiers), { flip: Object.assign({ enabled: true }, (_a = popperOptions.modifiers) === null || _a === void 0 ? void 0 : _a.flip), preventOverflow: Object.assign(Object.assign({ enabled: true }, getPreventOverflowOptions(isInsideModal)), (_b = popperOptions.modifiers) === null || _b === void 0 ? void 0 : _b.preventOverflow) }) }));
|
|
24
37
|
};
|
|
25
38
|
const useWidthStyle = ({ anchorEl, autoWidth, width }) => {
|
|
26
39
|
const resolvedAnchorEl = getAnchorEl(anchorEl);
|
|
@@ -36,6 +49,7 @@ const useWidthStyle = ({ anchorEl, autoWidth, width }) => {
|
|
|
36
49
|
export const Popper = forwardRef(function Popper(props, ref) {
|
|
37
50
|
const { children, open, anchorEl, className, container, popperOptions = {}, autoWidth, width, enableCompactMode, disablePortal, style } = props, rest = __rest(props, ["children", "open", "anchorEl", "className", "container", "popperOptions", "autoWidth", "width", "enableCompactMode", "disablePortal", "style"]);
|
|
38
51
|
const picassoRootContainer = usePicassoRoot();
|
|
52
|
+
const isInsideModal = useContext(ModalContext);
|
|
39
53
|
const classes = useStyles();
|
|
40
54
|
const isCompactLayoutResolution = useBreakpoint(['small', 'medium']);
|
|
41
55
|
const isCompactLayout = enableCompactMode && isCompactLayoutResolution;
|
|
@@ -50,7 +64,7 @@ export const Popper = forwardRef(function Popper(props, ref) {
|
|
|
50
64
|
};
|
|
51
65
|
}
|
|
52
66
|
}, [isCompactLayout, open]);
|
|
53
|
-
const memoizedPopperOptions = React.useMemo(() => getPopperOptions(popperOptions), [popperOptions]);
|
|
67
|
+
const memoizedPopperOptions = React.useMemo(() => getPopperOptions(popperOptions, isInsideModal), [popperOptions, isInsideModal]);
|
|
54
68
|
return (React.createElement(MUIPopper, Object.assign({ open: open, container: container || picassoRootContainer, anchorEl: anchorEl, className: cx(classes.root, className), popperRef: ref, popperOptions: memoizedPopperOptions, disablePortal: disablePortal, style: Object.assign(Object.assign({}, style), anchorElWidthStyle) }, rest), children));
|
|
55
69
|
});
|
|
56
70
|
Popper.defaultProps = {
|
package/Popper/Popper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.js","sourceRoot":"","sources":["../../src/Popper/Popper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Popper.js","sourceRoot":"","sources":["../../src/Popper/Popper.tsx"],"names":[],"mappings":"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"}
|
package/Select/hooks/use-select-props/use-select-keydown-handler/use-select-keydown-handler.js
CHANGED
|
@@ -11,16 +11,9 @@ useCallback(
|
|
|
11
11
|
// and don't need any manual operations for keydown event
|
|
12
12
|
return;
|
|
13
13
|
}
|
|
14
|
-
const isValidInputValue = Boolean(event.key.match(/^[A-z\d]$/)) || event.key === 'Backspace';
|
|
15
|
-
if (isValidInputValue) {
|
|
16
|
-
focusRef(searchInputRef);
|
|
17
|
-
}
|
|
18
14
|
const key = normalizeArrowKey(event);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
focusRef(searchInputRef);
|
|
22
|
-
}
|
|
23
|
-
else if (key === 'ArrowUp' || key === 'ArrowDown') {
|
|
15
|
+
const isCharacterKey = key.length === 1;
|
|
16
|
+
if (key === 'ArrowUp' || key === 'ArrowDown') {
|
|
24
17
|
handleArrowsKeyDown(key, event);
|
|
25
18
|
}
|
|
26
19
|
else if (key === 'Enter' || key === ' ') {
|
|
@@ -29,6 +22,13 @@ useCallback(
|
|
|
29
22
|
else if (key === 'Escape') {
|
|
30
23
|
handleEscapeKeyDown(event);
|
|
31
24
|
}
|
|
25
|
+
else if (key === 'Tab' && isOpen && showSearch) {
|
|
26
|
+
event.preventDefault();
|
|
27
|
+
focusRef(searchInputRef);
|
|
28
|
+
}
|
|
29
|
+
else if (isCharacterKey || key === 'Backspace') {
|
|
30
|
+
focusRef(searchInputRef);
|
|
31
|
+
}
|
|
32
32
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
33
33
|
}, [
|
|
34
34
|
native,
|
package/Select/hooks/use-select-props/use-select-keydown-handler/use-select-keydown-handler.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-select-keydown-handler.js","sourceRoot":"","sources":["../../../../../src/Select/hooks/use-select-props/use-select-keydown-handler/use-select-keydown-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AAGlD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAK5D,MAAM,uBAAuB,GAAG,CAG9B,EACA,WAAW,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,EAClC,cAAc,EACd,WAAW,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EACnC,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EAKpB,EAAE,EAAE;AACH,sCAAsC;AACtC,WAAW;AACT,sCAAsC;AACtC,CAAC,KAAsC,EAAE,EAAE;IACzC,IAAI,MAAM,EAAE;QACV,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,CAAC,CAAA;QAElB,wEAAwE;QACxE,yDAAyD;QACzD,OAAM;KACP;IAED,MAAM,
|
|
1
|
+
{"version":3,"file":"use-select-keydown-handler.js","sourceRoot":"","sources":["../../../../../src/Select/hooks/use-select-props/use-select-keydown-handler/use-select-keydown-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AAGlD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAK5D,MAAM,uBAAuB,GAAG,CAG9B,EACA,WAAW,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,EAClC,cAAc,EACd,WAAW,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EACnC,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EAKpB,EAAE,EAAE;AACH,sCAAsC;AACtC,WAAW;AACT,sCAAsC;AACtC,CAAC,KAAsC,EAAE,EAAE;IACzC,IAAI,MAAM,EAAE;QACV,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,CAAC,CAAA;QAElB,wEAAwE;QACxE,yDAAyD;QACzD,OAAM;KACP;IAED,MAAM,GAAG,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;IACpC,MAAM,cAAc,GAAG,GAAG,CAAC,MAAM,KAAK,CAAC,CAAA;IAEvC,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,WAAW,EAAE;QAC5C,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;KAChC;SAAM,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,EAAE;QACzC,yBAAyB,CAAC,KAAK,CAAC,CAAA;KACjC;SAAM,IAAI,GAAG,KAAK,QAAQ,EAAE;QAC3B,mBAAmB,CAAC,KAAK,CAAC,CAAA;KAC3B;SAAM,IAAI,GAAG,KAAK,KAAK,IAAI,MAAM,IAAI,UAAU,EAAE;QAChD,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,QAAQ,CAAC,cAAc,CAAC,CAAA;KACzB;SAAM,IAAI,cAAc,IAAI,GAAG,KAAK,WAAW,EAAE;QAChD,QAAQ,CAAC,cAAc,CAAC,CAAA;KACzB;IAED,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,CAAC,CAAA;AACpB,CAAC,EACD;IACE,MAAM;IACN,SAAS;IACT,cAAc;IACd,MAAM;IACN,UAAU;IACV,mBAAmB;IACnB,yBAAyB;IACzB,mBAAmB;CACpB,CACF,CAAA;AAEH,eAAe,uBAAuB,CAAA"}
|
|
@@ -7,5 +7,7 @@ export interface Props extends StandardProps {
|
|
|
7
7
|
src?: string;
|
|
8
8
|
/** A avatar can have different sizes */
|
|
9
9
|
size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
10
|
+
/** Controls how image fits in the container */
|
|
11
|
+
objectFit?: 'cover' | 'contain';
|
|
10
12
|
}
|
|
11
13
|
export declare const TreeNodeAvatar: FC<Props>;
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import React from 'react';
|
|
2
13
|
import { makeStyles } from '@material-ui/core/styles';
|
|
3
14
|
import getNameInitials from '@toptal/picasso/utils/get-name-initials';
|
|
@@ -24,18 +35,19 @@ const sizeValues = {
|
|
|
24
35
|
};
|
|
25
36
|
export const TreeNodeAvatar = props => {
|
|
26
37
|
const classes = useStyles();
|
|
27
|
-
const { name, src, size = 'xxsmall' } = props;
|
|
38
|
+
const { name, src, size = 'xxsmall', objectFit = 'contain' } = props, rest = __rest(props, ["name", "src", "size", "objectFit"]);
|
|
28
39
|
const sizeValue = sizeValues[size];
|
|
29
|
-
return (React.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: '0 0 40 40' },
|
|
40
|
+
return (React.createElement("svg", Object.assign({ width: sizeValue, height: sizeValue, viewBox: '0 0 40 40' }, rest),
|
|
30
41
|
React.createElement("g", null,
|
|
31
|
-
src && (React.createElement("image", { href: src, x: '0', y: '0', height: '40', width: '40', mask: 'url(#shape)' })),
|
|
42
|
+
src && (React.createElement("image", { href: src, x: '0', y: '0', height: '40', width: '40', mask: 'url(#shape)', preserveAspectRatio: objectFit === 'cover' ? 'xMidYMid slice' : undefined })),
|
|
32
43
|
renderInitials({ classes, name, src })),
|
|
33
44
|
React.createElement("mask", { id: 'shape' },
|
|
34
45
|
React.createElement("g", { fill: 'white' },
|
|
35
46
|
React.createElement("polygon", { points: '0,0 40,0 40,40 8,40 0,32' })))));
|
|
36
47
|
};
|
|
37
48
|
TreeNodeAvatar.defaultProps = {
|
|
38
|
-
size: 'xxsmall'
|
|
49
|
+
size: 'xxsmall',
|
|
50
|
+
objectFit: 'contain'
|
|
39
51
|
};
|
|
40
52
|
TreeNodeAvatar.displayName = 'TreeNodeAvatar';
|
|
41
53
|
//# sourceMappingURL=TreeNodeAvatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeNodeAvatar.js","sourceRoot":"","sources":["../../../src/TreeView/PointNode/TreeNodeAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,eAAe,MAAM,yCAAyC,CAAA;AAGrE,OAAO,MAAM,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"TreeNodeAvatar.js","sourceRoot":"","sources":["../../../src/TreeView/PointNode/TreeNodeAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,eAAe,MAAM,yCAAyC,CAAA;AAGrE,OAAO,MAAM,MAAM,UAAU,CAAA;AAa7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,uBAAuB;CAC9B,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,EAAE,EAAE;IAChE,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,2BAAG,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK;YAC7C,8BAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CACzC;QACJ,8BAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IAC3C,QAAQ,CACJ,CACL,CACL,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAc,KAAK,CAAC,EAAE;IAC/C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvE,oCAA+D,CAAQ,CAAA;IAC7E,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IAElC,OAAO,CACL,2CAAK,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAC,WAAW,IAAK,IAAI;QACpE;YACG,GAAG,IAAI,CACN,+BACE,IAAI,EAAE,GAAG,EACT,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,IAAI,EAAC,aAAa,EAClB,mBAAmB,EACjB,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,GAEtD,CACH;YACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CACrC;QACJ,8BAAM,EAAE,EAAC,OAAO;YACd,2BAAG,IAAI,EAAC,OAAO;gBACb,iCAAS,MAAM,EAAC,0BAA0B,GAAG,CAC3C,CACC,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,cAAc,CAAC,YAAY,GAAG;IAC5B,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.3.0",
|
|
4
4
|
"description": "Toptal UI components library",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"react-helmet": "6.1.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@toptal/picasso-provider": "0.
|
|
34
|
-
"@toptal/picasso-shared": "^7.
|
|
33
|
+
"@toptal/picasso-provider": "^0.4.0",
|
|
34
|
+
"@toptal/picasso-shared": "^7.2.0",
|
|
35
35
|
"ap-style-title-case": "^1.1.2",
|
|
36
36
|
"classnames": "^2.3.1",
|
|
37
37
|
"d3": "^6.6.2",
|