@dhis2-ui/transfer 10.13.0 → 10.14.0

package/build/cjs/__tests__/reordering-actions.test.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _enzyme = require("enzyme");
+var _react = _interopRequireDefault(require("react"));
+var _reorderingActions = require("../reordering-actions.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const findButton = (wrapper, dataTest) => wrapper.find(`button[data-test="${dataTest}"]`);
+const allButtonHooks = dataTest => [`${dataTest}-buttonmovetotop`, `${dataTest}-buttonmoveup`, `${dataTest}-buttonmovedown`, `${dataTest}-buttonmovetobottom`];
+describe('Transfer - ReorderingActions', () => {
+  const dataTest = 'test-reorderingactions';
+  const baseProps = {
+    dataTest,
+    onChangeUp: jest.fn(),
+    onChangeDown: jest.fn(),
+    onChangeToTop: jest.fn(),
+    onChangeToBottom: jest.fn()
+  };
+  afterEach(() => {
+    Object.values(baseProps).forEach(value => {
+      if (jest.isMockFunction(value)) {
+        value.mockClear();
+      }
+    });
+  });
+  it('renders all four reorder buttons', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, baseProps));
+    expect(findButton(wrapper, `${dataTest}-buttonmovetotop`)).toHaveLength(1);
+    expect(findButton(wrapper, `${dataTest}-buttonmoveup`)).toHaveLength(1);
+    expect(findButton(wrapper, `${dataTest}-buttonmovedown`)).toHaveLength(1);
+    expect(findButton(wrapper, `${dataTest}-buttonmovetobottom`)).toHaveLength(1);
+  });
+  it('invokes the corresponding handler for each button', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, baseProps));
+    findButton(wrapper, `${dataTest}-buttonmovetotop`).simulate('click');
+    expect(baseProps.onChangeToTop).toHaveBeenCalledTimes(1);
+    findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click');
+    expect(baseProps.onChangeUp).toHaveBeenCalledTimes(1);
+    findButton(wrapper, `${dataTest}-buttonmovedown`).simulate('click');
+    expect(baseProps.onChangeDown).toHaveBeenCalledTimes(1);
+    findButton(wrapper, `${dataTest}-buttonmovetobottom`).simulate('click');
+    expect(baseProps.onChangeToBottom).toHaveBeenCalledTimes(1);
+  });
+  it('does not cross-fire handlers when a single button is clicked', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, baseProps));
+    findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click');
+    expect(baseProps.onChangeUp).toHaveBeenCalledTimes(1);
+    expect(baseProps.onChangeDown).not.toHaveBeenCalled();
+    expect(baseProps.onChangeToTop).not.toHaveBeenCalled();
+    expect(baseProps.onChangeToBottom).not.toHaveBeenCalled();
+  });
+  it('disables both up-side buttons when disabledUp is true', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, _extends({}, baseProps, {
+      disabledUp: true
+    })));
+    expect(findButton(wrapper, `${dataTest}-buttonmovetotop`).prop('disabled')).toBe(true);
+    expect(findButton(wrapper, `${dataTest}-buttonmoveup`).prop('disabled')).toBe(true);
+    expect(findButton(wrapper, `${dataTest}-buttonmovedown`).prop('disabled')).toBeFalsy();
+    expect(findButton(wrapper, `${dataTest}-buttonmovetobottom`).prop('disabled')).toBeFalsy();
+  });
+  it('disables both down-side buttons when disabledDown is true', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, _extends({}, baseProps, {
+      disabledDown: true
+    })));
+    expect(findButton(wrapper, `${dataTest}-buttonmovedown`).prop('disabled')).toBe(true);
+    expect(findButton(wrapper, `${dataTest}-buttonmovetobottom`).prop('disabled')).toBe(true);
+    expect(findButton(wrapper, `${dataTest}-buttonmoveup`).prop('disabled')).toBeFalsy();
+    expect(findButton(wrapper, `${dataTest}-buttonmovetotop`).prop('disabled')).toBeFalsy();
+  });
+  it('does not invoke handlers for disabled buttons', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, _extends({}, baseProps, {
+      disabledUp: true,
+      disabledDown: true
+    })));
+    findButton(wrapper, `${dataTest}-buttonmovetotop`).simulate('click');
+    findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click');
+    findButton(wrapper, `${dataTest}-buttonmovedown`).simulate('click');
+    findButton(wrapper, `${dataTest}-buttonmovetobottom`).simulate('click');
+    expect(baseProps.onChangeToTop).not.toHaveBeenCalled();
+    expect(baseProps.onChangeUp).not.toHaveBeenCalled();
+    expect(baseProps.onChangeDown).not.toHaveBeenCalled();
+    expect(baseProps.onChangeToBottom).not.toHaveBeenCalled();
+  });
+  it('sets aria-label on every button', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, baseProps));
+    const assertLabel = (hook, label) => {
+      expect(findButton(wrapper, hook).prop('aria-label')).toBe(label);
+    };
+    assertLabel(`${dataTest}-buttonmovetotop`, 'Move selected items to top');
+    assertLabel(`${dataTest}-buttonmoveup`, 'Move selected items up');
+    assertLabel(`${dataTest}-buttonmovedown`, 'Move selected items down');
+    assertLabel(`${dataTest}-buttonmovetobottom`, 'Move selected items to bottom');
+  });
+  it('still renders and wires up all four buttons when filterActive is true', () => {
+    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, _extends({}, baseProps, {
+      filterActive: true
+    })));
+    allButtonHooks(dataTest).forEach(hook => {
+      expect(findButton(wrapper, hook)).toHaveLength(1);
+    });
+    findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click');
+    expect(baseProps.onChangeUp).toHaveBeenCalledTimes(1);
+  });
+});

