@dhis2-ui/transfer 9.2.0 → 9.3.0-alpha.1

package/build/cjs/end-intersection-detector.js

@@ -23,7 +23,7 @@ const EndIntersectionDetector = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: "jsx-4200578429"
+    className: "jsx-2799340139"
   }, /*#__PURE__*/_react.default.createElement(_intersectionDetector.IntersectionDetector, {
     rootRef: rootRef,
     onChange: _ref2 => {
@@ -33,8 +33,8 @@ const EndIntersectionDetector = _ref => {
       return isIntersecting && onEndReached();
     }
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "4200578429"
-  }, ["div.jsx-4200578429{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;left:0;}"]));
+    id: "2799340139"
+  }, ["div.jsx-2799340139{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;inset-inline-start:0;}"]));
 };
 
 exports.EndIntersectionDetector = EndIntersectionDetector;

package/build/cjs/icons.js

@@ -15,8 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const centerButtonStyles = ["svg.jsx-114231192{min-width:20px;}"];
-centerButtonStyles.__hash = "114231192";
+const centerButtonStyles = ["svg.jsx-3510845804{min-width:20px;}", "svg.jsx-3510845804:dir(rtl){-webkit-transform:rotate(180deg) translateX(4px);-ms-transform:rotate(180deg) translateX(4px);transform:rotate(180deg) translateX(4px);}"];
+centerButtonStyles.__hash = "3510845804";
 
 const IconAddAll = _ref => {
   let {

package/build/cjs/options-container.js

@@ -43,16 +43,16 @@ const OptionsContainer = _ref => {
   const wrapperRef = (0, _react.useRef)(null);
   const resizeCounter = (0, _useResizeCounter.useResizeCounter)(wrapperRef.current);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["889751462", [_uiConstants.spacers.dp4]]]) + " " + "optionsContainer"
+    className: _style.default.dynamic([["3254058061", [_uiConstants.spacers.dp4]]]) + " " + "optionsContainer"
   }, loading && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["889751462", [_uiConstants.spacers.dp4]]]) + " " + "loading"
+    className: _style.default.dynamic([["3254058061", [_uiConstants.spacers.dp4]]]) + " " + "loading"
   }, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, null)), /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     ref: optionsRef,
-    className: _style.default.dynamic([["889751462", [_uiConstants.spacers.dp4]]]) + " " + "container"
+    className: _style.default.dynamic([["3254058061", [_uiConstants.spacers.dp4]]]) + " " + "container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: wrapperRef,
-    className: _style.default.dynamic([["889751462", [_uiConstants.spacers.dp4]]]) + " " + "content-container"
+    className: _style.default.dynamic([["3254058061", [_uiConstants.spacers.dp4]]]) + " " + "content-container"
   }, !options.length && emptyComponent, options.map(option => {
     const highlighted = !!highlightedOptions.find(highlightedSourceOption => highlightedSourceOption === option.value);
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -68,9 +68,9 @@ const OptionsContainer = _ref => {
     rootRef: optionsRef,
     onEndReached: onEndReached
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "889751462",
+    id: "3254058061",
     dynamic: [_uiConstants.spacers.dp4]
-  }, [".optionsContainer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(_uiConstants.spacers.dp4, " 0;position:relative;overflow:hidden;}"), ".container.__jsx-style-dynamic-selector{overflow-y:auto;height:100%;}", ".loading.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:2;top:0;left:0;}", ".content-container.__jsx-style-dynamic-selector{z-index:1;position:relative;}", ".loading.__jsx-style-dynamic-selector+.container.__jsx-style-dynamic-selector .content-container.__jsx-style-dynamic-selector{-webkit-filter:blur(2px);filter:blur(2px);}"]));
+  }, [".optionsContainer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(_uiConstants.spacers.dp4, " 0;position:relative;overflow:hidden;}"), ".container.__jsx-style-dynamic-selector{overflow-y:auto;height:100%;}", ".loading.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:2;top:0;inset-inline-start:0;}", ".content-container.__jsx-style-dynamic-selector{z-index:1;position:relative;}", ".loading.__jsx-style-dynamic-selector+.container.__jsx-style-dynamic-selector .content-container.__jsx-style-dynamic-selector{-webkit-filter:blur(2px);filter:blur(2px);}"]));
 };
 
 exports.OptionsContainer = OptionsContainer;

package/build/cjs/reordering-actions.js

