@artsy/palette 18.5.0 → 18.6.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,22 @@
|
|
|
1
|
+
# v18.6.0 (Wed Nov 03 2021)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- fix(tabs): add scrollIntoView for active tab [#1066](https://github.com/artsy/palette/pull/1066) ([@tam-kis](https://github.com/tam-kis))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- fix(tabs): import elements separately ([@tam-kis](https://github.com/tam-kis))
|
|
10
|
+
- fix(tabs): remove comment for scroll on active ([@tam-kis](https://github.com/tam-kis))
|
|
11
|
+
- fix(tabs): remove unused imports ([@tam-kis](https://github.com/tam-kis))
|
|
12
|
+
- fix(tabs): add scrollIntoView for active tab ([@tam-kis](https://github.com/tam-kis))
|
|
13
|
+
|
|
14
|
+
#### Authors: 1
|
|
15
|
+
|
|
16
|
+
- Tam ([@tam-kis](https://github.com/tam-kis))
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
1
20
|
# v18.5.0 (Thu Oct 28 2021)
|
|
2
21
|
|
|
3
22
|
#### 🚀 Enhancement
|
|
@@ -62,17 +62,27 @@ var useTabs = function useTabs(_ref) {
|
|
|
62
62
|
(0, _useUpdateEffect.useUpdateEffect)(function () {
|
|
63
63
|
setActiveTabIndex(initialTabIndex);
|
|
64
64
|
}, [initialTabIndex]);
|
|
65
|
+
|
|
66
|
+
var scrollToTab = function scrollToTab() {
|
|
67
|
+
var _activeTab$ref$curren, _activeTab$ref$curren2;
|
|
68
|
+
|
|
69
|
+
return (_activeTab$ref$curren = activeTab.ref.current) === null || _activeTab$ref$curren === void 0 ? void 0 : (_activeTab$ref$curren2 = _activeTab$ref$curren.scrollIntoView) === null || _activeTab$ref$curren2 === void 0 ? void 0 : _activeTab$ref$curren2.call(_activeTab$ref$curren, {
|
|
70
|
+
inline: "center",
|
|
71
|
+
block: "nearest",
|
|
72
|
+
behavior: "smooth"
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
(0, _react.useEffect)(function () {
|
|
77
|
+
scrollToTab();
|
|
78
|
+
}, [tabs, activeTabIndex]);
|
|
65
79
|
var handleClick = (0, _react.useCallback)(function (index) {
|
|
66
80
|
return function () {
|
|
67
|
-
var _tabs$index$
|
|
81
|
+
var _tabs$index$child$pro;
|
|
68
82
|
|
|
69
83
|
if (index === activeTabIndex) return;
|
|
70
84
|
setActiveTabIndex(index);
|
|
71
|
-
(
|
|
72
|
-
inline: "center",
|
|
73
|
-
block: "nearest",
|
|
74
|
-
behavior: "smooth"
|
|
75
|
-
});
|
|
85
|
+
scrollToTab();
|
|
76
86
|
if (!onChange) return;
|
|
77
87
|
onChange({
|
|
78
88
|
tabIndex: index,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","scrollToTab","current","scrollIntoView","inline","block","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","textVariant","v2","v3","tab","i","defaultProps","mb","Tab"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAIN;AAAA,MAHfC,QAGe,QAHfA,QAGe;AAAA,kCAFfC,eAEe;AAAA,MAFfA,eAEe,qCAFG,CAEH;AAAA,MADfC,QACe,QADfA,QACe;AACf,MAAMC,IAAI,GAAG,sCAAyBH,QAAzB,EAAmCI,GAAnC,CAAuC,UAACC,KAAD;AAAA,WAAY;AAC9DA,MAAAA,KAAK,EAALA,KAD8D;AAE9DC,MAAAA,GAAG,eAAE;AAFyD,KAAZ;AAAA,GAAvC,CAAb;;AADe,kBAM6B,qBAAiBL,eAAjB,CAN7B;AAAA;AAAA,MAMRM,cANQ;AAAA,MAMQC,iBANR;;AAOf,MAAMC,SAAS,GAAGN,IAAI,CAACI,cAAD,CAAtB,CAPe,CASf;;AACA,wCAAgB,YAAM;AACpBC,IAAAA,iBAAiB,CAACP,eAAD,CAAjB;AACD,GAFD,EAEG,CAACA,eAAD,CAFH;;AAIA,MAAMS,WAAW,GAAG,SAAdA,WAAc;AAAA;;AAAA,oCAClBD,SAAS,CAACH,GAAV,CAAcK,OADI,oFAClB,sBAAuBC,cADL,2DAClB,mDAAwC;AACtCC,MAAAA,MAAM,EAAE,QAD8B;AAEtCC,MAAAA,KAAK,EAAE,SAF+B;AAGtCC,MAAAA,QAAQ,EAAE;AAH4B,KAAxC,CADkB;AAAA,GAApB;;AAOA,wBAAU,YAAM;AACdL,IAAAA,WAAW;AACZ,GAFD,EAEG,CAACP,IAAD,EAAOI,cAAP,CAFH;AAIA,MAAMS,WAAW,GAAG,wBAClB,UAACC,KAAD,EAAmB;AACjB,WAAO,YAAM;AAAA;;AACX,UAAIA,KAAK,KAAKV,cAAd,EAA8B;AAE9BC,MAAAA,iBAAiB,CAACS,KAAD,CAAjB;AAEAP,MAAAA,WAAW;AAEX,UAAI,CAACR,QAAL,EAAe;AAEfA,MAAAA,QAAQ,CAAC;AACPgB,QAAAA,QAAQ,EAAED,KADH;AAEPE,QAAAA,IAAI,EAAEhB,IAAI,CAACc,KAAD,CAAJ,CAAYZ,KAAZ,CAAkBe,KAAlB,CAAwBD,IAFvB;AAGPE,QAAAA,IAAI,2BAAElB,IAAI,CAACc,KAAD,CAAJ,CAAYZ,KAAZ,CAAkBe,KAAlB,CAAwBC,IAA1B,yEAAkC;AAH/B,OAAD,CAAR;AAKD,KAdD;AAeD,GAjBiB,EAkBlB,CAAClB,IAAD,EAAOD,QAAP,EAAiBK,cAAjB,CAlBkB,CAApB;AAqBA,SAAO;AACLJ,IAAAA,IAAI,EAAJA,IADK;AAELM,IAAAA,SAAS,EAATA,SAFK;AAGLF,IAAAA,cAAc,EAAdA,cAHK;AAILS,IAAAA,WAAW,EAAXA;AAJK,GAAP;AAMD,CAxDM;AA0DP;;;;;AACO,IAAMM,IAAyB,GAAG,SAA5BA,IAA4B,QAKnC;AAAA,MAJJtB,QAII,SAJJA,QAII;AAAA,oCAHJC,eAGI;AAAA,MAHJA,eAGI,sCAHc,CAGd;AAAA,MAFJC,QAEI,SAFJA,QAEI;AAAA,MADDqB,IACC;;AACJ,MAAMC,WAAwB,GAAG,2BAAe;AAC9CC,IAAAA,EAAE,EAAE,YAD0C;AAE9CC,IAAAA,EAAE,EAAE;AAF0C,GAAf,CAAjC;;AADI,iBAMqD3B,OAAO,CAAC;AAC/DC,IAAAA,QAAQ,EAARA,QAD+D;AAE/DC,IAAAA,eAAe,EAAfA,eAF+D;AAG/DC,IAAAA,QAAQ,EAARA;AAH+D,GAAD,CAN5D;AAAA,MAMIC,IANJ,YAMIA,IANJ;AAAA,MAMUM,SANV,YAMUA,SANV;AAAA,MAMqBF,cANrB,YAMqBA,cANrB;AAAA,MAMqCS,WANrC,YAMqCA,WANrC;;AAYJ,sBACE,yEACE,6BAAC,kBAAD,EAAcO,IAAd,EACGpB,IAAI,CAACC,GAAL,CAAS,UAACuB,GAAD,EAAMC,CAAN,EAAY;AACpB,wBACE,6BAAC,oBAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,GAAG,EAAED,GAAG,CAACrB,GAFX;AAGE,uBAAesB,CAAC,KAAKrB,cAHvB;AAIE,MAAA,OAAO,EAAES,WAAW,CAACY,CAAD,CAJtB;AAKE,MAAA,IAAI,EAAE;AALR,oBAOE,6BAAC,iBAAD;AAAS,MAAA,MAAM,EAAEA,CAAC,KAAKrB,cAAvB;AAAuC,MAAA,OAAO,EAAEiB;AAAhD,oBACE,2CAAOG,GAAG,CAACtB,KAAJ,CAAUe,KAAV,CAAgBD,IAAvB,CADF,CAPF,CADF;AAaD,GAdA,CADH,CADF,EAmBGV,SAAS,CAACJ,KAnBb,CADF;AAuBD,CAxCM;;;AA0CPiB,IAAI,CAACO,YAAL,GAAoB;AAClBC,EAAAA,EAAE,EAAE;AADc,CAApB;;AAcA;AACA;AACA;AACA;AACO,IAAMC,GAAuB,GAAG,SAA1BA,GAA0B;AAAA,MAAG/B,QAAH,SAAGA,QAAH;AAAA,sBAAkB,4DAAGA,QAAH,CAAlB;AAAA,CAAhC","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React, { createRef, useCallback, useEffect, useState } from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\n\nexport interface TabLike extends JSX.Element {\n props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n /** Index of the newly selected Tab */\n tabIndex: number\n /**\n * Arbitrary data that can be associated with a Tab.\n * Will be passed to the parent <Tabs>'s onChange handler.\n */\n data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n /** Space or visual divider between tabs */\n separator?: JSX.Element\n /** Index of the Tab that should be pre-selected */\n initialTabIndex?: number\n /** @deprecated */\n autoScroll?: boolean\n /** Function that will be called when a new Tab is selected */\n onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n children,\n initialTabIndex = 0,\n onChange,\n}: TabsProps) => {\n const tabs = flattenChildren<TabLike>(children).map((child) => ({\n child,\n ref: createRef<HTMLButtonElement | null>(),\n }))\n\n const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n const activeTab = tabs[activeTabIndex]\n\n // If the `initialTabIndex` changes; update the active one\n useUpdateEffect(() => {\n setActiveTabIndex(initialTabIndex)\n }, [initialTabIndex])\n\n const scrollToTab = () =>\n activeTab.ref.current?.scrollIntoView?.({\n inline: \"center\",\n block: \"nearest\",\n behavior: \"smooth\",\n })\n\n useEffect(() => {\n scrollToTab()\n }, [tabs, activeTabIndex])\n\n const handleClick = useCallback(\n (index: number) => {\n return () => {\n if (index === activeTabIndex) return\n\n setActiveTabIndex(index)\n\n scrollToTab()\n\n if (!onChange) return\n\n onChange({\n tabIndex: index,\n name: tabs[index].child.props.name,\n data: tabs[index].child.props.data ?? {},\n })\n }\n },\n [tabs, onChange, activeTabIndex]\n )\n\n return {\n tabs,\n activeTab,\n activeTabIndex,\n handleClick,\n }\n}\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<TabsProps> = ({\n children,\n initialTabIndex = 0,\n onChange,\n ...rest\n}) => {\n const textVariant: TextVariant = useThemeConfig({\n v2: \"mediumText\",\n v3: \"sm\",\n })\n\n const { tabs, activeTab, activeTabIndex, handleClick } = useTabs({\n children,\n initialTabIndex,\n onChange,\n })\n\n return (\n <>\n <BaseTabs {...rest}>\n {tabs.map((tab, i) => {\n return (\n <Clickable\n key={i}\n ref={tab.ref as any}\n aria-selected={i === activeTabIndex}\n onClick={handleClick(i)}\n flex={1}\n >\n <BaseTab active={i === activeTabIndex} variant={textVariant}>\n <span>{tab.child.props.name}</span>\n </BaseTab>\n </Clickable>\n )\n })}\n </BaseTabs>\n\n {activeTab.child}\n </>\n )\n}\n\nTabs.defaultProps = {\n mb: 2,\n}\n\nexport interface TabProps {\n /** Display name of the Tab */\n name: string | JSX.Element\n /**\n * Arbitrary data that can be associated with a Tab.\n * Will be passed to the parent <Tabs>'s onChange handler.\n */\n data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<TabProps> = ({ children }) => <>{children}</>\n"],"file":"Tabs.js"}
|
|
@@ -13,6 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
|
|
14
14
|
var _storybookStates = require("storybook-states");
|
|
15
15
|
|
|
16
|
+
var _Button = require("../Button");
|
|
17
|
+
|
|
18
|
+
var _Flex = require("../Flex");
|
|
19
|
+
|
|
16
20
|
var _svgs = require("../../svgs");
|
|
17
21
|
|
|
18
22
|
var _Sup = require("../Sup");
|
|
@@ -137,11 +141,23 @@ exports.ConditionalTabs = ConditionalTabs;
|
|
|
137
141
|
ConditionalTabs.displayName = "ConditionalTabs";
|
|
138
142
|
|
|
139
143
|
var AutoScrolling = function AutoScrolling() {
|
|
144
|
+
var _useState3 = (0, _react.useState)(0),
|
|
145
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
146
|
+
activeTabIndex = _useState4[0],
|
|
147
|
+
setActiveTabIndex = _useState4[1];
|
|
148
|
+
|
|
140
149
|
return /*#__PURE__*/_react.default.createElement(_.Tabs, {
|
|
141
|
-
onChange: (0, _addonActions.action)("onChange")
|
|
150
|
+
onChange: (0, _addonActions.action)("onChange"),
|
|
151
|
+
initialTabIndex: activeTabIndex
|
|
142
152
|
}, /*#__PURE__*/_react.default.createElement(_.Tab, {
|
|
143
153
|
name: "First"
|
|
144
|
-
}, "First"
|
|
154
|
+
}, "First", /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
155
|
+
size: "small",
|
|
156
|
+
marginTop: 4,
|
|
157
|
+
onClick: function onClick() {
|
|
158
|
+
setActiveTabIndex(14);
|
|
159
|
+
}
|
|
160
|
+
}, "Scroll to last"))), /*#__PURE__*/_react.default.createElement(_.Tab, {
|
|
145
161
|
name: "Second"
|
|
146
162
|
}, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
|
|
147
163
|
name: "Third"
|
|
@@ -169,7 +185,13 @@ var AutoScrolling = function AutoScrolling() {
|
|
|
169
185
|
name: "Fourteenth"
|
|
170
186
|
}, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
|
|
171
187
|
name: "Fifteenth"
|
|
172
|
-
}, "Fifteenth"
|
|
188
|
+
}, "Fifteenth", /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
189
|
+
size: "small",
|
|
190
|
+
marginTop: 4,
|
|
191
|
+
onClick: function onClick() {
|
|
192
|
+
setActiveTabIndex(0);
|
|
193
|
+
}
|
|
194
|
+
}, "Scroll to first"))));
|
|
173
195
|
};
|
|
174
196
|
|
|
175
197
|
exports.AutoScrolling = AutoScrolling;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Tabs/Tabs.story.tsx"],"names":["title","Default","initialTabIndex","separator","justifyContent","WithData","data","setData","name","JSON","stringify","Counts","ConditionalTabs","AutoScrolling"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Tabs/Tabs.story.tsx"],"names":["title","Default","initialTabIndex","separator","justifyContent","WithData","data","setData","name","JSON","stringify","Counts","ConditionalTabs","AutoScrolling","activeTabIndex","setActiveTabIndex"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Sup } from \"../Sup\"\nimport { Tab, Tabs, TabsProps } from \"./\"\n\nexport default {\n title: \"Components/Tabs\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<TabsProps>>\n states={[\n {},\n { initialTabIndex: 2 },\n { separator: <ChevronIcon mx={2} fill=\"black30\" width=\"12px\" /> },\n { justifyContent: \"center\" },\n ]}\n >\n <Tabs onChange={action(\"onChange\")}>\n <Tab name=\"Overview\">Overview panel</Tab>\n <Tab name=\"Works for sale\">Works for sale panel</Tab>\n <Tab name=\"CV\">CV panel</Tab>\n <Tab name=\"Auction results\">Auction results panel</Tab>\n </Tabs>\n </States>\n )\n}\n\nexport const WithData = () => {\n const [data, setData] = useState({})\n return (\n <>\n <Tabs onChange={setData as any}>\n <Tab name=\"Overview\" data={{ name: \"Overview\" }}>\n Overview panel\n </Tab>\n\n <Tab name=\"Works for sale\" data={{ name: \"Works for sale\" }}>\n Works for sale panel\n </Tab>\n\n <Tab name=\"CV\" data={{ name: \"CV\" }}>\n CV panel\n </Tab>\n\n <Tab name=\"Auction results\" data={{ name: \"Auction results\" }}>\n Auction results panel\n </Tab>\n\n <Tab name=\"No data\">No data panel</Tab>\n </Tabs>\n\n <pre>{JSON.stringify(data, null, 2)}</pre>\n </>\n )\n}\n\nexport const Counts = () => {\n return (\n <Tabs onChange={action(\"onChange\")}>\n <Tab\n name={\n <>\n Overview <Sup>123</Sup>\n </>\n }\n />\n <Tab\n name={\n <>\n Works for sale <Sup>123</Sup>\n </>\n }\n />\n <Tab name=\"CV\" />\n <Tab\n name={\n <>\n Auction results <Sup>123</Sup>\n </>\n }\n />\n </Tabs>\n )\n}\n\nexport const ConditionalTabs = () => {\n return (\n <Tabs onChange={action(\"onChange\")}>\n <Tab name=\"First\">First</Tab>\n {false && <Tab name=\"Second\">Second</Tab>}\n <Tab name=\"Third\">Third</Tab>\n </Tabs>\n )\n}\n\nexport const AutoScrolling = () => {\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n\n return (\n <Tabs onChange={action(\"onChange\")} initialTabIndex={activeTabIndex}>\n <Tab name=\"First\">\n First\n <Flex>\n <Button\n size=\"small\"\n marginTop={4}\n onClick={() => {\n setActiveTabIndex(14)\n }}\n >\n Scroll to last\n </Button>\n </Flex>\n </Tab>\n <Tab name=\"Second\">Second</Tab>\n <Tab name=\"Third\">Third</Tab>\n <Tab name=\"Fourth\">Fourth</Tab>\n <Tab name=\"Fifth\">Fifth</Tab>\n <Tab name=\"Sixth\">Sixth</Tab>\n <Tab name=\"Seventh\">Seventh</Tab>\n <Tab name=\"Eighth\">Eighth</Tab>\n <Tab name=\"Nineth\">Nineth</Tab>\n <Tab name=\"Tenth\">Tenth</Tab>\n <Tab name=\"Eleventh\">Eleventh</Tab>\n <Tab name=\"Twelveth\">Twelveth</Tab>\n <Tab name=\"Thirteenth\">Thirteenth</Tab>\n <Tab name=\"Fourteenth\">Fourteenth</Tab>\n <Tab name=\"Fifteenth\">\n Fifteenth\n <Flex>\n <Button\n size=\"small\"\n marginTop={4}\n onClick={() => {\n setActiveTabIndex(0)\n }}\n >\n Scroll to first\n </Button>\n </Flex>\n </Tab>\n </Tabs>\n )\n}\n"],"file":"Tabs.story.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.6.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -175,5 +175,5 @@
|
|
|
175
175
|
"<rootDir>/www/"
|
|
176
176
|
]
|
|
177
177
|
},
|
|
178
|
-
"gitHead": "
|
|
178
|
+
"gitHead": "08632c65fdc7367121c8721d6861e8bcd6d39888"
|
|
179
179
|
}
|