@artsy/palette 24.3.1 → 24.4.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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
# v24.4.0 (Thu Oct 13 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- chore: forward box props to `Popover` component [#1210](https://github.com/artsy/palette/pull/1210) ([@dimatretyak](https://github.com/dimatretyak))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- chore: foward box props for Popover ([@dimatretyak](https://github.com/dimatretyak))
|
|
10
|
+
|
|
11
|
+
#### Authors: 1
|
|
12
|
+
|
|
13
|
+
- Dima Tretyak ([@dimatretyak](https://github.com/dimatretyak))
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
1
17
|
# v24.3.1 (Mon Oct 03 2022)
|
|
2
18
|
|
|
3
19
|
#### 🐛 Bug Fix
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Position } from "../../utils";
|
|
3
|
+
import { BoxProps } from "../Box";
|
|
3
4
|
export interface PopoverActions {
|
|
4
5
|
/** Call to show popover */
|
|
5
6
|
onVisible(): void;
|
|
@@ -8,7 +9,7 @@ export interface PopoverActions {
|
|
|
8
9
|
/** Pass ref to element you want the popover to be anchored to */
|
|
9
10
|
anchorRef: React.MutableRefObject<HTMLElement>;
|
|
10
11
|
}
|
|
11
|
-
export interface PopoverProps {
|
|
12
|
+
export interface PopoverProps extends BoxProps {
|
|
12
13
|
title?: React.ReactNode;
|
|
13
14
|
placement?: Position;
|
|
14
15
|
/** Intially visible by default? */
|
|
@@ -31,12 +31,16 @@ var _Spacer = require("../Spacer");
|
|
|
31
31
|
|
|
32
32
|
var _Text = require("../Text");
|
|
33
33
|
|
|
34
|
+
var _excluded = ["title", "placement", "visible", "children", "popover"];
|
|
35
|
+
|
|
34
36
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
37
|
|
|
36
38
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
39
|
|
|
38
40
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
41
|
|
|
42
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
43
|
+
|
|
40
44
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
41
45
|
|
|
42
46
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -49,6 +53,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
49
53
|
|
|
50
54
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
51
55
|
|
|
56
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
57
|
+
|
|
58
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
59
|
+
|
|
52
60
|
/**
|
|
53
61
|
* A `Popover` is a small modal-type element which is anchored, and can be
|
|
54
62
|
* positioned relative to, another element.
|
|
@@ -60,7 +68,8 @@ var Popover = function Popover(_ref) {
|
|
|
60
68
|
_ref$visible = _ref.visible,
|
|
61
69
|
_visible = _ref$visible === void 0 ? false : _ref$visible,
|
|
62
70
|
children = _ref.children,
|
|
63
|
-
popover = _ref.popover
|
|
71
|
+
popover = _ref.popover,
|
|
72
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
64
73
|
|
|
65
74
|
var _useState = (0, _react.useState)(false),
|
|
66
75
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -118,14 +127,14 @@ var Popover = function Popover(_ref) {
|
|
|
118
127
|
anchorRef: anchorRef,
|
|
119
128
|
onVisible: onVisible,
|
|
120
129
|
onHide: onHide
|
|
121
|
-
}), visible && /*#__PURE__*/_react.default.createElement(Tip, {
|
|
130
|
+
}), visible && /*#__PURE__*/_react.default.createElement(Tip, _extends({
|
|
122
131
|
tabIndex: 0,
|
|
123
132
|
ref: tooltipRef,
|
|
124
133
|
zIndex: 1,
|
|
125
134
|
display: "inline-block",
|
|
126
135
|
bg: "white100",
|
|
127
136
|
p: 2
|
|
128
|
-
}, title && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
|
|
137
|
+
}, rest), title && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
|
|
129
138
|
alignItems: "center",
|
|
130
139
|
flex: 1,
|
|
131
140
|
justifyContent: "space-between"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Popover/Popover.tsx"],"names":["Popover","title","placement","visible","_visible","children","popover","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleKeydown","event","key","document","addEventListener","removeEventListener","position","offset","active","ref","onClickOutside","when","type","Tip","Box","DROP_SHADOW"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Popover/Popover.tsx"],"names":["Popover","title","placement","visible","_visible","children","popover","rest","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleKeydown","event","key","document","addEventListener","removeEventListener","position","offset","active","ref","onClickOutside","when","type","Tip","Box","DROP_SHADOW"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;AACA;AACA;AACA;AACO,IAAMA,OAA+B,GAAG,SAAlCA,OAAkC,OAOzC;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,4BALJC,SAKI;AAAA,MALJA,SAKI,+BALQ,KAKR;AAAA,0BAJJC,OAII;AAAA,MAJKC,QAIL,6BAJgB,KAIhB;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOJ,OAAP;AAAA,MAAgBK,UAAhB,iBADI,CAGJ;;;AACA,wBAAU,YAAM;AACdA,IAAAA,UAAU,CAACJ,QAAD,CAAV;AACD,GAFD,EAEG,CAACA,QAAD,CAFH,EAJI,CAQJ;;AACA,wCAAgB,YAAM;AACpB,QAAID,OAAO,IAAIM,UAAU,CAACC,OAA1B,EAAmC;AACjCD,MAAAA,UAAU,CAACC,OAAX,CAAmBC,KAAnB;AACA;AACD;;AAED,QAAI,CAACC,SAAS,CAACF,OAAf,EAAwB;AACxBE,IAAAA,SAAS,CAACF,OAAV,CAAkBC,KAAlB;AACD,GARD,EAQG,CAACR,OAAD,CARH;AAUA,MAAMU,SAAS,GAAG,wBAAY,YAAM;AAClCL,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAFiB,EAEf,EAFe,CAAlB;AAIA,MAAMM,MAAM,GAAG,wBAAY,YAAM;AAC/BN,IAAAA,UAAU,CAAC,KAAD,CAAV;AACD,GAFc,EAEZ,EAFY,CAAf;AAIA,wBAAU,YAAM;AACd,QAAMO,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA0B;AAC9C,UAAIA,KAAK,CAACC,GAAN,KAAc,QAAlB,EAA4B;AAC1BH,QAAAA,MAAM;AACP;AACF,KAJD;;AAMAI,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,aAArC;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,aAAxC;AACD,KAFD;AAGD,GAZD,EAYG,CAACD,MAAD,CAZH;;AAcA,qBAAkC,wBAAY;AAC5CO,IAAAA,QAAQ,EAAEnB,SADkC;AAE5CoB,IAAAA,MAAM,EAAE,EAFoC;AAG5CC,IAAAA,MAAM,EAAEpB;AAHoC,GAAZ,CAAlC;AAAA,MAAQS,SAAR,gBAAQA,SAAR;AAAA,MAAmBH,UAAnB,gBAAmBA,UAAnB;;AAMA,8BAAgB;AACde,IAAAA,GAAG,EAAEf,UADS;AAEdgB,IAAAA,cAAc,EAAEX,MAFF;AAGdY,IAAAA,IAAI,EAAEvB,OAHQ;AAIdwB,IAAAA,IAAI,EAAE;AAJQ,GAAhB;AAOA,sBACE,4DACGtB,QAAQ,CAAC;AAAEO,IAAAA,SAAS,EAAEA,SAAb;AAA+BC,IAAAA,SAAS,EAATA,SAA/B;AAA0CC,IAAAA,MAAM,EAANA;AAA1C,GAAD,CADX,EAGGX,OAAO,iBACN,6BAAC,GAAD;AACE,IAAA,QAAQ,EAAE,CADZ;AAEE,IAAA,GAAG,EAAEM,UAFP;AAGE,IAAA,MAAM,EAAE,CAHV;AAIE,IAAA,OAAO,EAAC,cAJV;AAKE,IAAA,EAAE,EAAC,UALL;AAME,IAAA,CAAC,EAAE;AANL,KAOMF,IAPN,GASGN,KAAK,iBACJ,yEACE,6BAAC,UAAD;AAAM,IAAA,UAAU,EAAC,QAAjB;AAA0B,IAAA,IAAI,EAAE,CAAhC;AAAmC,IAAA,cAAc,EAAC;AAAlD,KACG,oBAAOA,KAAP,iBACC,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,UAAU,EAAE;AAAvC,KACGA,KADH,CADD,GAKCA,KANJ,eASE,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IATF,CADF,eAaE,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IAbF,CAVJ,eA2BE,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,KAAK,EAAE,CAFT;AAGE,IAAA,GAAG,EAAE,CAHP;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,IAAA,EAAE,EAAE,GANN;AAOE,IAAA,OAAO,EAAEa,MAPX;AAQE,kBAAW;AARb,kBAUE,6BAAC,eAAD;AAAW,IAAA,IAAI,EAAC,UAAhB;AAA2B,IAAA,OAAO,EAAC;AAAnC,IAVF,CA3BF,EAwCG,CAACb,KAAD,iBAAU,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IAxCb,EA0CGK,OA1CH,CAJJ,CADF;AAoDD,CAjHM;;;AAmHP,IAAMsB,GAAG,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,oGAKOC,oBALP,CAAT","sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { isText } from \"../../helpers/isText\"\nimport { CloseIcon } from \"../../svgs\"\nimport { Position, useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\n\nexport interface PopoverActions {\n /** Call to show popover */\n onVisible(): void\n /** Call to hide popover */\n onHide(): void\n /** Pass ref to element you want the popover to be anchored to */\n anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n title?: React.ReactNode\n placement?: Position\n /** Intially visible by default? */\n visible?: boolean\n popover: React.ReactNode\n children: ({ anchorRef, onVisible, onHide }: PopoverActions) => JSX.Element\n}\n\n/**\n * A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover: React.FC<PopoverProps> = ({\n title,\n placement = \"top\",\n visible: _visible = false,\n children,\n popover,\n ...rest\n}) => {\n const [visible, setVisible] = useState(false)\n\n // If prop updates/set initial visibility.\n useEffect(() => {\n setVisible(_visible)\n }, [_visible])\n\n // Yields focus back and forth between popover and anchor\n useUpdateEffect(() => {\n if (visible && tooltipRef.current) {\n tooltipRef.current.focus()\n return\n }\n\n if (!anchorRef.current) return\n anchorRef.current.focus()\n }, [visible])\n\n const onVisible = useCallback(() => {\n setVisible(true)\n }, [])\n\n const onHide = useCallback(() => {\n setVisible(false)\n }, [])\n\n useEffect(() => {\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onHide()\n }\n }\n\n document.addEventListener(\"keydown\", handleKeydown)\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown)\n }\n }, [onHide])\n\n const { anchorRef, tooltipRef } = usePosition({\n position: placement,\n offset: 10,\n active: visible,\n })\n\n useClickOutside({\n ref: tooltipRef,\n onClickOutside: onHide,\n when: visible,\n type: \"click\",\n })\n\n return (\n <>\n {children({ anchorRef: anchorRef as any, onVisible, onHide })}\n\n {visible && (\n <Tip\n tabIndex={0}\n ref={tooltipRef as any}\n zIndex={1}\n display=\"inline-block\"\n bg=\"white100\"\n p={2}\n {...rest}\n >\n {title && (\n <>\n <Flex alignItems=\"center\" flex={1} justifyContent=\"space-between\">\n {isText(title) ? (\n <Text variant=\"lg-display\" lineHeight={1}>\n {title}\n </Text>\n ) : (\n title\n )}\n\n <Spacer ml={4} />\n </Flex>\n\n <Spacer mt={0.5} />\n </>\n )}\n\n <Clickable\n position=\"absolute\"\n right={0}\n top={0}\n pt={2}\n px={1}\n mx={0.5}\n onClick={onHide}\n aria-label=\"Close\"\n >\n <CloseIcon fill=\"black100\" display=\"block\" />\n </Clickable>\n\n {!title && <Spacer mt={2} />}\n\n {popover}\n </Tip>\n )}\n </>\n )\n}\n\nconst Tip = styled(Box)`\n position: fixed;\n z-index: 1;\n text-align: left;\n transition: opacity 250ms ease-out;\n box-shadow: ${DROP_SHADOW};\n`\n"],"file":"Popover.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.4.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"<rootDir>/www/"
|
|
177
177
|
]
|
|
178
178
|
},
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "b62a31462fdb7bcd6461a001e4860d3d0ad554b2"
|
|
180
180
|
}
|