@dhis2-ui/select 9.3.0 → 9.4.0-alpha.1

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

@@ -48,7 +48,7 @@ const Input = _ref => {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["691091786", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
+    className: _style.default.dynamic([["1209882888", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
   }, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
     prefix: prefix,
     dataTest: "".concat(dataTest, "-prefix")
@@ -56,22 +56,22 @@ const Input = _ref => {
     placeholder: placeholder,
     dataTest: "".concat(dataTest, "-placeholder")
   }), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["691091786", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+    className: _style.default.dynamic([["1209882888", [_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([["691091786", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+    className: _style.default.dynamic([["1209882888", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
   }, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: "".concat(dataTest, "-clear")
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "691091786",
+    id: "1209882888",
     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:".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, {
+  }, [".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-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));

package/build/cjs/multi-select/multi-select.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.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 = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -11,12 +11,16 @@ var _uiConstants = require("@dhis2/ui-constants");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _index = require("../index.js");
 
 var _index2 = require("./index.js");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const description = "\nMultiple selection allows the user to select more than one option from the list. Checkboxes are used to highlight the possibility of making more than one selection. Selected options are displayed as chips inside the input. Make sure to communicate clearly to the user if there is a limit to the number of selectable elements.\n\nUse multiple selection wherever the user needs to make more than one selection. If the multiple selection is complex, requires a defined order or needs to made from different groups, consider using a transfer component instead.\n\nRead more about using `Select` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { MultiSelect, MultiSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (props-interactive) examples, see individual stories in the 'Canvas' tab._\n";
@@ -545,4 +549,22 @@ 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;
+exports.ShiftedIntoView = ShiftedIntoView;
+
+const RTL = args => {
+  (0, _react.useEffect)(() => {
+    document.body.dir = 'rtl';
+    return () => {
+      document.body.dir = 'ltr';
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    dir: "rtl"
+  }, /*#__PURE__*/_react.default.createElement(WithOptionsTemplate, args));
+};
+
+exports.RTL = RTL;
+RTL.args = {
+  selected: ['1', '2'],
+  prefix: 'RTL text'
+};

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

@@ -32,7 +32,7 @@ const Input = _ref => {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["691091786", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
+    className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
     dataTest: "".concat(dataTest, "-prefix")
@@ -40,22 +40,22 @@ const Input = _ref => {
     placeholder: placeholder,
     dataTest: "".concat(dataTest, "-placeholder")
   }), hasSelection && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["691091786", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+    className: _JSXStyle.dynamic([["1209882888", [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([["691091786", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+    className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: "".concat(dataTest, "-clear")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "691091786",
+    id: "1209882888",
     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:".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, {
+  }, [".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-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));

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

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MultiSelectOption } from '../index.js';
 import { MultiSelect } from './index.js';
 const description = "\nMultiple selection allows the user to select more than one option from the list. Checkboxes are used to highlight the possibility of making more than one selection. Selected options are displayed as chips inside the input. Make sure to communicate clearly to the user if there is a limit to the number of selectable elements.\n\nUse multiple selection wherever the user needs to make more than one selection. If the multiple selection is complex, requires a defined order or needs to made from different groups, consider using a transfer component instead.\n\nRead more about using `Select` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { MultiSelect, MultiSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (props-interactive) examples, see individual stories in the 'Canvas' tab._\n";
@@ -477,4 +477,19 @@ export const ShiftedIntoView = args => /*#__PURE__*/React.createElement(React.Fr
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "1828862170"
-}, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
+}, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
+export const RTL = args => {
+  useEffect(() => {
+    document.body.dir = 'rtl';
+    return () => {
+      document.body.dir = 'ltr';
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    dir: "rtl"
+  }, /*#__PURE__*/React.createElement(WithOptionsTemplate, args));
+};
+RTL.args = {
+  selected: ['1', '2'],
+  prefix: 'RTL text'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.1",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -34,19 +34,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/checkbox": "9.3.0",
-        "@dhis2-ui/chip": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/status-icon": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.1",
+        "@dhis2-ui/button": "9.4.0-alpha.1",
+        "@dhis2-ui/card": "9.4.0-alpha.1",
+        "@dhis2-ui/checkbox": "9.4.0-alpha.1",
+        "@dhis2-ui/chip": "9.4.0-alpha.1",
+        "@dhis2-ui/field": "9.4.0-alpha.1",
+        "@dhis2-ui/input": "9.4.0-alpha.1",
+        "@dhis2-ui/layer": "9.4.0-alpha.1",
+        "@dhis2-ui/loader": "9.4.0-alpha.1",
+        "@dhis2-ui/popper": "9.4.0-alpha.1",
+        "@dhis2-ui/status-icon": "9.4.0-alpha.1",
+        "@dhis2/ui-constants": "9.4.0-alpha.1",
+        "@dhis2/ui-icons": "9.4.0-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },