@artsy/palette 34.1.0 → 34.2.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.
|
@@ -41,8 +41,12 @@ var Drawer = function Drawer(_ref) {
|
|
|
41
41
|
overflowY: "scroll",
|
|
42
42
|
anchor: anchor,
|
|
43
43
|
zIndex: zIndex,
|
|
44
|
+
transition: open ? "transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)" // easeOutExpo
|
|
45
|
+
: "transform 1s cubic-bezier(0.075, 0.820, 0.165, 1.000)" // easeOutCirc
|
|
46
|
+
,
|
|
47
|
+
|
|
44
48
|
style: {
|
|
45
|
-
transform: open ? "translateX(0)" : "translateX(".concat(anchor === "left" ? "-
|
|
49
|
+
transform: open ? "translateX(0)" : "translateX(".concat(anchor === "left" ? "-110%" : "110%", ")")
|
|
46
50
|
}
|
|
47
51
|
}, children)), /*#__PURE__*/_react.default.createElement(Overlay, {
|
|
48
52
|
backgroundColor: "black100",
|
|
@@ -62,7 +66,9 @@ var DEFAULT_DRAWER_Z_INDEX = 1;
|
|
|
62
66
|
var Content = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
63
67
|
displayName: "Drawer__Content",
|
|
64
68
|
componentId: "ixq342-0"
|
|
65
|
-
})(["position:absolute;top:0
|
|
69
|
+
})(["position:absolute;top:0;-webkit-overflow-scrolling:touch;", " ", ";"], function (props) {
|
|
70
|
+
return (0, _styledComponents.css)(["transition:", ";"], props.transition);
|
|
71
|
+
}, function (props) {
|
|
66
72
|
return (0, _styledComponents.css)(["", ""], props.anchor === "left" ? "left: 0;" : "right: 0;");
|
|
67
73
|
});
|
|
68
74
|
var Overlay = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","names":["_react","_interopRequireDefault","require","_Box","_Flex","_styledComponents","_interopRequireWildcard","_styledSystem","_reactFocusOn","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Drawer","_ref","children","_ref$anchor","anchor","_ref$zIndex","zIndex","DEFAULT_DRAWER_Z_INDEX","open","onClose","createElement","Container","style","pointerEvents","transform","Focus","onClickOutside","enabled","onEscapeKey","Content","backgroundColor","height","width","overflowX","overflowY","concat","Overlay","display","onClick","opacity","exports","displayName","styled","Box","withConfig","componentId","props","css","Flex","FocusOn"],"sources":["../../../src/elements/Drawer/Drawer.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport styled, { css } from \"styled-components\"\nimport { zIndex } from \"styled-system\"\nimport { FocusOn } from \"react-focus-on\"\n\nexport interface DrawerProps {\n open: boolean\n anchor?: \"left\" | \"right\"\n zIndex?: number\n onClose?(): void\n}\n\nexport const Drawer: FC<DrawerProps> = ({\n children,\n anchor = \"right\",\n zIndex = DEFAULT_DRAWER_Z_INDEX,\n open,\n onClose,\n}) => {\n return (\n <Container\n zIndex={zIndex}\n anchor={anchor}\n style={{\n pointerEvents: open ? \"auto\" : \"none\",\n transform: open ? \"translateX(0)\" : \"none\",\n }}\n >\n <Focus onClickOutside={onClose} enabled={open} onEscapeKey={onClose}>\n <Content\n backgroundColor=\"white100\"\n height=\"100%\"\n width={[\"100%\", \"auto\"]}\n overflowX=\"hidden\"\n overflowY=\"scroll\"\n anchor={anchor}\n zIndex={zIndex}\n style={{\n transform: open\n ? \"translateX(0)\"\n : `translateX(${anchor === \"left\" ? \"-
|
|
1
|
+
{"version":3,"file":"Drawer.js","names":["_react","_interopRequireDefault","require","_Box","_Flex","_styledComponents","_interopRequireWildcard","_styledSystem","_reactFocusOn","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Drawer","_ref","children","_ref$anchor","anchor","_ref$zIndex","zIndex","DEFAULT_DRAWER_Z_INDEX","open","onClose","createElement","Container","style","pointerEvents","transform","Focus","onClickOutside","enabled","onEscapeKey","Content","backgroundColor","height","width","overflowX","overflowY","transition","concat","Overlay","display","onClick","opacity","exports","displayName","styled","Box","withConfig","componentId","props","css","Flex","FocusOn"],"sources":["../../../src/elements/Drawer/Drawer.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport styled, { css } from \"styled-components\"\nimport { zIndex } from \"styled-system\"\nimport { FocusOn } from \"react-focus-on\"\n\nexport interface DrawerProps {\n open: boolean\n anchor?: \"left\" | \"right\"\n zIndex?: number\n onClose?(): void\n}\n\nexport const Drawer: FC<DrawerProps> = ({\n children,\n anchor = \"right\",\n zIndex = DEFAULT_DRAWER_Z_INDEX,\n open,\n onClose,\n}) => {\n return (\n <Container\n zIndex={zIndex}\n anchor={anchor}\n style={{\n pointerEvents: open ? \"auto\" : \"none\",\n transform: open ? \"translateX(0)\" : \"none\",\n }}\n >\n <Focus onClickOutside={onClose} enabled={open} onEscapeKey={onClose}>\n <Content\n backgroundColor=\"white100\"\n height=\"100%\"\n width={[\"100%\", \"auto\"]}\n overflowX=\"hidden\"\n overflowY=\"scroll\"\n anchor={anchor}\n zIndex={zIndex}\n transition={\n open\n ? \"transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)\" // easeOutExpo\n : \"transform 1s cubic-bezier(0.075, 0.820, 0.165, 1.000)\" // easeOutCirc\n }\n style={{\n transform: open\n ? \"translateX(0)\"\n : `translateX(${anchor === \"left\" ? \"-110%\" : \"110%\"})`,\n }}\n >\n {children}\n </Content>\n </Focus>\n\n <Overlay\n backgroundColor=\"black100\"\n height=\"100%\"\n display={[\"none\", \"flex\"]}\n onClick={onClose}\n data-testid=\"drawer-overlay\"\n width=\"inherit\"\n style={{\n opacity: open ? \"0.5\" : \"0\",\n }}\n />\n </Container>\n )\n}\n\nconst DEFAULT_DRAWER_Z_INDEX = 1\n\nconst Content = styled(Box)<\n Pick<DrawerProps, \"anchor\"> & { transition: string }\n>`\n position: absolute;\n top: 0;\n -webkit-overflow-scrolling: touch;\n\n ${(props) => css`\n transition: ${props.transition};\n `}\n\n ${(props) => css`\n ${props.anchor === \"left\" ? \"left: 0;\" : \"right: 0;\"}\n `};\n`\n\nconst Overlay = styled(Box)`\n transition: opacity 150ms linear 50ms;\n`\n\nconst Container = styled(Flex)<Pick<DrawerProps, \"anchor\">>`\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ${zIndex}\n position: fixed;\n\n ${(props) => {\n return css`\n flex-direction: ${props.anchor === \"left\" ? \"row\" : \"row-reverse\"};\n `\n }}\n`\n\nconst Focus = styled(FocusOn)`\n height: 100%;\n align-items: center;\n justify-content: center;\n`\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "34.
|
|
3
|
+
"version": "34.2.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -182,5 +182,5 @@
|
|
|
182
182
|
"url": "http://localhost"
|
|
183
183
|
}
|
|
184
184
|
},
|
|
185
|
-
"gitHead": "
|
|
185
|
+
"gitHead": "47657416fe85ec5fe33baec9b331232960d6ce45"
|
|
186
186
|
}
|