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

package/lib/components/List/List.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ListWrapper = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ExpandableListItem = _interopRequireDefault(require("./components/ExpandableListItem/ExpandableListItem"));
+
+var _ListHeader = _interopRequireDefault(require("./components/ListHeader/ListHeader"));
+
+var _ListItem = _interopRequireDefault(require("./components/ListItem/ListItem"));
+
+var ListWrapper = function ListWrapper(props) {
+  return _react["default"].createElement("div", {
+    className: "list-wrapper"
+  }, props.children);
+};
+
+exports.ListWrapper = ListWrapper;
+
+var List = function List(props) {
+  var header = props.header,
+      items = props.items,
+      className = props.className,
+      isSmall = props.isSmall,
+      areSeparatorsVisibleProp = props.areSeparatorsVisible,
+      children = props.children,
+      selectableType = props.selectableType,
+      isLoading = props.isLoading,
+      onAction = props.onAction; // seperators a true by default
+
+  var areSeparatorsVisible = typeof areSeparatorsVisibleProp === 'boolean' ? areSeparatorsVisibleProp : true;
+  var parentClass = (0, _classnames["default"])('list', className, {
+    'list-small': isSmall,
+    'list--separators-hidden': !areSeparatorsVisible,
+    'loading-placeholder': isLoading
+  });
+  return _react["default"].createElement(_react.Fragment, null, header && _react["default"].createElement(_ListHeader["default"], (0, _extends2["default"])({
+    isSmall: isSmall
+  }, header)), _react["default"].createElement("ul", {
+    className: parentClass
+  }, items && items.map(function (item, idx) {
+    var listItem = item;
+    var expandablListItem = item;
+
+    if (listItem.title) {
+      return _react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
+        key: listItem.id,
+        selectableType: typeof listItem.selectableType === 'string' ? listItem.selectableType : selectableType
+      }, listItem, {
+        isSeparatorVisible: typeof listItem.isSeparatorVisible === 'boolean' ? listItem.isSeparatorVisible : areSeparatorsVisible,
+        onAction: onAction
+      }));
+    }
+
+    return _react["default"].createElement(_ExpandableListItem["default"], (0, _extends2["default"])({
+      key: idx
+    }, expandablListItem, {
+      onAction: onAction
+    }));
+  }), children && children));
+};
+
+List.defaultProps = {
+  header: null,
+  className: '',
+  isSmall: false,
+  areSeparatorsVisible: true
+};
+var _default = List;
+exports["default"] = _default;
+//# sourceMappingURL=List.js.map

