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

package/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="lodash" />
+import { Component } from 'react';
+import { ITabProps } from './components/Tab/Tab';
+export interface ITabsProps {
+    /** The tabs for this group */
+    tabs: Array<ITabProps>;
+    /** Adds horizontal Padding */
+    isPadded?: boolean;
+    /** Set false to prevent truncation behavior */
+    isTruncatable?: boolean;
+    /** Optional class to add to the tab group */
+    className?: string;
+}
+export interface ITabsState {
+    activeTabIndex: number;
+    contextTabWidth: number | null;
+    disclosureTabWidth: number[];
+    hiddenTabIndices: number[];
+    isContextTabVisible: boolean;
+    tabWidths: number[];
+}
+export default class Tabs extends Component<ITabsProps, ITabsState> {
+    static defaultProps: {
+        isPadded: boolean;
+        isTruncatable: boolean;
+        className: string;
+    };
+    state: ITabsState;
+    tabGroup: any;
+    contextTab: any;
+    debouncedResize: (() => void) & import("lodash").Cancelable;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleWindowResize: () => void;
+    handleInitialMeasurement: () => void;
+    handleMeasurement: () => void;
+    setRef: (ref: any) => void;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AACA,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAIlD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAGhD,MAAM,WAAW,UAAU;IAC1B,8BAA8B;IAC9B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IAEtB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,UAAU;IAC1B,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,kBAAkB,EAAE,MAAM,EAAE,CAAA;IAC5B,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,SAAS,EAAE,MAAM,EAAE,CAAA;CACnB;AAOD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC;IAClE,MAAM,CAAC,YAAY;;;;MAIlB;IAED,KAAK,EAAE,UAAU,CAOhB;IAED,QAAQ,EAAE,GAAG,CAAA;IACb,UAAU,EAAE,GAAG,CAAA;IAEf,eAAe,6CAAiD;IAEhE,iBAAiB;IAUjB,oBAAoB;IAUpB,kBAAkB,aAEjB;IAED,wBAAwB,aAwBvB;IAED,iBAAiB,aA+BhB;IAED,MAAM,qBAGL;IAED,MAAM;CAoDN"}

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,244 @@
+"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 _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 _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 _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Tab = _interopRequireDefault(require("./components/Tab/Tab"));
+
+var _ContextMenu = _interopRequireDefault(require("../ContextMenu/ContextMenu"));
+
+// TODO: Figure out how to split tabs up based on what's visible in the viewport
+var getActiveTabIndex = function getActiveTabIndex(tabs) {
+  var activeTabIndex = tabs.findIndex(function (tab) {
+    return tab.isCurrent;
+  });
+  return activeTabIndex;
+};
+
+var Tabs =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Tabs, _Component);
+
+  function Tabs() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Tabs);
+
+    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"])(Tabs)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      activeTabIndex: getActiveTabIndex(_this.props.tabs),
+      contextTabWidth: null,
+      disclosureTabWidth: [],
+      hiddenTabIndices: [],
+      isContextTabVisible: true,
+      tabWidths: []
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "debouncedResize", (0, _debounce["default"])(function () {
+      return _this.handleWindowResize();
+    }, 500));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleWindowResize", function () {
+      _this.handleMeasurement();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInitialMeasurement", function () {
+      // Purpose: get the initial measurements for child tabs
+      if (_this.tabGroup) {
+        var wrapper = _this.tabGroup;
+        var wrapperWidth = wrapper.offsetWidth;
+        var contextTabWidth = _this.contextTab.offsetWidth;
+        var children = wrapper.childNodes;
+        var childrenArray = Array.prototype.slice.call(children);
+        var tabWidths = [];
+        childrenArray.forEach(function (child) {
+          if (!child.classList.contains('context-tab')) {
+            tabWidths.push(child.offsetWidth);
+          }
+        });
+        var totalTabsWidth = tabWidths.reduce(function (a, b) {
+          return a + b;
+        }, 0);
+
+        _this.setState({
+          tabWidths: tabWidths,
+          contextTabWidth: contextTabWidth,
+          isContextTabVisible: totalTabsWidth > wrapperWidth
+        }, function () {
+          return _this.handleMeasurement();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMeasurement", function () {
+      // TODO: Make this fire when sidebars change
+      if (_this.tabGroup) {
+        var wrapper = _this.tabGroup;
+        var wrapperWidth = wrapper.offsetWidth;
+        var contextTabWidth = _this.contextTab.offsetWidth;
+        var tabs = _this.props.tabs;
+        var _this$state = _this.state,
+            tabWidths = _this$state.tabWidths,
+            activeTabIndex = _this$state.activeTabIndex;
+        var totalTabsWidth = tabWidths.reduce(function (a, b) {
+          return a + b;
+        }, 0);
+        var hiddenTabIndices = [];
+        var width = activeTabIndex > -1 ? tabWidths[activeTabIndex] : tabWidths[0];
+
+        if (wrapperWidth > totalTabsWidth) {
+          _this.setState({
+            hiddenTabIndices: [],
+            isContextTabVisible: false
+          });
+        } else {
+          tabs.forEach(function (tab, idx) {
+            if (width + contextTabWidth > wrapperWidth) {
+              hiddenTabIndices.push(idx);
+            }
+
+            width += tabWidths[idx + 1];
+          });
+
+          _this.setState({
+            hiddenTabIndices: hiddenTabIndices,
+            isContextTabVisible: true
+          });
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setRef", function (ref) {
+      _this.tabGroup = ref;
+      setTimeout(function () {
+        return _this.handleInitialMeasurement();
+      }, 250);
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Tabs, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var isTruncatable = this.props.isTruncatable;
+
+      if (isTruncatable) {
+        if (typeof window !== 'undefined') {
+          window.addEventListener('resize', this.debouncedResize, false);
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var isTruncatable = this.props.isTruncatable;
+
+      if (isTruncatable) {
+        if (typeof window !== 'undefined') {
+          window.removeEventListener('resize', this.debouncedResize, false);
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          tabs = _this$props.tabs,
+          isPadded = _this$props.isPadded,
+          isTruncatable = _this$props.isTruncatable,
+          className = _this$props.className;
+      var _this$state2 = this.state,
+          hiddenTabIndices = _this$state2.hiddenTabIndices,
+          isContextTabVisible = _this$state2.isContextTabVisible,
+          activeTabIndex = _this$state2.activeTabIndex;
+      var hiddenTabs = [];
+      var activeTab = tabs.find(function (tab) {
+        return tab.isCurrent;
+      });
+
+      if (hiddenTabIndices.length > 0) {
+        hiddenTabIndices.forEach(function (idx) {
+          if (idx !== activeTabIndex) {
+            hiddenTabs.push(tabs[idx]);
+          }
+        });
+      }
+
+      var tabsToShow = (0, _toConsumableArray2["default"])(tabs);
+
+      if (activeTabIndex > -1 && hiddenTabIndices.length > 0 && hiddenTabIndices.indexOf(activeTabIndex) > -1) {
+        tabsToShow.splice(activeTabIndex, 1);
+        tabsToShow = [tabs[activeTabIndex]].concat((0, _toConsumableArray2["default"])(tabsToShow));
+      }
+
+      return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement("ul", {
+        ref: this.setRef,
+        className: (0, _classnames["default"])('tab-group', className, {
+          'tab-group--is-padded': isPadded,
+          'tab-group--spacing-even': hiddenTabIndices.length > 0
+        })
+      }, tabsToShow.map(function (tab, idx) {
+        if (hiddenTabIndices.indexOf(idx) > -1) {
+          return null;
+        }
+
+        return _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({
+          key: tab.text
+        }, tab));
+      }), isTruncatable && _react["default"].createElement("li", {
+        ref: function ref(_ref) {
+          return _this2.contextTab = _ref;
+        },
+        className: (0, _classnames["default"])('tab context-tab', {
+          'context-tab--is-visible': isContextTabVisible
+        })
+      }, _react["default"].createElement(_ContextMenu["default"], {
+        actions: hiddenTabs,
+        closeOnSelectAction: true
+      }))), activeTab && activeTab.panel);
+    }
+  }]);
+  return Tabs;
+}(_react.Component);
+
+exports["default"] = Tabs;
+(0, _defineProperty2["default"])(Tabs, "defaultProps", {
+  isPadded: true,
+  isTruncatable: true,
+  className: ''
+});
+//# sourceMappingURL=Tabs.js.map

package/lib/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"names":["getActiveTabIndex","tabs","activeTabIndex","findIndex","tab","isCurrent","Tabs","props","contextTabWidth","disclosureTabWidth","hiddenTabIndices","isContextTabVisible","tabWidths","handleWindowResize","handleMeasurement","tabGroup","wrapper","wrapperWidth","offsetWidth","contextTab","children","childNodes","childrenArray","Array","prototype","slice","call","forEach","child","classList","contains","push","totalTabsWidth","reduce","a","b","setState","state","width","idx","ref","setTimeout","handleInitialMeasurement","isTruncatable","window","addEventListener","debouncedResize","removeEventListener","isPadded","className","hiddenTabs","activeTab","find","length","tabsToShow","indexOf","splice","setRef","map","text","panel","Component"],"mappings":"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","sourcesContent":["// TODO: Figure out how to split tabs up based on what's visible in the viewport\nimport React, { Component, Fragment } from 'react'\nimport debounce from 'lodash/debounce'\nimport cx from 'classnames'\nimport Tab from './components/Tab/Tab'\nimport { ITabProps } from './components/Tab/Tab'\nimport ContextMenu from '../ContextMenu/ContextMenu'\n\nexport interface ITabsProps {\n\t/** The tabs for this group */\n\ttabs: Array<ITabProps>\n\n\t/** Adds horizontal Padding */\n\tisPadded?: boolean\n\n\t/** Set false to prevent truncation behavior */\n\tisTruncatable?: boolean\n\n\t/** Optional class to add to the tab group */\n\tclassName?: string\n}\n\nexport interface ITabsState {\n\tactiveTabIndex: number\n\tcontextTabWidth: number | null\n\tdisclosureTabWidth: number[]\n\thiddenTabIndices: number[]\n\tisContextTabVisible: boolean\n\ttabWidths: number[]\n}\n\nconst getActiveTabIndex = (tabs: Array<ITabProps>) => {\n\tconst activeTabIndex = tabs.findIndex(tab => tab.isCurrent)\n\treturn activeTabIndex\n}\n\nexport default class Tabs extends Component<ITabsProps, ITabsState> {\n\tstatic defaultProps = {\n\t\tisPadded: true,\n\t\tisTruncatable: true,\n\t\tclassName: ''\n\t}\n\n\tstate: ITabsState = {\n\t\tactiveTabIndex: getActiveTabIndex(this.props.tabs),\n\t\tcontextTabWidth: null,\n\t\tdisclosureTabWidth: [],\n\t\thiddenTabIndices: [],\n\t\tisContextTabVisible: true,\n\t\ttabWidths: []\n\t}\n\n\ttabGroup: any\n\tcontextTab: any\n\n\tdebouncedResize = debounce(() => this.handleWindowResize(), 500)\n\n\tcomponentDidMount() {\n\t\tconst { isTruncatable } = this.props\n\n\t\tif (isTruncatable) {\n\t\t\tif (typeof window !== 'undefined') {\n\t\t\t\twindow.addEventListener('resize', this.debouncedResize, false)\n\t\t\t}\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\tconst { isTruncatable } = this.props\n\n\t\tif (isTruncatable) {\n\t\t\tif (typeof window !== 'undefined') {\n\t\t\t\twindow.removeEventListener('resize', this.debouncedResize, false)\n\t\t\t}\n\t\t}\n\t}\n\n\thandleWindowResize = () => {\n\t\tthis.handleMeasurement()\n\t}\n\n\thandleInitialMeasurement = () => {\n\t\t// Purpose: get the initial measurements for child tabs\n\t\tif (this.tabGroup) {\n\t\t\tconst wrapper = this.tabGroup\n\t\t\tconst wrapperWidth = wrapper.offsetWidth\n\t\t\tconst contextTabWidth = this.contextTab.offsetWidth\n\t\t\tconst children = wrapper.childNodes\n\t\t\tconst childrenArray = Array.prototype.slice.call(children)\n\t\t\tconst tabWidths: number[] = []\n\t\t\tchildrenArray.forEach(child => {\n\t\t\t\tif (!child.classList.contains('context-tab')) {\n\t\t\t\t\ttabWidths.push(child.offsetWidth)\n\t\t\t\t}\n\t\t\t})\n\t\t\tconst totalTabsWidth = tabWidths.reduce((a, b) => a + b, 0)\n\t\t\tthis.setState(\n\t\t\t\t{\n\t\t\t\t\ttabWidths,\n\t\t\t\t\tcontextTabWidth,\n\t\t\t\t\tisContextTabVisible: totalTabsWidth > wrapperWidth\n\t\t\t\t},\n\t\t\t\t() => this.handleMeasurement()\n\t\t\t)\n\t\t}\n\t}\n\n\thandleMeasurement = () => {\n\t\t// TODO: Make this fire when sidebars change\n\t\tif (this.tabGroup) {\n\t\t\tconst wrapper = this.tabGroup\n\t\t\tconst wrapperWidth = wrapper.offsetWidth\n\t\t\tconst contextTabWidth = this.contextTab.offsetWidth\n\t\t\tconst { tabs } = this.props\n\t\t\tconst { tabWidths, activeTabIndex } = this.state\n\t\t\tconst totalTabsWidth = tabWidths.reduce((a, b) => a + b, 0)\n\t\t\tconst hiddenTabIndices: number[] = []\n\t\t\tlet width: number =\n\t\t\t\tactiveTabIndex > -1 ? tabWidths[activeTabIndex] : tabWidths[0]\n\n\t\t\tif (wrapperWidth > totalTabsWidth) {\n\t\t\t\tthis.setState({\n\t\t\t\t\thiddenTabIndices: [],\n\t\t\t\t\tisContextTabVisible: false\n\t\t\t\t})\n\t\t\t} else {\n\t\t\t\ttabs.forEach((tab, idx) => {\n\t\t\t\t\tif (width + contextTabWidth > wrapperWidth) {\n\t\t\t\t\t\thiddenTabIndices.push(idx)\n\t\t\t\t\t}\n\t\t\t\t\twidth += tabWidths[idx + 1]\n\t\t\t\t})\n\t\t\t\tthis.setState({\n\t\t\t\t\thiddenTabIndices,\n\t\t\t\t\tisContextTabVisible: true\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\tsetRef = ref => {\n\t\tthis.tabGroup = ref\n\t\tsetTimeout(() => this.handleInitialMeasurement(), 250)\n\t}\n\n\trender() {\n\t\tconst { tabs, isPadded, isTruncatable, className } = this.props\n\t\tconst { hiddenTabIndices, isContextTabVisible, activeTabIndex } = this.state\n\t\tconst hiddenTabs: ITabProps[] = []\n\t\tconst activeTab = tabs.find(tab => tab.isCurrent)\n\t\tif (hiddenTabIndices.length > 0) {\n\t\t\thiddenTabIndices.forEach(idx => {\n\t\t\t\tif (idx !== activeTabIndex) {\n\t\t\t\t\thiddenTabs.push(tabs[idx])\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t\tlet tabsToShow = [...tabs]\n\t\tif (\n\t\t\tactiveTabIndex > -1 &&\n\t\t\thiddenTabIndices.length > 0 &&\n\t\t\thiddenTabIndices.indexOf(activeTabIndex) > -1\n\t\t) {\n\t\t\ttabsToShow.splice(activeTabIndex, 1)\n\t\t\ttabsToShow = [tabs[activeTabIndex], ...tabsToShow]\n\t\t}\n\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t<ul\n\t\t\t\t\tref={this.setRef}\n\t\t\t\t\tclassName={cx('tab-group', className, {\n\t\t\t\t\t\t'tab-group--is-padded': isPadded,\n\t\t\t\t\t\t'tab-group--spacing-even': hiddenTabIndices.length > 0\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{tabsToShow.map((tab, idx) => {\n\t\t\t\t\t\tif (hiddenTabIndices.indexOf(idx) > -1) {\n\t\t\t\t\t\t\treturn null\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn <Tab key={tab.text} {...tab} />\n\t\t\t\t\t})}\n\t\t\t\t\t{isTruncatable && (\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tref={ref => (this.contextTab = ref)}\n\t\t\t\t\t\t\tclassName={cx('tab context-tab', {\n\t\t\t\t\t\t\t\t'context-tab--is-visible': isContextTabVisible\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ContextMenu actions={hiddenTabs} closeOnSelectAction />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t</ul>\n\t\t\t\t{activeTab && activeTab.panel}\n\t\t\t</Fragment>\n\t\t)\n\t}\n}\n"],"file":"Tabs.js"}

package/lib/components/Tabs/components/Tab/Tab.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { IIconProps } from '../../../Icon/Icon';
+export interface ITabProps {
+    /** Tab text */
+    text: string;
+    /** Tab icon */
+    icon?: IIconProps | null;
+    /** Method used to render anchor, if isAnchor is true */
+    AnchorComponent?: Node;
+    /** Set true if this is the current tab */
+    isCurrent?: boolean;
+    /** Panel to show when this tab is current */
+    panel?: Record<string, any>;
+    /** Optional class */
+    className?: string;
+}
+declare const Tab: {
+    ({ AnchorComponent, text, icon, isCurrent, className, ...rest }: ITabProps): JSX.Element;
+    defaultProps: {
+        isCurrent: boolean;
+        panel: null;
+        icon: string;
+    };
+};
+export default Tab;
+//# sourceMappingURL=Tab.d.ts.map

package/lib/components/Tabs/components/Tab/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,WAAW,SAAS;IACzB,eAAe;IACf,IAAI,EAAE,MAAM,CAAA;IAEZ,eAAe;IACf,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAExB,wDAAwD;IACxD,eAAe,CAAC,EAAE,IAAI,CAAA;IAEtB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE3B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,GAAG;;;;;;;CAqBR,CAAA;AAQD,eAAe,GAAG,CAAA"}

package/lib/components/Tabs/components/Tab/Tab.js

@@ -0,0 +1,46 @@
+"use strict";
+
+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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var Tab = function Tab(_ref) {
+  var AnchorComponent = _ref.AnchorComponent,
+      text = _ref.text,
+      icon = _ref.icon,
+      isCurrent = _ref.isCurrent,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2["default"])(_ref, ["AnchorComponent", "text", "icon", "isCurrent", "className"]);
+  return _react["default"].createElement("li", {
+    className: (0, _classnames["default"])('tab', className)
+  }, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    AnchorComponent: AnchorComponent,
+    className: (0, _classnames["default"])('tab__inner', {
+      'tab--is-current': isCurrent
+    }),
+    text: text,
+    icon: icon
+  }, rest)));
+};
+
+Tab.defaultProps = {
+  isCurrent: false,
+  panel: null,
+  icon: ''
+};
+var _default = Tab;
+exports["default"] = _default;
+//# sourceMappingURL=Tab.js.map

