@decisiv/ui-components 2.0.1-alpha.224 → 2.0.1-alpha.226
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/lib/atoms/OptionsList/index.d.ts.map +1 -1
- package/lib/atoms/OptionsList/index.js +9 -5
- package/lib/atoms/OptionsList/index.test.js +5 -1
- package/lib/atoms/OptionsList/schema.d.ts.map +1 -1
- package/lib/atoms/OptionsList/schema.js +3 -1
- package/lib/atoms/OptionsList/types.d.ts +1 -0
- package/lib/atoms/OptionsList/types.d.ts.map +1 -1
- package/lib/atoms/OptionsList/utils.d.ts +0 -1
- package/lib/atoms/OptionsList/utils.d.ts.map +1 -1
- package/lib/atoms/OptionsList/utils.js +2 -32
- package/lib/components/Combobox/Target.d.ts.map +1 -1
- package/lib/components/Combobox/Target.js +3 -0
- package/lib/components/Combobox/index.d.ts.map +1 -1
- package/lib/components/Combobox/index.js +4 -2
- package/lib/components/Combobox/types.d.ts +2 -0
- package/lib/components/Combobox/types.d.ts.map +1 -1
- package/lib/components/SearchInput/index.js +2 -1
- package/lib/providers/ConfigProvider/utils/translations.d.ts +2 -0
- package/lib/providers/ConfigProvider/utils/translations.d.ts.map +1 -1
- package/lib/providers/ConfigProvider/utils/translations.js +2 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAqBf,OAAO,EAEL,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAqBf,OAAO,EAEL,gBAAgB,EAQjB,MAAM,SAAS,CAAC;AAoBjB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA+iBrC,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}
|
|
@@ -154,7 +154,11 @@ function OptionsList(props, forwardedRef) {
|
|
|
154
154
|
maxWidth = props.maxWidth,
|
|
155
155
|
maxHeight = props.maxHeight,
|
|
156
156
|
pointerEvents = props.pointerEvents,
|
|
157
|
-
enableVirtualization = props.enableVirtualization
|
|
157
|
+
enableVirtualization = props.enableVirtualization,
|
|
158
|
+
_props$getItemHeight = props.getItemHeight,
|
|
159
|
+
getItemHeight = _props$getItemHeight === void 0 ? function (_item, _size) {
|
|
160
|
+
return 48;
|
|
161
|
+
} : _props$getItemHeight;
|
|
158
162
|
var initialIds = selectedIdsProp || defaultSelected;
|
|
159
163
|
|
|
160
164
|
var _useState = (0, _react.useState)(null),
|
|
@@ -176,13 +180,13 @@ function OptionsList(props, forwardedRef) {
|
|
|
176
180
|
}, [items, useVirtualization]); // Get item size for VariableSizeList
|
|
177
181
|
|
|
178
182
|
var getItemSize = (0, _react.useCallback)(function (index) {
|
|
179
|
-
return
|
|
180
|
-
}, [flattenedItems, size]); // Calculate total height for the list
|
|
183
|
+
return getItemHeight(flattenedItems[index], size);
|
|
184
|
+
}, [flattenedItems, size, getItemHeight]); // Calculate total height for the list
|
|
181
185
|
|
|
182
186
|
var totalHeight = (0, _react.useMemo)(function () {
|
|
183
187
|
if (!useVirtualization) return 0;
|
|
184
188
|
var calculated = flattenedItems.reduce(function (acc, item) {
|
|
185
|
-
return acc +
|
|
189
|
+
return acc + getItemHeight(item, size);
|
|
186
190
|
}, 0); // If maxHeight is explicitly provided, use it
|
|
187
191
|
|
|
188
192
|
if (maxHeight && typeof maxHeight === 'string') {
|
|
@@ -200,7 +204,7 @@ function OptionsList(props, forwardedRef) {
|
|
|
200
204
|
}
|
|
201
205
|
|
|
202
206
|
return defaultMax;
|
|
203
|
-
}, [flattenedItems, size, maxHeight, useVirtualization]);
|
|
207
|
+
}, [flattenedItems, size, maxHeight, useVirtualization, getItemHeight]);
|
|
204
208
|
var updateSelectionAndTriggerChange = (0, _react.useCallback)(function (ids) {
|
|
205
209
|
// Only toggle if we are "uncontrolled"
|
|
206
210
|
selectedIdsProp === undefined && selectable && setSelectedIds(ids);
|
|
@@ -104,7 +104,10 @@ describe('OptionsList', function () {
|
|
|
104
104
|
describe('virtualization', function () {
|
|
105
105
|
it('renders with virtualization enabled', function () {
|
|
106
106
|
var _render = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
|
|
107
|
-
enableVirtualization: true
|
|
107
|
+
enableVirtualization: true,
|
|
108
|
+
getItemHeight: function getItemHeight(item) {
|
|
109
|
+
return item.type === 'category-header' ? 40 : 48;
|
|
110
|
+
}
|
|
108
111
|
})), {
|
|
109
112
|
wrapper: wrapper
|
|
110
113
|
}),
|
|
@@ -113,6 +116,7 @@ describe('OptionsList', function () {
|
|
|
113
116
|
|
|
114
117
|
var listContainer = container.querySelector('[style*="overflow"]');
|
|
115
118
|
expect(listContainer).toBeTruthy();
|
|
119
|
+
expect(container).toMatchSnapshot();
|
|
116
120
|
});
|
|
117
121
|
it('renders without virtualization by default', function () {
|
|
118
122
|
var _render2 = render(_react.default.createElement(_.default, defaultProps), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAsFxD,eAAe,MAAM,CAAC"}
|
|
@@ -42,7 +42,9 @@ schema.makePropTypes = function () {
|
|
|
42
42
|
role: _reactDesc.PropTypes.string.description('The role assigned to the list.').defaultValue('listbox'),
|
|
43
43
|
itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option'),
|
|
44
44
|
size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small'),
|
|
45
|
-
onDragEnd: _reactDesc.PropTypes.func.description("If present, enables Drag-and-Drop sorting. This function will be called after the order of rows changes when a row is dragged and dropped. It is called with 2 arguments: the index from where it's dragged, and the index to where it's dropped. If there are grouped rows then each argument is an array where the first element is the group index and the second the row index inside the group. See below for function signature.")
|
|
45
|
+
onDragEnd: _reactDesc.PropTypes.func.description("If present, enables Drag-and-Drop sorting. This function will be called after the order of rows changes when a row is dragged and dropped. It is called with 2 arguments: the index from where it's dragged, and the index to where it's dropped. If there are grouped rows then each argument is an array where the first element is the group index and the second the row index inside the group. See below for function signature."),
|
|
46
|
+
enableVirtualization: _reactDesc.PropTypes.bool.description('Enables virtualization of the options list for better performance with large datasets. When enabled, only visible items are rendered. For accurate virtualization, you should also provide the getItemHeight prop.'),
|
|
47
|
+
getItemHeight: _reactDesc.PropTypes.func.description('Function that returns the height in pixels for each item. When enableVirtualization is true, this should be provided to avoid relying on the internal default. Called with (item, size) and should return the height as a number.')
|
|
46
48
|
};
|
|
47
49
|
};
|
|
48
50
|
|
|
@@ -94,6 +94,7 @@ export interface OptionsListProps extends OptionsListDimensions {
|
|
|
94
94
|
pointerEvents?: string;
|
|
95
95
|
onDragEnd?: (from: number | number[], to: number | number[]) => void;
|
|
96
96
|
enableVirtualization?: boolean;
|
|
97
|
+
getItemHeight?: (item: FlattenedItem, size: Size) => number;
|
|
97
98
|
}
|
|
98
99
|
export declare type OptionsListContainerRef = HTMLUListElement;
|
|
99
100
|
export interface StyledCategoryProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -7,5 +7,4 @@ export declare const ensureItemIsVisible: (container: HTMLUListElement | null, i
|
|
|
7
7
|
} | undefined) => void;
|
|
8
8
|
export declare const isLink: (item: Option) => item is LinkOption;
|
|
9
9
|
export declare const flattenItems: (items: Item[]) => FlattenedItem[];
|
|
10
|
-
export declare const getItemHeight: (flattenedItem: FlattenedItem, size?: "small" | "medium") => number;
|
|
11
10
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,KAAK,wBAAgD,CAAC;AAEnE,eAAO,MAAM,UAAU,kCACuB,CAAC;AAE/C,eAAO,MAAM,WAAW,qEAWvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;sBA+B/B,CAAC;AAEF,eAAO,MAAM,MAAM,sCACgB,CAAC;AAepC,eAAO,MAAM,YAAY,oCA+BxB,CAAC
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,KAAK,wBAAgD,CAAC;AAEnE,eAAO,MAAM,UAAU,kCACuB,CAAC;AAE/C,eAAO,MAAM,WAAW,qEAWvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;sBA+B/B,CAAC;AAEF,eAAO,MAAM,MAAM,sCACgB,CAAC;AAepC,eAAO,MAAM,YAAY,oCA+BxB,CAAC"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.flattenItems = exports.isLink = exports.ensureItemIsVisible = exports.sanitizeIds = exports.isCategory = exports.getId = void 0;
|
|
7
7
|
|
|
8
8
|
var _castArray = _interopRequireDefault(require("lodash/castArray"));
|
|
9
9
|
|
|
@@ -120,35 +120,5 @@ var flattenItems = function flattenItems(items) {
|
|
|
120
120
|
});
|
|
121
121
|
return flattened;
|
|
122
122
|
};
|
|
123
|
-
/**
|
|
124
|
-
* Calculate item height based on type and size for virtualization
|
|
125
|
-
*
|
|
126
|
-
* Heights are based on the styled-components padding values:
|
|
127
|
-
* - Options (small): 5px top + 5px bottom padding + ~25px content = ~35px
|
|
128
|
-
* - Options (medium): 10px top + 10px bottom padding + ~25px content = ~45px
|
|
129
|
-
* - Categories (small): 15px top + 7px bottom padding + ~20px content = ~42px
|
|
130
|
-
* - Categories (medium): 15px top + 10px bottom padding + ~25px content = ~50px
|
|
131
|
-
* - Options with labelDetails: Add ~20px extra height
|
|
132
|
-
*/
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
exports.flattenItems = flattenItems;
|
|
136
|
-
|
|
137
|
-
var getItemHeight = function getItemHeight(flattenedItem) {
|
|
138
|
-
var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'small';
|
|
139
|
-
var type = flattenedItem.type,
|
|
140
|
-
item = flattenedItem.item;
|
|
141
|
-
|
|
142
|
-
if (type === 'category-header') {
|
|
143
|
-
// Category headers are taller
|
|
144
|
-
return size === 'medium' ? 50 : 42;
|
|
145
|
-
} // Regular option
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
var baseHeight = size === 'medium' ? 45 : 35; // Check if option has labelDetails (secondary text) which adds height
|
|
149
|
-
|
|
150
|
-
var hasLabelDetails = 'labelDetails' in item && item.labelDetails;
|
|
151
|
-
return hasLabelDetails ? baseHeight + 20 : baseHeight;
|
|
152
|
-
};
|
|
153
123
|
|
|
154
|
-
exports.
|
|
124
|
+
exports.flattenItems = flattenItems;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAkBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAkBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA+LtC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,gBAAgB,EAChB,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}
|
|
@@ -134,6 +134,9 @@ function Target(_ref, ref) {
|
|
|
134
134
|
})), hasExpandIndicator && _react.default.createElement(ExpandedIndicatorContainer, {
|
|
135
135
|
disabled: disabled
|
|
136
136
|
}, _react.default.createElement(_Button.default, {
|
|
137
|
+
"aria-label": translate(undefined, isPopoverVisible ? 'combobox.collapseButtonLabel' : 'combobox.expandButtonLabel', {
|
|
138
|
+
label: inputFieldLabel
|
|
139
|
+
}),
|
|
137
140
|
disabled: disabled,
|
|
138
141
|
style: {
|
|
139
142
|
padding: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAgnBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
|
|
@@ -127,7 +127,8 @@ function Combobox(props, ref) {
|
|
|
127
127
|
pointerEvents = props.pointerEvents,
|
|
128
128
|
externalIsPopoverVisible = props.isPopoverVisible,
|
|
129
129
|
externalListRef = props.listRef,
|
|
130
|
-
enableVirtualization = props.enableVirtualization
|
|
130
|
+
enableVirtualization = props.enableVirtualization,
|
|
131
|
+
getItemHeight = props.getItemHeight;
|
|
131
132
|
|
|
132
133
|
var _useCombobox = (0, _useCombobox2.default)(props),
|
|
133
134
|
getInputFieldProps = _useCombobox.getInputFieldProps,
|
|
@@ -607,7 +608,8 @@ function Combobox(props, ref) {
|
|
|
607
608
|
renderOptionLabel: renderOptionLabel,
|
|
608
609
|
zIndex: zIndex,
|
|
609
610
|
pointerEvents: pointerEvents,
|
|
610
|
-
enableVirtualization: enableVirtualization
|
|
611
|
+
enableVirtualization: enableVirtualization,
|
|
612
|
+
getItemHeight: getItemHeight
|
|
611
613
|
}));
|
|
612
614
|
}));
|
|
613
615
|
}
|
|
@@ -3,6 +3,7 @@ import { BaseInputFieldProps } from '../../atoms/InputField';
|
|
|
3
3
|
import { ActionHandler } from '../Tag/types';
|
|
4
4
|
import { PopoverProps } from '../Popover/types';
|
|
5
5
|
import { Items, DropdownListProps } from '../DropdownList';
|
|
6
|
+
import { FlattenedItem, Size } from '../../atoms/OptionsList/types';
|
|
6
7
|
export declare type ComboboxInputRef = HTMLInputElement;
|
|
7
8
|
declare type Variant = 'async' | 'sync';
|
|
8
9
|
interface TOnChangeMeta {
|
|
@@ -13,6 +14,7 @@ export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxIn
|
|
|
13
14
|
defaultInputValue?: string;
|
|
14
15
|
defaultValue?: string;
|
|
15
16
|
enableVirtualization?: boolean;
|
|
17
|
+
getItemHeight?: (item: FlattenedItem, size: Size) => number;
|
|
16
18
|
inputValue?: string;
|
|
17
19
|
isPopoverVisible?: boolean;
|
|
18
20
|
multiple?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -169,7 +169,8 @@ function SearchInput(_ref) {
|
|
|
169
169
|
})), !(0, _isEmpty.default)(warningMessage) && _react.default.createElement(_styles.WarningMessage, {
|
|
170
170
|
intent: "warning"
|
|
171
171
|
}, warningMessage), _react.default.createElement(_HelpMessage.default, {
|
|
172
|
-
helpMessage: helpMessage
|
|
172
|
+
helpMessage: helpMessage,
|
|
173
|
+
contentLength: value.length
|
|
173
174
|
}));
|
|
174
175
|
}
|
|
175
176
|
|
|
@@ -24,6 +24,8 @@ declare const translations: {
|
|
|
24
24
|
};
|
|
25
25
|
combobox: {
|
|
26
26
|
readonly clearButtonLabel: "Clear {label} value";
|
|
27
|
+
readonly collapseButtonLabel: "Collapse {label}";
|
|
28
|
+
readonly expandButtonLabel: "Expand {label}";
|
|
27
29
|
readonly loading: "Loading...";
|
|
28
30
|
readonly noMatches: "No Matches Found";
|
|
29
31
|
readonly noMatchesMessage: "Try removing or editing some of your criteria or search for different words.";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}
|
|
@@ -30,6 +30,8 @@ var translations = {
|
|
|
30
30
|
},
|
|
31
31
|
combobox: {
|
|
32
32
|
clearButtonLabel: 'Clear {label} value',
|
|
33
|
+
collapseButtonLabel: 'Collapse {label}',
|
|
34
|
+
expandButtonLabel: 'Expand {label}',
|
|
33
35
|
loading: 'Loading...',
|
|
34
36
|
noMatches: 'No Matches Found',
|
|
35
37
|
noMatchesMessage: 'Try removing or editing some of your criteria or search for different words.'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@decisiv/ui-components",
|
|
3
|
-
"version": "2.0.1-alpha.
|
|
3
|
+
"version": "2.0.1-alpha.226",
|
|
4
4
|
"description": "Decisiv's design system React components",
|
|
5
5
|
"author": "Decisiv UI Development Team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@decisiv/breakpoint-observer": "1.8.9-alpha.3",
|
|
30
30
|
"@decisiv/design-tokens": "1.8.9-alpha.294",
|
|
31
|
-
"@decisiv/iconix": "2.0.1-alpha.
|
|
31
|
+
"@decisiv/iconix": "2.0.1-alpha.205",
|
|
32
32
|
"@decisiv/prop-types": "1.6.10-alpha.3",
|
|
33
33
|
"@seznam/compose-react-refs": "^1.0.2",
|
|
34
34
|
"csstype": "^2.6.5",
|