@dhis2-ui/transfer 9.10.3 → 9.11.1-beta.1

package/build/cjs/{transfer.stories.js → transfer.prod.stories.js}

@@ -4,29 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
-
 var _tab = require("@dhis2-ui/tab");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _transferOption = require("./transfer-option.js");
-
 var _transfer = require("./transfer.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 subtitle = 'Allows users to select options from a list';
+const description = `
+#### Usage
 
-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); }
+Use a transfer component wherever a user needs to make a complex selection. Simple selections can be achieved with checkboxes, radio buttons or a select.
 
-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; }
+There are use-cases that are particularly suitable for a transfer component:
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+- when a user needs to select some options from several different groups at the same time
+- if the selection needs to have a defined order
+- when the user will be interacting with and editing the selection often
+- if a user needs to easily compare non-selected and selected options
+- if a user is making selections as part of a complex flow, especially where there are many options to choose from
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+#### Terminology
 
-const subtitle = 'Allows users to select options from a list';
-const description = "\n#### Usage\n\nUse a transfer component wherever a user needs to make a complex selection. Simple selections can be achieved with checkboxes, radio buttons or a select.\n\nThere are use-cases that are particularly suitable for a transfer component:\n\n- when a user needs to select some options from several different groups at the same time\n- if the selection needs to have a defined order\n- when the user will be interacting with and editing the selection often\n- if a user needs to easily compare non-selected and selected options\n- if a user is making selections as part of a complex flow, especially where there are many options to choose from\n\n#### Terminology\n\nThis component has to differentiate between different types of options,\nhere's an explanation of their meaning:\n\n- source options: These are options listed on the left and are available for selection\n- picked options: These options have been selected by the user and are on the right side\n- highlighted option: These are visually highlighted options than can be on either side and are ready for transferral with the action buttons to the other side\n- filtered options: These are the displayed source options filtered by a search term or a custom search algorithm. The api surface uses \"selected\" for \"picked\" to be consistent with the rest of the library\n\n#### More details\n\nSee more about the options available for Transfers at [Design System: Transfer](https://github.com/dhis2/design-system/blob/master/organisms/transfer.md#transfer).\n\n```js\nimport { Transfer, TransferOption } from '@dhis2/ui'\n```\n";
+This component has to differentiate between different types of options,
+here's an explanation of their meaning:
+
+- source options: These are options listed on the left and are available for selection
+- picked options: These options have been selected by the user and are on the right side
+- highlighted option: These are visually highlighted options than can be on either side and are ready for transferral with the action buttons to the other side
+- filtered options: These are the displayed source options filtered by a search term or a custom search algorithm. The api surface uses "selected" for "picked" to be consistent with the rest of the library
+
+#### More details
+
+See more about the options available for Transfers at [Design System: Transfer](https://github.com/dhis2/design-system/blob/master/organisms/transfer.md#transfer).
+
+\`\`\`js
+import { Transfer, TransferOption } from '@dhis2/ui'
+\`\`\`
+`;
 const options = [{
   label: 'ANC 1st visit',
   value: 'anc_1st_visit'
@@ -94,6 +113,7 @@ const options = [{
   label: 'ART entry point: No PMTCT',
   value: 'art_entry_point:_no_pmtct'
 }];
+
 /**
  * Default args are needed because storybook currently struggles with
  * functions as default props: they are sent to the component as strings when
@@ -102,8 +122,7 @@ const options = [{
  *
  * https://github.com/storybookjs/storybook/issues/12455#issuecomment-702763930
  */
-
-var _default = {
+var _default = exports.default = {
   title: 'Transfer',
   component: _transfer.Transfer,
   parameters: {
@@ -118,51 +137,43 @@ var _default = {
     }
   },
   // Default args:
-  args: { ..._transfer.Transfer.defaultProps,
+  args: {
+    ..._transfer.Transfer.defaultProps,
     options: options
   }
 };
-exports.default = _default;
-
 const StatefulTemplate = _ref => {
   let {
     initiallySelected,
     ...args
   } = _ref;
   const [selected, setSelected] = (0, _react.useState)(initiallySelected);
-
   const onChange = payload => setSelected(payload.selected);
-
   return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, args, {
     selected: selected,
     onChange: onChange
   }));
 };
-
 StatefulTemplate.defaultProps = {
   initiallySelected: []
 };
 StatefulTemplate.propTypes = {
   initiallySelected: _propTypes.default.array
 };
-const SingleSelection = StatefulTemplate.bind({});
-exports.SingleSelection = SingleSelection;
+const SingleSelection = exports.SingleSelection = StatefulTemplate.bind({});
 SingleSelection.args = {
   maxSelections: 1
 };
-const Multiple = StatefulTemplate.bind({});
-exports.Multiple = Multiple;
+const Multiple = exports.Multiple = StatefulTemplate.bind({});
 Multiple.args = {
   options: options.slice(0, 3)
 };
-const Header = StatefulTemplate.bind({});
-exports.Header = Header;
+const Header = exports.Header = StatefulTemplate.bind({});
 Header.args = {
   leftHeader: /*#__PURE__*/_react.default.createElement("h3", null, "Header on the left side"),
   rightHeader: /*#__PURE__*/_react.default.createElement("h4", null, "Header on the right side")
 };
-const OptionsFooter = StatefulTemplate.bind({});
-exports.OptionsFooter = OptionsFooter;
+const OptionsFooter = exports.OptionsFooter = StatefulTemplate.bind({});
 OptionsFooter.args = {
   leftFooter: /*#__PURE__*/_react.default.createElement("a", {
     href: "#",
@@ -173,14 +184,12 @@ OptionsFooter.args = {
     }
   }, "Reload list")
 };
-const Filtered = StatefulTemplate.bind({});
-exports.Filtered = Filtered;
+const Filtered = exports.Filtered = StatefulTemplate.bind({});
 Filtered.args = {
   filterable: true,
   initialSearchTerm: 'ANC'
 };
-const FilteredPicked = StatefulTemplate.bind({});
-exports.FilteredPicked = FilteredPicked;
+const FilteredPicked = exports.FilteredPicked = StatefulTemplate.bind({});
 FilteredPicked.args = {
   filterablePicked: true,
   initialSearchTermPicked: 'ANC',
@@ -191,14 +200,12 @@ FilteredPicked.args = {
     return value;
   })
 };
-const FilteredPlaceholder = StatefulTemplate.bind({});
-exports.FilteredPlaceholder = FilteredPlaceholder;
+const FilteredPlaceholder = exports.FilteredPlaceholder = StatefulTemplate.bind({});
 FilteredPlaceholder.args = {
   filterable: true,
   filterLabel: 'Filter with placeholder',
   filterPlaceholder: 'Search'
 };
-
 const renderOption = _ref3 => {
   let {
     label,
@@ -218,33 +225,36 @@ const renderOption = _ref3 => {
     }
   }, "Custom: ", label, " (label), ", value, " (value)");
 };
-
-const RenderOptionCode = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "Custom option code:"), /*#__PURE__*/_react.default.createElement("code", null, /*#__PURE__*/_react.default.createElement("pre", null, "const renderOption = ({ label, value, onClick, highlighted, selected }) => (\n                <p\n                    onClick={event => onClick({ label, value }, event)}\n                    style={{\n                        background: highlighted ? 'green' : 'blue',\n                        color: selected ? 'orange' : 'white',\n                    }}\n                >\n                    Custom: {label} (label), {value} (value)\n                </p>\n            )")));
-
+const RenderOptionCode = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "Custom option code:"), /*#__PURE__*/_react.default.createElement("code", null, /*#__PURE__*/_react.default.createElement("pre", null, `const renderOption = ({ label, value, onClick, highlighted, selected }) => (
+                <p
+                    onClick={event => onClick({ label, value }, event)}
+                    style={{
+                        background: highlighted ? 'green' : 'blue',
+                        color: selected ? 'orange' : 'white',
+                    }}
+                >
+                    Custom: {label} (label), {value} (value)
+                </p>
+            )`)));
 const StatefulTemplateCustomRenderOption = _ref4 => {
   let {
     initiallySelected,
     ...args
   } = _ref4;
   const [selected, setSelected] = (0, _react.useState)(initiallySelected);
-
   const onChange = payload => setSelected(payload.selected);
-
   return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, args, {
     selected: selected,
     onChange: onChange
   }));
 };
