@artsy/palette 18.14.0 → 18.15.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 +17 -0
- package/dist/elements/FilterSelect/Components/FilterSelectContext.d.ts +13 -10
- package/dist/elements/FilterSelect/Components/FilterSelectContext.js +11 -3
- package/dist/elements/FilterSelect/Components/FilterSelectContext.js.map +1 -1
- package/dist/elements/FilterSelect/FilterSelect.js +4 -3
- package/dist/elements/FilterSelect/FilterSelect.js.map +1 -1
- package/dist/elements/FilterSelect/FilterSelect.story.js +2 -1
- package/dist/elements/FilterSelect/FilterSelect.story.js.map +1 -1
- package/dist/elements/FilterSelect/index.d.ts +1 -0
- package/dist/elements/FilterSelect/index.js +19 -0
- package/dist/elements/FilterSelect/index.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
# v18.15.0 (Wed Jan 19 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- feat(filterselect): Add multiselect option [#1104](https://github.com/artsy/palette/pull/1104) ([@damassi](https://github.com/damassi))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- add ReadonlyArray to satisfy relay list ([@damassi](https://github.com/damassi))
|
|
10
|
+
- feat(filterselect): add multiselect=false option ([@damassi](https://github.com/damassi))
|
|
11
|
+
|
|
12
|
+
#### Authors: 1
|
|
13
|
+
|
|
14
|
+
- Christopher Pappas ([@damassi](https://github.com/damassi))
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
1
18
|
# v18.14.0 (Tue Jan 18 2022)
|
|
2
19
|
|
|
3
20
|
#### 🚀 Enhancement
|
|
@@ -4,26 +4,29 @@ export interface Item {
|
|
|
4
4
|
value: string;
|
|
5
5
|
[key: string]: string | number | boolean;
|
|
6
6
|
}
|
|
7
|
+
export declare type Items = ReadonlyArray<Item>;
|
|
8
|
+
export interface FilterSelectChangeState {
|
|
9
|
+
items: FilterSelectContextProps["items"];
|
|
10
|
+
filteredItems: FilterSelectContextProps["filteredItems"];
|
|
11
|
+
selectedItems: FilterSelectContextProps["selectedItems"];
|
|
12
|
+
query: FilterSelectContextProps["query"];
|
|
13
|
+
}
|
|
7
14
|
interface FilterSelectContextProps {
|
|
8
|
-
items:
|
|
9
|
-
filteredItems:
|
|
15
|
+
items: Items;
|
|
16
|
+
filteredItems: Items;
|
|
10
17
|
initialItemsToShow: number;
|
|
11
18
|
isFiltered: boolean;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
filteredItems: FilterSelectContextProps["filteredItems"];
|
|
15
|
-
selectedItems: FilterSelectContextProps["selectedItems"];
|
|
16
|
-
query: FilterSelectContextProps["query"];
|
|
17
|
-
}) => void;
|
|
19
|
+
multiselect: boolean;
|
|
20
|
+
onChange: (state: FilterSelectChangeState) => void;
|
|
18
21
|
order: [string[], Array<"asc" | "desc">];
|
|
19
22
|
placeholder: string;
|
|
20
23
|
query: string;
|
|
21
24
|
renderItemLabel?: (item: any) => string;
|
|
22
|
-
selectedItems:
|
|
25
|
+
selectedItems: Items;
|
|
23
26
|
setSelectedItems: (item: Item) => void;
|
|
24
27
|
setQuery: (query: string) => void;
|
|
25
28
|
}
|
|
26
|
-
export declare type FilterSelectState = Pick<FilterSelectContextProps, "filteredItems" | "initialItemsToShow" | "items" | "isFiltered" | "onChange" | "order" | "placeholder" | "renderItemLabel" | "query" | "selectedItems">;
|
|
29
|
+
export declare type FilterSelectState = Pick<FilterSelectContextProps, "filteredItems" | "initialItemsToShow" | "items" | "isFiltered" | "multiselect" | "onChange" | "order" | "placeholder" | "renderItemLabel" | "query" | "selectedItems">;
|
|
27
30
|
export declare const FilterSelectContextProvider: React.FC<Partial<FilterSelectState>>;
|
|
28
31
|
export declare const useFilterSelectContext: () => FilterSelectContextProps;
|
|
29
32
|
export {};
|
|
@@ -79,9 +79,16 @@ var filterSelectReducer = function filterSelectReducer(state, action) {
|
|
|
79
79
|
var isFound = !!state.selectedItems.find(function (item) {
|
|
80
80
|
return item.value === action.payload.item.value;
|
|
81
81
|
});
|
|
82
|
-
var selectedItems
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
var selectedItems;
|
|
83
|
+
|
|
84
|
+
if (isFound) {
|
|
85
|
+
selectedItems = (0, _lodash.default)(state.selectedItems, {
|
|
86
|
+
value: action.payload.item.value
|
|
87
|
+
});
|
|
88
|
+
} else {
|
|
89
|
+
selectedItems = state.multiselect ? [].concat(_toConsumableArray(state.selectedItems), [action.payload.item]) : [action.payload.item];
|
|
90
|
+
}
|
|
91
|
+
|
|
85
92
|
return _objectSpread(_objectSpread({}, state), {}, {
|
|
86
93
|
selectedItems: selectedItems
|
|
87
94
|
});
|
|
@@ -94,6 +101,7 @@ var initialState = {
|
|
|
94
101
|
initialItemsToShow: _ShowMore.INITIAL_ITEMS_TO_SHOW,
|
|
95
102
|
isFiltered: false,
|
|
96
103
|
items: [],
|
|
104
|
+
multiselect: true,
|
|
97
105
|
onChange: function onChange(x) {
|
|
98
106
|
return x;
|
|
99
107
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/elements/FilterSelect/Components/FilterSelectContext.tsx"],"names":["filterSelectReducer","state","action","type","query","payload","isFiltered","filteredItems","items","filter","name","label","toLowerCase","includes","isFound","selectedItems","find","item","value","initialState","initialItemsToShow","INITIAL_ITEMS_TO_SHOW","onChange","x","order","placeholder","renderItemLabel","undefined","FilterSelectContext","FilterSelectContextProvider","children","props","dispatch","contextValue","setSelectedItems","setQuery","length","useFilterSelectContext"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/elements/FilterSelect/Components/FilterSelectContext.tsx"],"names":["filterSelectReducer","state","action","type","query","payload","isFiltered","filteredItems","items","filter","name","label","toLowerCase","includes","isFound","selectedItems","find","item","value","multiselect","initialState","initialItemsToShow","INITIAL_ITEMS_TO_SHOW","onChange","x","order","placeholder","renderItemLabel","undefined","FilterSelectContext","FilterSelectContextProvider","children","props","dispatch","contextValue","setSelectedItems","setQuery","length","useFilterSelectContext"],"mappings":"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","sourcesContent":["import reject from \"lodash.reject\"\nimport React, {\n createContext,\n useContext,\n useLayoutEffect,\n useReducer,\n} from \"react\"\nimport { INITIAL_ITEMS_TO_SHOW } from \"../../ShowMore\"\n\nexport interface Item {\n label: string\n value: string\n [key: string]: string | number | boolean\n}\n\n// In order to satisfy the Relay compilers readonly list types. This is in\n// support for passing different kinds of item types as props, like aggregations\nexport type Items = ReadonlyArray<Item>\n\nexport interface FilterSelectChangeState {\n items: FilterSelectContextProps[\"items\"]\n filteredItems: FilterSelectContextProps[\"filteredItems\"]\n selectedItems: FilterSelectContextProps[\"selectedItems\"]\n query: FilterSelectContextProps[\"query\"]\n}\n\ninterface FilterSelectContextProps {\n items: Items\n filteredItems: Items\n initialItemsToShow: number\n isFiltered: boolean\n multiselect: boolean\n onChange: (state: FilterSelectChangeState) => void\n order: [string[], Array<\"asc\" | \"desc\">] // See: https://lodash.com/docs/4.17.15#orderBy\n placeholder: string\n query: string\n renderItemLabel?: (item: any) => string\n selectedItems: Items\n setSelectedItems: (item: Item) => void\n setQuery: (query: string) => void\n}\n\nexport type FilterSelectState = Pick<\n FilterSelectContextProps,\n | \"filteredItems\"\n | \"initialItemsToShow\"\n | \"items\"\n | \"isFiltered\"\n | \"multiselect\"\n | \"onChange\"\n | \"order\"\n | \"placeholder\"\n | \"renderItemLabel\"\n | \"query\"\n | \"selectedItems\"\n>\n\ntype Action =\n | { type: \"SET_QUERY\"; payload: { query: string } }\n | { type: \"SET_SELECTED_ITEMS\"; payload: { item: Item } }\n\nconst filterSelectReducer = (state: FilterSelectState, action: Action) => {\n switch (action.type) {\n case \"SET_QUERY\": {\n const { query } = action.payload\n\n if (query === \"\") {\n return {\n ...state,\n query,\n isFiltered: false,\n filteredItems: [],\n }\n }\n\n const filteredItems = state.items.filter(({ label: name }) => {\n return name.toLowerCase().includes(query.toLowerCase())\n })\n\n return {\n ...state,\n query,\n isFiltered: true,\n filteredItems,\n }\n }\n\n case \"SET_SELECTED_ITEMS\": {\n const isFound = !!state.selectedItems.find(\n (item) => item.value === action.payload.item.value\n )\n\n let selectedItems\n if (isFound) {\n selectedItems = reject(state.selectedItems, {\n value: action.payload.item.value,\n })\n } else {\n selectedItems = state.multiselect\n ? [...state.selectedItems, action.payload.item]\n : [action.payload.item]\n }\n\n return {\n ...state,\n selectedItems,\n }\n }\n }\n}\n\nconst initialState: FilterSelectState = {\n filteredItems: [],\n initialItemsToShow: INITIAL_ITEMS_TO_SHOW,\n isFiltered: false,\n items: [],\n multiselect: true,\n onChange: (x) => x,\n order: [[\"label\"], [\"asc\"]],\n placeholder: \"\",\n query: \"\",\n renderItemLabel: undefined,\n selectedItems: [],\n}\n\nconst FilterSelectContext = createContext<FilterSelectContextProps>({} as any)\n\nexport const FilterSelectContextProvider: React.FC<\n Partial<FilterSelectState>\n> = ({ children, ...props }) => {\n const [state, dispatch] = useReducer(filterSelectReducer, {\n ...initialState,\n ...props,\n })\n\n const contextValue = {\n ...state,\n\n setSelectedItems: (item) => {\n dispatch({\n type: \"SET_SELECTED_ITEMS\",\n payload: { item },\n })\n },\n setQuery: (query) => {\n dispatch({\n type: \"SET_QUERY\",\n payload: { query },\n })\n },\n }\n\n useLayoutEffect(() => {\n if (props.query?.length) {\n contextValue.setQuery(props.query)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return (\n <FilterSelectContext.Provider value={contextValue}>\n {children}\n </FilterSelectContext.Provider>\n )\n}\n\nexport const useFilterSelectContext = () => {\n return useContext(FilterSelectContext)\n}\n"],"file":"FilterSelectContext.js"}
|
|
@@ -50,6 +50,7 @@ var _FilterSelect = function _FilterSelect() {
|
|
|
50
50
|
initialItemsToShow = _useFilterSelectConte.initialItemsToShow,
|
|
51
51
|
isFiltered = _useFilterSelectConte.isFiltered,
|
|
52
52
|
items = _useFilterSelectConte.items,
|
|
53
|
+
multiselect = _useFilterSelectConte.multiselect,
|
|
53
54
|
onChange = _useFilterSelectConte.onChange,
|
|
54
55
|
order = _useFilterSelectConte.order,
|
|
55
56
|
query = _useFilterSelectConte.query,
|
|
@@ -66,7 +67,7 @@ var _FilterSelect = function _FilterSelect() {
|
|
|
66
67
|
});
|
|
67
68
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
69
|
|
|
69
|
-
}, [
|
|
70
|
+
}, [selectedItems]);
|
|
70
71
|
|
|
71
72
|
if (items.length === 0) {
|
|
72
73
|
return null;
|
|
@@ -78,8 +79,8 @@ var _FilterSelect = function _FilterSelect() {
|
|
|
78
79
|
|
|
79
80
|
var itemsOrdered = orderItems(items);
|
|
80
81
|
var filterdItemsOrdered = orderItems(filteredItems);
|
|
81
|
-
var itemsSorted =
|
|
82
|
-
|
|
82
|
+
var itemsSorted = multiselect ? // Move selected items to the top
|
|
83
|
+
(0, _lodash.default)(selectedItems.concat(itemsOrdered), "value") : itemsOrdered;
|
|
83
84
|
var expanded = isBelowTheFoldSelected(selectedItems, itemsSorted);
|
|
84
85
|
var showNoResults = filteredItems.length === 0 && query !== "";
|
|
85
86
|
return /*#__PURE__*/React.createElement(_Flex.Flex, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.tsx"],"names":["FilterSelect","props","_FilterSelect","filteredItems","initialItemsToShow","isFiltered","items","onChange","order","query","selectedItems","length","orderItems","itemsOrdered","filterdItemsOrdered","itemsSorted","concat","expanded","isBelowTheFoldSelected","showNoResults","map","item","value","resultsSorted","selected","results","slice","INITIAL_ITEMS_TO_SHOW","isSelected"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;;;AAMO,IAAMA,YAAyC,GAAG,SAA5CA,YAA4C,CAACC,KAAD,EAAW;AAClE,sBACE,oBAAC,gDAAD,EAAiCA,KAAjC,eACE,oBAAC,aAAD,OADF,CADF;AAKD,CANM;;;AAAMD,Y;;AAQb,IAAME,aAAuB,GAAG,SAA1BA,aAA0B,GAAM;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.tsx"],"names":["FilterSelect","props","_FilterSelect","filteredItems","initialItemsToShow","isFiltered","items","multiselect","onChange","order","query","selectedItems","length","orderItems","itemsOrdered","filterdItemsOrdered","itemsSorted","concat","expanded","isBelowTheFoldSelected","showNoResults","map","item","value","resultsSorted","selected","results","slice","INITIAL_ITEMS_TO_SHOW","isSelected"],"mappings":"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","sourcesContent":["import uniqBy from \"lodash.uniqby\"\nimport orderBy from \"lodash.orderby\"\nimport intersection from \"lodash.intersection\"\nimport * as React from \"react\"\nimport { ShowMore } from \"../ShowMore\"\nimport { Flex } from \"../Flex\"\nimport { FilterSelectResultItem } from \"./Components/FilterSelectResultItem\"\nimport {\n FilterSelectContextProvider,\n FilterSelectState,\n useFilterSelectContext,\n} from \"./Components/FilterSelectContext\"\nimport { FilterInput } from \"./Components/FilterInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Text } from \"../Text\"\nimport { INITIAL_ITEMS_TO_SHOW } from \"../ShowMore\"\nimport { useEffect } from \"react\"\n\nexport type FilterSelectProps = Partial<FilterSelectState>\n\nexport const FilterSelect: React.FC<FilterSelectProps> = (props) => {\n return (\n <FilterSelectContextProvider {...props}>\n <_FilterSelect />\n </FilterSelectContextProvider>\n )\n}\n\nconst _FilterSelect: React.FC = () => {\n const {\n filteredItems,\n initialItemsToShow,\n isFiltered,\n items,\n multiselect,\n onChange,\n order,\n query,\n selectedItems,\n } = useFilterSelectContext()\n\n // Dispatch change event\n useEffect(() => {\n if (onChange) {\n onChange({\n items,\n filteredItems,\n selectedItems,\n query,\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedItems])\n\n if (items.length === 0) {\n return null\n }\n\n const orderItems = (items) => orderBy(items, order[0], order[1])\n const itemsOrdered = orderItems(items)\n const filterdItemsOrdered = orderItems(filteredItems)\n const itemsSorted = multiselect\n ? // Move selected items to the top\n uniqBy(selectedItems.concat(itemsOrdered), \"value\")\n : itemsOrdered\n const expanded = isBelowTheFoldSelected(selectedItems, itemsSorted)\n const showNoResults = filteredItems.length === 0 && query !== \"\"\n\n return (\n <Flex flexDirection=\"column\">\n <FilterInput mb={1} />\n\n {query !== \"\" && (\n <VisuallyHidden aria-live=\"polite\">\n {`${filteredItems.length} result${\n filteredItems.length === 1 ? \"\" : \"s\"\n }`}\n </VisuallyHidden>\n )}\n\n {showNoResults && <Text variant=\"sm\">No results.</Text>}\n\n {isFiltered ? (\n filterdItemsOrdered.map((item) => (\n <FilterSelectResultItem key={item.value} {...item} />\n ))\n ) : (\n <ShowMore expanded={expanded} initial={initialItemsToShow}>\n {itemsSorted.map((item) => {\n return <FilterSelectResultItem key={item.value} {...item} />\n })}\n </ShowMore>\n )}\n </Flex>\n )\n}\n\nexport const isBelowTheFoldSelected = (selectedItems, resultsSorted) => {\n const selected = selectedItems.map(({ value }) => value)\n const results = resultsSorted\n .slice(INITIAL_ITEMS_TO_SHOW)\n .map(({ value }) => value)\n const isSelected = intersection(selected, results).length > 0\n return isSelected\n}\n"],"file":"FilterSelect.js"}
|
|
@@ -23,9 +23,10 @@ var Default = function Default() {
|
|
|
23
23
|
states: [{
|
|
24
24
|
placeholder: "Filter by artist name",
|
|
25
25
|
initialItemsToShow: 6,
|
|
26
|
+
multiselect: true,
|
|
26
27
|
order: [["country", "name"], ["asc", "asc"]],
|
|
27
28
|
renderItemLabel: function renderItemLabel(item) {
|
|
28
|
-
return "".concat(item.
|
|
29
|
+
return "".concat(item.label, ", ").concat(item.country);
|
|
29
30
|
},
|
|
30
31
|
onChange: function onChange(state) {
|
|
31
32
|
console.log(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.story.tsx"],"names":["title","Default","placeholder","initialItemsToShow","order","renderItemLabel","item","
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.story.tsx"],"names":["title","Default","placeholder","initialItemsToShow","multiselect","order","renderItemLabel","item","label","country","onChange","state","console","log","items","value","props"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAGe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEC,MAAAA,WAAW,EAAE,uBADf;AAEEC,MAAAA,kBAAkB,EAAE,CAFtB;AAGEC,MAAAA,WAAW,EAAE,IAHf;AAIEC,MAAAA,KAAK,EAAE,CACL,CAAC,SAAD,EAAY,MAAZ,CADK,EAEL,CAAC,KAAD,EAAQ,KAAR,CAFK,CAJT;AAQEC,MAAAA,eAAe,EAAE,yBAACC,IAAD,EAAU;AACzB,yBAAUA,IAAI,CAACC,KAAf,eAAyBD,IAAI,CAACE,OAA9B;AACD,OAVH;AAWEC,MAAAA,QAAQ,EAAE,kBAACC,KAAD,EAAW;AACnBC,QAAAA,OAAO,CAACC,GAAR,CAAYF,KAAZ;AACD,OAbH;AAcEG,MAAAA,KAAK,EAAE,CACL;AACEN,QAAAA,KAAK,EAAE,gBADT;AAEEO,QAAAA,KAAK,EAAE,gBAFT;AAGEN,QAAAA,OAAO,EAAE;AAHX,OADK,EAML;AACED,QAAAA,KAAK,EAAE,kBADT;AAEEO,QAAAA,KAAK,EAAE,cAFT;AAGEN,QAAAA,OAAO,EAAE;AAHX,OANK,EAWL;AACED,QAAAA,KAAK,EAAE,eADT;AAEEO,QAAAA,KAAK,EAAE,cAFT;AAGEN,QAAAA,OAAO,EAAE;AAHX,OAXK,EAgBL;AACED,QAAAA,KAAK,EAAE,kBADT;AAEEO,QAAAA,KAAK,EAAE,iBAFT;AAGEN,QAAAA,OAAO,EAAE;AAHX,OAhBK,EAqBL;AACED,QAAAA,KAAK,EAAE,aADT;AAEEO,QAAAA,KAAK,EAAE,aAFT;AAGEN,QAAAA,OAAO,EAAE;AAHX,OArBK,EA0BL;AACED,QAAAA,KAAK,EAAE,iBADT;AAEEO,QAAAA,KAAK,EAAE,iBAFT;AAGEN,QAAAA,OAAO,EAAE;AAHX,OA1BK,EA+BL;AACED,QAAAA,KAAK,EAAE,gBADT;AAEEO,QAAAA,KAAK,EAAE,kBAFT;AAGEN,QAAAA,OAAO,EAAE;AAHX,OA/BK;AAdT,KADM;AADV,KAwDG,UAACO,KAAD;AAAA,wBAAW,6BAAC,0BAAD,EAAkBA,KAAlB,CAAX;AAAA,GAxDH,CADF;AA4DD,CA7DM;;;AAAMf,O","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { FilterSelect } from \"./FilterSelect\"\nimport { FilterSelectProps } from \"./FilterSelect\"\n\nexport default {\n title: \"Components/FilterSelect\",\n}\n\nexport const Default = () => {\n return (\n <States<FilterSelectProps>\n states={[\n {\n placeholder: \"Filter by artist name\",\n initialItemsToShow: 6,\n multiselect: true,\n order: [\n [\"country\", \"name\"],\n [\"asc\", \"asc\"],\n ],\n renderItemLabel: (item) => {\n return `${item.label}, ${item.country}`\n },\n onChange: (state) => {\n console.log(state)\n },\n items: [\n {\n label: \"Barbara Kruger\",\n value: \"barbara-kruger\",\n country: \"American\",\n },\n {\n label: \"Carrie Mae Weems\",\n value: \"carrie-weems\",\n country: \"American\",\n },\n {\n label: \"Daniel Arsham\",\n value: \"daniel-asham\",\n country: \"American\",\n },\n {\n label: \"Takashi Murakami\",\n value: \"takashi-muakami\",\n country: \"American\",\n },\n {\n label: \"Tracey Emin\",\n value: \"tracey-emin\",\n country: \"British-Nigerian\",\n },\n {\n label: \"Yinka Shonibare\",\n value: \"yinka-shonibare\",\n country: \"Japanese\",\n },\n {\n label: \"Barbara Kruger\",\n value: \"barbara-kruger-2\",\n country: \"British-Nigerian\",\n },\n ],\n },\n ]}\n >\n {(props) => <FilterSelect {...props} />}\n </States>\n )\n}\n"],"file":"FilterSelect.story.js"}
|
|
@@ -3,11 +3,30 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
FilterSelectChangeState: true,
|
|
8
|
+
FilterSelectItems: true
|
|
9
|
+
};
|
|
10
|
+
Object.defineProperty(exports, "FilterSelectChangeState", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _FilterSelectContext.FilterSelectChangeState;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
Object.defineProperty(exports, "FilterSelectItems", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function get() {
|
|
19
|
+
return _FilterSelectContext.Items;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
var _FilterSelectContext = require("./Components/FilterSelectContext");
|
|
6
24
|
|
|
7
25
|
var _FilterSelect = require("./FilterSelect");
|
|
8
26
|
|
|
9
27
|
Object.keys(_FilterSelect).forEach(function (key) {
|
|
10
28
|
if (key === "default" || key === "__esModule") return;
|
|
29
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
11
30
|
if (key in exports && exports[key] === _FilterSelect[key]) return;
|
|
12
31
|
Object.defineProperty(exports, key, {
|
|
13
32
|
enumerable: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/FilterSelect/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/FilterSelect/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export {\n FilterSelectChangeState,\n Items as FilterSelectItems,\n} from \"./Components/FilterSelectContext\"\nexport * from \"./FilterSelect\"\n"],"file":"index.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.15.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -178,5 +178,5 @@
|
|
|
178
178
|
"<rootDir>/www/"
|
|
179
179
|
]
|
|
180
180
|
},
|
|
181
|
-
"gitHead": "
|
|
181
|
+
"gitHead": "ca69d25d8dbab395b24e25a7b4a9c10136a66517"
|
|
182
182
|
}
|