package/lib/components/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/List/List.tsx"],"names":["ListWrapper","props","children","List","header","items","className","isSmall","areSeparatorsVisibleProp","areSeparatorsVisible","selectableType","isLoading","onAction","parentClass","map","item","idx","listItem","expandablListItem","title","id","isSeparatorVisible","defaultProps"],"mappings":";;;;;;;;;;;;;AAMA;;AACA;;AACA;;AAGA;;AAGA;;AA2BO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;AAAA,SAC1B;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,KAAK,CAACC,QAArC,CAD0B;AAAA,CAApB;;;;AAIP,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACF,KAAD,EAA2C;AAAA,MAEtDG,MAFsD,GAWnDH,KAXmD,CAEtDG,MAFsD;AAAA,MAGtDC,KAHsD,GAWnDJ,KAXmD,CAGtDI,KAHsD;AAAA,MAItDC,SAJsD,GAWnDL,KAXmD,CAItDK,SAJsD;AAAA,MAKtDC,OALsD,GAWnDN,KAXmD,CAKtDM,OALsD;AAAA,MAMhCC,wBANgC,GAWnDP,KAXmD,CAMtDQ,oBANsD;AAAA,MAOtDP,QAPsD,GAWnDD,KAXmD,CAOtDC,QAPsD;AAAA,MAQtDQ,cARsD,GAWnDT,KAXmD,CAQtDS,cARsD;AAAA,MAStDC,SATsD,GAWnDV,KAXmD,CAStDU,SATsD;AAAA,MAUtDC,QAVsD,GAWnDX,KAXmD,CAUtDW,QAVsD,EAavD;;AACA,MAAMH,oBAAoB,GACzB,OAAOD,wBAAP,KAAoC,SAApC,GACGA,wBADH,GAEG,IAHJ;AAKA,MAAMK,WAAW,GAAG,4BAAG,MAAH,EAAWP,SAAX,EAAsB;AACzC,kBAAcC,OAD2B;AAEzC,+BAA2B,CAACE,oBAFa;AAGzC,2BAAuBE;AAHkB,GAAtB,CAApB;AAMA,SACC,gCAAC,eAAD,QACEP,MAAM,IAAI,gCAAC,sBAAD;AAAY,IAAA,OAAO,EAAEG;AAArB,KAAkCH,MAAlC,EADZ,EAEC;AAAI,IAAA,SAAS,EAAES;AAAf,KACER,KAAK,IACLA,KAAK,CAACS,GAAN,CAAU,UAACC,IAAD,EAAOC,GAAP,EAAe;AACxB,QAAMC,QAAQ,GAAGF,IAAjB;AACA,QAAMG,iBAAiB,GAAGH,IAA1B;;AAEA,QAAIE,QAAQ,CAACE,KAAb,EAAoB;AACnB,aACC,gCAAC,oBAAD;AACC,QAAA,GAAG,EAAEF,QAAQ,CAACG,EADf;AAEC,QAAA,cAAc,EACb,OAAOH,QAAQ,CAACP,cAAhB,KAAmC,QAAnC,GACGO,QAAQ,CAACP,cADZ,GAEGA;AALL,SAOKO,QAPL;AAQC,QAAA,kBAAkB,EACjB,OAAOA,QAAQ,CAACI,kBAAhB,KAAuC,SAAvC,GACGJ,QAAQ,CAACI,kBADZ,GAEGZ,oBAXL;AAaC,QAAA,QAAQ,EAAEG;AAbX,SADD;AAiBA;;AACD,WACC,gCAAC,8BAAD;AACC,MAAA,GAAG,EAAEI;AADN,OAEKE,iBAFL;AAGC,MAAA,QAAQ,EAAEN;AAHX,OADD;AAOA,GA9BD,CAFF,EAiCEV,QAAQ,IAAIA,QAjCd,CAFD,CADD;AAwCA,CAjED;;AAmEAC,IAAI,CAACmB,YAAL,GAAoB;AACnBlB,EAAAA,MAAM,EAAE,IADW;AAEnBE,EAAAA,SAAS,EAAE,EAFQ;AAGnBC,EAAAA,OAAO,EAAE,KAHU;AAInBE,EAAAA,oBAAoB,EAAE;AAJH,CAApB;eAOeN,I","sourcesContent":["import {\n\tIHWAction,\n\tIHWList,\n\tIHWListHeader,\n\tIHWListItemTypes\n} from '@sprucelabs/spruce-types'\nimport cx from 'classnames'\nimport React, { Fragment } from 'react'\nimport ExpandableListItem, {\n\tIExpandableListItemProps\n} from './components/ExpandableListItem/ExpandableListItem'\nimport ListHeader, {\n\tIListHeaderProps\n} from './components/ListHeader/ListHeader'\nimport ListItem, { IListItemProps } from './components/ListItem/ListItem'\n\nexport type IWrappedItemProps = IListItemProps | IExpandableListItemProps\n\nexport interface IListProps extends Omit<IHWList, 'id' | 'header' | 'items'> {\n\t/** optional id for view caching */\n\tid?: string\n\n\t/** List Header */\n\theader?: IListHeaderProps | IHWListHeader | null\n\n\t/** List items */\n\titems?: Array<IWrappedItemProps | IHWListItemTypes> | null\n\n\t/** Class for the list */\n\tclassName?: string\n\n\t/** any passthrough to render in the body of the list */\n\tchildren?: React.ReactNode\n\n\t/** Is this whole list in a loading state? Sets all list items to loading only if true. */\n\tisLoading?: boolean\n\n\t/** optional, provide a handler for Actions */\n\tonAction?: (action: IHWAction) => any\n}\n\nexport const ListWrapper = (props): React.ReactElement => (\n\t<div className=\"list-wrapper\">{props.children}</div>\n)\n\nconst List = (props: IListProps): React.ReactElement => {\n\tconst {\n\t\theader,\n\t\titems,\n\t\tclassName,\n\t\tisSmall,\n\t\tareSeparatorsVisible: areSeparatorsVisibleProp,\n\t\tchildren,\n\t\tselectableType,\n\t\tisLoading,\n\t\tonAction\n\t} = props\n\n\t// seperators a true by default\n\tconst areSeparatorsVisible =\n\t\ttypeof areSeparatorsVisibleProp === 'boolean'\n\t\t\t? areSeparatorsVisibleProp\n\t\t\t: true\n\n\tconst parentClass = cx('list', className, {\n\t\t'list-small': isSmall,\n\t\t'list--separators-hidden': !areSeparatorsVisible,\n\t\t'loading-placeholder': isLoading\n\t})\n\n\treturn (\n\t\t<Fragment>\n\t\t\t{header && <ListHeader isSmall={isSmall} {...header} />}\n\t\t\t<ul className={parentClass}>\n\t\t\t\t{items &&\n\t\t\t\t\titems.map((item, idx) => {\n\t\t\t\t\t\tconst listItem = item as IListItemProps\n\t\t\t\t\t\tconst expandablListItem = item as IExpandableListItemProps\n\n\t\t\t\t\t\tif (listItem.title) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\t\t\tkey={listItem.id}\n\t\t\t\t\t\t\t\t\tselectableType={\n\t\t\t\t\t\t\t\t\t\ttypeof listItem.selectableType === 'string'\n\t\t\t\t\t\t\t\t\t\t\t? listItem.selectableType\n\t\t\t\t\t\t\t\t\t\t\t: selectableType\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t{...listItem}\n\t\t\t\t\t\t\t\t\tisSeparatorVisible={\n\t\t\t\t\t\t\t\t\t\ttypeof listItem.isSeparatorVisible === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? listItem.isSeparatorVisible\n\t\t\t\t\t\t\t\t\t\t\t: areSeparatorsVisible\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonAction={onAction}\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\treturn (\n\t\t\t\t\t\t\t<ExpandableListItem\n\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\t{...expandablListItem}\n\t\t\t\t\t\t\t\tonAction={onAction}\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{children && children}\n\t\t\t</ul>\n\t\t</Fragment>\n\t)\n}\n\nList.defaultProps = {\n\theader: null,\n\tclassName: '',\n\tisSmall: false,\n\tareSeparatorsVisible: true\n}\n\nexport default List\n"],"file":"List.js"}

package/lib/components/List/components/ExpandableListItem/ExpandableListItem.d.ts

