gogoclient 1.2.2

package/dist/ui/common/LinkWithoutStyles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var LinkWithoutStyles = _styledComponents["default"].a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  text-decoration: none;\n  width: 100%;\n\n  &:hover,\n  &:focus,\n  &:active {\n    color: inherit;\n    text-decoration: none;\n  }\n"])));
+var _default = exports["default"] = LinkWithoutStyles;

package/dist/ui/common/List.js

@@ -0,0 +1,390 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _without = _interopRequireDefault(require("lodash/without"));
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+var _antd = require("antd");
+var _toolkit = require("../../toolkit");
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _Empty = _interopRequireDefault(require("./Empty"));
+var _Search = _interopRequireDefault(require("./Search"));
+var _Select = _interopRequireDefault(require("./Select"));
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+var _VisuallyHiddenElement = _interopRequireDefault(require("./VisuallyHiddenElement"));
+var _Spin = require("./Spin");
+var _excluded = ["id", "index", "renderItem", "onDeselect", "onSelect", "selected", "checkboxLabel"],
+  _excluded2 = ["footerContent", "className", "dataSource", "locale", "pagination", "renderItem", "itemSelection", "loading", "onSearch", "onSortOptionChange", "searchLoading", "searchPlaceholder", "showPagination", "showSearch", "showSort", "showTotalCount", "sortOptions", "totalCount", "draggable", "onDragEnd", "selectedItems"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+// #region styled
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n"])), (0, _toolkit.th)('colorBackground'));
+var DroppableWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow: auto;\n"])));
+var SearchWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-self: center;\n  max-width: 1170px;\n  padding: 0 ", ";\n  width: 100%;\n"])), (0, _toolkit.grid)(2));
+var InternalHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n  display: flex;\n  padding: ", ";\n"])), (0, _toolkit.th)('colorBorder'), (0, _toolkit.grid)(2));
+var TotalCount = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
+var SortWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
+var Select = (0, _styledComponents["default"])(_Select["default"])(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-left: ", ";\n  width: 150px;\n"])), (0, _toolkit.grid)(2));
+var ListItemWrapper = _styledComponents["default"].li(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  justify-content: stretch;\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n\n  &&&& {\n    background-color: ", ";\n  }\n"])), (0, _toolkit.th)('colorPrimary'), function (_ref) {
+  var isDragging = _ref.isDragging;
+  return isDragging ? (0, _toolkit.th)('colorSelection') : 'transparent';
+});
+var StyledList = (0, _styledComponents["default"])(_antd.List)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow: auto;\n\n  .ant-spin-nested-loading {\n    height: 100%;\n\n    .ant-spin {\n      display: grid;\n      max-height: unset;\n      place-content: center;\n    }\n  }\n"])));
+var StyledLoader = (0, _styledComponents["default"])(_Spin.Indicator)(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n  transform: translateY(-100%);\n"])));
+var FooterWrapper = _styledComponents["default"].div(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n"])), (0, _toolkit.th)('colorBorder'));
+var CheckBox = (0, _styledComponents["default"])(_Checkbox["default"])(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), (0, _toolkit.grid)(2));
+// #endregion styled
+
+var compareItem = function compareItem(preProps, nextProps) {
+  if (preProps.id === nextProps.id && preProps.selected === nextProps.selected) return true;
+  return false;
+};
+
+// memoize Selectable item to avoid unecessary rerendering every time an item is selected/deselected
+var SelectableItem = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var id = props.id,
+    index = props.index,
+    renderItem = props.renderItem,
+    onDeselect = props.onDeselect,
+    onSelect = props.onSelect,
+    selected = props.selected,
+    checkboxLabel = props.checkboxLabel,
+    rest = _objectWithoutProperties(props, _excluded);
+  var handleChange = function handleChange() {
+    if (selected) {
+      onDeselect(id);
+    } else {
+      onSelect(id);
+    }
+  };
+  return checkboxLabel !== '' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CheckBox, {
+    "aria-label": checkboxLabel,
+    checked: selected,
+    onChange: handleChange
+  }), renderItem(_objectSpread({
+    id: id
+  }, rest), index)) : /*#__PURE__*/_react["default"].createElement(CheckBox, {
+    checked: selected,
+    onChange: handleChange
+  }, /*#__PURE__*/_react["default"].createElement(_VisuallyHiddenElement["default"], null, "Select item: "), renderItem(_objectSpread({
+    id: id
+  }, rest), index));
+}, compareItem);
+SelectableItem.propTypes = {
+  id: _propTypes["default"].string.isRequired,
+  index: _propTypes["default"].number.isRequired,
+  renderItem: _propTypes["default"].func.isRequired,
+  onDeselect: _propTypes["default"].func.isRequired,
+  onSelect: _propTypes["default"].func.isRequired,
+  selected: _propTypes["default"].bool.isRequired,
+  checkboxLabel: _propTypes["default"].string
+};
+SelectableItem.defaultProps = {
+  checkboxLabel: ''
+};
+
+// memoized SelectableItem would use old value of selectedItems when handleSelect and handleDeselect are passed as they are
+// when you wrap them with the below function, they always refer to the List's updated selectedItems
+function useFunction(callback) {
+  var ref = _react["default"].useRef();
+  ref.current = callback;
+  function callbackFunction() {
+    var cb = ref.current;
+    if (typeof callback === 'function') {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return cb.apply(this, args);
+    }
+    return false;
+  }
+  return (0, _react.useCallback)(callbackFunction, []);
+}
+
+// const EmptyList = () => {
+//   return 'no data'
+// }
+
+var List = function List(props) {
+  var footerContent = props.footerContent,
+    className = props.className,
+    dataSource = props.dataSource,
+    locale = props.locale,
+    pagination = props.pagination,
+    renderItem = props.renderItem,
+    itemSelection = props.itemSelection,
+    loading = props.loading,
+    onSearch = props.onSearch,
+    onSortOptionChange = props.onSortOptionChange,
+    searchLoading = props.searchLoading,
+    searchPlaceholder = props.searchPlaceholder,
+    showPagination = props.showPagination,
+    showSearch = props.showSearch,
+    showSort = props.showSort,
+    showTotalCount = props.showTotalCount,
+    sortOptions = props.sortOptions,
+    totalCount = props.totalCount,
+    draggable = props.draggable,
+    onDragEnd = props.onDragEnd,
+    controlledSelectedItems = props.selectedItems,
+    rest = _objectWithoutProperties(props, _excluded2);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItems = _useState2[0],
+    setSelectedItems = _useState2[1];
+  (0, _react.useEffect)(function () {
+    itemSelection && itemSelection.onChange && itemSelection.onChange(selectedItems);
+  }, [selectedItems]);
+
+  // Reset selected items to controlledSelectedItems when dataSource changes
+  // by default it will reset selection (controlledSelectedItems = [])
+  // to preserve it, keep track of selected items in the parent component, and pass it down via this prop
+  (0, _react.useEffect)(function () {
+    setSelectedItems(controlledSelectedItems);
+  }, [dataSource]);
+  var handleSelect = useFunction(function (id) {
+    setSelectedItems([].concat(_toConsumableArray(selectedItems), [id]));
+  });
+  var handleDeselect = useFunction(function (id) {
+    setSelectedItems((0, _without["default"])(selectedItems, id));
+  });
+  var listItemToRender = itemSelection ? function (itemProps, i) {
+    return draggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
+      draggableId: "draggable-".concat(i),
+      index: i
+    }, function (provided, snapshot) {
+      return /*#__PURE__*/_react["default"].createElement(ListItemWrapper, _extends({
+        "data-testid": "list-item-wrapper",
+        key: itemProps === null || itemProps === void 0 ? void 0 : itemProps.id
+      }, provided.draggableProps, provided.dragHandleProps, {
+        isDragging: snapshot.isDragging,
+        ref: provided.innerRef
+      }), /*#__PURE__*/_react["default"].createElement(SelectableItem, _extends({
+        index: i,
+        onDeselect: handleDeselect,
+        onSelect: handleSelect,
+        renderItem: renderItem,
+        selected: selectedItems.includes(itemProps === null || itemProps === void 0 ? void 0 : itemProps.id)
+      }, itemProps)));
+    }) : /*#__PURE__*/_react["default"].createElement(ListItemWrapper, {
+      "data-testid": "list-item-wrapper",
+      key: itemProps === null || itemProps === void 0 ? void 0 : itemProps.id
+    }, /*#__PURE__*/_react["default"].createElement(SelectableItem, _extends({
+      index: i,
+      onDeselect: handleDeselect,
+      onSelect: handleSelect,
+      renderItem: renderItem,
+      selected: selectedItems.includes(itemProps === null || itemProps === void 0 ? void 0 : itemProps.id)
+    }, itemProps)));
+  } : function (itemProps, i) {
+    return draggable ? /*#__PURE__*/_react["default"].createElement(ListItemWrapper, {
+      "data-testid": "list-item-wrapper"
+    }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
+      draggableId: "draggable-".concat(i),
+      index: i
+    }, function (provided) {
+      return /*#__PURE__*/_react["default"].createElement("div", _extends({}, provided.draggableProps, provided.dragHandleProps, {
+        ref: provided.innerRef
+      }), renderItem(itemProps, i));
+    })) : /*#__PURE__*/_react["default"].createElement(ListItemWrapper, {
+      "data-testid": "list-item-wrapper"
+    }, renderItem(itemProps, i));
+  };
+  var paginationObj = _objectSpread({
+    current: 1,
+    pageSize: 10
+  }, pagination);
+  var _useState3 = (0, _react.useState)(paginationObj.current),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paginationCurrent = _useState4[0],
+    setPaginationCurrent = _useState4[1];
+  var _useState5 = (0, _react.useState)(paginationObj.pageSize),
+    _useState6 = _slicedToArray(_useState5, 2),
+    paginationSize = _useState6[0],
+    setPaginationSize = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setPaginationCurrent(paginationObj.current);
+    setPaginationSize(paginationObj.pageSize);
+  }, [pagination]);
+  var triggerPaginationEvent = function triggerPaginationEvent(eventName) {
+    return function (page, pageSize) {
+      setPaginationCurrent(page);
+      setPaginationSize(pageSize);
+      if (pagination && pagination[eventName]) {
+        pagination[eventName](page, pageSize);
+      }
+    };
+  };
+  var onPaginationChange = triggerPaginationEvent('onChange');
+  var onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
+  var passedPagination = _objectSpread(_objectSpread({}, paginationObj), {}, {
+    current: paginationCurrent,
+    pageSize: paginationSize,
+    onShowSizeChange: onPaginationShowSizeChange
+  });
+  var splitDataSource = _toConsumableArray(dataSource);
+
+  // `totalCount` prop exists only to display the count at the top of the list,
+  // but since we have the value, might as well pass it to the pagination config.
+  // If the pagination config has a `total` key, then use that.
+  // if neither `total` key nor totalCount are present but pagination object still exist, use dataSource.length as total
+  if (passedPagination && !passedPagination.total) {
+    if (totalCount) {
+      passedPagination.total = totalCount;
+    } else {
+      passedPagination.total = splitDataSource.length;
+    }
+  }
+  if (pagination) {
+    if (splitDataSource.length > (passedPagination.current - 1) * passedPagination.pageSize) {
+      splitDataSource = _toConsumableArray(dataSource).splice((passedPagination.current - 1) * passedPagination.pageSize, passedPagination.pageSize);
+    }
+  }
+  var largestPage = Math.ceil(passedPagination.total / passedPagination.pageSize);
+  if (passedPagination.current > largestPage) {
+    passedPagination.current = largestPage;
+  }
+  var showInternalHeaderRow = showSort || showTotalCount;
+  var defaultSortOption = sortOptions && sortOptions.find(function (o) {
+    return o.isDefault;
+  });
+
+  // remove `isDefault` prop from sortOptions bcs it's unrecognized when spread onto an html <option>
+  var sanitizedSortOptions = sortOptions.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return {
+      label: label,
+      value: value
+    };
+  });
+  var mergedLocale = _objectSpread({
+    emptyText: !loading ? /*#__PURE__*/_react["default"].createElement(_Empty["default"], {
+      description: "No Data",
+      image: _Empty["default"].PRESENTED_IMAGE_SIMPLE,
+      role: "status"
+    }) : /*#__PURE__*/_react["default"].createElement("div", {
+      role: "status"
+    }, "Loading")
+  }, locale);
+  var ListToRender = draggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd
+  }, /*#__PURE__*/_react["default"].createElement(DroppableWrapper, null, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
+    droppableId: "dropable-list"
+  }, function (provided) {
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, provided.droppableProps, {
+      ref: provided.innerRef
+    }), /*#__PURE__*/_react["default"].createElement(_antd.List, _extends({
+      dataSource: splitDataSource,
+      loading: loading ? {
+        spinning: true,
+        indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
+      } : {
+        spinning: false,
+        indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
+      },
+      locale: mergedLocale,
+      renderItem: listItemToRender
+    }, rest, {
+      pagination: false
+    })), provided.placeholder);
+  }))) : /*#__PURE__*/_react["default"].createElement(StyledList, _extends({
+    dataSource: splitDataSource,
+    loading: loading ? {
+      spinning: true,
+      indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
+    } : {
+      spinning: false,
+      indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
+    },
+    locale: mergedLocale,
+    renderItem: listItemToRender
+  }, rest));
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
+    className: className
+  }, showSearch && /*#__PURE__*/_react["default"].createElement(SearchWrapper, null, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+    "aria-label": "Enter text to search in list",
+    loading: searchLoading,
+    onSearch: onSearch,
+    placeholder: searchPlaceholder
+  })), showInternalHeaderRow && /*#__PURE__*/_react["default"].createElement(InternalHeader, null, showTotalCount && /*#__PURE__*/_react["default"].createElement(TotalCount, null, /*#__PURE__*/_react["default"].createElement("span", null, totalCount, " results")), showSort && /*#__PURE__*/_react["default"].createElement(SortWrapper, null, /*#__PURE__*/_react["default"].createElement("label", null, "Sort by", /*#__PURE__*/_react["default"].createElement(Select, {
+    "data-testid": "sort-select",
+    defaultValue: defaultSortOption && defaultSortOption.value,
+    id: "sortBy",
+    onChange: onSortOptionChange,
+    options: sanitizedSortOptions
+  })))), ListToRender, (footerContent || showPagination) && /*#__PURE__*/_react["default"].createElement(FooterWrapper, null, footerContent || /*#__PURE__*/_react["default"].createElement("div", null), showPagination && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
+    onChange: onPaginationChange,
+    pagination: passedPagination
+  })));
+};
+List.propTypes = {
+  footerContent: _propTypes["default"].element,
+  itemSelection: _propTypes["default"].shape({
+    onChange: _propTypes["default"].func.isRequired
+  }),
+  loading: _propTypes["default"].bool,
+  onSearch: _propTypes["default"].func,
+  onSortOptionChange: _propTypes["default"].func,
+  searchLoading: _propTypes["default"].bool,
+  searchPlaceholder: _propTypes["default"].string,
+  showPagination: _propTypes["default"].bool,
+  showSearch: _propTypes["default"].bool,
+  showSort: _propTypes["default"].bool,
+  showTotalCount: _propTypes["default"].bool,
+  sortOptions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].string.isRequired,
+    value: _propTypes["default"].string.isRequired,
+    isDefault: _propTypes["default"].bool
+  })),
+  totalCount: _propTypes["default"].number,
+  onDragEnd: _propTypes["default"].func,
+  draggable: _propTypes["default"].bool,
+  selectedItems: _propTypes["default"].arrayOf(_propTypes["default"].string)
+};
+List.defaultProps = {
+  footerContent: null,
+  itemSelection: null,
+  loading: false,
+  onSearch: null,
+  onSortOptionChange: null,
+  searchLoading: false,
+  showPagination: true,
+  searchPlaceholder: null,
+  showSearch: false,
+  showSort: false,
+  showTotalCount: false,
+  sortOptions: [],
+  totalCount: null,
+  onDragEnd: function onDragEnd() {},
+  draggable: false,
+  selectedItems: []
+};
+List.Item = _antd.List.Item;
+var _default = exports["default"] = List;

