@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Toast/components/ToastWrapper/ToastWrapper.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _velocityReact = require("velocity-react");
+
+var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
+
+var _Toast = _interopRequireDefault(require("../../Toast"));
+
+var defaultTimeout = 3000;
+
+var ToastWrapper =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(ToastWrapper, _Component);
+
+  function ToastWrapper() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ToastWrapper);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(ToastWrapper)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      toasts: [],
+      timeouts: {}
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "timeouts", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveClick", function (id) {
+      var timeouts = _this.state.timeouts;
+      var handleRemove = _this.props.handleRemove;
+
+      if (timeouts[id]) {
+        clearTimeout(timeouts[id]);
+      }
+
+      handleRemove(id);
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ToastWrapper, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var toasts = this.state.toasts;
+      return _react["default"].createElement("div", {
+        className: "toasts-wrapper"
+      }, _react["default"].createElement(_velocityReact.VelocityTransitionGroup, {
+        enter: {
+          animation: {
+            opacity: 1,
+            translateX: 0
+          },
+          duration: 300
+        },
+        leave: {
+          animation: {
+            opacity: 0,
+            translateX: '-4px'
+          },
+          duration: 0
+        }
+      }, toasts.map(function (toast) {
+        return _react["default"].createElement("div", {
+          key: toast.id,
+          className: "toast-wrapper"
+        }, _react["default"].createElement(_Toast["default"], (0, _extends2["default"])({
+          onRemove: function onRemove() {
+            return _this2.onRemoveClick(toast.id);
+          }
+        }, toast)));
+      })));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var uniqToasts = (0, _uniqBy["default"])(props.toasts, 'id');
+      var timeouts = (0, _objectSpread2["default"])({}, state.timeouts);
+      uniqToasts.forEach(function (toast) {
+        if (toast.timeout !== 'never') {
+          timeouts[toast.id] = setTimeout(function () {
+            props.handleRemove(toast.id);
+          }, typeof toast.timeout === 'number' ? toast.timeout : defaultTimeout);
+        }
+      });
+      return {
+        toasts: uniqToasts,
+        timeouts: timeouts
+      };
+    }
+  }]);
+  return ToastWrapper;
+}(_react.Component);
+
+exports["default"] = ToastWrapper;
+//# sourceMappingURL=ToastWrapper.js.map