@@ -0,0 +1,27 @@
+import { IHWAction, IHWExpandableListItem } from '@sprucelabs/spruce-types';
+import React, { Component } from 'react';
+import { IListProps } from '../../List';
+import { IListItemProps } from '../ListItem/ListItem';
+export interface IExpandableListItemProps extends Omit<IHWExpandableListItem, 'item' | 'list' | 'lists'> {
+    /** Base list item props */
+    item: IListItemProps;
+    /** Optional; adds a nested list */
+    list?: IListProps;
+    /** Optional; adds multiple lists nested at the same level */
+    lists?: IListProps[];
+    /** optional, provide a handler for Actions */
+    onAction?: (action: IHWAction) => any;
+}
+interface IExpandableListItemState {
+    /** Is the list item expanded */
+    isExpanded: boolean;
+}
+export default class ExpandableListItem extends Component<IExpandableListItemProps, IExpandableListItemState> {
+    state: {
+        isExpanded: boolean;
+    };
+    toggleExpanded: () => void;
+    render(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=ExpandableListItem.d.ts.map

package/lib/components/List/components/ExpandableListItem/ExpandableListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableListItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/components/ExpandableListItem/ExpandableListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAiB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE/D,MAAM,WAAW,wBAChB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9D,2BAA2B;IAC3B,IAAI,EAAE,cAAc,CAAA;IAEpB,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAA;IAEjB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IAEpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG,CAAA;CACrC;AACD,UAAU,wBAAwB;IACjC,gCAAgC;IAChC,UAAU,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,SAAS,CACxD,wBAAwB,EACxB,wBAAwB,CACxB;IACO,KAAK;;MAEX;IAEM,cAAc,aAIpB;IAEM,MAAM,IAAI,KAAK,CAAC,YAAY;CA8BnC"}

package/lib/components/List/components/ExpandableListItem/ExpandableListItem.js

@@ -0,0 +1,93 @@
+"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 _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 _Button = require("../../../Button/Button");
+
+var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
+
+var ExpandableListItem =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(ExpandableListItem, _Component);
+
+  function ExpandableListItem() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ExpandableListItem);
+
+    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"])(ExpandableListItem)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isExpanded: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleExpanded", function () {
+      _this.setState(function (prevState) {
+        return {
+          isExpanded: !prevState.isExpanded
+        };
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ExpandableListItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          item = _this$props.item,
+          list = _this$props.list,
+          lists = _this$props.lists,
+          collapsedIconName = _this$props.collapsedIconName,
+          expandedIconName = _this$props.expandedIconName,
+          onAction = _this$props.onAction;
+      var isExpanded = this.state.isExpanded;
+      return _react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({}, item, {
+        list: isExpanded ? list : undefined,
+        lists: isExpanded ? lists : undefined,
+        actions: [{
+          icon: {
+            name: isExpanded ? expandedIconName || 'keyboard_arrow_down' : collapsedIconName || 'keyboard_arrow_right'
+          },
+          kind: isExpanded ? undefined : _Button.ButtonKinds.Simple,
+          onClick: this.toggleExpanded
+        }],
+        onAction: onAction
+      }));
+    }
+  }]);
+  return ExpandableListItem;
+}(_react.Component);
+
+exports["default"] = ExpandableListItem;
+//# sourceMappingURL=ExpandableListItem.js.map

package/lib/components/List/components/ExpandableListItem/ExpandableListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/List/components/ExpandableListItem/ExpandableListItem.tsx"],"names":["ExpandableListItem","isExpanded","setState","prevState","props","item","list","lists","collapsedIconName","expandedIconName","onAction","state","undefined","icon","name","kind","ButtonKinds","Simple","onClick","toggleExpanded","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AAEA;;IAqBqBA,kB;;;;;;;;;;;;;;;;;8FAIL;AACdC,MAAAA,UAAU,EAAE;AADE,K;uGAIS,YAAM;AAC7B,YAAKC,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3BF,UAAAA,UAAU,EAAE,CAACE,SAAS,CAACF;AADI,SAAL;AAAA,OAAvB;AAGA,K;;;;;;6BAEmC;AAAA,wBAQ/B,KAAKG,KAR0B;AAAA,UAElCC,IAFkC,eAElCA,IAFkC;AAAA,UAGlCC,IAHkC,eAGlCA,IAHkC;AAAA,UAIlCC,KAJkC,eAIlCA,KAJkC;AAAA,UAKlCC,iBALkC,eAKlCA,iBALkC;AAAA,UAMlCC,gBANkC,eAMlCA,gBANkC;AAAA,UAOlCC,QAPkC,eAOlCA,QAPkC;AAAA,UAS3BT,UAT2B,GASZ,KAAKU,KATO,CAS3BV,UAT2B;AAUnC,aACC,gCAAC,oBAAD,gCACKI,IADL;AAEC,QAAA,IAAI,EAAEJ,UAAU,GAAGK,IAAH,GAAUM,SAF3B;AAGC,QAAA,KAAK,EAAEX,UAAU,GAAGM,KAAH,GAAWK,SAH7B;AAIC,QAAA,OAAO,EAAE,CACR;AACCC,UAAAA,IAAI,EAAE;AACLC,YAAAA,IAAI,EAAEb,UAAU,GACbQ,gBAAgB,IAAI,qBADP,GAEbD,iBAAiB,IAAI;AAHnB,WADP;AAMCO,UAAAA,IAAI,EAAEd,UAAU,GAAGW,SAAH,GAAeI,oBAAYC,MAN5C;AAOCC,UAAAA,OAAO,EAAE,KAAKC;AAPf,SADQ,CAJV;AAeC,QAAA,QAAQ,EAAET;AAfX,SADD;AAmBA;;;EA3C8CU,gB","sourcesContent":["import { IHWAction, IHWExpandableListItem } from '@sprucelabs/spruce-types'\nimport React, { Component } from 'react'\nimport { ButtonKinds } from '../../../Button/Button'\nimport { IListProps } from '../../List'\nimport ListItem, { IListItemProps } from '../ListItem/ListItem'\n\nexport interface IExpandableListItemProps\n\textends Omit<IHWExpandableListItem, 'item' | 'list' | 'lists'> {\n\t/** Base list item props */\n\titem: IListItemProps\n\n\t/** Optional; adds a nested list */\n\tlist?: IListProps\n\n\t/** Optional; adds multiple lists nested at the same level */\n\tlists?: IListProps[]\n\n\t/** optional, provide a handler for Actions */\n\tonAction?: (action: IHWAction) => any\n}\ninterface IExpandableListItemState {\n\t/** Is the list item expanded */\n\tisExpanded: boolean\n}\n\nexport default class ExpandableListItem extends Component<\n\tIExpandableListItemProps,\n\tIExpandableListItemState\n> {\n\tpublic state = {\n\t\tisExpanded: false\n\t}\n\n\tpublic toggleExpanded = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tisExpanded: !prevState.isExpanded\n\t\t}))\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst {\n\t\t\titem,\n\t\t\tlist,\n\t\t\tlists,\n\t\t\tcollapsedIconName,\n\t\t\texpandedIconName,\n\t\t\tonAction\n\t\t} = this.props\n\t\tconst { isExpanded } = this.state\n\t\treturn (\n\t\t\t<ListItem\n\t\t\t\t{...item}\n\t\t\t\tlist={isExpanded ? list : undefined}\n\t\t\t\tlists={isExpanded ? lists : undefined}\n\t\t\t\tactions={[\n\t\t\t\t\t{\n\t\t\t\t\t\ticon: {\n\t\t\t\t\t\t\tname: isExpanded\n\t\t\t\t\t\t\t\t? expandedIconName || 'keyboard_arrow_down'\n\t\t\t\t\t\t\t\t: collapsedIconName || 'keyboard_arrow_right'\n\t\t\t\t\t\t},\n\t\t\t\t\t\tkind: isExpanded ? undefined : ButtonKinds.Simple,\n\t\t\t\t\t\tonClick: this.toggleExpanded\n\t\t\t\t\t}\n\t\t\t\t]}\n\t\t\t\tonAction={onAction}\n\t\t\t/>\n\t\t)\n\t}\n}\n"],"file":"ExpandableListItem.js"}

