@dhis2-ui/select 8.11.1 → 8.11.2

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.
Files changed (7) hide show
  1. package/build/cjs/multi-select/input.js +5 -5
  2. package/build/cjs/multi-select/multi-select.stories.js +47 -1
  3. package/build/cjs/multi-select/selection-list.js +1 -0
  4. package/build/es/multi-select/input.js +5 -5
  5. package/build/es/multi-select/multi-select.stories.js +42 -0
  6. package/build/es/multi-select/selection-list.js +1 -0
  7. package/package.json +14 -14
package/build/cjs/multi-select/input.js CHANGED
@@ -48,7 +48,7 @@ const Input = _ref => {
48
48
  };
49
49
 
50
50
  return /*#__PURE__*/_react.default.createElement("div", {
51
- className: _style.default.dynamic([["1360178250", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
51
+ className: _style.default.dynamic([["691091786", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
52
52
  }, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
53
53
  prefix: prefix,
54
54
  dataTest: "".concat(dataTest, "-prefix")
@@ -56,22 +56,22 @@ const Input = _ref => {
56
56
  placeholder: placeholder,
57
57
  dataTest: "".concat(dataTest, "-placeholder")
58
58
  }), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
59
- className: _style.default.dynamic([["1360178250", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
59
+ className: _style.default.dynamic([["691091786", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
60
60
  }, /*#__PURE__*/_react.default.createElement(_selectionList.SelectionList, {
61
61
  selected: selected,
62
62
  onChange: onChange,
63
63
  options: options,
64
64
  disabled: disabled
65
65
  })), hasSelection && clearable && !disabled && /*#__PURE__*/_react.default.createElement("div", {
66
- className: _style.default.dynamic([["1360178250", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
66
+ className: _style.default.dynamic([["691091786", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
67
67
  }, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
68
68
  onClear: onClear,
69
69
  clearText: clearText,
70
70
  dataTest: "".concat(dataTest, "-clear")
71
71
  })), /*#__PURE__*/_react.default.createElement(_style.default, {
72
- id: "1360178250",
72
+ id: "691091786",
73
73
  dynamic: [_uiConstants.colors.grey900]
74
- }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-left:auto;margin-right:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
74
+ }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-left:auto;margin-right:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
75
75
  id: "1331770409",
76
76
  dynamic: [inputMaxHeight]
77
77
  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
package/build/cjs/multi-select/multi-select.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DefaultPosition = void 0;
6
+ exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMultipleSelectionsWrapped = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DefaultPosition = void 0;
7
7
 
8
8
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
@@ -349,6 +349,52 @@ exports.WithOptionsAndMultipleSelections = WithOptionsAndMultipleSelections;
349
349
  WithOptionsAndMultipleSelections.args = {
350
350
  selected: ['1', '2']
351
351
  };
352
+
353
+ const WithMultipleSelectionsWrapped = () => {
354
+ const [selected, setSelected] = _react.default.useState(['1', '2', '4', '6']);
355
+
356
+ return /*#__PURE__*/_react.default.createElement("div", {
357
+ style: {
358
+ maxWidth: 300
359
+ }
360
+ }, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, {
361
+ className: "select",
362
+ selected: selected,
363
+ onChange: _ref2 => {
364
+ let {
365
+ selected
366
+ } = _ref2;
367
+ console.log({
368
+ selected
369
+ });
370
+ setSelected(selected);
371
+ },
372
+ inputMaxHeight: 'auto'
373
+ }, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
374
+ value: "1",
375
+ label: "option one"
376
+ }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
377
+ value: "2",
378
+ label: "option two"
379
+ }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
380
+ value: "3",
381
+ label: "option three"
382
+ }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
383
+ value: "4",
384
+ label: "option four"
385
+ }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
386
+ value: "5",
387
+ label: "option five"
388
+ }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
389
+ value: "6",
390
+ label: "option six"
391
+ }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
392
+ value: "7",
393
+ label: "option seven"
394
+ })));
395
+ };
396
+
397
+ exports.WithMultipleSelectionsWrapped = WithMultipleSelectionsWrapped;
352
398
  const WithClearButtonSelectionAndOnChange = WithOptionsTemplate.bind({});
353
399
  exports.WithClearButtonSelectionAndOnChange = WithClearButtonSelectionAndOnChange;
354
400
  WithClearButtonSelectionAndOnChange.args = { ...WithOptionsAndASelection.args,
package/build/cjs/multi-select/selection-list.js CHANGED
@@ -71,6 +71,7 @@ const SelectionList = _ref2 => {
71
71
  marginBottom: "0",
72
72
  marginLeft: "0",
73
73
  marginTop: "0",
74
+ marginRight: "0",
74
75
  overflow: true,
75
76
  dense: true
76
77
  }, label);
package/build/es/multi-select/input.js CHANGED
@@ -32,7 +32,7 @@ const Input = _ref => {
32
32
  };
33
33
 
34
34
  return /*#__PURE__*/React.createElement("div", {
35
- className: _JSXStyle.dynamic([["1360178250", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
35
+ className: _JSXStyle.dynamic([["691091786", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
36
36
  }, /*#__PURE__*/React.createElement(InputPrefix, {
37
37
  prefix: prefix,
38
38
  dataTest: "".concat(dataTest, "-prefix")
@@ -40,22 +40,22 @@ const Input = _ref => {
40
40
  placeholder: placeholder,
41
41
  dataTest: "".concat(dataTest, "-placeholder")
42
42
  }), hasSelection && /*#__PURE__*/React.createElement("div", {
43
- className: _JSXStyle.dynamic([["1360178250", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
43
+ className: _JSXStyle.dynamic([["691091786", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
44
44
  }, /*#__PURE__*/React.createElement(SelectionList, {
45
45
  selected: selected,
46
46
  onChange: onChange,
47
47
  options: options,
48
48
  disabled: disabled
49
49
  })), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
50
- className: _JSXStyle.dynamic([["1360178250", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
50
+ className: _JSXStyle.dynamic([["691091786", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
51
51
  }, /*#__PURE__*/React.createElement(InputClearButton, {
52
52
  onClear: onClear,
53
53
  clearText: clearText,
54
54
  dataTest: "".concat(dataTest, "-clear")
55
55
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
56
- id: "1360178250",
56
+ id: "691091786",
57
57
  dynamic: [colors.grey900]
58
- }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-left:auto;margin-right:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
58
+ }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-left:auto;margin-right:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
59
59
  id: "1331770409",
60
60
  dynamic: [inputMaxHeight]
61
61
  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
package/build/es/multi-select/multi-select.stories.js CHANGED
@@ -298,6 +298,48 @@ export const WithOptionsAndMultipleSelections = WithOptionsTemplate.bind({});
298
298
  WithOptionsAndMultipleSelections.args = {
299
299
  selected: ['1', '2']
300
300
  };
301
+ export const WithMultipleSelectionsWrapped = () => {
302
+ const [selected, setSelected] = React.useState(['1', '2', '4', '6']);
303
+ return /*#__PURE__*/React.createElement("div", {
304
+ style: {
305
+ maxWidth: 300
306
+ }
307
+ }, /*#__PURE__*/React.createElement(MultiSelect, {
308
+ className: "select",
309
+ selected: selected,
310
+ onChange: _ref2 => {
311
+ let {
312
+ selected
313
+ } = _ref2;
314
+ console.log({
315
+ selected
316
+ });
317
+ setSelected(selected);
318
+ },
319
+ inputMaxHeight: 'auto'
320
+ }, /*#__PURE__*/React.createElement(MultiSelectOption, {
321
+ value: "1",
322
+ label: "option one"
323
+ }), /*#__PURE__*/React.createElement(MultiSelectOption, {
324
+ value: "2",
325
+ label: "option two"
326
+ }), /*#__PURE__*/React.createElement(MultiSelectOption, {
327
+ value: "3",
328
+ label: "option three"
329
+ }), /*#__PURE__*/React.createElement(MultiSelectOption, {
330
+ value: "4",
331
+ label: "option four"
332
+ }), /*#__PURE__*/React.createElement(MultiSelectOption, {
333
+ value: "5",
334
+ label: "option five"
335
+ }), /*#__PURE__*/React.createElement(MultiSelectOption, {
336
+ value: "6",
337
+ label: "option six"
338
+ }), /*#__PURE__*/React.createElement(MultiSelectOption, {
339
+ value: "7",
340
+ label: "option seven"
341
+ })));
342
+ };
301
343
  export const WithClearButtonSelectionAndOnChange = WithOptionsTemplate.bind({});
302
344
  WithClearButtonSelectionAndOnChange.args = { ...WithOptionsAndASelection.args,
303
345
  clearable: true,
package/build/es/multi-select/selection-list.js CHANGED
@@ -59,6 +59,7 @@ const SelectionList = _ref2 => {
59
59
  marginBottom: "0",
60
60
  marginLeft: "0",
61
61
  marginTop: "0",
62
+ marginRight: "0",
62
63
  overflow: true,
63
64
  dense: true
64
65
  }, label);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/select",
3
- "version": "8.11.1",
3
+ "version": "8.11.2",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,19 +33,19 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.1.2",
36
- "@dhis2-ui/box": "8.11.1",
37
- "@dhis2-ui/button": "8.11.1",
38
- "@dhis2-ui/card": "8.11.1",
39
- "@dhis2-ui/checkbox": "8.11.1",
40
- "@dhis2-ui/chip": "8.11.1",
41
- "@dhis2-ui/field": "8.11.1",
42
- "@dhis2-ui/input": "8.11.1",
43
- "@dhis2-ui/layer": "8.11.1",
44
- "@dhis2-ui/loader": "8.11.1",
45
- "@dhis2-ui/popper": "8.11.1",
46
- "@dhis2-ui/status-icon": "8.11.1",
47
- "@dhis2/ui-constants": "8.11.1",
48
- "@dhis2/ui-icons": "8.11.1",
36
+ "@dhis2-ui/box": "8.11.2",
37
+ "@dhis2-ui/button": "8.11.2",
38
+ "@dhis2-ui/card": "8.11.2",
39
+ "@dhis2-ui/checkbox": "8.11.2",
40
+ "@dhis2-ui/chip": "8.11.2",
41
+ "@dhis2-ui/field": "8.11.2",
42
+ "@dhis2-ui/input": "8.11.2",
43
+ "@dhis2-ui/layer": "8.11.2",
44
+ "@dhis2-ui/loader": "8.11.2",
45
+ "@dhis2-ui/popper": "8.11.2",
46
+ "@dhis2-ui/status-icon": "8.11.2",
47
+ "@dhis2/ui-constants": "8.11.2",
48
+ "@dhis2/ui-icons": "8.11.2",
49
49
  "classnames": "^2.3.1",
50
50
  "prop-types": "^15.7.2"
51
51
  },