package/lib/components/Toast/components/ToastWrapper/ToastWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Toast/components/ToastWrapper/ToastWrapper.tsx"],"names":["defaultTimeout","ToastWrapper","toasts","timeouts","id","state","handleRemove","props","clearTimeout","animation","opacity","translateX","duration","map","toast","onRemoveClick","uniqToasts","forEach","timeout","setTimeout","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAgBA,IAAMA,cAAc,GAAG,IAAvB;;IAEqBC,Y;;;;;;;;;;;;;;;;;8FAIe;AAClCC,MAAAA,MAAM,EAAE,EAD0B;AAElCC,MAAAA,QAAQ,EAAE;AAFwB,K;iGAKjB,E;sGAqBK,UAACC,EAAD,EAAyB;AAAA,UACvCD,QADuC,GAC1B,MAAKE,KADqB,CACvCF,QADuC;AAAA,UAEvCG,YAFuC,GAEtB,MAAKC,KAFiB,CAEvCD,YAFuC;;AAG/C,UAAIH,QAAQ,CAACC,EAAD,CAAZ,EAAkB;AACjBI,QAAAA,YAAY,CAACL,QAAQ,CAACC,EAAD,CAAT,CAAZ;AACA;;AACDE,MAAAA,YAAY,CAACF,EAAD,CAAZ;AACA,K;;;;;;6BAEmC;AAAA;;AAAA,UAC3BF,MAD2B,GAChB,KAAKG,KADW,CAC3BH,MAD2B;AAGnC,aACC;AAAK,QAAA,SAAS,EAAC;AAAf,SACC,gCAAC,sCAAD;AACC,QAAA,KAAK,EAAE;AACNO,UAAAA,SAAS,EAAE;AACVC,YAAAA,OAAO,EAAE,CADC;AAEVC,YAAAA,UAAU,EAAE;AAFF,WADL;AAKNC,UAAAA,QAAQ,EAAE;AALJ,SADR;AAQC,QAAA,KAAK,EAAE;AACNH,UAAAA,SAAS,EAAE;AACVC,YAAAA,OAAO,EAAE,CADC;AAEVC,YAAAA,UAAU,EAAE;AAFF,WADL;AAKNC,UAAAA,QAAQ,EAAE;AALJ;AARR,SAgBEV,MAAM,CAACW,GAAP,CAAW,UAAAC,KAAK;AAAA,eAChB;AAAK,UAAA,GAAG,EAAEA,KAAK,CAACV,EAAhB;AAAoB,UAAA,SAAS,EAAC;AAA9B,WACC,gCAAC,iBAAD;AAAO,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACW,aAAL,CAAmBD,KAAK,CAACV,EAAzB,CAAN;AAAA;AAAjB,WAAyDU,KAAzD,EADD,CADgB;AAAA,OAAhB,CAhBF,CADD,CADD;AA0BA;;;6CAxDAP,K,EACAF,K,EAC6C;AAC7C,UAAMW,UAAU,GAAG,wBAAOT,KAAK,CAACL,MAAb,EAAqB,IAArB,CAAnB;AACA,UAAMC,QAAQ,sCAAQE,KAAK,CAACF,QAAd,CAAd;AACAa,MAAAA,UAAU,CAACC,OAAX,CAAmB,UAAAH,KAAK,EAAI;AAC3B,YAAIA,KAAK,CAACI,OAAN,KAAkB,OAAtB,EAA+B;AAC9Bf,UAAAA,QAAQ,CAACW,KAAK,CAACV,EAAP,CAAR,GAAqBe,UAAU,CAC9B,YAAM;AACLZ,YAAAA,KAAK,CAACD,YAAN,CAAmBQ,KAAK,CAACV,EAAzB;AACA,WAH6B,EAI9B,OAAOU,KAAK,CAACI,OAAb,KAAyB,QAAzB,GAAoCJ,KAAK,CAACI,OAA1C,GAAoDlB,cAJtB,CAA/B;AAMA;AACD,OATD;AAUA,aAAO;AAAEE,QAAAA,MAAM,EAAEc,UAAV;AAAsBb,QAAAA,QAAQ,EAARA;AAAtB,OAAP;AACA;;;EA5BwCiB,gB","sourcesContent":["import React, { Component } from 'react'\nimport { VelocityTransitionGroup } from 'velocity-react'\nimport uniqBy from 'lodash/uniqBy'\nimport Toast from '../../Toast'\nimport { IToastProps } from '../../Toast'\n\nexport interface IToastWrapperProps {\n\t/** The toasts */\n\ttoasts: IToastProps[]\n\n\t/** Handle toast removal */\n\thandleRemove: Function\n}\n\ninterface IToastWrapperState {\n\ttoasts: IToastProps[]\n\ttimeouts: any\n}\n\nconst defaultTimeout = 3000\n\nexport default class ToastWrapper extends Component<\n\tIToastWrapperProps,\n\tIToastWrapperState\n> {\n\tpublic state: IToastWrapperState = {\n\t\ttoasts: [],\n\t\ttimeouts: {}\n\t}\n\n\tpublic timeouts = {}\n\n\tpublic static getDerivedStateFromProps(\n\t\tprops: IToastWrapperProps,\n\t\tstate: IToastWrapperState\n\t): { toasts: IToastProps[]; timeouts: any[] } {\n\t\tconst uniqToasts = uniqBy(props.toasts, 'id')\n\t\tconst timeouts = { ...state.timeouts }\n\t\tuniqToasts.forEach(toast => {\n\t\t\tif (toast.timeout !== 'never') {\n\t\t\t\ttimeouts[toast.id] = setTimeout(\n\t\t\t\t\t() => {\n\t\t\t\t\t\tprops.handleRemove(toast.id)\n\t\t\t\t\t},\n\t\t\t\t\ttypeof toast.timeout === 'number' ? toast.timeout : defaultTimeout\n\t\t\t\t)\n\t\t\t}\n\t\t})\n\t\treturn { toasts: uniqToasts, timeouts }\n\t}\n\n\tpublic onRemoveClick = (id: string | number) => {\n\t\tconst { timeouts } = this.state\n\t\tconst { handleRemove } = this.props\n\t\tif (timeouts[id]) {\n\t\t\tclearTimeout(timeouts[id])\n\t\t}\n\t\thandleRemove(id)\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst { toasts } = this.state\n\n\t\treturn (\n\t\t\t<div className=\"toasts-wrapper\">\n\t\t\t\t<VelocityTransitionGroup\n\t\t\t\t\tenter={{\n\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttranslateX: 0\n\t\t\t\t\t\t},\n\t\t\t\t\t\tduration: 300\n\t\t\t\t\t}}\n\t\t\t\t\tleave={{\n\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttranslateX: '-4px'\n\t\t\t\t\t\t},\n\t\t\t\t\t\tduration: 0\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{toasts.map(toast => (\n\t\t\t\t\t\t<div key={toast.id} className=\"toast-wrapper\">\n\t\t\t\t\t\t\t<Toast onRemove={() => this.onRemoveClick(toast.id)} {...toast} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</VelocityTransitionGroup>\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"file":"ToastWrapper.js"}

package/lib/components/TruncatedList/TruncatedList-story.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _tableData = require("../../../.storybook/data/tableData");
+
+var _lodash = require("lodash");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _people = require("../../../.storybook/data/people");
+
+var _Card = _interopRequireWildcard(require("../Card"));
+
+var _TruncatedList = _interopRequireDefault(require("./TruncatedList"));
+
+var stories = (0, _react2.storiesOf)('TruncatedList', module); // stories.addDecorator(
+// 	withKnobsOptions({
+// 		escapeHTML: false
+// 	})
+// )
+
+stories.addDecorator(_react3.withKnobs);
+
+var TruncatedListExample =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TruncatedListExample, _Component);
+
+  function TruncatedListExample(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TruncatedListExample);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TruncatedListExample).call(this, props));
+    var selectedIds = props.recordSelectionListItems.map(function (loc) {
+      return loc.id;
+    });
+
+    if (props.canSelect === 'one') {
+      selectedIds = (0, _lodash.sampleSize)(selectedIds, 1);
+    } else {
+      selectedIds = (0, _lodash.sampleSize)(selectedIds, Math.floor(selectedIds.length / 2));
+    }
+
+    var unselectedIds = props.recordSelectionListItems.map(function (loc) {
+      return loc.id;
+    }).filter(function (locationId) {
+      return selectedIds.indexOf(locationId) === -1;
+    });
+    var unselectableIds = props.canSelect ? (0, _lodash.sampleSize)(unselectedIds, unselectedIds.length / 2) : [];
+    _this.state = {
+      selectedIds: selectedIds,
+      loadedRecordSelectionListItems: (0, _lodash.cloneDeep)(props.recordSelectionListItems),
+      unselectableIds: unselectableIds
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TruncatedListExample, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          header = _this$props.header,
+          canSelect = _this$props.canSelect,
+          canRemove = _this$props.canRemove,
+          noItemsText = _this$props.noItemsText,
+          truncatedActionItemType = _this$props.truncatedActionItemType;
+      var _this$state = this.state,
+          selectedIds = _this$state.selectedIds,
+          loadedRecordSelectionListItems = _this$state.loadedRecordSelectionListItems,
+          unselectableIds = _this$state.unselectableIds;
+      return _react["default"].createElement(_TruncatedList["default"], {
+        header: header,
+        noItemsText: noItemsText,
+        selectedIds: selectedIds,
+        unselectableIds: unselectableIds,
+        recordSelectionListItems: loadedRecordSelectionListItems.slice(0, 5),
+        isTruncated: loadedRecordSelectionListItems.length > 5,
+        canSelect: canSelect,
+        canRemove: canRemove,
+        onSelect: function onSelect(id) {
+          // Typically you'd want "many" or "one", so you'd only need one side
+          // of this conditional.
+          if (canSelect === 'many') {
+            if (selectedIds.indexOf(id) >= 0) {
+              _this2.setState({
+                selectedIds: selectedIds.filter(function (selectedId) {
+                  return selectedId !== id;
+                })
+              });
+            } else {
+              _this2.setState({
+                selectedIds: [].concat((0, _toConsumableArray2["default"])(selectedIds), [id])
+              });
+            }
+          } else if (canSelect === 'one') {
+            _this2.setState({
+              selectedIds: [id]
+            });
+          }
+        },
+        onRemove: function onRemove(id) {
+          // The component maintains state of the records it has loaded, but
+          // it's up to you to remove them from your list in your local state.
+          // Also, if for some reason you want to have selection alongside deletion,
+          // you should be sure to clear out the selection at the same time.
+          _this2.setState({
+            selectedIds: selectedIds.filter(function (selectedId) {
+              return selectedId !== id;
+            }),
+            loadedRecordSelectionListItems: loadedRecordSelectionListItems.filter(function (locationItem) {
+              return locationItem.id !== id;
+            })
+          });
+        },
+        truncatedActionText: "See all".concat(truncatedActionItemType ? " ".concat(loadedRecordSelectionListItems.length, " ").concat(truncatedActionItemType) : ''),
+        onClickTruncatedAction: function onClickTruncatedAction() {
+          return console.log('Clicked truncated list action!');
+        }
+      });
+    }
+  }]);
+  return TruncatedListExample;
+}(_react.Component);
+
+stories.add('Truncated List - Single', function () {
+  return _react["default"].createElement("div", {
+    style: {
+      width: '320px',
+      padding: '8px'
+    }
+  }, _react["default"].createElement(_Card["default"], {
+    isSmall: true
+  }, _react["default"].createElement(_Card.CardHeader, {
+    title: "Locations",
+    actions: (0, _react3.object)('actions', [{
+      text: 'Add a location',
+      kind: 'simple'
+    }])
+  }), _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(TruncatedListExample, {
+    noItemsText: (0, _react3.text)('noItemsText', 'No locations selected'),
+    truncatedActionItemType: 'locations',
+    canSelect: (0, _react3.select)('Can Select', [null, 'many', 'one'], null),
+    canRemove: (0, _react3["boolean"])('Can Remove', true),
+    recordSelectionListItems: (0, _lodash.map)((0, _tableData.generateLocations)({
+      amount: 10
+    }), function (location) {
+      return {
+        id: location.id,
+        title: location.publicName,
+        subtitle: location.address
+      };
+    })
+  }))));
+}).add('Truncated List - Multiple', function () {
+  return _react["default"].createElement("div", {
+    style: {
+      width: '320px',
+      padding: '8px'
+    }
+  }, _react["default"].createElement(_Card["default"], {
+    isSmall: true
+  }, _react["default"].createElement(_Card.CardHeader, {
+    title: "Manager Access",
+    actions: (0, _react3.object)('actions', [{
+      text: 'Add managers',
+      kind: 'simple'
+    }])
+  }), _react["default"].createElement(_Card.CardBody, {
+    isSectioned: false,
+    areSectionSeparatorsVisible: true
+  }, _react["default"].createElement(_Card.CardSection, null, _react["default"].createElement(TruncatedListExample, {
+    header: (0, _react3.text)('header', 'Managers'),
+    noItemsText: (0, _react3.text)('noItemsText', 'No managers selected'),
+    truncatedActionItemType: 'managers',
+    canSelect: (0, _react3.select)('Can Select', [null, 'many', 'one'], null),
+    canRemove: (0, _react3["boolean"])('Can Remove', true),
+    recordSelectionListItems: (0, _lodash.map)([].concat((0, _toConsumableArray2["default"])(_people.userList), (0, _toConsumableArray2["default"])(_people.userList02)), function (user) {
+      return {
+        id: user.id,
+        avatar: user.avatar,
+        title: user.title,
+        subtitle: 'Manager'
+      };
+    })
+  })), _react["default"].createElement(_Card.CardSection, null, _react["default"].createElement(TruncatedListExample, {
+    header: (0, _react3.text)('header', 'Group Managers'),
+    noItemsText: (0, _react3.text)('noItemsText', 'No managers selected'),
+    truncatedActionItemType: 'group managers',
+    canSelect: (0, _react3.select)('Can Select', [null, 'many', 'one'], null),
+    canRemove: (0, _react3["boolean"])('Can Remove', true),
+    recordSelectionListItems: (0, _lodash.map)([].concat((0, _toConsumableArray2["default"])(_people.userList), (0, _toConsumableArray2["default"])(_people.userList02)), function (user) {
+      return {
+        id: user.id,
+        avatar: user.avatar,
+        title: user.title,
+        subtitle: 'Group Manager'
+      };
+    })
+  })))));
+});
+//# sourceMappingURL=TruncatedList-story.js.map