package/dist/ui/common/Modal.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _toolkit = require("../../toolkit");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var ModalFooter = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  text-align: right;\n\n  > button:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"])), (0, _toolkit.grid)(3), (0, _toolkit.grid)(2));
+var ModalHeader = _styledComponents["default"].h2(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: unset;\n  margin: 0;\n"])));
+_antd.Modal.header = ModalHeader;
+_antd.Modal.footer = ModalFooter;
+var _default = exports["default"] = _antd.Modal;

package/dist/ui/common/Note.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _toolkit = require("../../toolkit");
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 3px;\n  font-size: ", ";\n  padding: ", ";\n  text-align: justify;\n"])), (0, _toolkit.th)('colorSecondary'), (0, _toolkit.th)('fontSizeBaseSmall'), (0, _toolkit.grid)(2));
+var Note = function Note(props) {
+  var className = props.className,
+    children = props.children;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
+    className: className
+  }, children);
+};
+Note.propTypes = {};
+Note.defaultProps = {};
+var _default = exports["default"] = Note;

package/dist/ui/common/Page.js

@@ -0,0 +1,33 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n\n  ", "\n"])), function (props) {
+  return props.maxWidth && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      justify-content: center;\n\n      > div {\n        max-width: ", "px;\n      }\n    "])), props.maxWidth);
+});
+var Page = function Page(props) {
+  var className = props.className,
+    children = props.children,
+    maxWidth = props.maxWidth;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
+    className: className,
+    maxWidth: maxWidth
+  }, children);
+};
+Page.propTypes = {
+  maxWidth: _propTypes["default"].number
+};
+Page.defaultProps = {
+  maxWidth: null
+};
+var _default = exports["default"] = Page;

