@artsy/palette 19.0.0 → 19.1.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 +45 -0
- package/dist/elements/ModalDialog/ModalDialog.js +9 -3
- package/dist/elements/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/elements/ModalDialog/ModalDialog.story.js +3 -0
- package/dist/elements/ModalDialog/ModalDialog.story.js.map +1 -1
- package/dist/elements/Pill/Pill.d.ts +1 -1
- package/dist/elements/Pill/Pill.js +1 -2
- package/dist/elements/Pill/Pill.js.map +1 -1
- package/dist/elements/Popover/Popover.js +7 -10
- package/dist/elements/Popover/Popover.js.map +1 -1
- package/dist/utils/useClickOutside.js +11 -10
- package/dist/utils/useClickOutside.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,48 @@
|
|
|
1
|
+
# v19.1.0 (Mon Mar 07 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- fix: modalDialog width [#1140](https://github.com/artsy/palette/pull/1140) ([@araujobarret](https://github.com/araujobarret))
|
|
6
|
+
- fix: removed line height from pill text [#1139](https://github.com/artsy/palette/pull/1139) ([@gkartalis](https://github.com/gkartalis))
|
|
7
|
+
|
|
8
|
+
#### 🏠 Internal
|
|
9
|
+
|
|
10
|
+
- chore(deps): update dep typescript from 4.5.5 to v4.6.2 [#1138](https://github.com/artsy/palette/pull/1138) ([@renovate-bot](https://github.com/renovate-bot))
|
|
11
|
+
|
|
12
|
+
#### Authors: 3
|
|
13
|
+
|
|
14
|
+
- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
|
|
15
|
+
- George Kartalis ([@gkartalis](https://github.com/gkartalis))
|
|
16
|
+
- WhiteSource Renovate ([@renovate-bot](https://github.com/renovate-bot))
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
# v19.0.2 (Tue Feb 22 2022)
|
|
21
|
+
|
|
22
|
+
#### 🐛 Bug Fix
|
|
23
|
+
|
|
24
|
+
- fix(useclickoutside): wait for stack to clear before adding event [#1135](https://github.com/artsy/palette/pull/1135) ([@dzucconi](https://github.com/dzucconi))
|
|
25
|
+
- fix(useclickoutside): wait for stack to clear before adding event ([@dzucconi](https://github.com/dzucconi))
|
|
26
|
+
|
|
27
|
+
#### Authors: 1
|
|
28
|
+
|
|
29
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
# v19.0.1 (Tue Feb 22 2022)
|
|
34
|
+
|
|
35
|
+
#### 🐛 Bug Fix
|
|
36
|
+
|
|
37
|
+
- fix(modal): fixes support for percentage based widths [#1134](https://github.com/artsy/palette/pull/1134) ([@dzucconi](https://github.com/dzucconi))
|
|
38
|
+
- fix(modal): fixes support for percentage based widths ([@dzucconi](https://github.com/dzucconi))
|
|
39
|
+
|
|
40
|
+
#### Authors: 1
|
|
41
|
+
|
|
42
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
1
46
|
# v19.0.0 (Fri Feb 18 2022)
|
|
2
47
|
|
|
3
48
|
#### 💥 Breaking Change
|
|
@@ -15,7 +15,8 @@ var _Box = require("../Box");
|
|
|
15
15
|
|
|
16
16
|
var _useDidMount = require("../../utils/useDidMount");
|
|
17
17
|
|
|
18
|
-
var _excluded = ["children", "footer", "hasLogo", "onClose", "title"]
|
|
18
|
+
var _excluded = ["children", "footer", "hasLogo", "onClose", "title"],
|
|
19
|
+
_excluded2 = ["width"];
|
|
19
20
|
|
|
20
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
22
|
|
|
@@ -49,7 +50,9 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
49
50
|
|
|
50
51
|
var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
|
|
51
52
|
_splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
|
|
52
|
-
|
|
53
|
+
_splitBoxProps2$ = _splitBoxProps2[0],
|
|
54
|
+
width = _splitBoxProps2$.width,
|
|
55
|
+
boxProps = _objectWithoutProperties(_splitBoxProps2$, _excluded2),
|
|
53
56
|
modalProps = _splitBoxProps2[1];
|
|
54
57
|
|
|
55
58
|
return /*#__PURE__*/_react.default.createElement(_Modal.ModalBase, _extends({
|
|
@@ -59,13 +62,16 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
59
62
|
transition: "background-color 250ms"
|
|
60
63
|
} : {
|
|
61
64
|
backgroundColor: "transparent"
|
|
65
|
+
},
|
|
66
|
+
dialogProps: {
|
|
67
|
+
width: width !== null && width !== void 0 ? width : 480
|
|
62
68
|
}
|
|
63
69
|
}, modalProps), /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, _extends({
|
|
64
70
|
footer: footer,
|
|
65
71
|
hasLogo: hasLogo,
|
|
66
72
|
onClose: onClose,
|
|
67
73
|
title: title,
|
|
68
|
-
width:
|
|
74
|
+
width: "100%",
|
|
69
75
|
style: isMounted ? {
|
|
70
76
|
opacity: 1,
|
|
71
77
|
transition: "opacity 250ms, transform 250ms"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","onClose","title","rest","isMounted","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","onClose","title","rest","isMounted","width","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAOjD;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAG,+BAAlB;;AACA,uBAA6C,wBAAcD,IAAd,CAA7C;AAAA;AAAA;AAAA,MAASE,KAAT,oBAASA,KAAT;AAAA,MAAmBC,QAAnB;AAAA,MAA+BC,UAA/B;;AAEA,sBACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAEN,OADX;AAEE,IAAA,KAAK,EACHG,SAAS,GACL;AACEI,MAAAA,eAAe,EAAE,0BADnB;AAEEC,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAED,MAAAA,eAAe,EAAE;AAAnB,KARR;AAUE,IAAA,WAAW,EAAE;AAAEH,MAAAA,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AAAlB;AAVf,KAWME,UAXN,gBAaE,6BAAC,sCAAD;AACE,IAAA,MAAM,EAAER,MADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,KAAK,EAAC,MALR;AAME,IAAA,KAAK,EACHE,SAAS,GACL;AACEM,MAAAA,OAAO,EAAE,CADX;AAEED,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB;AAZR,KAcML,QAdN,GAgBGR,QAhBH,CAbF,CADF;AAkCD,CA7CM;;;AAAMD,W","sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n ModalDialogContent,\n ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\n\nexport type ModalDialogProps = ModalBaseProps & ModalDialogContentProps\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n children,\n footer,\n hasLogo,\n onClose,\n title,\n ...rest\n}) => {\n const isMounted = useDidMount()\n const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n return (\n <ModalBase\n onClose={onClose}\n style={\n isMounted\n ? {\n backgroundColor: \"rgba(229, 229, 229, 0.5)\",\n transition: \"background-color 250ms\",\n }\n : { backgroundColor: \"transparent\" }\n }\n dialogProps={{ width: width ?? 480 }}\n {...modalProps}\n >\n <ModalDialogContent\n footer={footer}\n hasLogo={hasLogo}\n onClose={onClose}\n title={title}\n width=\"100%\"\n style={\n isMounted\n ? {\n opacity: 1,\n transition: \"opacity 250ms, transform 250ms\",\n }\n : { opacity: 0, transform: \"translateY(10px)\" }\n }\n {...boxProps}\n >\n {children}\n </ModalDialogContent>\n </ModalBase>\n )\n}\n"],"file":"ModalDialog.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"names":["LOREM","title","Demo","children","rest","open","setOpen","repeat","Default","width","hasLogo","footer","props"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GACT,+MADF;eAGe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIf,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAsD;AAAA,MAAnDC,QAAmD,QAAnDA,QAAmD;AAAA,MAAtCC,IAAsC;;AACjE,kBAAwB,qBAAS,KAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,sBACE,yEACE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAE;AAAA,aAAMA,OAAO,CAAC,IAAD,CAAb;AAAA;AAAjB,kBADF,EAGGD,IAAI,iBACH,6BAAC,wBAAD;AAAa,IAAA,OAAO,EAAE;AAAA,aAAMC,OAAO,CAAC,KAAD,CAAb;AAAA;AAAtB,KAAgDF,IAAhD,GACGD,QAAQ,GAAGA,QAAH,gBAAc,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBH,KAAK,CAACO,MAAN,CAAa,EAAb,CAApB,CADzB,CAJJ,CADF;AAWD,CAdD;;AAgBO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEL,MAAAA,QAAQ,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBH,KAApB;AADZ,KADM,EAIN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAJM,EAKN;AAAEA,MAAAA,KAAK,EAAE,YAAT;AAAuBQ,MAAAA,KAAK,EAAE;AAA9B,KALM,EAMN;AAAER,MAAAA,KAAK,EAAE,kBAAT;AAA6BQ,MAAAA,KAAK,EAAE,CAAC,MAAD,EAAS,GAAT;AAApC,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"names":["LOREM","title","Demo","children","rest","open","setOpen","repeat","Default","width","hasLogo","footer","props"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GACT,+MADF;eAGe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIf,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAsD;AAAA,MAAnDC,QAAmD,QAAnDA,QAAmD;AAAA,MAAtCC,IAAsC;;AACjE,kBAAwB,qBAAS,KAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,sBACE,yEACE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAE;AAAA,aAAMA,OAAO,CAAC,IAAD,CAAb;AAAA;AAAjB,kBADF,EAGGD,IAAI,iBACH,6BAAC,wBAAD;AAAa,IAAA,OAAO,EAAE;AAAA,aAAMC,OAAO,CAAC,KAAD,CAAb;AAAA;AAAtB,KAAgDF,IAAhD,GACGD,QAAQ,GAAGA,QAAH,gBAAc,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBH,KAAK,CAACO,MAAN,CAAa,EAAb,CAApB,CADzB,CAJJ,CADF;AAWD,CAdD;;AAgBO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEL,MAAAA,QAAQ,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBH,KAApB;AADZ,KADM,EAIN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAJM,EAKN;AAAEA,MAAAA,KAAK,EAAE,YAAT;AAAuBQ,MAAAA,KAAK,EAAE;AAA9B,KALM,EAMN;AAAER,MAAAA,KAAK,EAAE,6BAAT;AAAwCQ,MAAAA,KAAK,EAAE,CAAC,KAAD,EAAQ,KAAR,EAAe,KAAf;AAA/C,KANM,EAON;AAAER,MAAAA,KAAK,EAAE,kBAAT;AAA6BQ,MAAAA,KAAK,EAAE,CAAC,MAAD,EAAS,GAAT;AAApC,KAPM,EAQN;AACER,MAAAA,KAAK,EACH;AAFJ,KARM,EAYN;AAAES,MAAAA,OAAO,EAAE;AAAX,KAZM,EAaN;AAAET,MAAAA,KAAK,EAAE,aAAT;AAAwBS,MAAAA,OAAO,EAAE;AAAjC,KAbM,EAcN;AACEP,MAAAA,QAAQ,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBH,KAApB,CADZ;AAEEW,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAFV,KAdM,EAkBN;AAAEV,MAAAA,KAAK,EAAE,aAAT;AAAwBU,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAAhC,KAlBM,EAmBN;AACEV,MAAAA,KAAK,EACH,kFAFJ;AAGEU,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAHV,KAnBM,EAwBN;AACEV,MAAAA,KAAK,EACH,kFAFJ;AAGES,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAJV,KAxBM;AADV,KAiCG,UAACC,KAAD;AAAA,wBAAW,6BAAC,IAAD,EAAUA,KAAV,CAAX;AAAA,GAjCH,CADF;AAqCD,CAtCM;;;AAAMJ,O","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { ModalDialog, ModalDialogProps } from \"./ModalDialog\"\n\nconst LOREM =\n \"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. \"\n\nexport default {\n title: \"Components/ModalDialog\",\n}\n\nconst Demo = ({ children, ...rest }: Partial<ModalDialogProps>) => {\n const [open, setOpen] = useState(false)\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>Open Modal</Button>\n\n {open && (\n <ModalDialog onClose={() => setOpen(false)} {...rest}>\n {children ? children : <Text variant=\"sm\">{LOREM.repeat(15)}</Text>}\n </ModalDialog>\n )}\n </>\n )\n}\n\nexport const Default = () => {\n return (\n <States<Partial<ModalDialogProps>>\n states={[\n {\n children: <Text variant=\"sm\">{LOREM}</Text>,\n },\n { title: \"Modal Title\" },\n { title: \"100% Width\", width: \"100%\" },\n { title: \"Responsive Percentage Width\", width: [\"75%\", \"66%\", \"50%\"] },\n { title: \"Responsive Width\", width: [\"100%\", 550] },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n },\n { hasLogo: true },\n { title: \"Modal Title\", hasLogo: true },\n {\n children: <Text variant=\"sm\">{LOREM}</Text>,\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n hasLogo: true,\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n ]}\n >\n {(props) => <Demo {...props} />}\n </States>\n )\n}\n"],"file":"ModalDialog.story.js"}
|
|
@@ -12,7 +12,7 @@ export declare type PillProps = ClickableProps & {
|
|
|
12
12
|
hover?: boolean;
|
|
13
13
|
} & ({
|
|
14
14
|
variant?: Extract<PillVariant, "textRound" | "textSquare" | "filter">;
|
|
15
|
-
/** Forces active state */
|
|
15
|
+
/** Forces active state & border-color to black60 */
|
|
16
16
|
active?: boolean;
|
|
17
17
|
} | {
|
|
18
18
|
/** `"artist"` pills do not have an `active` state */
|
|
@@ -72,8 +72,7 @@ var Pill = function Pill(_ref) {
|
|
|
72
72
|
// Intentionally empty string
|
|
73
73
|
alt: ""
|
|
74
74
|
})), /*#__PURE__*/_react.default.createElement(_Text.Text, _extends({
|
|
75
|
-
variant: "xs"
|
|
76
|
-
lineHeight: 1
|
|
75
|
+
variant: "xs"
|
|
77
76
|
}, typeof children === "string" ? // Simple label — handle the text overflow
|
|
78
77
|
{
|
|
79
78
|
overflowEllipsis: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Container","Clickable","props","states","PILL_VARIANTS","variant","css","default","hover","focus","active","Thumbnail","styled","img","Pill","children","rest","src","srcSet","overflowEllipsis","display","alignItems","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,WADgC,EAEhC,YAFgC,EAGhC,QAHgC,EAIhC,QAJgC,CAA3B;;AAkCP,IAAMC,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,8OAMO,wBAAS,gBAAT,CANP,EAUX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACG,OAApB,2DAA+B,WAA/B,CAAf;AAEA,aAAOC,qBAAP,qEACIH,MAAM,CAACI,OADX,EAEIL,KAAK,CAACM,KAAN,IAAeL,MAAM,CAACK,KAF1B,EAGIN,KAAK,CAACO,KAAN,IAAeN,MAAM,CAACM,KAH1B,EAII,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAJhD,EAOMP,MAAM,CAACK,KAPb,EAYML,MAAM,CAACM,KAZb,EAaM,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAblD;AAgBD,CA7BY,CAAf;;AAgCA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGAKG,wBAAS,SAAT,CALH,EAMO,wBAAS,gBAAT,CANP,CAAf;AASA;AACA;AACA;AACA;AACA;;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AAClE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACG,YAAYA,IAAZ,IAAoBA,IAAI,CAACN,MAAzB,IAAmCM,IAAI,CAACX,OAAL,KAAiB,QAApD,iBACC,6BAAC,eAAD;AAAW,IAAA,EAAE,EAAE;AAAf,IAFJ,EAKGW,IAAI,CAACX,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOW,IAAI,CAACC,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAApB,GAA+BD,IAAI,CAACC,GAApC,GAA0CD,IAAI,CAACC,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOD,IAAI,CAACC,GAAL,IAAY,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAAhC,IAA4CD,IAAI,CAACC,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKF,IAAI,CAACC,GAAL,CAAS,CAAT,CAAL,kBAAwBD,IAAI,CAACC,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KANJ,eAkBE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Container","Clickable","props","states","PILL_VARIANTS","variant","css","default","hover","focus","active","Thumbnail","styled","img","Pill","children","rest","src","srcSet","overflowEllipsis","display","alignItems","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,WADgC,EAEhC,YAFgC,EAGhC,QAHgC,EAIhC,QAJgC,CAA3B;;AAkCP,IAAMC,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,8OAMO,wBAAS,gBAAT,CANP,EAUX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACG,OAApB,2DAA+B,WAA/B,CAAf;AAEA,aAAOC,qBAAP,qEACIH,MAAM,CAACI,OADX,EAEIL,KAAK,CAACM,KAAN,IAAeL,MAAM,CAACK,KAF1B,EAGIN,KAAK,CAACO,KAAN,IAAeN,MAAM,CAACM,KAH1B,EAII,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAJhD,EAOMP,MAAM,CAACK,KAPb,EAYML,MAAM,CAACM,KAZb,EAaM,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAblD;AAgBD,CA7BY,CAAf;;AAgCA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGAKG,wBAAS,SAAT,CALH,EAMO,wBAAS,gBAAT,CANP,CAAf;AASA;AACA;AACA;AACA;AACA;;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AAClE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACG,YAAYA,IAAZ,IAAoBA,IAAI,CAACN,MAAzB,IAAmCM,IAAI,CAACX,OAAL,KAAiB,QAApD,iBACC,6BAAC,eAAD;AAAW,IAAA,EAAE,EAAE;AAAf,IAFJ,EAKGW,IAAI,CAACX,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOW,IAAI,CAACC,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAApB,GAA+BD,IAAI,CAACC,GAApC,GAA0CD,IAAI,CAACC,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOD,IAAI,CAACC,GAAL,IAAY,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAAhC,IAA4CD,IAAI,CAACC,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKF,IAAI,CAACC,GAAL,CAAS,CAAT,CAAL,kBAAwBD,IAAI,CAACC,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KANJ,eAkBE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC;AADV,KAEO,OAAOF,QAAP,KAAoB,QAApB,GACD;AACA;AAAEI,IAAAA,gBAAgB,EAAE;AAApB,GAFC,GAGD;AACA;AAAEC,IAAAA,OAAO,EAAE,MAAX;AAAmBC,IAAAA,UAAU,EAAE;AAA/B,GANN,GAQGN,QARH,CAlBF,CADF;AA+BD,CAhCM;;;AAAMD,I;AAkCbA,IAAI,CAACQ,YAAL,GAAoB;AAClBjB,EAAAA,OAAO,EAAE;AADS,CAApB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CheckIcon } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n \"textRound\",\n \"textSquare\",\n \"filter\",\n \"artist\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\nexport type PillState = \"default\" | \"focus\" | \"hover\" | \"active\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n as?: keyof JSX.IntrinsicElements | React.ComponentType\n /** Forces focus state */\n focus?: boolean\n /** Forces hover state */\n hover?: boolean\n} & (\n | {\n variant?: Extract<PillVariant, \"textRound\" | \"textSquare\" | \"filter\">\n /** Forces active state & border-color to black60 */\n active?: boolean\n }\n | {\n /** `\"artist\"` pills do not have an `active` state */\n variant?: Extract<PillVariant, \"artist\">\n /**\n * Optional avatar; 1x or [1x, 2x]\n * Should target 30x30 @1x, 60x60 @2x\n */\n src?: string | [string, string]\n }\n )\n\nconst Container = styled(Clickable)<PillProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n text-decoration: none;\n border: 1px solid ${themeGet(\"colors.black15\")};\n transition: color 0.25s ease, border-color 0.25s ease,\n background-color 0.25s ease, box-shadow 0.25s ease;\n\n ${(props) => {\n const states = PILL_VARIANTS[props.variant ?? \"textRound\"]\n\n return css`\n ${states.default}\n ${props.hover && states.hover}\n ${props.focus && states.focus}\n ${\"active\" in props && props.active && states.active}\n\n &:hover {\n ${states.hover}\n }\n\n &:focus {\n outline: 0;\n ${states.focus}\n ${\"active\" in props && props.active && states.active}\n }\n `\n }}\n`\n\nconst Thumbnail = styled.img`\n display: block;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n margin-right: ${themeGet(\"space.1\")};\n background-color: ${themeGet(\"colors.black30\")};\n`\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, ...rest }) => {\n return (\n <Container {...rest}>\n {\"active\" in rest && rest.active && rest.variant === \"filter\" && (\n <CheckIcon mr={0.5} />\n )}\n\n {rest.variant === \"artist\" && (\n <Thumbnail\n {...(rest.src\n ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n : {})}\n {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n : {})}\n // Intentionally empty string\n alt=\"\"\n />\n )}\n\n <Text\n variant=\"xs\"\n {...(typeof children === \"string\"\n ? // Simple label — handle the text overflow\n { overflowEllipsis: true }\n : // Otherwise use the children as-is and center align them\n { display: \"flex\", alignItems: \"center\" })}\n >\n {children}\n </Text>\n </Container>\n )\n}\n\nPill.defaultProps = {\n variant: \"textRound\",\n}\n"],"file":"Pill.js"}
|
|
@@ -81,15 +81,12 @@ var Popover = function Popover(_ref) {
|
|
|
81
81
|
if (!anchorRef.current) return;
|
|
82
82
|
anchorRef.current.focus();
|
|
83
83
|
}, [visible]);
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
return setVisible(false);
|
|
91
|
-
};
|
|
92
|
-
|
|
84
|
+
var onVisible = (0, _react.useCallback)(function () {
|
|
85
|
+
setVisible(true);
|
|
86
|
+
}, []);
|
|
87
|
+
var onHide = (0, _react.useCallback)(function () {
|
|
88
|
+
setVisible(false);
|
|
89
|
+
}, []);
|
|
93
90
|
(0, _react.useEffect)(function () {
|
|
94
91
|
var handleKeydown = function handleKeydown(event) {
|
|
95
92
|
if (event.key === "Escape") {
|
|
@@ -101,7 +98,7 @@ var Popover = function Popover(_ref) {
|
|
|
101
98
|
return function () {
|
|
102
99
|
document.removeEventListener("keydown", handleKeydown);
|
|
103
100
|
};
|
|
104
|
-
}, []);
|
|
101
|
+
}, [onHide]);
|
|
105
102
|
|
|
106
103
|
var _usePosition = (0, _utils.usePosition)({
|
|
107
104
|
position: placement,
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;AAoBA;AACA;AACA;AACA;AACO,IAAMA,OAA+B,GAAG,SAAlCA,OAAkC,OAMzC;AAAA,MALJC,KAKI,QALJA,KAKI;AAAA,4BAJJC,SAII;AAAA,MAJJA,SAII,+BAJQ,KAIR;AAAA,0BAHJC,OAGI;AAAA,MAHKC,QAGL,6BAHgB,KAGhB;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;;AACJ,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOH,OAAP;AAAA,MAAgBI,UAAhB,iBADI,CAGJ;;;AACA,wBAAU,YAAM;AACdA,IAAAA,UAAU,CAACH,QAAD,CAAV;AACD,GAFD,EAEG,CAACA,QAAD,CAFH,EAJI,CAQJ;;AACA,wCAAgB,YAAM;AACpB,QAAID,OAAO,IAAIK,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,CAACP,OAAD,CARH
|
|
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":"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","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 } 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 {\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}) => {\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 >\n {title && (\n <>\n <Flex alignItems=\"center\" flex={1} justifyContent=\"space-between\">\n {isText(title) ? (\n <Text variant=\"lg\" 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"}
|
|
@@ -19,24 +19,25 @@ var useClickOutside = function useClickOutside(_ref) {
|
|
|
19
19
|
when = _ref$when === void 0 ? true : _ref$when,
|
|
20
20
|
onClickOutside = _ref.onClickOutside;
|
|
21
21
|
var savedHandler = (0, _react.useRef)(onClickOutside);
|
|
22
|
-
var handleClick = (0, _react.useCallback)(function (e) {
|
|
23
|
-
if (ref && ref.current && !ref.current.contains(e.target)) {
|
|
24
|
-
savedHandler.current(e);
|
|
25
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
|
-
|
|
27
|
-
}, []);
|
|
28
22
|
(0, _react.useEffect)(function () {
|
|
29
23
|
savedHandler.current = onClickOutside;
|
|
30
24
|
}, [onClickOutside]);
|
|
31
25
|
(0, _react.useEffect)(function () {
|
|
26
|
+
var handleClick = function handleClick(event) {
|
|
27
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
28
|
+
savedHandler.current(event);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
|
|
32
32
|
if (when) {
|
|
33
|
-
|
|
33
|
+
setTimeout(function () {
|
|
34
|
+
document.addEventListener(type, handleClick);
|
|
35
|
+
}, 0);
|
|
34
36
|
return function () {
|
|
35
37
|
document.removeEventListener(type, handleClick);
|
|
36
38
|
};
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
}, [when]);
|
|
39
|
+
}
|
|
40
|
+
}, [ref, type, when]);
|
|
40
41
|
};
|
|
41
42
|
|
|
42
43
|
exports.useClickOutside = useClickOutside;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/useClickOutside.ts"],"names":["useClickOutside","ref","type","when","onClickOutside","savedHandler","
|
|
1
|
+
{"version":3,"sources":["../../src/utils/useClickOutside.ts"],"names":["useClickOutside","ref","type","when","onClickOutside","savedHandler","current","handleClick","event","contains","target","setTimeout","document","addEventListener","removeEventListener"],"mappings":";;;;;;;AAAA;;AASA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,OAKR;AAAA,MAJrBC,GAIqB,QAJrBA,GAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHd,OAGc;AAAA,uBAFrBC,IAEqB;AAAA,MAFrBA,IAEqB,0BAFd,IAEc;AAAA,MADrBC,cACqB,QADrBA,cACqB;AACrB,MAAMC,YAAY,GAAG,mBAAOD,cAAP,CAArB;AAEA,wBAAU,YAAM;AACdC,IAAAA,YAAY,CAACC,OAAb,GAAuBF,cAAvB;AACD,GAFD,EAEG,CAACA,cAAD,CAFH;AAIA,wBAAU,YAAM;AACd,QAAMG,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAkB;AACpC,UAAIP,GAAG,CAACK,OAAJ,IAAe,CAACL,GAAG,CAACK,OAAJ,CAAYG,QAAZ,CAAqBD,KAAK,CAACE,MAA3B,CAApB,EAAmE;AACjEL,QAAAA,YAAY,CAACC,OAAb,CAAqBE,KAArB;AACD;AACF,KAJD;;AAMA,QAAIL,IAAJ,EAAU;AACRQ,MAAAA,UAAU,CAAC,YAAM;AACfC,QAAAA,QAAQ,CAACC,gBAAT,CAA0BX,IAA1B,EAAgCK,WAAhC;AACD,OAFS,EAEP,CAFO,CAAV;AAIA,aAAO,YAAM;AACXK,QAAAA,QAAQ,CAACE,mBAAT,CAA6BZ,IAA7B,EAAmCK,WAAnC;AACD,OAFD;AAGD;AACF,GAhBD,EAgBG,CAACN,GAAD,EAAMC,IAAN,EAAYC,IAAZ,CAhBH;AAiBD,CA7BM","sourcesContent":["import { useEffect, useRef } from \"react\"\n\nexport interface UseClickOutside {\n ref: React.RefObject<HTMLElement>\n when: boolean\n type?: keyof DocumentEventMap\n onClickOutside: (event: Event) => void\n}\n\n/**\n * Use click outside is a hook that will listen for clicks outside of a ref,\n * and when true, execute a callback.\n */\nexport const useClickOutside = ({\n ref,\n type = \"click\",\n when = true,\n onClickOutside,\n}: UseClickOutside) => {\n const savedHandler = useRef(onClickOutside)\n\n useEffect(() => {\n savedHandler.current = onClickOutside\n }, [onClickOutside])\n\n useEffect(() => {\n const handleClick = (event: Event) => {\n if (ref.current && !ref.current.contains(event.target as Element)) {\n savedHandler.current(event)\n }\n }\n\n if (when) {\n setTimeout(() => {\n document.addEventListener(type, handleClick)\n }, 0)\n\n return () => {\n document.removeEventListener(type, handleClick)\n }\n }\n }, [ref, type, when])\n}\n"],"file":"useClickOutside.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.1.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"storybook-states": "1.2.0",
|
|
112
112
|
"styled-components": "4.3.2",
|
|
113
113
|
"ts-node": "8.1.0",
|
|
114
|
-
"typescript": "4.
|
|
114
|
+
"typescript": "4.6.2",
|
|
115
115
|
"typescript-styled-plugin": "0.10.0",
|
|
116
116
|
"webpack": "5"
|
|
117
117
|
},
|
|
@@ -178,5 +178,5 @@
|
|
|
178
178
|
"<rootDir>/www/"
|
|
179
179
|
]
|
|
180
180
|
},
|
|
181
|
-
"gitHead": "
|
|
181
|
+
"gitHead": "06461ca0c7d6b3bb043e024ac484d887b732784b"
|
|
182
182
|
}
|