package/lib/components/TruncatedList/TruncatedList-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TruncatedList/TruncatedList-story.js"],"names":["stories","module","addDecorator","withKnobs","TruncatedListExample","props","selectedIds","recordSelectionListItems","map","loc","id","canSelect","Math","floor","length","unselectedIds","filter","locationId","indexOf","unselectableIds","state","loadedRecordSelectionListItems","header","canRemove","noItemsText","truncatedActionItemType","slice","setState","selectedId","locationItem","console","log","Component","add","width","padding","text","kind","amount","location","title","publicName","subtitle","address","userList","userList02","user","avatar"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { generateLocations } from '../../../.storybook/data/tableData'\nimport { map, sampleSize, cloneDeep } from 'lodash'\nimport {\n\twithKnobs,\n\t// withKnobsOptions,\n\ttext,\n\tboolean,\n\tobject,\n\tselect\n} from '@storybook/addon-knobs/react'\nimport { userList, userList02 } from '../../../.storybook/data/people'\n\nimport Card, { CardHeader, CardBody, CardSection } from '../Card'\nimport TruncatedList from './TruncatedList'\n\nconst stories = storiesOf('TruncatedList', module)\n\n// stories.addDecorator(\n// \twithKnobsOptions({\n// \t\tescapeHTML: false\n// \t})\n// )\n\nstories.addDecorator(withKnobs)\n\ntype TruncatedListExampleProps = {\n\theader?: string,\n\tcanSelect?: 'many' | 'one',\n\tcanRemove: boolean,\n\trecordSelectionListItems: Array<Object>,\n\tmaxItemsVisible: number,\n\tnoItemsText?: string,\n\ttruncatedActionItemType?: string\n}\n\ntype TruncatedListExampleState = {\n\tselectedIds: Array<string>,\n\tunselectableIds: Array<string>,\n\tloadedRecordSelectionListItems: Array<Object>\n}\n\nclass TruncatedListExample extends Component<\n\tTruncatedListExampleProps,\n\tTruncatedListExampleState\n> {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t\tlet selectedIds = props.recordSelectionListItems.map(loc => loc.id)\n\n\t\tif (props.canSelect === 'one') {\n\t\t\tselectedIds = sampleSize(selectedIds, 1)\n\t\t} else {\n\t\t\tselectedIds = sampleSize(selectedIds, Math.floor(selectedIds.length / 2))\n\t\t}\n\n\t\tconst unselectedIds = props.recordSelectionListItems\n\t\t\t.map(loc => loc.id)\n\t\t\t.filter(locationId => selectedIds.indexOf(locationId) === -1)\n\n\t\tconst unselectableIds = props.canSelect\n\t\t\t? sampleSize(unselectedIds, unselectedIds.length / 2)\n\t\t\t: []\n\n\t\tthis.state = {\n\t\t\tselectedIds,\n\t\t\tloadedRecordSelectionListItems: cloneDeep(props.recordSelectionListItems),\n\t\t\tunselectableIds\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\theader,\n\t\t\tcanSelect,\n\t\t\tcanRemove,\n\t\t\tnoItemsText,\n\t\t\ttruncatedActionItemType\n\t\t} = this.props\n\t\tconst {\n\t\t\tselectedIds,\n\t\t\tloadedRecordSelectionListItems,\n\t\t\tunselectableIds\n\t\t} = this.state\n\n\t\treturn (\n\t\t\t<TruncatedList\n\t\t\t\theader={header}\n\t\t\t\tnoItemsText={noItemsText}\n\t\t\t\tselectedIds={selectedIds}\n\t\t\t\tunselectableIds={unselectableIds}\n\t\t\t\trecordSelectionListItems={loadedRecordSelectionListItems.slice(0, 5)}\n\t\t\t\tisTruncated={loadedRecordSelectionListItems.length > 5}\n\t\t\t\tcanSelect={canSelect}\n\t\t\t\tcanRemove={canRemove}\n\t\t\t\tonSelect={id => {\n\t\t\t\t\t// Typically you'd want \"many\" or \"one\", so you'd only need one side\n\t\t\t\t\t// of this conditional.\n\t\t\t\t\tif (canSelect === 'many') {\n\t\t\t\t\t\tif (selectedIds.indexOf(id) >= 0) {\n\t\t\t\t\t\t\tthis.setState({\n\t\t\t\t\t\t\t\tselectedIds: selectedIds.filter(selectedId => selectedId !== id)\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.setState({ selectedIds: [...selectedIds, id] })\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (canSelect === 'one') {\n\t\t\t\t\t\tthis.setState({ selectedIds: [id] })\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonRemove={id => {\n\t\t\t\t\t// The component maintains state of the records it has loaded, but\n\t\t\t\t\t// it's up to you to remove them from your list in your local state.\n\t\t\t\t\t// Also, if for some reason you want to have selection alongside deletion,\n\t\t\t\t\t// you should be sure to clear out the selection at the same time.\n\t\t\t\t\tthis.setState({\n\t\t\t\t\t\tselectedIds: selectedIds.filter(selectedId => selectedId !== id),\n\t\t\t\t\t\tloadedRecordSelectionListItems: loadedRecordSelectionListItems.filter(\n\t\t\t\t\t\t\tlocationItem => locationItem.id !== id\n\t\t\t\t\t\t)\n\t\t\t\t\t})\n\t\t\t\t}}\n\t\t\t\ttruncatedActionText={`See all${\n\t\t\t\t\ttruncatedActionItemType\n\t\t\t\t\t\t? ` ${\n\t\t\t\t\t\t\t\tloadedRecordSelectionListItems.length\n\t\t\t\t\t\t  } ${truncatedActionItemType}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}`}\n\t\t\t\tonClickTruncatedAction={() =>\n\t\t\t\t\tconsole.log('Clicked truncated list action!')\n\t\t\t\t}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nstories\n\t.add('Truncated List - Single', () => {\n\t\treturn (\n\t\t\t<div style={{ width: '320px', padding: '8px' }}>\n\t\t\t\t<Card isSmall>\n\t\t\t\t\t<CardHeader\n\t\t\t\t\t\ttitle=\"Locations\"\n\t\t\t\t\t\tactions={object('actions', [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttext: 'Add a location',\n\t\t\t\t\t\t\t\tkind: 'simple'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t])}\n\t\t\t\t\t/>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<TruncatedListExample\n\t\t\t\t\t\t\tnoItemsText={text('noItemsText', 'No locations selected')}\n\t\t\t\t\t\t\ttruncatedActionItemType={'locations'}\n\t\t\t\t\t\t\tcanSelect={select('Can Select', [null, 'many', 'one'], null)}\n\t\t\t\t\t\t\tcanRemove={boolean('Can Remove', true)}\n\t\t\t\t\t\t\trecordSelectionListItems={map(\n\t\t\t\t\t\t\t\tgenerateLocations({ amount: 10 }),\n\t\t\t\t\t\t\t\tlocation => ({\n\t\t\t\t\t\t\t\t\tid: location.id,\n\t\t\t\t\t\t\t\t\ttitle: location.publicName,\n\t\t\t\t\t\t\t\t\tsubtitle: location.address\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</div>\n\t\t)\n\t})\n\t.add('Truncated List - Multiple', () => {\n\t\treturn (\n\t\t\t<div style={{ width: '320px', padding: '8px' }}>\n\t\t\t\t<Card isSmall>\n\t\t\t\t\t<CardHeader\n\t\t\t\t\t\ttitle=\"Manager Access\"\n\t\t\t\t\t\tactions={object('actions', [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttext: 'Add managers',\n\t\t\t\t\t\t\t\tkind: 'simple'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t])}\n\t\t\t\t\t/>\n\t\t\t\t\t<CardBody isSectioned={false} areSectionSeparatorsVisible={true}>\n\t\t\t\t\t\t<CardSection>\n\t\t\t\t\t\t\t<TruncatedListExample\n\t\t\t\t\t\t\t\theader={text('header', 'Managers')}\n\t\t\t\t\t\t\t\tnoItemsText={text('noItemsText', 'No managers selected')}\n\t\t\t\t\t\t\t\ttruncatedActionItemType={'managers'}\n\t\t\t\t\t\t\t\tcanSelect={select('Can Select', [null, 'many', 'one'], null)}\n\t\t\t\t\t\t\t\tcanRemove={boolean('Can Remove', true)}\n\t\t\t\t\t\t\t\trecordSelectionListItems={map(\n\t\t\t\t\t\t\t\t\t[...userList, ...userList02],\n\t\t\t\t\t\t\t\t\tuser => ({\n\t\t\t\t\t\t\t\t\t\tid: user.id,\n\t\t\t\t\t\t\t\t\t\tavatar: user.avatar,\n\t\t\t\t\t\t\t\t\t\ttitle: user.title,\n\t\t\t\t\t\t\t\t\t\tsubtitle: 'Manager'\n\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CardSection>\n\t\t\t\t\t\t<CardSection>\n\t\t\t\t\t\t\t<TruncatedListExample\n\t\t\t\t\t\t\t\theader={text('header', 'Group Managers')}\n\t\t\t\t\t\t\t\tnoItemsText={text('noItemsText', 'No managers selected')}\n\t\t\t\t\t\t\t\ttruncatedActionItemType={'group managers'}\n\t\t\t\t\t\t\t\tcanSelect={select('Can Select', [null, 'many', 'one'], null)}\n\t\t\t\t\t\t\t\tcanRemove={boolean('Can Remove', true)}\n\t\t\t\t\t\t\t\trecordSelectionListItems={map(\n\t\t\t\t\t\t\t\t\t[...userList, ...userList02],\n\t\t\t\t\t\t\t\t\tuser => ({\n\t\t\t\t\t\t\t\t\t\tid: user.id,\n\t\t\t\t\t\t\t\t\t\tavatar: user.avatar,\n\t\t\t\t\t\t\t\t\t\ttitle: user.title,\n\t\t\t\t\t\t\t\t\t\tsubtitle: 'Group Manager'\n\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CardSection>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</div>\n\t\t)\n\t})\n"],"file":"TruncatedList-story.js"}

