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

package/lib/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,47 @@
+import { IHWAction, IHWSplitButton } from '@sprucelabs/spruce-types';
+import React, { Component } from 'react';
+import { IButtonProps } from '../Button/Button';
+export interface ISplitButtonProps extends Omit<IHWSplitButton, 'actions' | 'defaultAction'> {
+    defaultAction: IButtonProps;
+    /** All the secondary nested actions */
+    actions: IButtonProps[];
+    /** optional, provide a handler for Actions */
+    onAction?: (action: IHWAction) => any;
+}
+interface ISplitButtonState {
+    /** Controls whether the actions are visible */
+    isVisible: boolean;
+    /** Where the menu should be positioned */
+    menuPosition: {
+        top: number;
+        left: number;
+        width: number;
+    };
+    /** Which suggestion is highlighted by arrow key navigation */
+    highlightedActionIndex: number;
+}
+export default class SplitButton extends Component<ISplitButtonProps, ISplitButtonState> {
+    private static defaultProps;
+    ref: React.RefObject<HTMLDivElement>;
+    menuRef: React.RefObject<HTMLDivElement>;
+    state: {
+        isVisible: boolean;
+        menuPosition: {
+            top: number;
+            left: number;
+            width: number;
+        };
+        highlightedActionIndex: number;
+    };
+    componentWillUnmount: () => void;
+    handleClickOutside: (e: any) => void;
+    onKeyUp: (e: any) => void;
+    manageListeners: () => void;
+    getButtonPosition: () => ClientRect | null;
+    getMenuPosition: () => void;
+    toggleActionsVisibility: () => void;
+    handleAction(action: IHWAction): void;
+    render(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=SplitButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,cAAc,EACd,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAElD,OAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGvD,MAAM,WAAW,iBAChB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,eAAe,CAAC;IACzD,aAAa,EAAE,YAAY,CAAA;IAE3B,uCAAuC;IACvC,OAAO,EAAE,YAAY,EAAE,CAAA;IAEvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG,CAAA;CACrC;AAED,UAAU,iBAAiB;IAC1B,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAA;IAElB,0CAA0C;IAC1C,YAAY,EAAE;QACb,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACb,CAAA;IAED,8DAA8D;IAC9D,sBAAsB,EAAE,MAAM,CAAA;CAC9B;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,SAAS,CACjD,iBAAiB,EACjB,iBAAiB,CACjB;IACA,OAAO,CAAC,MAAM,CAAC,YAAY,CAG1B;IACM,GAAG,kCAAoC;IACvC,OAAO,kCAAoC;IAE3C,KAAK;;;;;;;;MAQX;IAEM,oBAAoB,aAK1B;IAEM,kBAAkB,mBAexB;IAEM,OAAO,mBAgDb;IAEM,eAAe,aAUrB;IAEM,iBAAiB,0BASvB;IAEM,eAAe,aAqBrB;IAEM,uBAAuB,aAW7B;IAEM,YAAY,CAAC,MAAM,EAAE,SAAS;IAY9B,MAAM,IAAI,KAAK,CAAC,YAAY;CAgGnC"}

package/lib/components/SplitButton/SplitButton.js

@@ -0,0 +1,296 @@
+"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 _spruceTypes = require("@sprucelabs/spruce-types");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
+
+var SplitButton =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(SplitButton, _Component);
+
+  function SplitButton() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, SplitButton);
+
+    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"])(SplitButton)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ref", _react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "menuRef", _react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isVisible: false,
+      menuPosition: {
+        top: 0,
+        left: 0,
+        width: 0
+      },
+      highlightedActionIndex: -1
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillUnmount", function () {
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('click', _this.handleClickOutside, false);
+        document.removeEventListener('keyup', _this.onKeyUp, false);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickOutside", function (e) {
+      if (_this.ref.current && _this.menuRef.current && !_this.ref.current.contains(e.target) && !_this.menuRef.current.contains(e.target)) {
+        _this.setState({
+          isVisible: false,
+          highlightedActionIndex: -1
+        }, function () {
+          return _this.manageListeners();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyUp", function (e) {
+      var actions = _this.props.actions;
+      var highlightedActionIndex = _this.state.highlightedActionIndex; // Down arrow
+
+      if (e.keyCode === 40) {
+        // Update the highlighted suggestion
+        _this.setState(function (prevState) {
+          return {
+            highlightedActionIndex: prevState.highlightedActionIndex === actions.length - 1 ? 0 : prevState.highlightedActionIndex + 1
+          };
+        });
+      } // Up arrow
+
+
+      if (e.keyCode === 38) {
+        // Update the highlighted suggestion
+        _this.setState(function (prevState) {
+          return {
+            highlightedActionIndex: prevState.highlightedActionIndex <= 0 ? actions.length - 1 : prevState.highlightedActionIndex - 1
+          };
+        });
+      } // Escape
+
+
+      if (e.key === 'Escape') {
+        _this.setState({
+          isVisible: false,
+          highlightedActionIndex: -1
+        }, function () {
+          return _this.manageListeners();
+        });
+      } // Enter
+
+
+      if (e.keyCode === 13) {
+        // Check if an action is highlighted
+        if (highlightedActionIndex > -1) {
+          var handler = actions[highlightedActionIndex].onClick; // Trigger it if so
+
+          if (handler) {
+            handler();
+          }
+
+          _this.toggleActionsVisibility();
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "manageListeners", function () {
+      if (typeof document !== 'undefined') {
+        if (_this.state.isVisible) {
+          document.addEventListener('click', _this.handleClickOutside, false);
+          document.addEventListener('keyup', _this.onKeyUp, false);
+        } else {
+          document.removeEventListener('click', _this.handleClickOutside, false);
+          document.removeEventListener('keyup', _this.onKeyUp, false);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getButtonPosition", function () {
+      var buttonPosition = _this.ref.current && _this.ref.current.getBoundingClientRect();
+
+      if (buttonPosition) {
+        return buttonPosition;
+      }
+
+      return null;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMenuPosition", function () {
+      var buttonPosition = _this.getButtonPosition();
+
+      var scrollTop = typeof document !== 'undefined' && document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : 0;
+
+      if (!buttonPosition) {
+        return;
+      }
+
+      var menuPosition = {
+        left: buttonPosition.left,
+        top: buttonPosition.bottom + scrollTop + 2,
+        width: buttonPosition.width
+      };
+
+      _this.setState({
+        menuPosition: menuPosition
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleActionsVisibility", function () {
+      _this.getMenuPosition();
+
+      _this.setState(function (prevState) {
+        return {
+          isVisible: !prevState.isVisible,
+          highlightedActionIndex: prevState.isVisible ? -1 : prevState.highlightedActionIndex
+        };
+      }, function () {
+        return _this.manageListeners();
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(SplitButton, [{
+    key: "handleAction",
+    value: function handleAction(action) {
+      var onAction = this.props.onAction;
+      this.setState({
+        isVisible: false,
+        highlightedActionIndex: -1
+      }, function () {
+        return onAction && onAction(action);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          defaultAction = _this$props.defaultAction,
+          actions = _this$props.actions,
+          kind = _this$props.kind,
+          isFullWidth = _this$props.isFullWidth,
+          isSmall = _this$props.isSmall,
+          usePortal = _this$props.usePortal;
+      var _this$state = this.state,
+          isVisible = _this$state.isVisible,
+          menuPosition = _this$state.menuPosition,
+          highlightedActionIndex = _this$state.highlightedActionIndex;
+
+      if (!actions || actions && actions.length === 0) {
+        // TODO: Warn dev if not in production environment; they might wanna use a different component
+        return _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+          isFullWidth: isFullWidth,
+          isSmall: isSmall
+        }, defaultAction, {
+          kind: defaultAction.kind || kind,
+          onAction: function onAction(action) {
+            return _this2.handleAction(action);
+          }
+        }));
+      }
+
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('split-button', {
+          'split-button--is-full-width': isFullWidth
+        }),
+        ref: this.ref
+      }, _react["default"].createElement("div", {
+        className: "split-button__button"
+      }, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+        isSmall: isSmall,
+        className: "split-button__default"
+      }, defaultAction, {
+        kind: defaultAction.kind || kind,
+        isFullWidth: false,
+        onAction: function onAction(action) {
+          return _this2.handleAction(action);
+        }
+      })), _react["default"].createElement(_Button["default"], {
+        isSmall: isSmall,
+        className: "split-button__actions",
+        icon: {
+          name: 'keyboard_arrow_down'
+        },
+        kind: kind,
+        onClick: this.toggleActionsVisibility,
+        onAction: function onAction(action) {
+          return _this2.handleAction(action);
+        }
+      })), isVisible && _react["default"].createElement(_react.Fragment, null, typeof document !== 'undefined' && document.body && usePortal ? (0, _reactDom.createPortal)(_react["default"].createElement("div", {
+        ref: this.menuRef,
+        style: {
+          position: 'absolute',
+          top: "".concat(menuPosition.top, "px"),
+          left: "".concat(menuPosition.left, "px"),
+          width: "".concat(menuPosition.width, "px")
+        }
+      }, _react["default"].createElement(_ButtonGroup["default"], {
+        kind: _spruceTypes.IHWButtonGroupKind.Floating,
+        isFullWidth: true,
+        actions: actions,
+        highlightedIndex: highlightedActionIndex,
+        onAction: function onAction(action) {
+          return _this2.handleAction(action);
+        }
+      })), document.body) : _react["default"].createElement("div", {
+        ref: this.menuRef,
+        style: {
+          position: 'relative',
+          top: '2px',
+          left: '0',
+          width: "".concat(menuPosition.width, "px")
+        }
+      }, _react["default"].createElement(_ButtonGroup["default"], {
+        kind: _spruceTypes.IHWButtonGroupKind.Floating,
+        isFullWidth: true,
+        actions: actions,
+        highlightedIndex: highlightedActionIndex,
+        onAction: function onAction(action) {
+          return _this2.handleAction(action);
+        }
+      }))));
+    }
+  }]);
+  return SplitButton;
+}(_react.Component);
+
+exports["default"] = SplitButton;
+(0, _defineProperty2["default"])(SplitButton, "defaultProps", {
+  isFullWidth: false,
+  isSmall: false
+});
+//# sourceMappingURL=SplitButton.js.map

package/lib/components/SplitButton/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":["SplitButton","React","createRef","isVisible","menuPosition","top","left","width","highlightedActionIndex","document","removeEventListener","handleClickOutside","onKeyUp","e","ref","current","menuRef","contains","target","setState","manageListeners","actions","props","state","keyCode","prevState","length","key","handler","onClick","toggleActionsVisibility","addEventListener","buttonPosition","getBoundingClientRect","getButtonPosition","scrollTop","documentElement","bottom","getMenuPosition","action","onAction","defaultAction","kind","isFullWidth","isSmall","usePortal","handleAction","name","body","position","IHWButtonGroupKind","Floating","Component"],"mappings":"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","sourcesContent":["import {\n\tIHWAction,\n\tIHWButtonGroupKind,\n\tIHWSplitButton\n} from '@sprucelabs/spruce-types'\nimport cx from 'classnames'\nimport React, { Component, Fragment } from 'react'\nimport { createPortal } from 'react-dom'\nimport Button, { IButtonProps } from '../Button/Button'\nimport ButtonGroup from '../ButtonGroup/ButtonGroup'\n\nexport interface ISplitButtonProps\n\textends Omit<IHWSplitButton, 'actions' | 'defaultAction'> {\n\tdefaultAction: IButtonProps\n\n\t/** All the secondary nested actions */\n\tactions: IButtonProps[]\n\n\t/** optional, provide a handler for Actions */\n\tonAction?: (action: IHWAction) => any\n}\n\ninterface ISplitButtonState {\n\t/** Controls whether the actions are visible */\n\tisVisible: boolean\n\n\t/** Where the menu should be positioned */\n\tmenuPosition: {\n\t\ttop: number\n\t\tleft: number\n\t\twidth: number\n\t}\n\n\t/** Which suggestion is highlighted by arrow key navigation */\n\thighlightedActionIndex: number\n}\n\nexport default class SplitButton extends Component<\n\tISplitButtonProps,\n\tISplitButtonState\n> {\n\tprivate static defaultProps = {\n\t\tisFullWidth: false,\n\t\tisSmall: false\n\t}\n\tpublic ref = React.createRef<HTMLDivElement>()\n\tpublic menuRef = React.createRef<HTMLDivElement>()\n\n\tpublic state = {\n\t\tisVisible: false,\n\t\tmenuPosition: {\n\t\t\ttop: 0,\n\t\t\tleft: 0,\n\t\t\twidth: 0\n\t\t},\n\t\thighlightedActionIndex: -1\n\t}\n\n\tpublic componentWillUnmount = () => {\n\t\tif (typeof document !== 'undefined') {\n\t\t\tdocument.removeEventListener('click', this.handleClickOutside, false)\n\t\t\tdocument.removeEventListener('keyup', this.onKeyUp, false)\n\t\t}\n\t}\n\n\tpublic handleClickOutside = (e: any) => {\n\t\tif (\n\t\t\tthis.ref.current &&\n\t\t\tthis.menuRef.current &&\n\t\t\t!this.ref.current.contains(e.target) &&\n\t\t\t!this.menuRef.current.contains(e.target)\n\t\t) {\n\t\t\tthis.setState(\n\t\t\t\t{\n\t\t\t\t\tisVisible: false,\n\t\t\t\t\thighlightedActionIndex: -1\n\t\t\t\t},\n\t\t\t\t() => this.manageListeners()\n\t\t\t)\n\t\t}\n\t}\n\n\tpublic onKeyUp = (e: any) => {\n\t\tconst { actions } = this.props\n\t\tconst { highlightedActionIndex } = this.state\n\t\t// Down arrow\n\t\tif (e.keyCode === 40) {\n\t\t\t// Update the highlighted suggestion\n\t\t\tthis.setState(prevState => ({\n\t\t\t\thighlightedActionIndex:\n\t\t\t\t\tprevState.highlightedActionIndex === actions.length - 1\n\t\t\t\t\t\t? 0\n\t\t\t\t\t\t: prevState.highlightedActionIndex + 1\n\t\t\t}))\n\t\t}\n\n\t\t// Up arrow\n\t\tif (e.keyCode === 38) {\n\t\t\t// Update the highlighted suggestion\n\t\t\tthis.setState(prevState => ({\n\t\t\t\thighlightedActionIndex:\n\t\t\t\t\tprevState.highlightedActionIndex <= 0\n\t\t\t\t\t\t? actions.length - 1\n\t\t\t\t\t\t: prevState.highlightedActionIndex - 1\n\t\t\t}))\n\t\t}\n\n\t\t// Escape\n\t\tif (e.key === 'Escape') {\n\t\t\tthis.setState(\n\t\t\t\t{\n\t\t\t\t\tisVisible: false,\n\t\t\t\t\thighlightedActionIndex: -1\n\t\t\t\t},\n\t\t\t\t() => this.manageListeners()\n\t\t\t)\n\t\t}\n\n\t\t// Enter\n\t\tif (e.keyCode === 13) {\n\t\t\t// Check if an action is highlighted\n\t\t\tif (highlightedActionIndex > -1) {\n\t\t\t\tconst handler = actions[highlightedActionIndex].onClick\n\t\t\t\t// Trigger it if so\n\t\t\t\tif (handler) {\n\t\t\t\t\thandler()\n\t\t\t\t}\n\t\t\t\tthis.toggleActionsVisibility()\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic manageListeners = () => {\n\t\tif (typeof document !== 'undefined') {\n\t\t\tif (this.state.isVisible) {\n\t\t\t\tdocument.addEventListener('click', this.handleClickOutside, false)\n\t\t\t\tdocument.addEventListener('keyup', this.onKeyUp, false)\n\t\t\t} else {\n\t\t\t\tdocument.removeEventListener('click', this.handleClickOutside, false)\n\t\t\t\tdocument.removeEventListener('keyup', this.onKeyUp, false)\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic getButtonPosition = () => {\n\t\tconst buttonPosition =\n\t\t\tthis.ref.current && this.ref.current.getBoundingClientRect()\n\n\t\tif (buttonPosition) {\n\t\t\treturn buttonPosition\n\t\t}\n\n\t\treturn null\n\t}\n\n\tpublic getMenuPosition = () => {\n\t\tconst buttonPosition = this.getButtonPosition()\n\t\tconst scrollTop =\n\t\t\ttypeof document !== 'undefined' &&\n\t\t\tdocument.documentElement &&\n\t\t\tdocument.documentElement.scrollTop\n\t\t\t\t? document.documentElement.scrollTop\n\t\t\t\t: 0\n\n\t\tif (!buttonPosition) {\n\t\t\treturn\n\t\t}\n\t\tconst menuPosition = {\n\t\t\tleft: buttonPosition.left,\n\t\t\ttop: buttonPosition.bottom + scrollTop + 2,\n\t\t\twidth: buttonPosition.width\n\t\t}\n\n\t\tthis.setState({\n\t\t\tmenuPosition\n\t\t})\n\t}\n\n\tpublic toggleActionsVisibility = () => {\n\t\tthis.getMenuPosition()\n\t\tthis.setState(\n\t\t\tprevState => ({\n\t\t\t\tisVisible: !prevState.isVisible,\n\t\t\t\thighlightedActionIndex: prevState.isVisible\n\t\t\t\t\t? -1\n\t\t\t\t\t: prevState.highlightedActionIndex\n\t\t\t}),\n\t\t\t() => this.manageListeners()\n\t\t)\n\t}\n\n\tpublic handleAction(action: IHWAction) {\n\t\tconst { onAction } = this.props\n\n\t\tthis.setState(\n\t\t\t{\n\t\t\t\tisVisible: false,\n\t\t\t\thighlightedActionIndex: -1\n\t\t\t},\n\t\t\t() => onAction && onAction(action)\n\t\t)\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst {\n\t\t\tdefaultAction,\n\t\t\tactions,\n\t\t\tkind,\n\t\t\tisFullWidth,\n\t\t\tisSmall,\n\t\t\tusePortal\n\t\t} = this.props\n\t\tconst { isVisible, menuPosition, highlightedActionIndex } = this.state\n\n\t\tif (!actions || (actions && actions.length === 0)) {\n\t\t\t// TODO: Warn dev if not in production environment; they might wanna use a different component\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tisFullWidth={isFullWidth}\n\t\t\t\t\tisSmall={isSmall}\n\t\t\t\t\t{...defaultAction}\n\t\t\t\t\tkind={defaultAction.kind || kind}\n\t\t\t\t\tonAction={action => this.handleAction(action)}\n\t\t\t\t/>\n\t\t\t)\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx('split-button', {\n\t\t\t\t\t'split-button--is-full-width': isFullWidth\n\t\t\t\t})}\n\t\t\t\tref={this.ref}\n\t\t\t>\n\t\t\t\t<div className=\"split-button__button\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisSmall={isSmall}\n\t\t\t\t\t\tclassName=\"split-button__default\"\n\t\t\t\t\t\t{...defaultAction}\n\t\t\t\t\t\tkind={defaultAction.kind || kind}\n\t\t\t\t\t\tisFullWidth={false}\n\t\t\t\t\t\tonAction={action => this.handleAction(action)}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisSmall={isSmall}\n\t\t\t\t\t\tclassName=\"split-button__actions\"\n\t\t\t\t\t\ticon={{ name: 'keyboard_arrow_down' }}\n\t\t\t\t\t\tkind={kind}\n\t\t\t\t\t\tonClick={this.toggleActionsVisibility}\n\t\t\t\t\t\tonAction={action => this.handleAction(action)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{isVisible && (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{typeof document !== 'undefined' && document.body && usePortal ? (\n\t\t\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tref={this.menuRef}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\ttop: `${menuPosition.top}px`,\n\t\t\t\t\t\t\t\t\t\tleft: `${menuPosition.left}px`,\n\t\t\t\t\t\t\t\t\t\twidth: `${menuPosition.width}px`\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\t\t<ButtonGroup\n\t\t\t\t\t\t\t\t\t\tkind={IHWButtonGroupKind.Floating}\n\t\t\t\t\t\t\t\t\t\tisFullWidth\n\t\t\t\t\t\t\t\t\t\tactions={actions}\n\t\t\t\t\t\t\t\t\t\thighlightedIndex={highlightedActionIndex}\n\t\t\t\t\t\t\t\t\t\tonAction={action => this.handleAction(action)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>,\n\t\t\t\t\t\t\t\tdocument.body\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tref={this.menuRef}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\t\ttop: '2px',\n\t\t\t\t\t\t\t\t\tleft: '0',\n\t\t\t\t\t\t\t\t\twidth: `${menuPosition.width}px`\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\t\t\tkind={IHWButtonGroupKind.Floating}\n\t\t\t\t\t\t\t\t\tisFullWidth\n\t\t\t\t\t\t\t\t\tactions={actions}\n\t\t\t\t\t\t\t\t\thighlightedIndex={highlightedActionIndex}\n\t\t\t\t\t\t\t\t\tonAction={action => this.handleAction(action)}\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)}\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":"SplitButton.js"}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _Subheading = _interopRequireDefault(require("./Subheading"));
+
+var stories = (0, _react2.storiesOf)('Subheading', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Subheading', function () {
+  return _react["default"].createElement(_Subheading["default"], null, (0, _react3.text)('children', 'Hello, world'));
+});
+//# sourceMappingURL=Subheading-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Subheading/Subheading-story.js"],"names":["stories","module","addDecorator","withKnobs","add"],"mappings":";;;;AACA;;AACA;;AACA;;AACA;;AACA,IAAMA,OAAO,GAAG,uBAAU,YAAV,EAAwBC,MAAxB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CAACI,GAAR,CAAY,YAAZ,EAA0B;AAAA,SACzB,gCAAC,sBAAD,QAAa,kBAAK,UAAL,EAAiB,cAAjB,CAAb,CADyB;AAAA,CAA1B","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text } from '@storybook/addon-knobs/react'\nimport Subheading from './Subheading'\nconst stories = storiesOf('Subheading', module)\n\nstories.addDecorator(withKnobs)\n\nstories.add('Subheading', () => (\n\t<Subheading>{text('children', 'Hello, world')}</Subheading>\n))\n"],"file":"Subheading-story.js"}

package/lib/components/Subheading/Subheading.js

@@ -0,0 +1,40 @@
+"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 _Heading = require("../Heading/Heading");
+
+var Subheading = function Subheading(props) {
+  var children = props.children,
+      className = props.className,
+      Element = props.element;
+
+  if (typeof children === 'string') {
+    return _react["default"].createElement(Element, {
+      className: (0, _classnames["default"])('subheading', className),
+      dangerouslySetInnerHTML: {
+        __html: children
+      }
+    });
+  }
+
+  return _react["default"].createElement(Element, {
+    className: (0, _classnames["default"])('subheading', className)
+  }, children);
+};
+
+Subheading.defaultProps = {
+  element: 'h2'
+};
+var _default = Subheading;
+exports["default"] = _default;
+//# sourceMappingURL=Subheading.js.map

package/lib/components/Subheading/Subheading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Subheading/Subheading.js"],"names":["Subheading","props","children","className","Element","element","__html","defaultProps"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AAaA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAyB;AAAA,MACnCC,QADmC,GACOD,KADP,CACnCC,QADmC;AAAA,MACzBC,SADyB,GACOF,KADP,CACzBE,SADyB;AAAA,MACLC,OADK,GACOH,KADP,CACdI,OADc;;AAE3C,MAAI,OAAOH,QAAP,KAAoB,QAAxB,EAAkC;AACjC,WACC,gCAAC,OAAD;AACC,MAAA,SAAS,EAAE,4BAAG,YAAH,EAAiBC,SAAjB,CADZ;AAEC,MAAA,uBAAuB,EAAE;AAAEG,QAAAA,MAAM,EAAEJ;AAAV;AAF1B,MADD;AAMA;;AACD,SAAO,gCAAC,OAAD;AAAS,IAAA,SAAS,EAAE,4BAAG,YAAH,EAAiBC,SAAjB;AAApB,KAAkDD,QAAlD,CAAP;AACA,CAXD;;AAaAF,UAAU,CAACO,YAAX,GAA0B;AACzBF,EAAAA,OAAO,EAAE;AADgB,CAA1B;eAIeL,U","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\nimport { HeadingTagName } from '../Heading/Heading'\n\nexport type TextProps = {\n\t/** Contents of the component. */\n\tchildren: Node,\n\n\t/** Class name for the component */\n\tclassName?: string,\n\n\t/** Wrapping element to use for the subheading */\n\telement?: HeadingTagName\n}\n\nconst Subheading = (props: HeadingProps) => {\n\tconst { children, className, element: Element } = props\n\tif (typeof children === 'string') {\n\t\treturn (\n\t\t\t<Element\n\t\t\t\tclassName={cx('subheading', className)}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: children }}\n\t\t\t/>\n\t\t)\n\t}\n\treturn <Element className={cx('subheading', className)}>{children}</Element>\n}\n\nSubheading.defaultProps = {\n\telement: 'h2'\n}\n\nexport default Subheading\n"],"file":"Subheading.js"}