package/lib/components/Tabs/components/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"names":["Tab","AnchorComponent","text","icon","isCurrent","className","rest","defaultProps","panel"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAuBA,IAAMA,GAAG,GAAG,SAANA,GAAM,OAOK;AAAA,MANhBC,eAMgB,QANhBA,eAMgB;AAAA,MALhBC,IAKgB,QALhBA,IAKgB;AAAA,MAJhBC,IAIgB,QAJhBA,IAIgB;AAAA,MAHhBC,SAGgB,QAHhBA,SAGgB;AAAA,MAFhBC,SAEgB,QAFhBA,SAEgB;AAAA,MADbC,IACa;AAChB,SACC;AAAI,IAAA,SAAS,EAAE,4BAAG,KAAH,EAAUD,SAAV;AAAf,KACC,gCAAC,kBAAD;AACC,IAAA,eAAe,EAAEJ,eADlB;AAEC,IAAA,SAAS,EAAE,4BAAG,YAAH,EAAiB;AAC3B,yBAAmBG;AADQ,KAAjB,CAFZ;AAKC,IAAA,IAAI,EAAEF,IALP;AAMC,IAAA,IAAI,EAAEC;AANP,KAOKG,IAPL,EADD,CADD;AAaA,CArBD;;AAuBAN,GAAG,CAACO,YAAJ,GAAmB;AAClBH,EAAAA,SAAS,EAAE,KADO;AAElBI,EAAAA,KAAK,EAAE,IAFW;AAGlBL,EAAAA,IAAI,EAAE;AAHY,CAAnB;eAMeH,G","sourcesContent":["import React from 'react'\nimport cx from 'classnames'\nimport Button from '../../../Button/Button'\nimport { IIconProps } from '../../../Icon/Icon'\n\nexport interface ITabProps {\n\t/** Tab text */\n\ttext: string\n\n\t/** Tab icon */\n\ticon?: IIconProps | null\n\n\t/** Method used to render anchor, if isAnchor is true */\n\tAnchorComponent?: Node\n\n\t/** Set true if this is the current tab */\n\tisCurrent?: boolean\n\n\t/** Panel to show when this tab is current */\n\tpanel?: Record<string, any>\n\n\t/** Optional class */\n\tclassName?: string\n}\n\nconst Tab = ({\n\tAnchorComponent,\n\ttext,\n\ticon,\n\tisCurrent,\n\tclassName,\n\t...rest\n}: ITabProps) => {\n\treturn (\n\t\t<li className={cx('tab', className)}>\n\t\t\t<Button\n\t\t\t\tAnchorComponent={AnchorComponent}\n\t\t\t\tclassName={cx('tab__inner', {\n\t\t\t\t\t'tab--is-current': isCurrent\n\t\t\t\t})}\n\t\t\t\ttext={text}\n\t\t\t\ticon={icon}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</li>\n\t)\n}\n\nTab.defaultProps = {\n\tisCurrent: false,\n\tpanel: null,\n\ticon: ''\n}\n\nexport default Tab\n"],"file":"Tab.js"}

package/lib/components/Text/Text-story.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Text-story.d.ts.map

package/lib/components/Text/Text-story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text-story.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text-story.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _Text = _interopRequireWildcard(require("./Text"));
+
+var stories = (0, _react2.storiesOf)('Text', module);
+stories.addDecorator(_addonKnobs.withKnobs);
+stories.add('Text', function () {
+  return _react["default"].createElement(_Text["default"], {
+    isInline: (0, _addonKnobs["boolean"])('Is Inline', false),
+    context: (0, _addonKnobs.object)('Context', {
+      planet: {
+        text: 'World!',
+        type: 'style',
+        props: {
+          type: 'strong'
+        }
+      },
+      link: {
+        text: 'Click me!',
+        type: 'button',
+        props: {
+          href: 'https://www.spruce.ai'
+        }
+      }
+    })
+  }, (0, _addonKnobs.text)('children', 'Hello, {{planet}}! {{link}}'));
+}).add('Span', function () {
+  return _react["default"].createElement(_Text.Span, {
+    isInline: (0, _addonKnobs["boolean"])('is inline', true),
+    context: (0, _addonKnobs.object)('Context', {
+      planet: {
+        text: 'World!',
+        type: 'style',
+        props: {
+          type: 'strong'
+        }
+      }
+    })
+  }, (0, _addonKnobs.text)('children', 'Hello, {{planet}}!'));
+});
+//# sourceMappingURL=Text-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Text/Text-story.tsx"],"names":["stories","module","addDecorator","withKnobs","add","planet","text","type","props","link","href"],"mappings":";;;;;;AAAA;;AACA;;AACA;;AACA;;AACA,IAAMA,OAAO,GAAG,uBAAU,MAAV,EAAkBC,MAAlB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,qBAArB;AAEAH,OAAO,CACLI,GADF,CACM,MADN,EACc;AAAA,SACZ,gCAAC,gBAAD;AACC,IAAA,QAAQ,EAAE,4BAAQ,WAAR,EAAqB,KAArB,CADX;AAEC,IAAA,OAAO,EAAE,wBAAO,SAAP,EAAkB;AAC1BC,MAAAA,MAAM,EAAE;AACPC,QAAAA,IAAI,EAAE,QADC;AAEPC,QAAAA,IAAI,EAAE,OAFC;AAGPC,QAAAA,KAAK,EAAE;AAAED,UAAAA,IAAI,EAAE;AAAR;AAHA,OADkB;AAM1BE,MAAAA,IAAI,EAAE;AACLH,QAAAA,IAAI,EAAE,WADD;AAELC,QAAAA,IAAI,EAAE,QAFD;AAGLC,QAAAA,KAAK,EAAE;AAAEE,UAAAA,IAAI,EAAE;AAAR;AAHF;AANoB,KAAlB;AAFV,KAeE,sBAAK,UAAL,EAAiB,6BAAjB,CAfF,CADY;AAAA,CADd,EAoBEN,GApBF,CAoBM,MApBN,EAoBc;AAAA,SACZ,gCAAC,UAAD;AACC,IAAA,QAAQ,EAAE,4BAAQ,WAAR,EAAqB,IAArB,CADX;AAEC,IAAA,OAAO,EAAE,wBAAO,SAAP,EAAkB;AAC1BC,MAAAA,MAAM,EAAE;AACPC,QAAAA,IAAI,EAAE,QADC;AAEPC,QAAAA,IAAI,EAAE,OAFC;AAGPC,QAAAA,KAAK,EAAE;AAAED,UAAAA,IAAI,EAAE;AAAR;AAHA;AADkB,KAAlB;AAFV,KAUE,sBAAK,UAAL,EAAiB,oBAAjB,CAVF,CADY;AAAA,CApBd","sourcesContent":["import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text, boolean, object } from '@storybook/addon-knobs'\nimport Text, { Span } from './Text'\nconst stories = storiesOf('Text', module)\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Text', () => (\n\t\t<Text\n\t\t\tisInline={boolean('Is Inline', false)}\n\t\t\tcontext={object('Context', {\n\t\t\t\tplanet: {\n\t\t\t\t\ttext: 'World!',\n\t\t\t\t\ttype: 'style',\n\t\t\t\t\tprops: { type: 'strong' }\n\t\t\t\t},\n\t\t\t\tlink: {\n\t\t\t\t\ttext: 'Click me!',\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tprops: { href: 'https://www.spruce.ai' }\n\t\t\t\t}\n\t\t\t})}\n\t\t>\n\t\t\t{text('children', 'Hello, {{planet}}! {{link}}')}\n\t\t</Text>\n\t))\n\t.add('Span', () => (\n\t\t<Span\n\t\t\tisInline={boolean('is inline', true)}\n\t\t\tcontext={object('Context', {\n\t\t\t\tplanet: {\n\t\t\t\t\ttext: 'World!',\n\t\t\t\t\ttype: 'style',\n\t\t\t\t\tprops: { type: 'strong' }\n\t\t\t\t}\n\t\t\t})}\n\t\t>\n\t\t\t{text('children', 'Hello, {{planet}}!')}\n\t\t</Span>\n\t))\n"],"file":"Text-story.js"}

package/lib/components/Text/Text.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { IHWText } from '@sprucelabs/spruce-types';
+export interface ITextProps extends Omit<IHWText, 'id'> {
+    /** id for visual caching */
+    id?: string;
+    /** Contents of the component. */
+    children?: ReactNode;
+    /** Class name for the component */
+    className?: string;
+    /** Context allows basic templatizing of text strings for formatting/rich interaction purposes */
+    context?: Record<string, any>;
+    /** Is this an inline text element? */
+    isInline?: boolean;
+}
+declare const Text: React.StatelessComponent<ITextProps>;
+export declare const Span: React.StatelessComponent<ITextProps>;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAkB,MAAM,OAAO,CAAA;AAKlE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AA6DlD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;IACtD,4BAA4B;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,iGAAiG;IACjG,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE7B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAyB9C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAUrD,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/components/Text/Text.js

@@ -0,0 +1,123 @@
+"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.Span = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _TextStyle = _interopRequireDefault(require("../TextStyle/TextStyle"));
+
+// Components available for templating
+var TextComponentKey = {
+  style: _TextStyle["default"],
+  button: _Button["default"]
+};
+
+var renderText = function renderText(child) {
+  var _child$props = child.props,
+      children = _child$props.children,
+      rest = (0, _objectWithoutProperties2["default"])(_child$props, ["children"]);
+  var handlerProps = (0, _objectSpread2["default"])({
+    children: child.text || children
+  }, rest);
+  var Handler = child && child.type && TextComponentKey[child.type];
+
+  if (!Handler) {
+    return _react["default"].createElement(_react.Fragment, {
+      key: rest.key
+    }, children);
+  }
+
+  return typeof Handler === 'function' ? Handler((0, _objectSpread2["default"])({}, handlerProps)) : _react["default"].createElement(Handler, handlerProps);
+}; // Allows basic templating functionality on text strings
+
+
+var TemplateEngine = function TemplateEngine() {
+  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var re = /{{([^}}]+)?}}/g,
+      children = [];
+  var cursor = 0;
+
+  var add = function add(line, templateVar) {
+    if (line !== '') {
+      children.push({
+        props: {
+          element: 'span',
+          children: line.replace(/"/g, '\\"')
+        }
+      });
+    }
+
+    if (templateVar && context[templateVar]) {
+      children.push(context[templateVar]);
+    }
+  };
+
+  var matches = text.match(re);
+
+  if (matches) {
+    matches.forEach(function () {
+      var matched = re.exec(text);
+
+      if (matched) {
+        add(text.slice(cursor, matched.index), matched[1]);
+        cursor = matched.index + matched[0].length;
+      }
+    });
+  }
+
+  add(text.substr(cursor, text.length - cursor));
+  return children.map(renderText);
+};
+
+var Text = function Text(props) {
+  var originalChildren = props.children,
+      className = props.className,
+      context = props.context,
+      textProps = props.text,
+      isInline = props.isInline,
+      rest = (0, _objectWithoutProperties2["default"])(props, ["children", "className", "context", "text", "isInline"]);
+  var Element = isInline ? 'span' : 'p';
+  var children = originalChildren;
+  var text = children || textProps || context;
+
+  if (typeof text === 'string') {
+    children = TemplateEngine(text, context);
+  }
+
+  return _react["default"].createElement(Element, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('text', className)
+  }, rest), children);
+};
+
+var Span = function Span(props) {
+  var children = props.children,
+      className = props.className,
+      rest = (0, _objectWithoutProperties2["default"])(props, ["children", "className"]);
+  return _react["default"].createElement(Text, (0, _extends2["default"])({
+    isInline: true,
+    className: (0, _classnames["default"])('text', className)
+  }, rest), children);
+};
+
+exports.Span = Span;
+var _default = Text;
+exports["default"] = _default;
+//# sourceMappingURL=Text.js.map