package/build/cjs/features/reorder-with-buttons/index.js

@@ -5,7 +5,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   // no op
 });
 (0, _cypressCucumberPreprocessor.Given)('the selected list has three items', () => {
-  cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected');
+  cy.visitStory('Transfer Reorder Buttons', 'Has Three Selected');
 });
 (0, _cypressCucumberPreprocessor.Given)('the selected list has some items', () => {
   cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected');
@@ -36,11 +36,79 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
     force: true
   });
 });
+(0, _cypressCucumberPreprocessor.When)("the user clicks the 'move to top' button", () => {
+  // force, so we click disabled buttons
+  cy.get('{transfer-reorderingactions-buttonmovetotop}').click({
+    force: true
+  });
+});
+(0, _cypressCucumberPreprocessor.When)("the user clicks the 'move to bottom' button", () => {
+  // force, so we click disabled buttons
+  cy.get('{transfer-reorderingactions-buttonmovetobottom}').click({
+    force: true
+  });
+});
 (0, _cypressCucumberPreprocessor.Then)('the highlighted item should be moved to the {int}. place', next => {
   const index = next - 1;
   cy.get('@previousValue').then(previousValue => cy.get(`[data-value="${previousValue}"]`)).invoke('index').should('equal', index);
 });
-(0, _cypressCucumberPreprocessor.Then)("the 'move up' and 'move down' buttons should be disabled", () => {
+(0, _cypressCucumberPreprocessor.Then)('all four reorder buttons should be disabled', () => {
+  cy.get('{transfer-reorderingactions-buttonmovetotop}').should('have.attr', 'disabled');
   cy.get('{transfer-reorderingactions-buttonmoveup}').should('have.attr', 'disabled');
   cy.get('{transfer-reorderingactions-buttonmovedown}').should('have.attr', 'disabled');
+  cy.get('{transfer-reorderingactions-buttonmovetobottom}').should('have.attr', 'disabled');
+});
+
+// --- Multi-select ---
+
+(0, _cypressCucumberPreprocessor.Given)('the selected list has eight items', () => {
+  cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected');
+  cy.get('{transfer-pickedoptions} {transferoption}').should('have.length', 8);
+});
+const highlightPositionWithCtrl = position => cy.get('{transfer-pickedoptions} {transferoption}').eq(position - 1).then($option => cy.get('@highlightedValues').then(values => {
+  values.push($option.attr('data-value'));
+  return $option;
+})).clickWith('ctrl');
+(0, _cypressCucumberPreprocessor.When)('the user highlights the items at positions {int} and {int}', (first, second) => {
+  cy.wrap([]).as('highlightedValues');
+  highlightPositionWithCtrl(first);
+  highlightPositionWithCtrl(second);
+});
+(0, _cypressCucumberPreprocessor.When)('the user highlights every item in the selected list', () => {
+  cy.wrap([]).as('highlightedValues');
+  cy.get('{transfer-pickedoptions} {transferoption}').each($option => {
+    cy.get('@highlightedValues').then(values => {
+      values.push($option.attr('data-value'));
+    });
+    cy.wrap($option).clickWith('ctrl');
+  });
+});
+(0, _cypressCucumberPreprocessor.Then)('those items should be at positions {int} and {int}', (first, second) => {
+  cy.get('@highlightedValues').then(values => {
+    const targetIndices = [first - 1, second - 1];
+    values.forEach((value, i) => {
+      cy.get(`[data-value="${value}"]`).invoke('index').should('equal', targetIndices[i]);
+    });
+  });
+});
+(0, _cypressCucumberPreprocessor.Then)('those items should still be highlighted', () => {
+  cy.get('@highlightedValues').then(values => {
+    values.forEach(value => {
+      cy.get(`{transfer-pickedoptions} [data-value="${value}"]`).should('have.class', 'highlighted');
+    });
+  });
+});
+const reorderButtonSelectors = {
+  'move up': '{transfer-reorderingactions-buttonmoveup}',
+  'move down': '{transfer-reorderingactions-buttonmovedown}',
+  'move to top': '{transfer-reorderingactions-buttonmovetotop}',
+  'move to bottom': '{transfer-reorderingactions-buttonmovetobottom}'
+};
+(0, _cypressCucumberPreprocessor.Then)('the {string} and {string} buttons should be disabled', (first, second) => {
+  cy.get(reorderButtonSelectors[first]).should('have.attr', 'disabled');
+  cy.get(reorderButtonSelectors[second]).should('have.attr', 'disabled');
+});
+(0, _cypressCucumberPreprocessor.Then)('the {string} and {string} buttons should not be disabled', (first, second) => {
+  cy.get(reorderButtonSelectors[first]).should('not.have.attr', 'disabled');
+  cy.get(reorderButtonSelectors[second]).should('not.have.attr', 'disabled');
 });

package/build/cjs/features/reorder-with-buttons.feature

@@ -35,12 +35,104 @@ Feature: Reorder items in the selected list using buttons
             | 2        | 3    |
             | 3        | 3    |
 
+    Scenario Outline: The user clicks the 'move to top' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move to top' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 1    |
+            | 2        | 1    |
+            | 3        | 1    |
+
+    Scenario Outline: The user clicks the 'move to bottom' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move to bottom' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 3    |
+            | 2        | 3    |
+            | 3        | 3    |
+
     Scenario: Disable reorder buttons when no items are highlighted
         Given the selected list has some items
         And no items are highlighted in the list
-        Then the 'move up' and 'move down' buttons should be disabled
+        Then all four reorder buttons should be disabled
 
-    Scenario: Disabled reorder buttons when multiple selected items are highlighted
-        Given the selected list has some items
-        And more than one item is highlighted in the list
-        Then the 'move up' and 'move down' buttons should be disabled
+    # --- Multi-select ---
+    #
+    # All four buttons act on the highlighted picked items as a group,
+    # preserving the group's relative order. Non-contiguous selections
+    # collapse into a contiguous block before landing at the target edge.
+
+    Scenario: 'move up' shifts a contiguous block of highlighted items up by one slot
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 4
+        And the user clicks the 'move up' button
+        Then those items should be at positions 2 and 3
+        And those items should still be highlighted
+
+    Scenario: 'move up' collapses and shifts a non-contiguous selection in one press
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move up' button
+        Then those items should be at positions 1 and 2
+
+    Scenario: 'move down' shifts a contiguous block of highlighted items down by one slot
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 3
+        And the user clicks the 'move down' button
+        Then those items should be at positions 3 and 4
+
+    Scenario: 'move down' collapses and shifts a non-contiguous selection in one press
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move down' button
+        Then those items should be at positions 4 and 5
+
+    Scenario: 'move to top' collapses a non-contiguous selection flush to the top
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 5
+        And the user clicks the 'move to top' button
+        Then those items should be at positions 1 and 2
+
+    Scenario: 'move to bottom' collapses a non-contiguous selection flush to the bottom
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move to bottom' button
+        Then those items should be at positions 7 and 8
+
+    Scenario: The highlighted group stays highlighted after moving, allowing chained presses
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 4
+        And the user clicks the 'move up' button
+        And the user clicks the 'move up' button
+        Then those items should be at positions 1 and 2
+        And those items should still be highlighted
+
+    Scenario: Both up-side buttons are disabled when the highlighted block is flush to the top
+        Given the selected list has eight items
+        When the user highlights the items at positions 1 and 2
+        Then the 'move up' and 'move to top' buttons should be disabled
+        And the 'move down' and 'move to bottom' buttons should not be disabled
+
+    Scenario: Both down-side buttons are disabled when the highlighted block is flush to the bottom
+        Given the selected list has eight items
+        When the user highlights the items at positions 7 and 8
+        Then the 'move down' and 'move to bottom' buttons should be disabled
+        And the 'move up' and 'move to top' buttons should not be disabled
+
+    Scenario: Up-side buttons remain enabled when a non-contiguous selection contains the top item
+        Given the selected list has eight items
+        When the user highlights the items at positions 1 and 3
+        Then the 'move up' and 'move to top' buttons should not be disabled
+
+    Scenario: All four reorder buttons are disabled when every picked item is highlighted
+        Given the selected list has eight items
+        When the user highlights every item in the selected list
+        Then all four reorder buttons should be disabled

package/build/cjs/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconRemoveIndividual = exports.IconRemoveAll = exports.IconMoveUp = exports.IconMoveDown = exports.IconAddIndividual = exports.IconAddAll = void 0;
+exports.IconRemoveIndividual = exports.IconRemoveAll = exports.IconMoveUp = exports.IconMoveToTop = exports.IconMoveToBottom = exports.IconMoveDown = exports.IconAddIndividual = exports.IconAddAll = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -24,7 +24,7 @@ const IconAddAll = _ref => {
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest,
-    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    fill: disabled ? _uiConstants.theme.disabled : _uiConstants.colors.grey800,
     className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/_react.default.createElement("g", {
     fillRule: "evenodd",
@@ -54,7 +54,7 @@ const IconAddIndividual = _ref2 => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/_react.default.createElement("svg", {
-    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    fill: disabled ? _uiConstants.theme.disabled : _uiConstants.colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -81,7 +81,7 @@ const IconRemoveAll = _ref3 => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/_react.default.createElement("svg", {
-    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    fill: disabled ? _uiConstants.theme.disabled : _uiConstants.colors.grey800,
     width: "16px",
     height: "16px",
     viewBox: "0 0 16 16",
@@ -118,7 +118,7 @@ const IconRemoveIndividual = _ref4 => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/_react.default.createElement("svg", {
-    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    fill: disabled ? _uiConstants.theme.disabled : _uiConstants.colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -144,15 +144,14 @@ const IconMoveDown = _ref5 => {
     disabled
   } = _ref5;
   return /*#__PURE__*/_react.default.createElement("svg", {
-    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    fill: disabled ? _uiConstants.colors.grey500 : _uiConstants.colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest
-  }, /*#__PURE__*/_react.default.createElement("polygon", {
-    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-    transform: "matrix(0 1 1 0 0 0)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13.5303 8.53027L12.4697 7.46973L8.75 11.1895V2H7.25V11.1895L3.53027 7.46973L2.46973 8.53027L8 14.0605L13.5303 8.53027Z"
   }));
 };
 exports.IconMoveDown = IconMoveDown;
@@ -166,19 +165,60 @@ const IconMoveUp = _ref6 => {
     disabled
   } = _ref6;
   return /*#__PURE__*/_react.default.createElement("svg", {
-    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    fill: disabled ? _uiConstants.colors.grey500 : _uiConstants.colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest
-  }, /*#__PURE__*/_react.default.createElement("polygon", {
-    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-    transform: "rotate(-90 8 8)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13.5303 7.46973L12.4697 8.53027L8.75 4.81055V14H7.25V4.81055L3.53027 8.53027L2.46973 7.46973L8 1.93945L13.5303 7.46973Z"
   }));
 };
 exports.IconMoveUp = IconMoveUp;
 IconMoveUp.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
   disabled: _propTypes.default.bool
+};
+const IconMoveToTop = _ref7 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref7;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: disabled ? _uiConstants.colors.grey500 : _uiConstants.colors.grey800,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13.5303 10.4697L12.4697 11.5303L8.75 7.81055V14H7.25V7.81055L3.53027 11.5303L2.46973 10.4697L8 4.93945L13.5303 10.4697ZM13.5303 6.46973L12.4697 7.53027L8 3.06055L3.53027 7.53027L2.46973 6.46973L8 0.939453L13.5303 6.46973Z"
+  }));
+};
+exports.IconMoveToTop = IconMoveToTop;
+IconMoveToTop.propTypes = {
+  dataTest: _propTypes.default.string.isRequired,
+  disabled: _propTypes.default.bool
+};
+const IconMoveToBottom = _ref8 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref8;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: disabled ? _uiConstants.colors.grey500 : _uiConstants.colors.grey800,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13.5303 5.53027L12.4697 4.46973L8.75 8.18945V2H7.25V8.18945L3.53027 4.46973L2.46973 5.53027L8 11.0605L13.5303 5.53027ZM13.5303 9.53027L12.4697 8.46973L8 12.9395L3.53027 8.46973L2.46973 9.53027L8 15.0605L13.5303 9.53027Z"
+  }));
+};
+exports.IconMoveToBottom = IconMoveToBottom;
+IconMoveToBottom.propTypes = {
+  dataTest: _propTypes.default.string.isRequired,
+  disabled: _propTypes.default.bool
 };

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