@@ -29,7 +29,7 @@ const ReorderingActions = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["1295471940", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]])
+    className: _style.default.dynamic([["874845231", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]])
   }, /*#__PURE__*/_react.default.createElement(_button.Button, {
     small: true,
     disabled: disabledDown,
@@ -49,9 +49,9 @@ const ReorderingActions = _ref => {
       disabled: disabledUp
     })
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1295471940",
+    id: "874845231",
     dynamic: [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:".concat(_uiConstants.spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:last-child{padding-bottom:".concat(_uiConstants.spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button:first-child{margin-left:".concat(_uiConstants.spacers.dp8, ";}")]));
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:".concat(_uiConstants.spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:last-child{padding-bottom:".concat(_uiConstants.spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button:first-child{margin-inline-start:".concat(_uiConstants.spacers.dp8, ";}")]));
 };
 
 exports.ReorderingActions = ReorderingActions;

package/build/cjs/transfer.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SourceEmptyPlaceholder = exports.SingleSelection = exports.Reordering = exports.PickedEmptyComponent = exports.OptionsFooter = exports.Multiple = exports.LoadingSource = exports.LoadingPicked = exports.InfiniteLoading = exports.IndividualCustomOption = exports.IncreasedOptionsHeight = exports.Header = exports.FilteredPlaceholder = exports.FilteredPicked = exports.Filtered = exports.DifferentWidths = exports.CustomListOptions = exports.CustomFilteringWithoutFilterInput = exports.CustomFilteringWithFilterInput = exports.CustomButtonText = void 0;
+exports.default = exports.SourceEmptyPlaceholder = exports.SingleSelection = exports.Reordering = exports.RTL = exports.PickedEmptyComponent = exports.OptionsFooter = exports.Multiple = exports.LoadingSource = exports.LoadingPicked = exports.InfiniteLoading = exports.IndividualCustomOption = exports.IncreasedOptionsHeight = exports.Header = exports.FilteredPlaceholder = exports.FilteredPicked = exports.Filtered = exports.DifferentWidths = exports.CustomListOptions = exports.CustomFilteringWithoutFilterInput = exports.CustomFilteringWithFilterInput = exports.CustomButtonText = void 0;
 
 var _select = require("@dhis2-ui/select");
 
@@ -549,4 +549,14 @@ LoadingPicked.args = {
     } = _ref14;
     return value;
   })
+};
+
+const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(Multiple, args));
+
+exports.RTL = RTL;
+RTL.args = {
+  options: options.slice(0, 3),
+  enableOrderChange: true
 };

package/build/es/end-intersection-detector.js

@@ -10,7 +10,7 @@ export const EndIntersectionDetector = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: "jsx-4200578429"
+    className: "jsx-2799340139"
   }, /*#__PURE__*/React.createElement(IntersectionDetector, {
     rootRef: rootRef,
     onChange: _ref2 => {
@@ -20,8 +20,8 @@ export const EndIntersectionDetector = _ref => {
       return isIntersecting && onEndReached();
     }
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4200578429"
-  }, ["div.jsx-4200578429{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;left:0;}"]));
+    id: "2799340139"
+  }, ["div.jsx-2799340139{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;inset-inline-start:0;}"]));
 };
 EndIntersectionDetector.propTypes = {
   rootRef: PropTypes.shape({

package/build/es/icons.js

@@ -2,8 +2,8 @@ import _JSXStyle from "styled-jsx/style";
 import { theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-const centerButtonStyles = ["svg.jsx-114231192{min-width:20px;}"];
-centerButtonStyles.__hash = "114231192";
+const centerButtonStyles = ["svg.jsx-3510845804{min-width:20px;}", "svg.jsx-3510845804:dir(rtl){-webkit-transform:rotate(180deg) translateX(4px);-ms-transform:rotate(180deg) translateX(4px);transform:rotate(180deg) translateX(4px);}"];
+centerButtonStyles.__hash = "3510845804";
 export const IconAddAll = _ref => {
   let {
     dataTest,

package/build/es/options-container.js

@@ -23,16 +23,16 @@ export const OptionsContainer = _ref => {
   const wrapperRef = useRef(null);
   const resizeCounter = useResizeCounter(wrapperRef.current);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["889751462", [spacers.dp4]]]) + " " + "optionsContainer"
+    className: _JSXStyle.dynamic([["3254058061", [spacers.dp4]]]) + " " + "optionsContainer"
   }, loading && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["889751462", [spacers.dp4]]]) + " " + "loading"
+    className: _JSXStyle.dynamic([["3254058061", [spacers.dp4]]]) + " " + "loading"
   }, /*#__PURE__*/React.createElement(CircularLoader, null)), /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     ref: optionsRef,