package/lib/components/List/components/ListHeader/ListHeader.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Action } from '../../../Button/Button';
+import { IHWListHeader } from '@sprucelabs/spruce-types';
+export interface IListHeaderProps extends Omit<IHWListHeader, 'actions'> {
+    actions?: Action[];
+}
+declare const ListHeader: {
+    (props: IHWListHeader | IListHeaderProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    defaultProps: {
+        subtitle: string;
+        isSmall: boolean;
+        actions: never[];
+    };
+};
+export default ListHeader;
+//# sourceMappingURL=ListHeader.d.ts.map

package/lib/components/List/components/ListHeader/ListHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAe,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAGxD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,QAAA,MAAM,UAAU;;;;;;;CAuBf,CAAA;AAQD,eAAe,UAAU,CAAA"}

package/lib/components/List/components/ListHeader/ListHeader.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var _ = require("../../../..");
+
+var ListHeader = function ListHeader(props) {
+  var title = props.title,
+      subtitle = props.subtitle,
+      isSmall = props.isSmall,
+      actions = props.actions;
+  var parentClass = (0, _classnames["default"])('list-header', {
+    'list-header-small': isSmall
+  });
+  return _react["default"].createElement("div", {
+    className: parentClass
+  }, _react["default"].createElement("div", {
+    className: "list-header__text"
+  }, _react["default"].createElement("h3", {
+    className: "list-header__title"
+  }, title), subtitle && _react["default"].createElement("p", {
+    className: "list-header__subtitle"
+  }, subtitle)), Array.isArray(actions) && actions.length > 0 && _react["default"].createElement("ul", {
+    className: "list-header__actions"
+  }, (0, _.unionArray)(actions).map(function (action, idx) {
+    return _react["default"].createElement("li", {
+      key: idx,
+      className: "list-header__action-wrapper"
+    }, _react["default"].createElement(_Button["default"], action));
+  })));
+};
+
+ListHeader.defaultProps = {
+  subtitle: '',
+  isSmall: false,
+  actions: []
+};
+var _default = ListHeader;
+exports["default"] = _default;
+//# sourceMappingURL=ListHeader.js.map

package/lib/components/List/components/ListHeader/ListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/List/components/ListHeader/ListHeader.tsx"],"names":["ListHeader","props","title","subtitle","isSmall","actions","parentClass","Array","isArray","length","map","action","idx","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAMA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAClBC,KADkB,EAEM;AAAA,MAChBC,KADgB,GACsBD,KADtB,CAChBC,KADgB;AAAA,MACTC,QADS,GACsBF,KADtB,CACTE,QADS;AAAA,MACCC,OADD,GACsBH,KADtB,CACCG,OADD;AAAA,MACUC,OADV,GACsBJ,KADtB,CACUI,OADV;AAExB,MAAMC,WAAW,GAAG,4BAAG,aAAH,EAAkB;AAAE,yBAAqBF;AAAvB,GAAlB,CAApB;AAEA,SACC;AAAK,IAAA,SAAS,EAAEE;AAAhB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAI,IAAA,SAAS,EAAC;AAAd,KAAoCJ,KAApC,CADD,EAEEC,QAAQ,IAAI;AAAG,IAAA,SAAS,EAAC;AAAb,KAAsCA,QAAtC,CAFd,CADD,EAKEI,KAAK,CAACC,OAAN,CAAcH,OAAd,KAA0BA,OAAO,CAACI,MAAR,GAAiB,CAA3C,IACA;AAAI,IAAA,SAAS,EAAC;AAAd,KACE,kBAAWJ,OAAX,EAAoBK,GAApB,CAAwB,UAACC,MAAD,EAASC,GAAT;AAAA,WACxB;AAAI,MAAA,GAAG,EAAEA,GAAT;AAAc,MAAA,SAAS,EAAC;AAAxB,OACC,gCAAC,kBAAD,EAAYD,MAAZ,CADD,CADwB;AAAA,GAAxB,CADF,CANF,CADD;AAiBA,CAvBD;;AAyBAX,UAAU,CAACa,YAAX,GAA0B;AACzBV,EAAAA,QAAQ,EAAE,EADe;AAEzBC,EAAAA,OAAO,EAAE,KAFgB;AAGzBC,EAAAA,OAAO,EAAE;AAHgB,CAA1B;eAMeL,U","sourcesContent":["import React from 'react'\nimport cx from 'classnames'\nimport Button, { Action } from '../../../Button/Button'\nimport { IHWListHeader } from '@sprucelabs/spruce-types'\nimport { unionArray } from '../../../..'\n\nexport interface IListHeaderProps extends Omit<IHWListHeader, 'actions'> {\n\tactions?: Action[]\n}\n\nconst ListHeader = (\n\tprops: IListHeaderProps | IHWListHeader\n): React.ReactElement => {\n\tconst { title, subtitle, isSmall, actions } = props\n\tconst parentClass = cx('list-header', { 'list-header-small': isSmall })\n\n\treturn (\n\t\t<div className={parentClass}>\n\t\t\t<div className=\"list-header__text\">\n\t\t\t\t<h3 className=\"list-header__title\">{title}</h3>\n\t\t\t\t{subtitle && <p className=\"list-header__subtitle\">{subtitle}</p>}\n\t\t\t</div>\n\t\t\t{Array.isArray(actions) && actions.length > 0 && (\n\t\t\t\t<ul className=\"list-header__actions\">\n\t\t\t\t\t{unionArray(actions).map((action, idx) => (\n\t\t\t\t\t\t<li key={idx} className=\"list-header__action-wrapper\">\n\t\t\t\t\t\t\t<Button {...action} />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nListHeader.defaultProps = {\n\tsubtitle: '',\n\tisSmall: false,\n\tactions: []\n}\n\nexport default ListHeader\n"],"file":"ListHeader.js"}

package/lib/components/List/components/ListItem/ListItem.d.ts

@@ -0,0 +1,67 @@
+import { IHWAction, IHWListItem } from '@sprucelabs/spruce-types';
+import React from 'react';
+import { IButtonProps } from '../../../Button/Button';
+import { IContextMenuProps } from '../../../ContextMenu/ContextMenu';
+import { ICheckboxProps } from '../../../Forms/components/Checkbox/Checkbox';
+import { IRadioProps } from '../../../Forms/components/Radio/Radio';
+import { IToggleProps } from '../../../Forms/components/Toggle/Toggle';
+import { IIconProps } from '../../../Icon/Icon';
+import { IListProps } from '../../List';
+export interface IListItemProps extends Omit<IHWListItem, 'id' | 'icon' | 'actions' | 'primaryAction' | 'contextMenu' | 'toggleProps' | 'selectableProps' | 'list' | 'lists' | 'title'> {
+    /** unique id for view caching */
+    id?: string;
+    /** Inline svg icon */
+    icon?: IIconProps;
+    /** A primary action that turns the entire list item into a clickable button */
+    primaryAction?: IButtonProps;
+    /** Actions associated with the list item */
+    actions?: IButtonProps[];
+    /** Context Menu associated with the list item */
+    contextMenu?: IContextMenuProps | null;
+    /** Props passed to the toggle when it is used */
+    toggleProps?: IToggleProps;
+    /** Optional class name for list item */
+    className?: string;
+    /** Optional id prop for selectable list items */
+    selectableId?: string;
+    /** Optional props for selectable list items */
+    selectableProps?: ICheckboxProps | IRadioProps;
+    /** Optional; adds a nested list */
+    list?: IListProps;
+    /** Optional; adds multiple lists nested at the same level */
+    lists?: IListProps[];
+    /** In a loading state, loading placeholders will be dropped in */
+    isLoading?: boolean;
+    /** Title text  */
+    title: string | React.ReactElement;
+    /** Optional alt property if avatar is passed */
+    avatarAlt?: string;
+    /** Optional alt property if image is passed */
+    imageAlt?: string;
+    /** Optional, provide a handler for Actions */
+    onAction?: (action: IHWAction) => any;
+}
+declare const ListItem: {
+    (props: IListItemProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    defaultProps: {
+        subtitle: string;
+        avatar: string;
+        avatarAlt: string;
+        image: string;
+        imageAlt: string;
+        icon: null;
+        isIconHidden: boolean;
+        isDraggable: boolean;
+        toggleId: string;
+        actions: never[];
+        isSeparatorVisible: boolean;
+        toggleProps: {};
+        warnings: {
+            title: boolean;
+            subtitle: boolean;
+            note: boolean;
+        };
+    };
+};
+export default ListItem;
+//# sourceMappingURL=ListItem.d.ts.map

package/lib/components/List/components/ListItem/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,WAAW,EAEX,MAAM,0BAA0B,CAAA;AAGjC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAe,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAoB,EACnB,iBAAiB,EACjB,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAA;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAA;AACtE,OAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE7C,MAAM,WAAW,cAChB,SAAQ,IAAI,CACX,WAAW,EACT,IAAI,GACJ,MAAM,GACN,SAAS,GACT,eAAe,GACf,aAAa,GACb,aAAa,GACb,iBAAiB,GACjB,MAAM,GACN,OAAO,GACP,OAAO,CACT;IACD,iCAAiC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,sBAAsB;IACtB,IAAI,CAAC,EAAE,UAAU,CAAA;IAEjB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,YAAY,CAAA;IAE5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IAExB,iDAAiD;IACjD,WAAW,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAEtC,iDAAiD;IACjD,WAAW,CAAC,EAAE,YAAY,CAAA;IAE1B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,cAAc,GAAG,WAAW,CAAA;IAE9C,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAA;IAEjB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IAEpB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,kBAAkB;IAClB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;IAElC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG,CAAA;CACrC;AAED,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAmNb,CAAA;AAsBD,eAAe,QAAQ,CAAA"}

package/lib/components/List/components/ListItem/ListItem.js

@@ -0,0 +1,206 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _spruceTypes = require("@sprucelabs/spruce-types");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Avatar = _interopRequireDefault(require("../../../Avatar/Avatar"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var _ContextMenu = _interopRequireDefault(require("../../../ContextMenu/ContextMenu"));
+
+var _Forms = require("../../../Forms");
+
+var _Icon = _interopRequireDefault(require("../../../Icon/Icon"));
+
+var _List = _interopRequireDefault(require("../../List"));
+
+var ListItem = function ListItem(props) {
+  var actions = props.actions,
+      avatar = props.avatar,
+      avatarAlt = props.avatarAlt,
+      className = props.className,
+      contextMenu = props.contextMenu,
+      icon = props.icon,
+      image = props.image,
+      imageAlt = props.imageAlt,
+      isDisabled = props.isDisabled,
+      isDraggable = props.isDraggable,
+      isIconHidden = props.isIconHidden,
+      isLoading = props.isLoading,
+      isSeparatorVisible = props.isSeparatorVisible,
+      list = props.list,
+      lists = props.lists,
+      note = props.note,
+      onAction = props.onAction,
+      primaryAction = props.primaryAction,
+      selectableIdProp = props.selectableId,
+      selectableProps = props.selectableProps,
+      selectableType = props.selectableType,
+      subtitle = props.subtitle,
+      title = props.title,
+      toggleId = props.toggleId,
+      toggleProps = props.toggleProps,
+      warnings = props.warnings;
+  var checkboxProps;
+  var radioProps;
+  var selectableId;
+
+  if (selectableProps) {
+    selectableId = selectableIdProp ? selectableIdProp : selectableProps.id; // TODO move this to a type that can be inferred
+
+    var restSelectableProps = (0, _cloneDeep["default"])(selectableProps);
+    delete restSelectableProps.__typename;
+
+    if (selectableType === _spruceTypes.IHWListItemSelectableType.Checkbox) {
+      checkboxProps = restSelectableProps;
+    } else {
+      radioProps = restSelectableProps;
+    }
+  }
+
+  var parentClass = (0, _classnames["default"])('list-item', className, {
+    'list-item-title-only': !subtitle,
+    'list-item--is-draggable': isDraggable,
+    'list-item--is-disabled': isDisabled,
+    'list-item--primary-action': primaryAction,
+    'list-item--separator-hidden': !isSeparatorVisible,
+    'list-item--has-avatar': !!avatar,
+    'loading-placeholder': isLoading
+  });
+
+  var ListItemInner = function ListItemInner() {
+    return _react["default"].createElement(_react.Fragment, null, (image || icon || avatar || selectableId) && !isDraggable && _react["default"].createElement("div", {
+      className: "list-item__image-wrapper"
+    }, icon && _react["default"].createElement(_Icon["default"], {
+      customIcon: icon.customIcon,
+      name: icon.name,
+      isLineIcon: icon.isLineIcon,
+      className: (0, _classnames["default"])('list-item__icon', icon.className, {
+        'list-item__icon--hidden': isIconHidden
+      })
+    }), image && _react["default"].createElement("img", {
+      src: image,
+      className: "list-item__image",
+      alt: imageAlt || image,
+      width: "40",
+      height: "40"
+    }), selectableId && _react["default"].createElement(_react.Fragment, null, selectableType === _spruceTypes.IHWListItemSelectableType.Checkbox && checkboxProps && _react["default"].createElement(_Forms.Checkbox, (0, _extends2["default"])({
+      id: selectableId
+    }, isDisabled ? {
+      disabled: true
+    } : {}, checkboxProps, {
+      onAction: onAction
+    })), selectableType === _spruceTypes.IHWListItemSelectableType.Radio && radioProps && _react["default"].createElement(_Forms.Radio, (0, _extends2["default"])({
+      id: selectableId
+    }, isDisabled ? {
+      disabled: true
+    } : {}, radioProps, {
+      onAction: onAction
+    }))), avatar && _react["default"].createElement(_Avatar["default"], {
+      image: avatar,
+      alt: avatarAlt || avatar,
+      width: 32,
+      height: 32
+    })), _react["default"].createElement("div", {
+      className: "list-item__text-wrapper"
+    }, toggleId || selectableId ? _react["default"].createElement("p", null, _react["default"].createElement("label", {
+      className: (0, _classnames["default"])('list-item__title', {
+        'u-color-warning-dark': warnings && warnings.title
+      }),
+      htmlFor: toggleId || selectableId
+    }, title)) : _react["default"].createElement("p", {
+      className: (0, _classnames["default"])('list-item__title', {
+        'u-color-warning-dark': warnings && warnings.title
+      })
+    }, title), subtitle && _react["default"].createElement(_react.Fragment, null, toggleId || selectableId ? _react["default"].createElement("p", null, _react["default"].createElement("label", {
+      className: (0, _classnames["default"])('list-item__subtitle', {
+        'u-color-warning-dark': warnings && warnings.subtitle
+      }),
+      htmlFor: toggleId || selectableId
+    }, subtitle)) : _react["default"].createElement("p", {
+      className: (0, _classnames["default"])('list-item__subtitle', {
+        'u-color-warning-dark': warnings && warnings.subtitle
+      }),
+      dangerouslySetInnerHTML: {
+        __html: subtitle
+      }
+    })), note && _react["default"].createElement("p", {
+      className: (0, _classnames["default"])('list-item__note', {
+        'u-color-warning-dark': warnings && warnings.note
+      }),
+      dangerouslySetInnerHTML: {
+        __html: note
+      }
+    })), !isDraggable && (actions && actions.length > 0 || contextMenu) && _react["default"].createElement(_react.Fragment, null, actions && actions.length > 0 && _react["default"].createElement("div", {
+      className: "list-item__actions-wrapper"
+    }, actions.map(function (action, idx) {
+      return _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+        key: idx,
+        isSmall: true,
+        className: "list-item__action"
+      }, action, {
+        onAction: onAction
+      }));
+    })), contextMenu && _react["default"].createElement("div", {
+      className: "list-item__actions-wrapper"
+    }, _react["default"].createElement(_ContextMenu["default"], (0, _extends2["default"])({}, contextMenu, {
+      onAction: onAction
+    })))), toggleId && _react["default"].createElement(_Forms.Toggle, (0, _extends2["default"])({
+      id: toggleId
+    }, toggleProps)), list && _react["default"].createElement(_List["default"], (0, _extends2["default"])({}, list, {
+      onAction: onAction
+    })), lists && lists.length > 0 && lists.map(function (list, idx) {
+      return _react["default"].createElement(_List["default"], (0, _extends2["default"])({
+        key: idx
+      }, list, {
+        onAction: onAction
+      }));
+    }));
+  };
+
+  return _react["default"].createElement("li", {
+    className: parentClass
+  }, primaryAction ? _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, primaryAction, {
+    onAction: onAction
+  }), _react["default"].createElement(ListItemInner, null)) : _react["default"].createElement(ListItemInner, null));
+};
+
+ListItem.defaultProps = {
+  subtitle: '',
+  avatar: '',
+  avatarAlt: '',
+  image: '',
+  imageAlt: '',
+  icon: null,
+  isIconHidden: false,
+  isDraggable: false,
+  toggleId: '',
+  actions: [],
+  isSeparatorVisible: true,
+  toggleProps: {},
+  warnings: {
+    title: false,
+    subtitle: false,
+    note: false
+  }
+};
+var _default = ListItem;
+exports["default"] = _default;
+//# sourceMappingURL=ListItem.js.map