package/dist/ui/common/Pagination.js

@@ -0,0 +1,126 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _toolkit = require("../../toolkit");
+var _excluded = ["pagination", "onChange", "onShowSizeChange"];
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var PaginationNav = _styledComponents["default"].nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-pagination li {\n    &:focus-within {\n      outline: 4px solid #71ada9;\n      outline-offset: 1px;\n      transition: outline-offset 0s, outline 0s;\n    }\n  }\n\n  .ant-pagination-prev,\n  .ant-pagination-next {\n    > * {\n      color: ", ";\n      display: block;\n      height: 100%;\n      padding: 0 ", ";\n      width: 100%;\n\n      /* stylelint-disable-next-line string-quotes */\n      &[aria-disabled='true'] {\n        color: ", ";\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        background-color: gainsboro;\n        transition: all 0.2s;\n      }\n    }\n  }\n"])), (0, _toolkit.th)('colorText'), (0, _toolkit.grid)(1), function (props) {
+  return "".concat(props.theme.colorText, "77");
+});
+var Pagination = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  var pagination = props.pagination,
+    onChange = props.onChange,
+    onShowSizeChange = props.onShowSizeChange,
+    rest = _objectWithoutProperties(props, _excluded);
+  var current = pagination.current,
+    pageSize = pagination.pageSize,
+    total = pagination.total;
+  var paginationRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(forwardRef, function () {
+    return paginationRef.current;
+  });
+  (0, _react.useEffect)(function () {
+    // enhance accessibility of pagination, only if no custom render method was provided
+    if (pagination && !pagination.itemRender) {
+      paginationRef.current.querySelectorAll('li.ant-pagination-item').forEach(function (page, index) {
+        var counter = index + 1;
+        var label = "Go to page ".concat(counter);
+        if (page.classList.contains('ant-pagination-item-active')) {
+          page.querySelector(':scope > *').setAttribute('aria-current', 'page');
+          label = "Page ".concat(counter, " , Current Page");
+        } else {
+          page.querySelector(':scope > *').removeAttribute('aria-current');
+        }
+        page.querySelector(':scope > *').setAttribute('aria-label', label);
+      });
+      paginationRef.current.querySelectorAll('.ant-pagination li:not([class*="custom-icon"])').forEach(function (item) {
+        item.removeAttribute('tabindex');
+        if (item.getAttribute('aria-disabled') === 'true') {
+          item.querySelector(':scope > *').removeAttribute('disabled');
+          item.querySelector(':scope > *').setAttribute('aria-disabled', 'true');
+        } else {
+          item.querySelector(':scope > *').removeAttribute('aria-disabled');
+        }
+      });
+    }
+  }, [current, pageSize, total]);
+  var paginationLinkClick = function paginationLinkClick(e) {
+    e.preventDefault();
+  };
+  var paginationKeyDown = function paginationKeyDown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      e.currentTarget.parentNode.click();
+    }
+  };
+  var itemRender = pagination.itemRender || function (page, type, originalElement) {
+    if (type === 'jump-next' || type === 'jump-prev') {
+      return originalElement;
+    }
+    if (type === 'prev') {
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        href: "/previous/page",
+        onClick: paginationLinkClick,
+        onKeyDown: paginationKeyDown
+      }, "Previous");
+    }
+    if (type === 'next') {
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        href: "/next/page",
+        onClick: paginationLinkClick,
+        onKeyDown: paginationKeyDown
+      }, "Next");
+    }
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      href: "/page/".concat(page),
+      onClick: paginationLinkClick,
+      onKeyDown: paginationKeyDown
+    }, page);
+  };
+  return /*#__PURE__*/_react["default"].createElement(PaginationNav, _extends({
+    "aria-label": "Pagination",
+    ref: paginationRef,
+    role: "navigation"
+  }, rest), /*#__PURE__*/_react["default"].createElement(_antd.Pagination, _extends({}, pagination, {
+    itemRender: itemRender,
+    onChange: onChange,
+    onShowSizeChange: onShowSizeChange
+  })));
+});
+Pagination.propTypes = {
+  pagination: _propTypes["default"].shape({
+    current: _propTypes["default"].number,
+    total: _propTypes["default"].number,
+    pageSize: _propTypes["default"].number,
+    itemRender: _propTypes["default"].func,
+    showSizeChanger: _propTypes["default"].bool
+  }),
+  onChange: _propTypes["default"].func,
+  onShowSizeChange: _propTypes["default"].func
+};
+Pagination.defaultProps = {
+  pagination: {
+    current: 1,
+    pageSize: 10,
+    itemRender: null,
+    showSizeChanger: false
+  },
+  onChange: function onChange() {},
+  onShowSizeChange: function onShowSizeChange() {}
+};
+var _default = exports["default"] = Pagination;