package/lib/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"names":["TextComponentKey","style","TextStyle","button","Button","renderText","child","props","children","rest","handlerProps","text","Handler","type","key","TemplateEngine","context","re","cursor","add","line","templateVar","push","element","replace","matches","match","forEach","matched","exec","slice","index","length","substr","map","Text","originalChildren","className","textProps","isInline","Element","Span"],"mappings":"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","sourcesContent":["import React, { Fragment, ReactNode /*, HTMLProps*/ } from 'react'\nimport cx from 'classnames'\n\nimport Button from '../Button/Button'\nimport TextStyle from '../TextStyle/TextStyle'\nimport { IHWText } from '@sprucelabs/spruce-types'\n\n// Components available for templating\n\nconst TextComponentKey = {\n\tstyle: TextStyle,\n\tbutton: Button\n}\n\nconst renderText = (child): ReactNode => {\n\tconst { children, ...rest } = child.props\n\tconst handlerProps = { children: child.text || children, ...rest }\n\tconst Handler = child && child.type && TextComponentKey[child.type]\n\n\tif (!Handler) {\n\t\treturn <Fragment key={rest.key}>{children}</Fragment>\n\t}\n\n\treturn typeof Handler === 'function' ? (\n\t\tHandler({ ...handlerProps })\n\t) : (\n\t\t<Handler {...handlerProps} />\n\t)\n}\n\n// Allows basic templating functionality on text strings\nconst TemplateEngine = (text = '', context = {}): ReactNode[] => {\n\tconst re = /{{([^}}]+)?}}/g,\n\t\tchildren: Record<string, any>[] = []\n\n\tlet cursor = 0\n\n\tconst add = function(line: string, templateVar?: string): void {\n\t\tif (line !== '') {\n\t\t\tchildren.push({\n\t\t\t\tprops: { element: 'span', children: line.replace(/\"/g, '\\\\\"') }\n\t\t\t})\n\t\t}\n\t\tif (templateVar && context[templateVar]) {\n\t\t\tchildren.push(context[templateVar])\n\t\t}\n\t}\n\n\tconst matches = text.match(re)\n\n\tif (matches) {\n\t\tmatches.forEach(() => {\n\t\t\tconst matched = re.exec(text)\n\n\t\t\tif (matched) {\n\t\t\t\tadd(text.slice(cursor, matched.index), matched[1])\n\t\t\t\tcursor = matched.index + matched[0].length\n\t\t\t}\n\t\t})\n\t}\n\n\tadd(text.substr(cursor, text.length - cursor))\n\n\treturn children.map(renderText)\n}\n\nexport interface ITextProps extends Omit<IHWText, 'id'> {\n\t/** id for visual caching */\n\tid?: string\n\n\t/** Contents of the component. */\n\tchildren?: ReactNode\n\n\t/** Class name for the component */\n\tclassName?: string\n\n\t/** Context allows basic templatizing of text strings for formatting/rich interaction purposes */\n\tcontext?: Record<string, any>\n\n\t/** Is this an inline text element? */\n\tisInline?: boolean\n}\n\nconst Text: React.StatelessComponent<ITextProps> = (\n\tprops: ITextProps\n): React.ReactElement => {\n\tconst {\n\t\tchildren: originalChildren,\n\t\tclassName,\n\t\tcontext,\n\t\ttext: textProps,\n\t\tisInline,\n\t\t...rest\n\t} = props\n\tconst Element: any = isInline ? 'span' : 'p'\n\tlet children = originalChildren\n\n\tconst text = children || textProps || context\n\n\tif (typeof text === 'string') {\n\t\tchildren = TemplateEngine(text, context)\n\t}\n\n\treturn (\n\t\t<Element className={cx('text', className)} {...rest}>\n\t\t\t{children}\n\t\t</Element>\n\t)\n}\n\nexport const Span: React.StatelessComponent<ITextProps> = (\n\tprops: ITextProps\n): React.ReactElement => {\n\tconst { children, className, ...rest } = props\n\n\treturn (\n\t\t<Text isInline={true} className={cx('text', className)} {...rest}>\n\t\t\t{children}\n\t\t</Text>\n\t)\n}\n\nexport default Text\n"],"file":"Text.js"}