package/lib/components/List/components/ListItem/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/List/components/ListItem/ListItem.tsx"],"names":["ListItem","props","actions","avatar","avatarAlt","className","contextMenu","icon","image","imageAlt","isDisabled","isDraggable","isIconHidden","isLoading","isSeparatorVisible","list","lists","note","onAction","primaryAction","selectableIdProp","selectableId","selectableProps","selectableType","subtitle","title","toggleId","toggleProps","warnings","checkboxProps","radioProps","id","restSelectableProps","__typename","IHWListItemSelectableType","Checkbox","parentClass","ListItemInner","customIcon","name","isLineIcon","disabled","Radio","__html","length","map","action","idx","defaultProps"],"mappings":"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","sourcesContent":["import {\n\tIHWAction,\n\tIHWListItem,\n\tIHWListItemSelectableType\n} from '@sprucelabs/spruce-types'\nimport cx from 'classnames'\nimport cloneDeep from 'lodash/cloneDeep'\nimport React, { Fragment } from 'react'\nimport Avatar from '../../../Avatar/Avatar'\nimport Button, { IButtonProps } from '../../../Button/Button'\nimport ContextMenu, {\n\tIContextMenuProps\n} from '../../../ContextMenu/ContextMenu'\nimport { Checkbox, Radio, Toggle } from '../../../Forms'\nimport { ICheckboxProps } from '../../../Forms/components/Checkbox/Checkbox'\nimport { IRadioProps } from '../../../Forms/components/Radio/Radio'\nimport { IToggleProps } from '../../../Forms/components/Toggle/Toggle'\nimport Icon, { IIconProps } from '../../../Icon/Icon'\nimport List, { IListProps } from '../../List'\n\nexport interface IListItemProps\n\textends Omit<\n\t\tIHWListItem,\n\t\t| 'id'\n\t\t| 'icon'\n\t\t| 'actions'\n\t\t| 'primaryAction'\n\t\t| 'contextMenu'\n\t\t| 'toggleProps'\n\t\t| 'selectableProps'\n\t\t| 'list'\n\t\t| 'lists'\n\t\t| 'title'\n\t> {\n\t/** unique id for view caching */\n\tid?: string\n\n\t/** Inline svg icon */\n\ticon?: IIconProps\n\n\t/** A primary action that turns the entire list item into a clickable button */\n\tprimaryAction?: IButtonProps\n\n\t/** Actions associated with the list item */\n\tactions?: IButtonProps[]\n\n\t/** Context Menu associated with the list item */\n\tcontextMenu?: IContextMenuProps | null\n\n\t/** Props passed to the toggle when it is used */\n\ttoggleProps?: IToggleProps\n\n\t/** Optional class name for list item */\n\tclassName?: string\n\n\t/** Optional id prop for selectable list items */\n\tselectableId?: string\n\n\t/** Optional props for selectable list items */\n\tselectableProps?: ICheckboxProps | IRadioProps\n\n\t/** Optional; adds a nested list */\n\tlist?: IListProps\n\n\t/** Optional; adds multiple lists nested at the same level */\n\tlists?: IListProps[]\n\n\t/** In a loading state, loading placeholders will be dropped in */\n\tisLoading?: boolean\n\n\t/** Title text  */\n\ttitle: string | React.ReactElement\n\n\t/** Optional alt property if avatar is passed */\n\tavatarAlt?: string\n\n\t/** Optional alt property if image is passed */\n\timageAlt?: string\n\n\t/** Optional, provide a handler for Actions */\n\tonAction?: (action: IHWAction) => any\n}\n\nconst ListItem = (props: IListItemProps): React.ReactElement => {\n\tconst {\n\t\tactions,\n\t\tavatar,\n\t\tavatarAlt,\n\t\tclassName,\n\t\tcontextMenu,\n\t\ticon,\n\t\timage,\n\t\timageAlt,\n\t\tisDisabled,\n\t\tisDraggable,\n\t\tisIconHidden,\n\t\tisLoading,\n\t\tisSeparatorVisible,\n\t\tlist,\n\t\tlists,\n\t\tnote,\n\t\tonAction,\n\t\tprimaryAction,\n\t\tselectableId: selectableIdProp,\n\t\tselectableProps,\n\t\tselectableType,\n\t\tsubtitle,\n\t\ttitle,\n\t\ttoggleId,\n\t\ttoggleProps,\n\t\twarnings\n\t} = props\n\n\tlet checkboxProps: ICheckboxProps | undefined\n\tlet radioProps: IRadioProps | undefined\n\tlet selectableId\n\n\tif (selectableProps) {\n\t\tselectableId = selectableIdProp ? selectableIdProp : selectableProps.id\n\n\t\t// TODO move this to a type that can be inferred\n\t\tconst restSelectableProps = cloneDeep(selectableProps)\n\t\tdelete restSelectableProps.__typename\n\n\t\tif (selectableType === IHWListItemSelectableType.Checkbox) {\n\t\t\tcheckboxProps = restSelectableProps as ICheckboxProps\n\t\t} else {\n\t\t\tradioProps = restSelectableProps as IRadioProps\n\t\t}\n\t}\n\n\tconst parentClass = cx('list-item', className, {\n\t\t'list-item-title-only': !subtitle,\n\t\t'list-item--is-draggable': isDraggable,\n\t\t'list-item--is-disabled': isDisabled,\n\t\t'list-item--primary-action': primaryAction,\n\t\t'list-item--separator-hidden': !isSeparatorVisible,\n\t\t'list-item--has-avatar': !!avatar,\n\t\t'loading-placeholder': isLoading\n\t})\n\n\tconst ListItemInner = (): React.ReactElement => (\n\t\t<Fragment>\n\t\t\t{(image || icon || avatar || selectableId) && !isDraggable && (\n\t\t\t\t<div className=\"list-item__image-wrapper\">\n\t\t\t\t\t{icon && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tcustomIcon={icon.customIcon}\n\t\t\t\t\t\t\tname={icon.name}\n\t\t\t\t\t\t\tisLineIcon={icon.isLineIcon}\n\t\t\t\t\t\t\tclassName={cx('list-item__icon', icon.className, {\n\t\t\t\t\t\t\t\t'list-item__icon--hidden': isIconHidden\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{image && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t\t\tclassName=\"list-item__image\"\n\t\t\t\t\t\t\talt={imageAlt || image}\n\t\t\t\t\t\t\twidth=\"40\"\n\t\t\t\t\t\t\theight=\"40\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{selectableId && (\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t{selectableType === IHWListItemSelectableType.Checkbox &&\n\t\t\t\t\t\t\t\tcheckboxProps && (\n\t\t\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\t\t\tid={selectableId}\n\t\t\t\t\t\t\t\t\t\t{...(isDisabled ? { disabled: true } : {})}\n\t\t\t\t\t\t\t\t\t\t{...checkboxProps}\n\t\t\t\t\t\t\t\t\t\tonAction={onAction}\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{selectableType === IHWListItemSelectableType.Radio &&\n\t\t\t\t\t\t\t\tradioProps && (\n\t\t\t\t\t\t\t\t\t<Radio\n\t\t\t\t\t\t\t\t\t\tid={selectableId}\n\t\t\t\t\t\t\t\t\t\t{...(isDisabled ? { disabled: true } : {})}\n\t\t\t\t\t\t\t\t\t\t{...radioProps}\n\t\t\t\t\t\t\t\t\t\tonAction={onAction}\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</Fragment>\n\t\t\t\t\t)}\n\t\t\t\t\t{avatar && (\n\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\timage={avatar}\n\t\t\t\t\t\t\talt={avatarAlt || avatar}\n\t\t\t\t\t\t\twidth={32}\n\t\t\t\t\t\t\theight={32}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className=\"list-item__text-wrapper\">\n\t\t\t\t{toggleId || selectableId ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName={cx('list-item__title', {\n\t\t\t\t\t\t\t\t'u-color-warning-dark': warnings && warnings.title\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\thtmlFor={toggleId || selectableId}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</p>\n\t\t\t\t) : (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={cx('list-item__title', {\n\t\t\t\t\t\t\t'u-color-warning-dark': warnings && warnings.title\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{subtitle && (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{toggleId || selectableId ? (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\tclassName={cx('list-item__subtitle', {\n\t\t\t\t\t\t\t\t\t\t'u-color-warning-dark': warnings && warnings.subtitle\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\thtmlFor={toggleId || selectableId}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\tclassName={cx('list-item__subtitle', {\n\t\t\t\t\t\t\t\t\t'u-color-warning-dark': warnings && warnings.subtitle\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: subtitle }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t\t{note && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={cx('list-item__note', {\n\t\t\t\t\t\t\t'u-color-warning-dark': warnings && warnings.note\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: note }}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!isDraggable && ((actions && actions.length > 0) || contextMenu) && (\n\t\t\t\t<Fragment>\n\t\t\t\t\t{actions && actions.length > 0 && (\n\t\t\t\t\t\t<div className=\"list-item__actions-wrapper\">\n\t\t\t\t\t\t\t{actions.map((action, idx) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tclassName=\"list-item__action\"\n\t\t\t\t\t\t\t\t\t{...action}\n\t\t\t\t\t\t\t\t\tonAction={onAction}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{contextMenu && (\n\t\t\t\t\t\t<div className=\"list-item__actions-wrapper\">\n\t\t\t\t\t\t\t<ContextMenu {...contextMenu} onAction={onAction} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Fragment>\n\t\t\t)}\n\t\t\t{toggleId && <Toggle id={toggleId} {...toggleProps} />}\n\n\t\t\t{list && <List {...list} onAction={onAction} />}\n\t\t\t{lists &&\n\t\t\t\tlists.length > 0 &&\n\t\t\t\tlists.map((list, idx) => (\n\t\t\t\t\t<List key={idx} {...list} onAction={onAction} />\n\t\t\t\t))}\n\t\t</Fragment>\n\t)\n\n\treturn (\n\t\t<li className={parentClass}>\n\t\t\t{primaryAction ? (\n\t\t\t\t<Button {...primaryAction} onAction={onAction}>\n\t\t\t\t\t<ListItemInner />\n\t\t\t\t</Button>\n\t\t\t) : (\n\t\t\t\t<ListItemInner />\n\t\t\t)}\n\t\t</li>\n\t)\n}\n\nListItem.defaultProps = {\n\tsubtitle: '',\n\tavatar: '',\n\tavatarAlt: '',\n\timage: '',\n\timageAlt: '',\n\ticon: null,\n\tisIconHidden: false,\n\tisDraggable: false,\n\ttoggleId: '',\n\tactions: [],\n\tisSeparatorVisible: true,\n\ttoggleProps: {},\n\twarnings: {\n\t\ttitle: false,\n\t\tsubtitle: false,\n\t\tnote: false\n\t}\n}\n\nexport default ListItem\n"],"file":"ListItem.js"}