-
 StatefulTemplateCustomRenderOption.defaultProps = {
   initiallySelected: []
 };
 StatefulTemplateCustomRenderOption.propTypes = {
   initiallySelected: _propTypes.default.array
 };
-
 const CustomListOptions = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RenderOptionCode, null), /*#__PURE__*/_react.default.createElement(StatefulTemplateCustomRenderOption, args));
-
 exports.CustomListOptions = CustomListOptions;
 CustomListOptions.args = {
   renderOption,
@@ -256,8 +266,7 @@ CustomListOptions.args = {
     return value;
   })
 };
-const IndividualCustomOption = StatefulTemplateCustomRenderOption.bind({});
-exports.IndividualCustomOption = IndividualCustomOption;
+const IndividualCustomOption = exports.IndividualCustomOption = StatefulTemplateCustomRenderOption.bind({});
 IndividualCustomOption.args = {
   addAllText: 'Add all',
   addIndividualText: 'Add individual',
@@ -267,20 +276,17 @@ IndividualCustomOption.args = {
     if (option.value === options[0].value) {
       return renderOption(option);
     }
-
     return /*#__PURE__*/_react.default.createElement(_transferOption.TransferOption, option);
   }
 };
-const CustomButtonText = StatefulTemplate.bind({});
-exports.CustomButtonText = CustomButtonText;
+const CustomButtonText = exports.CustomButtonText = StatefulTemplate.bind({});
 CustomButtonText.args = {
   addAllText: 'Add all',
   addIndividualText: 'Add individual',
   removeAllText: 'Remove all',
   removeIndividualText: 'Remove individual'
 };