package/lib/components/TruncatedList/TruncatedList.d.ts

@@ -0,0 +1,49 @@
+import { Component, ReactElement } from 'react';
+import { IRecordSelectionListItemProps } from '../RecordSelectionList/RecordSelectionList';
+interface ITruncatedListProps {
+    /** Optional class name for the component */
+    className?: string;
+    /** Optional text header for the list */
+    header?: string;
+    /** When true, will display the truncated action button */
+    isTruncated: boolean;
+    /** Optional truncated action button text - defaults to 'See All' */
+    truncatedActionText?: string;
+    /** Method called when truncated action is clicked */
+    onClickTruncatedAction?: Function;
+    /** RecordSelectionListItems to be displayed in the list */
+    recordSelectionListItems: IRecordSelectionListItemProps[];
+    /** Optional selectedIds passed to RecordSelectionList */
+    selectedIds?: string[];
+    /** Optional unselectableIds passed to RecordSelectionList */
+    unselectableIds?: string[];
+    /** Can the user select many or one records in this list? */
+    canSelect?: 'many' | 'one';
+    /** Can the user remove records from this list? */
+    canRemove?: boolean;
+    /** Set to false to hide "# selected" text - defaults to true */
+    showSelectedCount?: boolean;
+    /** Callback for selection of a record */
+    onSelect?: (RecordId: string, Record: Record<string, any>) => void;
+    /** Callback for when user requests to remove a record from the list. */
+    onRemove?: Function;
+    /** Text displayed when the list is empty */
+    noItemsText?: string;
+}
+interface ITruncatedListState {
+    recordListItems: IRecordSelectionListItemProps[];
+}
+export default class TruncatedList extends Component<ITruncatedListProps, ITruncatedListState> {
+    static defaultProps: {
+        isTruncated: boolean;
+        canRemove: boolean;
+        recordSelectionListItems: never[];
+        noItemsText: string;
+    };
+    private recordSelectionListRef;
+    constructor(props: ITruncatedListProps);
+    reset: () => Promise<void>;
+    render(): ReactElement;
+}
+export {};
+//# sourceMappingURL=TruncatedList.d.ts.map

