@dhis2-ui/select 10.12.13 → 10.13.0

package/build/cjs/locales/en/translations.json

@@ -1,4 +1,6 @@
 {
+    "{{count}} selected": "{{count}} selected",
+    "{{count}} selected_plural": "{{count}} selected",
     "Clear": "Clear",
     "No data found": "No data found",
     "Type to filter options": "Type to filter options",

package/build/cjs/multi-select/input.js

@@ -10,7 +10,8 @@ var _uiConstants = require("@dhis2/ui-constants");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _index = require("../select/index.js");
+var _index = _interopRequireDefault(require("../locales/index.js"));
+var _index2 = require("../select/index.js");
 var _selectionList = require("./selection-list.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Input = _ref => {
@@ -25,9 +26,11 @@ const Input = _ref => {
     options,
     className,
     disabled,
-    inputMaxHeight = '100px'
+    inputMaxHeight = '100px',
+    collapseSelectionAfter
   } = _ref;
   const hasSelection = selected.length > 0;
+  const shouldCollapse = hasSelection && typeof collapseSelectionAfter === 'number' && selected.length > collapseSelectionAfter;
   const onClear = e => {
     const data = {
       selected: []
@@ -36,30 +39,35 @@ const Input = _ref => {
     onChange(data, e);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
-  }, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
+  }, /*#__PURE__*/_react.default.createElement(_index2.InputPrefix, {
     prefix: prefix,
     dataTest: `${dataTest}-prefix`
-  }), !hasSelection && !prefix && /*#__PURE__*/_react.default.createElement(_index.InputPlaceholder, {
+  }), !hasSelection && !prefix && /*#__PURE__*/_react.default.createElement(_index2.InputPlaceholder, {
     placeholder: placeholder,
     dataTest: `${dataTest}-placeholder`
-  }), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+  }), hasSelection && shouldCollapse && /*#__PURE__*/_react.default.createElement("span", {
+    "data-test": `${dataTest}-selection-count`,
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "collapsed-selection-text"
+  }, _index.default.t('{{count}} selected', {
+    count: selected.length
+  })), hasSelection && !shouldCollapse && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/_react.default.createElement(_selectionList.SelectionList, {
     selected: selected,
     onChange: onChange,
     options: options,
     disabled: disabled
   })), hasSelection && clearable && !disabled && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