@@ -0,0 +1,7 @@
+{
+    "Reordering not allowed when filtering list": "Reordering not allowed when filtering list",
+    "Move selected items to top": "Move selected items to top",
+    "Move selected items up": "Move selected items up",
+    "Move selected items down": "Move selected items down",
+    "Move selected items to bottom": "Move selected items to bottom"
+}

package/build/cjs/locales/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _translations = _interopRequireDefault(require("./en/translations.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+const namespace = 'default';
+_d2I18n.default.addResources('en', namespace, _translations.default);
+var _default = exports.default = _d2I18n.default;

package/build/cjs/reordering-actions.js

@@ -7,49 +7,115 @@ exports.ReorderingActions = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _button = require("@dhis2-ui/button");
+var _tooltip = require("@dhis2-ui/tooltip");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("./icons.js");
+var _index = _interopRequireDefault(require("./locales/index.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const filterActiveTooltip = _index.default.t('Reordering not allowed when filtering list');
 const ReorderingActions = _ref => {
   let {
     dataTest,
     disabledDown,
     disabledUp,
+    filterActive,
     onChangeUp,
-    onChangeDown
+    onChangeDown,
+    onChangeToTop,
+    onChangeToBottom
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    className: _style.default.dynamic([["874845231", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]])
-  }, /*#__PURE__*/_react.default.createElement(_button.Button, {
-    small: true,
-    disabled: disabledDown,
-    onClick: () => !disabledDown && onChangeDown(event),
-    dataTest: `${dataTest}-buttonmovedown`,
-    icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveDown, {
-      dataTest: `${dataTest}-iconmovedown`,
-      disabled: disabledDown
-    })
-  }), /*#__PURE__*/_react.default.createElement(_button.Button, {
-    small: true,
-    disabled: disabledUp,
-    onClick: () => !disabledUp && onChangeUp(event),
-    dataTest: `${dataTest}-buttonmoveup`,
-    icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveUp, {
-      dataTest: `${dataTest}-iconmoveup`,
-      disabled: disabledUp
-    })
-  }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    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:${_uiConstants.spacers.dp8};}`, `div.__jsx-style-dynamic-selector:last-child{padding-bottom:${_uiConstants.spacers.dp8};}`, `div.__jsx-style-dynamic-selector>button:first-child{margin-inline-start:${_uiConstants.spacers.dp8};}`]));
+  const moveToTopLabel = _index.default.t('Move selected items to top');
+  const moveUpLabel = _index.default.t('Move selected items up');
+  const moveDownLabel = _index.default.t('Move selected items down');
+  const moveToBottomLabel = _index.default.t('Move selected items to bottom');
+  const renderButtons = function () {
+    let tooltipHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return /*#__PURE__*/_react.default.createElement("div", _extends({
+      "data-test": dataTest
+    }, tooltipHandlers, {
+      className: _style.default.dynamic([["3663884558", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]]) + " " + (tooltipHandlers && tooltipHandlers.className != null && tooltipHandlers.className || "")
+    }), /*#__PURE__*/_react.default.createElement(_button.Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledUp,
+      onClick: () => !disabledUp && onChangeToTop(),
+      dataTest: `${dataTest}-buttonmovetotop`,
+      "aria-label": moveToTopLabel,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveToTop, {
+        dataTest: `${dataTest}-iconmovetotop`,
+        disabled: disabledUp
+      })
+    }), /*#__PURE__*/_react.default.createElement(_button.Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledUp,
+      onClick: () => !disabledUp && onChangeUp(),
+      dataTest: `${dataTest}-buttonmoveup`,
+      "aria-label": moveUpLabel,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveUp, {
+        dataTest: `${dataTest}-iconmoveup`,
+        disabled: disabledUp
+      })
+    }), /*#__PURE__*/_react.default.createElement(_button.Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledDown,
+      onClick: () => !disabledDown && onChangeDown(),
+      dataTest: `${dataTest}-buttonmovedown`,
+      "aria-label": moveDownLabel,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveDown, {
+        dataTest: `${dataTest}-iconmovedown`,
+        disabled: disabledDown
+      })
+    }), /*#__PURE__*/_react.default.createElement(_button.Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledDown,
+      onClick: () => !disabledDown && onChangeToBottom(),
+      dataTest: `${dataTest}-buttonmovetobottom`,
+      "aria-label": moveToBottomLabel,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveToBottom, {
+        dataTest: `${dataTest}-iconmovetobottom`,
+        disabled: disabledDown
+      })
+    }), /*#__PURE__*/_react.default.createElement(_style.default, {
+      id: "3663884558",
+      dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]
+    }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-inline-start:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;gap:${_uiConstants.spacers.dp4};padding-top:${_uiConstants.spacers.dp8};}`, `div.__jsx-style-dynamic-selector:last-child{padding-bottom:${_uiConstants.spacers.dp8};}`]));
+  };
+  if (filterActive) {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
+      openDelay: 500,
+      content: filterActiveTooltip
+    }, _ref2 => {
+      let {
+        onMouseOver,
+        onMouseOut,
+        onFocus,
+        onBlur,
+        ref
+      } = _ref2;
+      return renderButtons({
+        ref,
+        onMouseOver,
+        onMouseOut,
+        onFocus,
+        onBlur
+      });
+    });
+  }
+  return renderButtons();
 };
 exports.ReorderingActions = ReorderingActions;
 ReorderingActions.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
   onChangeDown: _propTypes.default.func.isRequired,
+  onChangeToBottom: _propTypes.default.func.isRequired,
+  onChangeToTop: _propTypes.default.func.isRequired,
   onChangeUp: _propTypes.default.func.isRequired,
   disabledDown: _propTypes.default.bool,
-  disabledUp: _propTypes.default.bool
+  disabledUp: _propTypes.default.bool,
+  filterActive: _propTypes.default.bool
 };

package/build/cjs/transfer/default-filter-callback.js

@@ -9,10 +9,21 @@ exports.defaultFilterCallback = void 0;
  * @param {string} filter
  * @returns {Object[]}
  */
-const defaultFilterCallback = (options, filter) => filter === '' ? options : options.filter(_ref => {
-  let {
-    label
-  } = _ref;
-  return label.match(new RegExp(filter, 'i'));
-});
+const defaultFilterCallback = (options, filter) => {
+  if (filter === '') {
+    return options;
+  }
+  try {
+    const regex = new RegExp(filter, 'i');
+    return options.filter(_ref => {
+      let {
+        label
+      } = _ref;
+      return label.match(regex);
+    });
+  } catch {
+    console.warn('Invalid regex filter:', filter);
+    return options;
+  }
+};
 exports.defaultFilterCallback = defaultFilterCallback;