package/lib/components/TruncatedList/TruncatedList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedList.d.ts","sourceRoot":"","sources":["../../../src/components/TruncatedList/TruncatedList.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAY,YAAY,EAAE,MAAM,OAAO,CAAA;AAOhE,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAA;AAE1F,UAAU,mBAAmB;IAC5B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,0DAA0D;IAC1D,WAAW,EAAE,OAAO,CAAA;IAEpB,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAE5B,qDAAqD;IACrD,sBAAsB,CAAC,EAAE,QAAQ,CAAA;IAEjC,2DAA2D;IAC3D,wBAAwB,EAAE,6BAA6B,EAAE,CAAA;IAEzD,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IAEtB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAE1B,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAA;IAElE,wEAAwE;IACxE,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,mBAAmB;IAC5B,eAAe,EAAE,6BAA6B,EAAE,CAAA;CAChD;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,SAAS,CACnD,mBAAmB,EACnB,mBAAmB,CACnB;IACA,OAAc,YAAY;;;;;MAKzB;IAED,OAAO,CAAC,sBAAsB,CAAsC;gBAEjD,KAAK,EAAE,mBAAmB;IAMtC,KAAK,sBAIX;IAEM,MAAM,IAAI,YAAY;CA6D7B"}

package/lib/components/TruncatedList/TruncatedList.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireWildcard(require("../Button/Button"));
+
+var _EmptyState = _interopRequireDefault(require("../EmptyState/EmptyState"));
+
+var _RecordSelectionList = _interopRequireDefault(require("../RecordSelectionList/RecordSelectionList"));
+
+var TruncatedList =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TruncatedList, _Component);
+
+  function TruncatedList(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TruncatedList);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TruncatedList).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "reset",
+    /*#__PURE__*/
+    (0, _asyncToGenerator2["default"])(
+    /*#__PURE__*/
+    _regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (_this.recordSelectionListRef.current) {
+                _this.recordSelectionListRef.current.reset();
+              }
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    _this.recordSelectionListRef = _react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TruncatedList, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          className = _this$props.className,
+          header = _this$props.header,
+          isTruncated = _this$props.isTruncated,
+          truncatedActionText = _this$props.truncatedActionText,
+          onClickTruncatedAction = _this$props.onClickTruncatedAction,
+          recordSelectionListItems = _this$props.recordSelectionListItems,
+          selectedIds = _this$props.selectedIds,
+          unselectableIds = _this$props.unselectableIds,
+          canSelect = _this$props.canSelect,
+          canRemove = _this$props.canRemove,
+          showSelectedCount = _this$props.showSelectedCount,
+          onSelect = _this$props.onSelect,
+          onRemove = _this$props.onRemove,
+          noItemsText = _this$props.noItemsText;
+      var parentClass = (0, _classnames["default"])('truncated-list', className);
+      return _react["default"].createElement("div", {
+        className: parentClass
+      }, !recordSelectionListItems || recordSelectionListItems.length === 0 ? _react["default"].createElement(_EmptyState["default"], {
+        headline: "",
+        subheadline: noItemsText
+      }) : _react["default"].createElement(_react.Fragment, null, header && _react["default"].createElement("h3", {
+        className: "truncated-list__header"
+      }, header), _react["default"].createElement(_RecordSelectionList["default"], {
+        ref: this.recordSelectionListRef,
+        loadRecordListItems:
+        /*#__PURE__*/
+        (0, _asyncToGenerator2["default"])(
+        /*#__PURE__*/
+        _regenerator["default"].mark(function _callee2() {
+          return _regenerator["default"].wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  _context2.next = 2;
+                  return recordSelectionListItems;
+
+                case 2:
+                  return _context2.abrupt("return", _context2.sent);
+
+                case 3:
+                case "end":
+                  return _context2.stop();
+              }
+            }
+          }, _callee2);
+        })),
+        selectedIds: selectedIds,
+        unselectableIds: unselectableIds,
+        canSelect: canSelect,
+        canRemove: canRemove,
+        showSelectedCount: showSelectedCount,
+        onSelect: onSelect,
+        onRemove:
+        /*#__PURE__*/
+        function () {
+          var _ref3 = (0, _asyncToGenerator2["default"])(
+          /*#__PURE__*/
+          _regenerator["default"].mark(function _callee3(id) {
+            return _regenerator["default"].wrap(function _callee3$(_context3) {
+              while (1) {
+                switch (_context3.prev = _context3.next) {
+                  case 0:
+                    if (!onRemove) {
+                      _context3.next = 4;
+                      break;
+                    }
+
+                    _context3.next = 3;
+                    return onRemove(id);
+
+                  case 3:
+                    if (_this2.recordSelectionListRef.current) {
+                      _this2.recordSelectionListRef.current.reset();
+                    }
+
+                  case 4:
+                  case "end":
+                    return _context3.stop();
+                }
+              }
+            }, _callee3);
+          }));
+
+          return function (_x) {
+            return _ref3.apply(this, arguments);
+          };
+        }()
+      }), isTruncated ? _react["default"].createElement("div", {
+        className: "truncated-list__action-btn-wrapper"
+      }, _react["default"].createElement(_Button["default"], {
+        kind: _Button.ButtonKinds.Simple,
+        className: "truncated-list__action-btn",
+        isSmall: true,
+        text: truncatedActionText || 'See all',
+        onClick: onClickTruncatedAction
+      })) : null));
+    }
+  }]);
+  return TruncatedList;
+}(_react.Component);
+
+exports["default"] = TruncatedList;
+(0, _defineProperty2["default"])(TruncatedList, "defaultProps", {
+  isTruncated: false,
+  canRemove: false,
+  recordSelectionListItems: [],
+  noItemsText: 'Nothing to see here.'
+});
+//# sourceMappingURL=TruncatedList.js.map