-  }, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+  }, /*#__PURE__*/_react.default.createElement(_index2.InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: `${dataTest}-clear`
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "64009541",
+    id: "3188585639",
     dynamic: [_uiConstants.colors.grey900]
-  }, [`.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:${_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-inline-start:auto;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, [`.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:${_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-inline-start:auto;}", ".collapsed-selection-text.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
@@ -70,6 +78,7 @@ Input.propTypes = {
   className: _propTypes2.default.string,
   clearText: (0, _propTypes.requiredIf)(props => props.clearable, _propTypes2.default.string),
   clearable: _propTypes2.default.bool,
+  collapseSelectionAfter: _propTypes2.default.number,
   disabled: _propTypes2.default.bool,
   inputMaxHeight: _propTypes2.default.string,
   options: _propTypes2.default.node,

package/build/cjs/multi-select/multi-select.js

@@ -45,6 +45,7 @@ const MultiSelect = _ref => {
     noMatchText,
     initialFocus,
     dense,
+    collapseSelectionAfter,
     dataTest = 'dhis2-uicore-multiselect'
   } = _ref;
   // If the select is filterable, use a filterable menu
@@ -71,7 +72,8 @@ const MultiSelect = _ref => {
       dataTest: dataTest,
       placeholder: placeholder,
       prefix: prefix,
-      inputMaxHeight: inputMaxHeight
+      inputMaxHeight: inputMaxHeight,
+      collapseSelectionAfter: collapseSelectionAfter
     }),
     menu: menu,
     tabIndex: tabIndex,
@@ -106,6 +108,8 @@ MultiSelect.propTypes = {
   clearText: (0, _propTypes.requiredIf)(props => props.clearable, _propTypes2.default.string),
   /** Adds a 'clear' option to the menu */
   clearable: _propTypes2.default.bool,
+  /** When the number of selected items exceeds this threshold, chips are replaced with "X selected" text */
+  collapseSelectionAfter: _propTypes2.default.number,
   dataTest: _propTypes2.default.string,
   dense: _propTypes2.default.bool,
   disabled: _propTypes2.default.bool,

package/build/cjs/multi-select/multi-select.prod.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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.RTL = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DenseWithSelections = exports.Dense = exports.DefaultPosition = void 0;
+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.RTL = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DenseWithSelections = exports.Dense = exports.DefaultPosition = exports.CollapseSelectionAfterThreshold = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -513,6 +513,47 @@ const ShiftedIntoView = args => /*#__PURE__*/_react.default.createElement(_react
   id: "1828862170"
 }, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
 exports.ShiftedIntoView = ShiftedIntoView;
+const CollapseSelectionAfterThreshold = () => {
+  const [selected, setSelected] = _react.default.useState(['1', '3', '5']);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: 400
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, {
+    className: "select",
+    selected: selected,
+    onChange: _ref3 => {
+      let {
+        selected
+      } = _ref3;
+      return setSelected(selected);
+    },
+    collapseSelectionAfter: 2,
+    prefix: "Prefix text",
+    clearable: true,
+    clearText: "Clear all"
+  }, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "4",
+    label: "option four"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "5",
+    label: "option five"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "6",
+    label: "option six"
+  })));
+};
+exports.CollapseSelectionAfterThreshold = CollapseSelectionAfterThreshold;
+CollapseSelectionAfterThreshold.storyName = 'Collapse selection after threshold';
 const RTL = args => {
   (0, _react.useEffect)(() => {
     document.body.dir = 'rtl';

package/build/es/locales/en/translations.json

@@ -1,4 +1,6 @@
 {
+    "{{count}} selected": "{{count}} selected",
+    "{{count}} selected_plural": "{{count}} selected",
     "Clear": "Clear",
     "No data found": "No data found",
     "Type to filter options": "Type to filter options",

package/build/es/multi-select/input.js

@@ -4,6 +4,7 @@ import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import i18n from '../locales/index.js';
 import { InputClearButton, InputPlaceholder, InputPrefix } from '../select/index.js';
 import { SelectionList } from './selection-list.js';
 const Input = _ref => {
@@ -18,9 +19,11 @@ const Input = _ref => {
     options,
     className,
     disabled,
-    inputMaxHeight = '100px'
+    inputMaxHeight = '100px',
+    collapseSelectionAfter
   } = _ref;
   const hasSelection = selected.length > 0;
+  const shouldCollapse = hasSelection && typeof collapseSelectionAfter === 'number' && selected.length > collapseSelectionAfter;
   const onClear = e => {
     const data = {
       selected: []
@@ -29,30 +32,35 @@ const Input = _ref => {
     onChange(data, e);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
     dataTest: `${dataTest}-prefix`
   }), !hasSelection && !prefix && /*#__PURE__*/React.createElement(InputPlaceholder, {
     placeholder: placeholder,
     dataTest: `${dataTest}-placeholder`
-  }), hasSelection && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+  }), hasSelection && shouldCollapse && /*#__PURE__*/React.createElement("span", {
+    "data-test": `${dataTest}-selection-count`,
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "collapsed-selection-text"
+  }, i18n.t('{{count}} selected', {
+    count: selected.length
+  })), hasSelection && !shouldCollapse && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(SelectionList, {
     selected: selected,
     onChange: onChange,
     options: options,
     disabled: disabled
   })), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: `${dataTest}-clear`
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "64009541",
+    id: "3188585639",
     dynamic: [colors.grey900]
-  }, [`.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:${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-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [`.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:${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-inline-start:auto;}", ".collapsed-selection-text.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
@@ -62,6 +70,7 @@ Input.propTypes = {
   className: PropTypes.string,
   clearText: requiredIf(props => props.clearable, PropTypes.string),
   clearable: PropTypes.bool,
+  collapseSelectionAfter: PropTypes.number,
   disabled: PropTypes.bool,
   inputMaxHeight: PropTypes.string,
   options: PropTypes.node,

package/build/es/multi-select/multi-select.js

@@ -39,6 +39,7 @@ const MultiSelect = _ref => {
     noMatchText,
     initialFocus,
     dense,
+    collapseSelectionAfter,
     dataTest = 'dhis2-uicore-multiselect'
   } = _ref;
   // If the select is filterable, use a filterable menu
@@ -65,7 +66,8 @@ const MultiSelect = _ref => {
       dataTest: dataTest,
       placeholder: placeholder,
       prefix: prefix,
-      inputMaxHeight: inputMaxHeight
+      inputMaxHeight: inputMaxHeight,
+      collapseSelectionAfter: collapseSelectionAfter
     }),
     menu: menu,
     tabIndex: tabIndex,
@@ -99,6 +101,8 @@ MultiSelect.propTypes = {
   clearText: requiredIf(props => props.clearable, PropTypes.string),
   /** Adds a 'clear' option to the menu */
   clearable: PropTypes.bool,
+  /** When the number of selected items exceeds this threshold, chips are replaced with "X selected" text */
+  collapseSelectionAfter: PropTypes.number,
   dataTest: PropTypes.string,
   dense: PropTypes.bool,
   disabled: PropTypes.bool,

package/build/es/multi-select/multi-select.prod.stories.js

@@ -494,6 +494,46 @@ export const ShiftedIntoView = args => /*#__PURE__*/React.createElement(React.Fr
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "1828862170"
 }, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
+export const CollapseSelectionAfterThreshold = () => {
+  const [selected, setSelected] = React.useState(['1', '3', '5']);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 400
+    }
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    className: "select",
+    selected: selected,
+    onChange: _ref3 => {
+      let {
+        selected
+      } = _ref3;
+      return setSelected(selected);
+    },
+    collapseSelectionAfter: 2,
+    prefix: "Prefix text",
+    clearable: true,
+    clearText: "Clear all"
+  }, /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "4",
+    label: "option four"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "5",
+    label: "option five"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "6",
+    label: "option six"
+  })));
+};
+CollapseSelectionAfterThreshold.storyName = 'Collapse selection after threshold';
 export const RTL = args => {
   useEffect(() => {
     document.body.dir = 'rtl';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.12.13",
+    "version": "10.13.0",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.12.13",
-        "@dhis2-ui/button": "10.12.13",
-        "@dhis2-ui/card": "10.12.13",
-        "@dhis2-ui/checkbox": "10.12.13",
-        "@dhis2-ui/chip": "10.12.13",
-        "@dhis2-ui/field": "10.12.13",
-        "@dhis2-ui/input": "10.12.13",
-        "@dhis2-ui/layer": "10.12.13",
-        "@dhis2-ui/loader": "10.12.13",
-        "@dhis2-ui/popper": "10.12.13",
-        "@dhis2-ui/status-icon": "10.12.13",
-        "@dhis2-ui/tooltip": "10.12.13",
+        "@dhis2-ui/box": "10.13.0",
+        "@dhis2-ui/button": "10.13.0",
+        "@dhis2-ui/card": "10.13.0",
+        "@dhis2-ui/checkbox": "10.13.0",
+        "@dhis2-ui/chip": "10.13.0",
+        "@dhis2-ui/field": "10.13.0",
+        "@dhis2-ui/input": "10.13.0",
+        "@dhis2-ui/layer": "10.13.0",
+        "@dhis2-ui/loader": "10.13.0",
+        "@dhis2-ui/popper": "10.13.0",
+        "@dhis2-ui/status-icon": "10.13.0",
+        "@dhis2-ui/tooltip": "10.13.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.12.13",
-        "@dhis2/ui-icons": "10.12.13",
+        "@dhis2/ui-constants": "10.13.0",
+        "@dhis2/ui-icons": "10.13.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/types/index.d.ts

@@ -51,6 +51,10 @@ export interface MultiSelectProps {
      * Adds a 'clear' option to the menu
      */
     clearable?: boolean
+    /**
+     * When the number of selected items exceeds this threshold, chips are replaced with "X selected" text
+     */
+    collapseSelectionAfter?: number
     dataTest?: string
     dense?: boolean
     disabled?: boolean