-const SourceEmptyPlaceholder = StatefulTemplate.bind({});
-exports.SourceEmptyPlaceholder = SourceEmptyPlaceholder;
+const SourceEmptyPlaceholder = exports.SourceEmptyPlaceholder = StatefulTemplate.bind({});
 SourceEmptyPlaceholder.args = {
   sourceEmptyPlaceholder: /*#__PURE__*/_react.default.createElement("p", {
     style: {
@@ -294,8 +300,7 @@ SourceEmptyPlaceholder.args = {
   }, "Add option")),
   options: []
 };
-const PickedEmptyComponent = StatefulTemplate.bind({});
-exports.PickedEmptyComponent = PickedEmptyComponent;
+const PickedEmptyComponent = exports.PickedEmptyComponent = StatefulTemplate.bind({});
 PickedEmptyComponent.args = {
   selectedEmptyComponent: /*#__PURE__*/_react.default.createElement("p", {
     style: {
@@ -303,8 +308,7 @@ PickedEmptyComponent.args = {
     }
   }, "You have not selected anything yet", /*#__PURE__*/_react.default.createElement("br", null))
 };
-const Reordering = StatefulTemplate.bind({});
-exports.Reordering = Reordering;
+const Reordering = exports.Reordering = StatefulTemplate.bind({});
 Reordering.args = {
   enableOrderChange: true,
   options: options.slice(0, 4),
@@ -315,31 +319,29 @@ Reordering.args = {
     return value;
   })
 };
-const IncreasedOptionsHeight = StatefulTemplate.bind({});
-exports.IncreasedOptionsHeight = IncreasedOptionsHeight;
+const IncreasedOptionsHeight = exports.IncreasedOptionsHeight = StatefulTemplate.bind({});
 IncreasedOptionsHeight.args = {
   maxSelections: Infinity,
   filterable: true,
   height: '400px'
 };
-const DifferentWidths = StatefulTemplate.bind({});
-exports.DifferentWidths = DifferentWidths;
+const DifferentWidths = exports.DifferentWidths = StatefulTemplate.bind({});
 DifferentWidths.args = {
   optionsWidth: '500px',
   selectedWidth: '240px'
 };
-
 const createCustomFilteringInHeader = hideFilterInput => {
-  const relativePeriods = options.slice(0, 10).map((option, index) => ({ ...option,
+  const relativePeriods = options.slice(0, 10).map((option, index) => ({
+    ...option,
     relativePeriod: true,
     year: index < 5 ? '2020' : '2019'
   }));
-  const fixedPeriods = options.slice(10, 20).map((option, index) => ({ ...option,
+  const fixedPeriods = options.slice(10, 20).map((option, index) => ({
+    ...option,
     relativePeriod: false,
     year: index < 5 ? '2020' : '2019'
   }));
   const allOptions = [...relativePeriods, ...fixedPeriods];
-
   const Header = _ref7 => {
     let {
       onClick,
@@ -376,20 +378,16 @@ const createCustomFilteringInHeader = hideFilterInput => {
   };
   /* eslint-enable react/prop-types */
 
-
   const CustomTransfer = props => {
     const [filter, setFilter] = (0, _react.useState)('');
     const [relativePeriod, setRelativePeriod] = (0, _react.useState)(true);
     const [year, setYear] = (0, _react.useState)('2020');
-
     const filterCallback = (options, filter) => {
       const optionsWithYear = options.filter(option => option.year === year);
       const optionsWithPeriod = optionsWithYear.filter(option => option.relativePeriod === relativePeriod);
-
       if (filter === '') {
         return optionsWithPeriod;
       }
-
       return optionsWithPeriod.filter(_ref8 => {
         let {
           label
@@ -397,7 +395,6 @@ const createCustomFilteringInHeader = hideFilterInput => {
         return label.indexOf(filter) !== -1;
       });
     };
-
     const header = /*#__PURE__*/_react.default.createElement(Header, {
       relativePeriod: relativePeriod,
       selectedYear: year,
@@ -414,7 +411,6 @@ const createCustomFilteringInHeader = hideFilterInput => {
         return setRelativePeriod(newRelativePeriod);
       }
     });
-
     return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, props, {
       options: allOptions,
       filterable: true,
@@ -434,69 +430,62 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterPlaceholder: "Search"
     }));
   };
-
   return _ref12 => {
     let {
       initiallySelected,
       ...args
     } = _ref12;
     const [selected, setSelected] = (0, _react.useState)(initiallySelected);
-
     const onChange = payload => setSelected(payload.selected);
-
     return /*#__PURE__*/_react.default.createElement(CustomTransfer, _extends({}, args, {
       selected: selected,
       onChange: onChange
     }));
   };
 };
-
-const CustomFilteringWithFilterInput = createCustomFilteringInHeader(false);
-exports.CustomFilteringWithFilterInput = CustomFilteringWithFilterInput;
-const CustomFilteringWithoutFilterInput = createCustomFilteringInHeader(true);
-exports.CustomFilteringWithoutFilterInput = CustomFilteringWithoutFilterInput;
+const CustomFilteringWithFilterInput = exports.CustomFilteringWithFilterInput = createCustomFilteringInHeader(false);
+const CustomFilteringWithoutFilterInput = exports.CustomFilteringWithoutFilterInput = createCustomFilteringInHeader(true);
 const optionsPool = options;
 const pageSize = 5;
+
 /*
  * The page size is: 5
  * To keep the code as small as possible, handling selecting items is not
    included
  */
-
 const InfiniteLoading = args => {
   (0, _react.useEffect)(() => {
     console.clear();
-  }, []); // state for whether the next page's options are being loaded
-
-  const [loading, setLoading] = (0, _react.useState)(false); // captures the current page
-
-  const [page, setPage] = (0, _react.useState)(0); // all options (incl. available AND selected options)
-
-  const [options, setOptions] = (0, _react.useState)([]); // selected options
-
-  const [selected] = (0, _react.useState)( // second page is already selected
+  }, []);
+
+  // state for whether the next page's options are being loaded
+  const [loading, setLoading] = (0, _react.useState)(false);
+  // captures the current page
+  const [page, setPage] = (0, _react.useState)(0);
+  // all options (incl. available AND selected options)
+  const [options, setOptions] = (0, _react.useState)([]);
+  // selected options
+  const [selected] = (0, _react.useState)(
+  // second page is already selected
   optionsPool.slice(pageSize, pageSize * 2).map(_ref13 => {
     let {
       value
     } = _ref13;
     return value;
   }));
-
   const onEndReached = () => {
     // do nothing when loading already
     if (loading) {
       return;
     }
-
     setPage(page + 1);
-  }; // fake fetch request
-
+  };
 
+  // fake fetch request
   const fetchOptions = nextPage => new Promise(resolve => setTimeout(() => {
     const nextOptions = optionsPool.slice(options.length, nextPage * pageSize);
     resolve(nextOptions);
   }, 2000));
-
   const loadNextOptions = async () => {
     setLoading(true);
     const nextOptions = await fetchOptions(page);
@@ -508,12 +497,10 @@ const InfiniteLoading = args => {
       } = nextOption;
       return selected.includes(value);
     });
-
     if (allAlreadySelected) {
       onEndReached();
     }
   };
-
   (0, _react.useEffect)(() => {
     // prevent initial call
     if (page > 0) {
@@ -524,22 +511,17 @@ const InfiniteLoading = args => {
     loading: loading,
     options: options,
     selected: selected,
-    onChange: () => null
-    /* noop */
-    ,
+    onChange: () => null /* noop */,
     onEndReached: onEndReached
   }));
 };
-
 exports.InfiniteLoading = InfiniteLoading;
-const LoadingSource = StatefulTemplate.bind({});
-exports.LoadingSource = LoadingSource;
+const LoadingSource = exports.LoadingSource = StatefulTemplate.bind({});
 LoadingSource.args = {
   loading: true,
   options: options.slice(0, 3)
 };
-const LoadingPicked = StatefulTemplate.bind({});
-exports.LoadingPicked = LoadingPicked;
+const LoadingPicked = exports.LoadingPicked = StatefulTemplate.bind({});
 LoadingPicked.args = {
   loadingPicked: true,
   options: options.slice(0, 3),
@@ -550,11 +532,9 @@ LoadingPicked.args = {
     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),

package/build/cjs/use-resize-counter.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeCounter = void 0;
-
 var _react = require("react");
-
 /*
  * The initial call is irrelevant as there has been
  * no resize yet that we want to react to
@@ -24,7 +22,6 @@ const useResizeCounter = element => {
     // it's executed as the callback passed to `ResizeObserver`
     // will be executed on construction
     let internalCounter = counter;
-
     if (element) {
       const observer = new ResizeObserver(() => {
         ++internalCounter;
@@ -36,5 +33,4 @@ const useResizeCounter = element => {
   }, [element, setCounter]);
   return counter < 1 ? 0 : counter;
 };
-
 exports.useResizeCounter = useResizeCounter;

package/build/es/__e2e__/common/stateful-decorator.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
-import React, { useState } from 'react';
 
+import React, { useState } from 'react';
 const WithState = _ref => {
   let {
     fn,
@@ -22,7 +22,6 @@ const WithState = _ref => {
     } : undefined
   });
 };
-
 export const statefulDecorator = function () {
   let {
     initialState = [],

package/build/es/__e2e__/{disabled-transfer-buttons.stories.e2e.js → disabled-transfer-buttons.e2e.stories.js}

@@ -47,7 +47,8 @@ export const OnlyDisabledSourceOptions = (_, _ref4) => {
   return /*#__PURE__*/React.createElement(Transfer, {
     selected: selected,
     onChange: onChange,
-    options: [{ ...options[0],
+    options: [{
+      ...options[0],
       disabled: true
     }]
   });

package/build/es/__e2e__/{disabled-transfer-options.stories.e2e.js → disabled-transfer-options.e2e.stories.js}

@@ -14,7 +14,8 @@ export const OneDisabled = (_, _ref) => {
   return /*#__PURE__*/React.createElement(Transfer, {
     selected: selected,
     onChange: onChange,
-    options: [...options.slice(0, 3), { ...options[3],
+    options: [...options.slice(0, 3), {
+      ...options[3],
       disabled: true
     }, ...options.slice(4)]
   });

package/build/es/__e2e__/{filter-options-list.stories.e2e.js → filter-options-list.e2e.stories.js}

@@ -74,12 +74,11 @@ export const AncCustomFilter = (_, _ref5) => {
       let {
         label
       } = _ref6;
-      return label.match("(^| )ANC .*".concat(filter));
+      return label.match(`(^| )ANC .*${filter}`);
     }),
     options: options
   });
 };
-
 window.customFilterCallback = (options, filter) => {
   return options.filter(_ref7 => {
     let {
@@ -88,7 +87,6 @@ window.customFilterCallback = (options, filter) => {
     return label.indexOf(filter) !== -1;
   });
 };
-
 window.Cypress && window.Cypress.cy.spy(window, 'customFilterCallback');
 export const ControlledFilter = (_, _ref8) => {
   let {

package/build/es/__tests__/helper/use-highlighted-option/create-toggle-highlighted-option.test.js

@@ -92,7 +92,8 @@ describe('Transfer- useHighlightedOptions - createToggleHighlightedOption', () =
     expect(toggleRange).toHaveBeenCalledTimes(0);
   });
   it('should do nothing when disabled is true', () => {
-    toggleHighlightedOption = createToggleHighlightedOption({ ...createToggleHighlightedOptionDefaultPayload,
+    toggleHighlightedOption = createToggleHighlightedOption({
+      ...createToggleHighlightedOptionDefaultPayload,
       disabled: true
     });
     toggleHighlightedOption({

package/build/es/__tests__/helper/use-highlighted-option/toggle-range.test.js

@@ -115,10 +115,10 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
       });
       expect(setHighlightedOptions).toHaveBeenCalledWith(expected);
     });
+
     /**
      * E. g. lastClicked is hidden because of a filter change
      */
-
     it('should highlight from the highest in list to the clicked when last clicked not visible anymore', () => {
       const expected = options.slice(1, 6).map(_ref5 => {
         let {
@@ -141,11 +141,11 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
       });
       expect(setHighlightedOptions).toHaveBeenCalledWith(expected);
     });
+
     /**
      * E. g. lastClicked is null because all options so far
      * have been clicked with shift
      */
-
     it('should highlight from the highest in list to the clicked when last clicked null', () => {
       const expected = options.slice(1, 6).map(_ref7 => {
         let {

package/build/es/__tests__/helper/use-highlighted-option.test.js

@@ -1,5 +1,5 @@
-import { useHighlightedOptions } from '../../transfer/use-highlighted-options.js';
 import { createToggleHighlightedOption } from '../../transfer/use-highlighted-options/create-toggle-highlighted-option.js';
+import { useHighlightedOptions } from '../../transfer/use-highlighted-options.js';
 jest.mock('../../transfer/use-highlighted-options/create-toggle-highlighted-option.js', () => ({
   createToggleHighlightedOption: jest.fn()
 }));

package/build/es/actions.js

@@ -13,7 +13,7 @@ export const Actions = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1457814848",
     dynamic: [spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 ".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button{margin-top:8px;}", "div.__jsx-style-dynamic-selector>button:first-child{margin-top:0;}"]));
+  }, [`div.__jsx-style-dynamic-selector{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 ${spacers.dp8};}`, "div.__jsx-style-dynamic-selector>button{margin-top:8px;}", "div.__jsx-style-dynamic-selector>button:first-child{margin-top:0;}"]));
 };
 Actions.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/add-all.js

@@ -14,7 +14,7 @@ export const AddAll = _ref => {
     disabled: disabled,
     onClick: onClick,
     icon: /*#__PURE__*/React.createElement(IconAddAll, {
-      dataTest: "".concat(dataTest, "-iconaddall"),
+      dataTest: `${dataTest}-iconaddall`,
       disabled: disabled
     })
   }, label);

package/build/es/add-individual.js

@@ -15,7 +15,7 @@ export const AddIndividual = _ref => {
     onClick: onClick,
     icon: /*#__PURE__*/React.createElement(IconAddIndividual, {
       disabled: disabled,
-      dataTest: "".concat(dataTest, "-iconaddindividual")
+      dataTest: `${dataTest}-iconaddindividual`
     })
   }, label);
 };

package/build/es/common/find-option-index.js

@@ -1,8 +1,8 @@
 import { isOption } from './is-option.js';
+
 /**
  * @param {Object[]} options
  * @param {Object} option
  * @returns {Int}
  */
-
 export const findOptionIndex = (options, option) => options.findIndex(current => isOption(current, option));