-    className: _JSXStyle.dynamic([["889751462", [spacers.dp4]]]) + " " + "container"
+    className: _JSXStyle.dynamic([["3254058061", [spacers.dp4]]]) + " " + "container"
   }, /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
-    className: _JSXStyle.dynamic([["889751462", [spacers.dp4]]]) + " " + "content-container"
+    className: _JSXStyle.dynamic([["3254058061", [spacers.dp4]]]) + " " + "content-container"
   }, !options.length && emptyComponent, options.map(option => {
     const highlighted = !!highlightedOptions.find(highlightedSourceOption => highlightedSourceOption === option.value);
     return /*#__PURE__*/React.createElement(Fragment, {
@@ -48,9 +48,9 @@ export const OptionsContainer = _ref => {
     rootRef: optionsRef,
     onEndReached: onEndReached
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "889751462",
+    id: "3254058061",
     dynamic: [spacers.dp4]
-  }, [".optionsContainer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(spacers.dp4, " 0;position:relative;overflow:hidden;}"), ".container.__jsx-style-dynamic-selector{overflow-y:auto;height:100%;}", ".loading.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:2;top:0;left:0;}", ".content-container.__jsx-style-dynamic-selector{z-index:1;position:relative;}", ".loading.__jsx-style-dynamic-selector+.container.__jsx-style-dynamic-selector .content-container.__jsx-style-dynamic-selector{-webkit-filter:blur(2px);filter:blur(2px);}"]));
+  }, [".optionsContainer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(spacers.dp4, " 0;position:relative;overflow:hidden;}"), ".container.__jsx-style-dynamic-selector{overflow-y:auto;height:100%;}", ".loading.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:2;top:0;inset-inline-start:0;}", ".content-container.__jsx-style-dynamic-selector{z-index:1;position:relative;}", ".loading.__jsx-style-dynamic-selector+.container.__jsx-style-dynamic-selector .content-container.__jsx-style-dynamic-selector{-webkit-filter:blur(2px);filter:blur(2px);}"]));
 };
 OptionsContainer.defaultProps = {
   selected: false

package/build/es/reordering-actions.js

@@ -14,7 +14,7 @@ export const ReorderingActions = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["1295471940", [spacers.dp8, spacers.dp8, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["874845231", [spacers.dp8, spacers.dp8, spacers.dp8]]])
   }, /*#__PURE__*/React.createElement(Button, {
     small: true,
     disabled: disabledDown,
@@ -34,9 +34,9 @@ export const ReorderingActions = _ref => {
       disabled: disabledUp
     })
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1295471940",
+    id: "874845231",
     dynamic: [spacers.dp8, spacers.dp8, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:last-child{padding-bottom:".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button:first-child{margin-left:".concat(spacers.dp8, ";}")]));
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:last-child{padding-bottom:".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button:first-child{margin-inline-start:".concat(spacers.dp8, ";}")]));
 };
 ReorderingActions.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/transfer.stories.js

@@ -505,4 +505,11 @@ LoadingPicked.args = {
     } = _ref14;
     return value;
   })
+};
+export const RTL = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(Multiple, args));
+RTL.args = {
+  options: options.slice(0, 3),
+  enableOrderChange: true
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "9.2.0",
+    "version": "9.3.0-alpha.1",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -33,12 +33,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.2.0",
-        "@dhis2-ui/field": "9.2.0",
-        "@dhis2-ui/input": "9.2.0",
-        "@dhis2-ui/intersection-detector": "9.2.0",
-        "@dhis2-ui/loader": "9.2.0",
-        "@dhis2/ui-constants": "9.2.0",
+        "@dhis2-ui/button": "9.3.0-alpha.1",
+        "@dhis2-ui/field": "9.3.0-alpha.1",
+        "@dhis2-ui/input": "9.3.0-alpha.1",
+        "@dhis2-ui/intersection-detector": "9.3.0-alpha.1",
+        "@dhis2-ui/loader": "9.3.0-alpha.1",
+        "@dhis2/ui-constants": "9.3.0-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },