@artsy/palette 24.3.0 → 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 +29 -0
- package/dist/Theme.d.ts +9 -5
- package/dist/Theme.js +1 -1
- package/dist/Theme.js.map +1 -1
- package/dist/elements/GridColumns/GridColumns.d.ts +1 -0
- package/dist/elements/GridColumns/GridColumns.js.map +1 -1
- package/dist/elements/Popover/Popover.d.ts +2 -1
- package/dist/elements/Popover/Popover.js +12 -3
- package/dist/elements/Popover/Popover.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,32 @@
|
|
|
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
|
+
|
|
17
|
+
# v24.3.1 (Mon Oct 03 2022)
|
|
18
|
+
|
|
19
|
+
#### 🐛 Bug Fix
|
|
20
|
+
|
|
21
|
+
- fix(types): adds children to types [#1209](https://github.com/artsy/palette/pull/1209) ([@dzucconi](https://github.com/dzucconi))
|
|
22
|
+
- fix(types): adds children to types ([@dzucconi](https://github.com/dzucconi))
|
|
23
|
+
|
|
24
|
+
#### Authors: 1
|
|
25
|
+
|
|
26
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
1
30
|
# v24.3.0 (Wed Sep 21 2022)
|
|
2
31
|
|
|
3
32
|
#### 🚀 Enhancement
|
package/dist/Theme.d.ts
CHANGED
|
@@ -261,6 +261,7 @@ declare const THEMES: {
|
|
|
261
261
|
black60: string;
|
|
262
262
|
black30: string;
|
|
263
263
|
black15: string;
|
|
264
|
+
/** Utilize only the v3 theme */
|
|
264
265
|
black10: string;
|
|
265
266
|
black5: string;
|
|
266
267
|
white100: string;
|
|
@@ -273,7 +274,7 @@ declare const THEMES: {
|
|
|
273
274
|
green10: string;
|
|
274
275
|
yellow150: string;
|
|
275
276
|
yellow100: string;
|
|
276
|
-
yellow10: string;
|
|
277
|
+
yellow10: string; /** Typeguard for v3 */
|
|
277
278
|
orange150: string;
|
|
278
279
|
orange100: string;
|
|
279
280
|
orange10: string;
|
|
@@ -305,12 +306,14 @@ declare const THEMES: {
|
|
|
305
306
|
textVariants: Record<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", import("@artsy/palette-tokens/dist/typography/v3").TextTreatment>;
|
|
306
307
|
};
|
|
307
308
|
};
|
|
309
|
+
interface ThemeProps {
|
|
310
|
+
theme?: TTheme | keyof typeof THEMES;
|
|
311
|
+
children?: React.ReactNode;
|
|
312
|
+
}
|
|
308
313
|
/**
|
|
309
314
|
* A wrapper component for passing down the Artsy theme context
|
|
310
315
|
*/
|
|
311
|
-
export declare const Theme: React.FC<
|
|
312
|
-
theme?: TTheme | keyof typeof THEMES;
|
|
313
|
-
}>;
|
|
316
|
+
export declare const Theme: React.FC<ThemeProps>;
|
|
314
317
|
/** Utilize only the v2 theme */
|
|
315
318
|
export declare const ThemeProviderV2: React.FC;
|
|
316
319
|
/** Utilize only the v3 theme */
|
|
@@ -588,6 +591,7 @@ export declare const isThemeV3: (theme: TTheme) => theme is {
|
|
|
588
591
|
black60: string;
|
|
589
592
|
black30: string;
|
|
590
593
|
black15: string;
|
|
594
|
+
/** Utilize only the v3 theme */
|
|
591
595
|
black10: string;
|
|
592
596
|
black5: string;
|
|
593
597
|
white100: string;
|
|
@@ -600,7 +604,7 @@ export declare const isThemeV3: (theme: TTheme) => theme is {
|
|
|
600
604
|
green10: string;
|
|
601
605
|
yellow150: string;
|
|
602
606
|
yellow100: string;
|
|
603
|
-
yellow10: string;
|
|
607
|
+
yellow10: string; /** Typeguard for v3 */
|
|
604
608
|
orange150: string;
|
|
605
609
|
orange100: string;
|
|
606
610
|
orange10: string;
|
package/dist/Theme.js
CHANGED
|
@@ -71,10 +71,10 @@ var THEMES = {
|
|
|
71
71
|
v2: _themes.THEME_V2,
|
|
72
72
|
v3: _themes.THEME_V3
|
|
73
73
|
};
|
|
74
|
+
|
|
74
75
|
/**
|
|
75
76
|
* A wrapper component for passing down the Artsy theme context
|
|
76
77
|
*/
|
|
77
|
-
|
|
78
78
|
var Theme = function Theme(_ref) {
|
|
79
79
|
var children = _ref.children,
|
|
80
80
|
_ref$theme = _ref.theme,
|
package/dist/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Theme.tsx"],"names":["THEMES","v2","THEME_V2","v3","THEME_V3","Theme","children","theme","themeOrThemeKey","ThemeProviderV2","ThemeProviderV3","useTheme","ThemeContext","useThemeConfig","id","getThemeConfig","props","isThemeV2","isThemeV3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;;AACA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;;;;AATA;AACA;AACA;AASA,IAAMA,MAAM,GAAG;AACbC,EAAAA,EAAE,EAAEC,gBADS;AAEbC,EAAAA,EAAE,EAAEC;AAFS,CAAf;
|
|
1
|
+
{"version":3,"sources":["../src/Theme.tsx"],"names":["THEMES","v2","THEME_V2","v3","THEME_V3","Theme","children","theme","themeOrThemeKey","ThemeProviderV2","ThemeProviderV3","useTheme","ThemeContext","useThemeConfig","id","getThemeConfig","props","isThemeV2","isThemeV3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;;AACA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;;;;AATA;AACA;AACA;AASA,IAAMA,MAAM,GAAG;AACbC,EAAAA,EAAE,EAAEC,gBADS;AAEbC,EAAAA,EAAE,EAAEC;AAFS,CAAf;;AAUA;AACA;AACA;AACO,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,OAGrC;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,wBADJC,KACI;AAAA,MADGC,eACH,2BADqBN,gBACrB;AACJ,MAAMK,KAAK,GACTC,eAAe,KAAK,IAApB,IAA4BA,eAAe,KAAK,IAAhD,GACIR,MAAM,CAACQ,eAAD,CADV,GAEIA,eAHN;AAKA,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAED;AAAtB,KAA8BD,QAA9B,CAAP;AACD,CAVM;;;AAAMD,K;;AAYb;AACO,IAAMI,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfH,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEJ;AAAtB,KAAiCI,QAAjC,CAAP;AACD,CAFM;;;AAAMG,e;;AAIb;AACO,IAAMC,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfJ,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEF;AAAtB,KAAiCE,QAAjC,CAAP;AACD,CAFM;;;AAAMI,e;;AAIb;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAwB;AAC9C,MAAMJ,KAAQ,GAAG,uBAAWK,8BAAX,CAAjB;AACA,SAAO;AAAEL,IAAAA,KAAK,EAALA;AAAF,GAAP;AACD,CAHM;AAKP;;;;;AACO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB,QAA+C;AAAA,MAAtCZ,EAAsC,SAAtCA,EAAsC;AAAA,MAAlCE,EAAkC,SAAlCA,EAAkC;;AAC3E,kBAAiCQ,QAAQ,EAAzC;AAAA,kCAAQJ,KAAR;AAAA,MAAQA,KAAR,gCAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CAHM;AAKP;;;;;AACO,IAAMY,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,KAD4B,SAGlB;AAAA,MADRf,EACQ,SADRA,EACQ;AAAA,MADJE,EACI,SADJA,EACI;AACV,qBAAiCa,KAAjC,CAAQT,KAAR;AAAA,MAAQA,KAAR,6BAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CANM;AAQP;;;;;AACO,IAAMc,SAAS,GAAG,SAAZA,SAAY,CAACV,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM;AAIP;;;;;AACO,IAAMI,SAAS,GAAG,SAAZA,SAAY,CAACX,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM","sourcesContent":["import React, { useContext } from \"react\"\n// FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.\n// Notably: `Icon` and `Sans|Serif`\n// @ts-expect-error MIGRATE_STRICT_MODE\nimport { ThemeContext, ThemeProvider } from \"styled-components\"\nimport { Theme as TTheme, THEME_V2, THEME_V3, ThemeV2, ThemeV3 } from \"./themes\"\n\nexport { THEME_V2, THEME_V3 } from \"./themes\"\nexport * from \"@artsy/palette-tokens/dist/themes/v2\"\n\nexport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\n\nconst THEMES = {\n v2: THEME_V2,\n v3: THEME_V3,\n}\n\ninterface ThemeProps {\n theme?: TTheme | keyof typeof THEMES\n children?: React.ReactNode\n}\n\n/**\n * A wrapper component for passing down the Artsy theme context\n */\nexport const Theme: React.FC<ThemeProps> = ({\n children,\n theme: themeOrThemeKey = THEME_V2,\n}) => {\n const theme =\n themeOrThemeKey === \"v2\" || themeOrThemeKey === \"v3\"\n ? THEMES[themeOrThemeKey]\n : themeOrThemeKey\n\n return <ThemeProvider theme={theme}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v2 theme */\nexport const ThemeProviderV2: React.FC = ({ children }) => {\n return <ThemeProvider theme={THEME_V2}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v3 theme */\nexport const ThemeProviderV3: React.FC = ({ children }) => {\n return <ThemeProvider theme={THEME_V3}>{children}</ThemeProvider>\n}\n\n/** Returns the current theme */\nexport const useTheme = <T extends TTheme>() => {\n const theme: T = useContext(ThemeContext)\n return { theme }\n}\n\n/** Returns a config specific to the current theme. For use in React components */\nexport const useThemeConfig = <T, U>({ v2, v3 }: { v2: T; v3: U }): U | T => {\n const { theme = { id: \"v2\" } } = useTheme()\n return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Returns a config specific to the current theme. For use in styled-components */\nexport const getThemeConfig = <T, U>(\n props: Record<string, any>,\n { v2, v3 }: { v2: T; v3: U }\n): U | T => {\n const { theme = { id: \"v2\" } } = props\n return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Typeguard for v2 */\nexport const isThemeV2 = (theme: TTheme): theme is ThemeV2 => {\n return theme.id === \"v2\"\n}\n\n/** Typeguard for v3 */\nexport const isThemeV3 = (theme: TTheme): theme is ThemeV3 => {\n return theme.id === \"v3\"\n}\n"],"file":"Theme.js"}
|
|
@@ -14,6 +14,7 @@ declare type CellProps = ColumnCell & GridColumnProps & BoxProps;
|
|
|
14
14
|
export declare type ColumnProps = CellProps & {
|
|
15
15
|
/** denotes whether or not to break to a new row after column */
|
|
16
16
|
wrap?: boolean;
|
|
17
|
+
children?: React.ReactNode;
|
|
17
18
|
};
|
|
18
19
|
/**
|
|
19
20
|
* A column sits within the GridColumns and spans the columns,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/GridColumns/GridColumns.tsx"],"names":["GridColumns","CSSGrid","defaultProps","gridColumnGap","gridRowGap","Cell","Box","gridColumn","Column","span","start","wrap","rest","gridColumnValue","ColumnWrap","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,6CAAjB;;AAIPD,WAAW,CAACE,YAAZ,GAA2B;AACzBC,EAAAA,aAAa,EAAE,CAAC,CAAD,EAAI,CAAJ,CADU;AAEzBC,EAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ;AAFa,CAA3B;AAOA,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACNC,wBADM,CAAV;AAIA;;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/GridColumns/GridColumns.tsx"],"names":["GridColumns","CSSGrid","defaultProps","gridColumnGap","gridRowGap","Cell","Box","gridColumn","Column","span","start","wrap","rest","gridColumnValue","ColumnWrap","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,6CAAjB;;AAIPD,WAAW,CAACE,YAAZ,GAA2B;AACzBC,EAAAA,aAAa,EAAE,CAAC,CAAD,EAAI,CAAJ,CADU;AAEzBC,EAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ;AAFa,CAA3B;AAOA,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACNC,wBADM,CAAV;AAIA;;AAOA;AACA;AACA;AACA;AACO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAKvC;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,eAAe,GAAG,oBAAQ,YAAM;AACpC,WAAO,8CAAoB;AAAEJ,MAAAA,IAAI,EAAJA,IAAF;AAAQC,MAAAA,KAAK,EAALA;AAAR,KAApB,CAAP;AACD,GAFuB,EAErB,CAACD,IAAD,EAAOC,KAAP,CAFqB,CAAxB;AAIA,sBACE,yEACE,6BAAC,IAAD;AAAM,IAAA,UAAU,EAAEG;AAAlB,KAAuCD,IAAvC,EADF,EAEGD,IAAI,iBAAI,6BAAC,UAAD;AAAY,IAAA,eAAe,EAAEE;AAA7B,IAFX,CADF;AAMD,CAhBM;;;;AAkBP,IAAMC,UAAmD,GAAG,SAAtDA,UAAsD,QAEtD;AAAA,MADJD,eACI,SADJA,eACI;AACJ,sBACE,6BAAC,IAAD,CACE;AADF;AAEE,IAAA,UAAU,EAAE,CAAC,WAAD,CAFd,CAGE;AACA;AAJF;AAKE,IAAA,OAAO,EAAEA,eAAe,CAACE,GAAhB,CAAoB,UAACC,KAAD,EAAW;AACtC,aAAOC,6CAAwBC,QAAxB,CAAiCF,KAAjC,IAA0C,MAA1C,GAAmD,OAA1D;AACD,KAFQ;AALX,IADF;AAWD,CAdD;;AAAMF,U","sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n calculateGridColumn,\n ColumnCell,\n GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid)`\n grid-template-columns: repeat(12, 1fr);\n`\n\nGridColumns.defaultProps = {\n gridColumnGap: [1, 2],\n gridRowGap: [1, 2],\n}\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n /** denotes whether or not to break to a new row after column */\n wrap?: boolean\n children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<ColumnProps> = ({\n span,\n start,\n wrap,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n return (\n <>\n <Cell gridColumn={gridColumnValue} {...rest} />\n {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n </>\n )\n}\n\nconst ColumnWrap: React.FC<{ gridColumnValue: string[] }> = ({\n gridColumnValue,\n}) => {\n return (\n <Cell\n // Spans the remainder of the columns until the end\n gridColumn={[\"auto / -1\"]}\n // Hides the break if the value presented is going to span the full\n // width of the column anyway. Prevents duplicated row gaps.\n display={gridColumnValue.map((value) => {\n return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n })}\n />\n )\n}\n"],"file":"GridColumns.js"}
|
|
@@ -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":"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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, 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
|
}
|