package/lib/components/TruncatedList/TruncatedList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TruncatedList/TruncatedList.tsx"],"names":["TruncatedList","props","recordSelectionListRef","current","reset","React","createRef","className","header","isTruncated","truncatedActionText","onClickTruncatedAction","recordSelectionListItems","selectedIds","unselectableIds","canSelect","canRemove","showSelectedCount","onSelect","onRemove","noItemsText","parentClass","length","id","ButtonKinds","Simple","Component"],"mappings":"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","sourcesContent":["import React, { Component, Fragment, ReactElement } from 'react'\nimport cx from 'classnames'\n\nimport Button, { ButtonKinds } from '../Button/Button'\nimport EmptyState from '../EmptyState/EmptyState'\nimport RecordSelectionList from '../RecordSelectionList/RecordSelectionList'\n\nimport { IRecordSelectionListItemProps } from '../RecordSelectionList/RecordSelectionList'\n\ninterface ITruncatedListProps {\n\t/** Optional class name for the component */\n\tclassName?: string\n\n\t/** Optional text header for the list */\n\theader?: string\n\n\t/** When true, will display the truncated action button */\n\tisTruncated: boolean\n\n\t/** Optional truncated action button text - defaults to 'See All' */\n\ttruncatedActionText?: string\n\n\t/** Method called when truncated action is clicked */\n\tonClickTruncatedAction?: Function\n\n\t/** RecordSelectionListItems to be displayed in the list */\n\trecordSelectionListItems: IRecordSelectionListItemProps[]\n\n\t/** Optional selectedIds passed to RecordSelectionList */\n\tselectedIds?: string[]\n\n\t/** Optional unselectableIds passed to RecordSelectionList */\n\tunselectableIds?: string[]\n\n\t/** Can the user select many or one records in this list? */\n\tcanSelect?: 'many' | 'one'\n\n\t/** Can the user remove records from this list? */\n\tcanRemove?: boolean\n\n\t/** Set to false to hide \"# selected\" text - defaults to true */\n\tshowSelectedCount?: boolean\n\n\t/** Callback for selection of a record */\n\tonSelect?: (RecordId: string, Record: Record<string, any>) => void\n\n\t/** Callback for when user requests to remove a record from the list. */\n\tonRemove?: Function\n\n\t/** Text displayed when the list is empty */\n\tnoItemsText?: string\n}\n\ninterface ITruncatedListState {\n\trecordListItems: IRecordSelectionListItemProps[]\n}\n\nexport default class TruncatedList extends Component<\n\tITruncatedListProps,\n\tITruncatedListState\n> {\n\tpublic static defaultProps = {\n\t\tisTruncated: false,\n\t\tcanRemove: false,\n\t\trecordSelectionListItems: [],\n\t\tnoItemsText: 'Nothing to see here.'\n\t}\n\n\tprivate recordSelectionListRef: React.RefObject<RecordSelectionList>\n\n\tpublic constructor(props: ITruncatedListProps) {\n\t\tsuper(props)\n\n\t\tthis.recordSelectionListRef = React.createRef()\n\t}\n\n\tpublic reset = async (): Promise<void> => {\n\t\tif (this.recordSelectionListRef.current) {\n\t\t\tthis.recordSelectionListRef.current.reset()\n\t\t}\n\t}\n\n\tpublic render(): ReactElement {\n\t\tconst {\n\t\t\tclassName,\n\t\t\theader,\n\t\t\tisTruncated,\n\t\t\ttruncatedActionText,\n\t\t\tonClickTruncatedAction,\n\t\t\trecordSelectionListItems,\n\t\t\tselectedIds,\n\t\t\tunselectableIds,\n\t\t\tcanSelect,\n\t\t\tcanRemove,\n\t\t\tshowSelectedCount,\n\t\t\tonSelect,\n\t\t\tonRemove,\n\t\t\tnoItemsText\n\t\t} = this.props\n\t\tconst parentClass = cx('truncated-list', className)\n\t\treturn (\n\t\t\t<div className={parentClass}>\n\t\t\t\t{!recordSelectionListItems || recordSelectionListItems.length === 0 ? (\n\t\t\t\t\t<EmptyState headline=\"\" subheadline={noItemsText} />\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{header && <h3 className=\"truncated-list__header\">{header}</h3>}\n\t\t\t\t\t\t<RecordSelectionList\n\t\t\t\t\t\t\tref={this.recordSelectionListRef}\n\t\t\t\t\t\t\tloadRecordListItems={async () => {\n\t\t\t\t\t\t\t\treturn await recordSelectionListItems\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tselectedIds={selectedIds}\n\t\t\t\t\t\t\tunselectableIds={unselectableIds}\n\t\t\t\t\t\t\tcanSelect={canSelect}\n\t\t\t\t\t\t\tcanRemove={canRemove}\n\t\t\t\t\t\t\tshowSelectedCount={showSelectedCount}\n\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\tonRemove={async id => {\n\t\t\t\t\t\t\t\tif (onRemove) {\n\t\t\t\t\t\t\t\t\tawait onRemove(id)\n\t\t\t\t\t\t\t\t\tif (this.recordSelectionListRef.current) {\n\t\t\t\t\t\t\t\t\t\tthis.recordSelectionListRef.current.reset()\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{isTruncated ? (\n\t\t\t\t\t\t\t<div className=\"truncated-list__action-btn-wrapper\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkind={ButtonKinds.Simple}\n\t\t\t\t\t\t\t\t\tclassName=\"truncated-list__action-btn\"\n\t\t\t\t\t\t\t\t\tisSmall={true}\n\t\t\t\t\t\t\t\t\ttext={truncatedActionText || 'See all'}\n\t\t\t\t\t\t\t\t\tonClick={onClickTruncatedAction}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"file":"TruncatedList.js"}