@elliemae/ds-global-header 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/GlobalHeader.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var propTypes = require('./propTypes.js');
+var GlobalHeaderTitle = require('./components/Title/GlobalHeaderTitle.js');
+var GlobalHeaderBreadcrumb = require('./components/Breadcrumb/GlobalHeaderBreadcrumb.js');
+var GlobalHeaderToolbar = require('./components/Toolbar/GlobalHeaderToolbar.js');
+var GlobalHeaderContext = require('./GlobalHeaderContext.js');
+var useGlobalHeader = require('./config/useGlobalHeader.js');
+var defaultProps = require('./defaultProps.js');
+var GlobalHeaderContainer = require('./GlobalHeaderContainer.js');
+var useValidateProps = require('./config/useValidateProps.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _GlobalHeaderTitle, _GlobalHeaderBreadcru, _GlobalHeaderToolbar;
+
+const GlobalHeader = props => {
+  useValidateProps.useValidateProps(props);
+  const ctx = useGlobalHeader.useGlobalHeader(props);
+  return /*#__PURE__*/_jsx__default["default"](GlobalHeaderContainer.GlobalHeaderContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](GlobalHeaderContext.GlobalHeaderContext.Provider, {
+    value: ctx
+  }, void 0, _GlobalHeaderTitle || (_GlobalHeaderTitle = /*#__PURE__*/_jsx__default["default"](GlobalHeaderTitle.GlobalHeaderTitle, {})), _GlobalHeaderBreadcru || (_GlobalHeaderBreadcru = /*#__PURE__*/_jsx__default["default"](GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})), _GlobalHeaderToolbar || (_GlobalHeaderToolbar = /*#__PURE__*/_jsx__default["default"](GlobalHeaderToolbar.GlobalHeaderToolbar, {}))));
+};
+
+GlobalHeader.defaultProps = defaultProps.defaultProps;
+const GlobalHeaderWithSchema = reactDesc.describe(GlobalHeader);
+GlobalHeaderWithSchema.propTypes = propTypes.globalHeaderProps;
+
+exports.GlobalHeader = GlobalHeader;
+exports.GlobalHeaderWithSchema = GlobalHeaderWithSchema;

package/cjs/GlobalHeaderContainer.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styles = require('./styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const GlobalHeaderContainer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("header", {
+    "data-testid": "ds-global-header"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Wrapper, {
+    cols: ['auto', '1fr', 'auto']
+  }, void 0, children));
+};
+
+exports.GlobalHeaderContainer = GlobalHeaderContainer;

package/cjs/GlobalHeaderContext.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var defaultProps = require('./defaultProps.js');
+
+const noop = () => null;
+
+const defaultContext = {
+  props: defaultProps.defaultProps,
+  showIconOnly: false,
+  setShowIconOnly: noop,
+  instanceUID: '',
+  globalHeaderToolbarGrid: [],
+  globalHeaderBreadcrumbGrid: []
+};
+const GlobalHeaderContext = /*#__PURE__*/React.createContext(defaultContext);
+
+exports.GlobalHeaderContext = GlobalHeaderContext;

package/cjs/GlobalHeaderTypes.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var styles = require('./styles.js');
+var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
+var PureBreadcrumb = require('./PureBreadcrumb.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const _excluded = ["label"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const GlobalHeaderBreadcrumb = () => {
+  const {
+    props: {
+      breadcrumb
+    },
+    instanceUID,
+    showIconOnly,
+    setShowIconOnly,
+    globalHeaderBreadcrumbGrid
+  } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
+  const breakpoint = React.useRef(null);
+  const flexRegion = React.useRef(null);
+  React.useEffect(() => {
+    const evaluateShowIconOnly = () => {
+      if (flexRegion && flexRegion.current && (flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
+        setShowIconOnly(true);
+        breakpoint.current = window.innerWidth;
+      } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
+        setShowIconOnly(false);
+        breakpoint.current = null;
+      }
+    };
+
+    evaluateShowIconOnly();
+    window.addEventListener('resize', evaluateShowIconOnly);
+    return () => window.removeEventListener('resize', evaluateShowIconOnly);
+  }, [breakpoint, flexRegion, setShowIconOnly]);
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    "aria-label": "breadcrumbs",
+    cols: globalHeaderBreadcrumbGrid,
+    role: "navigation"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Pipe, {
+    showIconOnly: showIconOnly
+  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
+    const {
+      label
+    } = item,
+          rest = _objectWithoutProperties__default["default"](item, _excluded);
+
+    return /*#__PURE__*/jsxRuntime.jsx(PureBreadcrumb.PureBreadcrumb, _objectSpread({
+      label: label,
+      length: breadcrumb.length
+    }, rest), "".concat(instanceUID, "-breadcrumb-item-").concat(label));
+  }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    id: "global-header-flex-region",
+    ref: flexRegion
+  }));
+};
+
+exports.GlobalHeaderBreadcrumb = GlobalHeaderBreadcrumb;

package/cjs/components/Breadcrumb/PureBreadcrumb.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _ChevronSmallRight;
+
+const _excluded = ["onClick", "isSelected", "length", "label", "hasNext", "id"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onClick,
+    isSelected,
+    length,
+    label,
+    hasNext,
+    id
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.LabelButton, _objectSpread(_objectSpread({
+    onClick: onClick,
+    "aria-selected": isSelected,
+    "data-testid": "gh-breadcrumb-btn",
+    id: id
+  }, dsPropsHelpers.getDataProps(rest)), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](styles.Label, {
+      isSelected: !!isSelected,
+      isOnlyItem: length === 1
+    }, void 0, label)
+  })), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
+    size: "m",
+    fill: "#FFF"
+  }))));
+});
+
+exports.PureBreadcrumb = PureBreadcrumb;

package/cjs/components/Breadcrumb/styles.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Pipe = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1n5l527-0"
+})(["margin:0 7px 0 0;border-left:", ";height:20px;"], _ref => {
+  let {
+    showIconOnly
+  } = _ref;
+  return showIconOnly ? 'none' : '1px solid #fff';
+});
+const BreadcrumbItem = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1n5l527-1"
+})(["display:flex;align-items:center;height:100%;"]);
+const LabelButton = /*#__PURE__*/styled__default["default"].button.withConfig({
+  componentId: "sc-1n5l527-2"
+})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral['000'];
+});
+const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-1n5l527-3"
+})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+}, _ref4 => {
+  let {
+    theme,
+    isSelected
+  } = _ref4;
+  return "-webkit-text-stroke: 0.4px  ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
+}, _ref5 => {
+  let {
+    isSelected,
+    isOnlyItem
+  } = _ref5;
+  return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
+});
+
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.Label = Label;
+exports.LabelButton = LabelButton;
+exports.Pipe = Pipe;

package/cjs/components/Title/GlobalHeaderTitle.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const GlobalHeaderTitle = () => {
+  const {
+    props: {
+      Logo,
+      LogoWithBrand
+    },
+    showIconOnly
+  } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    alignItems: "center",
+    pr: showIconOnly ? '0px' : '36px',
+    cols: showIconOnly ? ['auto'] : ['auto', '1fr']
+  }, void 0, Logo && showIconOnly && /*#__PURE__*/_jsx__default["default"](Logo, {}), LogoWithBrand && !showIconOnly && /*#__PURE__*/_jsx__default["default"](LogoWithBrand, {}));
+};
+
+exports.GlobalHeaderTitle = GlobalHeaderTitle;

package/cjs/components/Toolbar/GlobalHeaderToolbar.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var ToolbarItems = require('./ToolbarItems.js');
+var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _ToolbarItems;
+const GlobalHeaderToolbar = () => {
+  const {
+    globalHeaderToolbarGrid
+  } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    gutter: "xxs",
+    cols: globalHeaderToolbarGrid,
+    role: "toolbar"
+  }, void 0, _ToolbarItems || (_ToolbarItems = /*#__PURE__*/_jsx__default["default"](ToolbarItems.ToolbarItems, {})));
+};
+
+exports.GlobalHeaderToolbar = GlobalHeaderToolbar;

package/cjs/components/Toolbar/ToolbarItems.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var AppPicker = require('../../outOfTheBox/AppPicker/AppPicker.js');
+var PopupMenu = require('../../outOfTheBox/PopupMenu/PopupMenu.js');
+var SearchToggle = require('../../outOfTheBox/SearchToggle/SearchToggle.js');
+var styles = require('./styles.js');
+var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id", "CustomComponent"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const ToolbarItems = () => {
+  const {
+    props: {
+      toolbar
+    },
+    instanceUID
+  } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
+  const itemsList = React.useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
+    var _Icon;
+
+    const {
+      Icon,
+      type,
+      onClick,
+      componentProps,
+      label,
+      onKeyPress,
+      id,
+      CustomComponent
+    } = item,
+          otherProps = _objectWithoutProperties__default["default"](item, _excluded);
+
+    switch (type) {
+      case 'ds-popup-menu':
+        return /*#__PURE__*/jsxRuntime.jsx(PopupMenu.PopupMenu, _objectSpread(_objectSpread({
+          title: label,
+          Icon: Icon,
+          onClick: onClick,
+          onKeyPress: onKeyPress,
+          id: id
+        }, otherProps), {}, {
+          componentProps: componentProps
+        }), "".concat(instanceUID, "-ds-popup-menu-").concat(label));
+
+      case 'ds-app-picker':
+        return /*#__PURE__*/jsxRuntime.jsx(AppPicker.AppPicker, _objectSpread({
+          label: label,
+          id: id,
+          componentProps: componentProps
+        }, otherProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
+
+      case 'ds-search-toggle':
+        return /*#__PURE__*/jsxRuntime.jsx(SearchToggle.SearchToggle, _objectSpread({
+          id: id,
+          componentProps: componentProps
+        }, otherProps), "".concat(instanceUID, "-ds-search-toggle-").concat(id));
+
+      case 'custom':
+        if (CustomComponent) return /*#__PURE__*/_jsx__default["default"](CustomComponent, {
+          item: item
+        });
+        return null;
+
+      default:
+        return /*#__PURE__*/jsxRuntime.jsx(styles.Button, _objectSpread(_objectSpread({
+          onClick: onClick,
+          title: label,
+          "data-testid": "gh-toolbar-item",
+          id: id
+        }, dsPropsHelpers.getDataProps(otherProps)), {}, {
+          children: _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
+            fill: "#FFF",
+            size: "m"
+          }))
+        }), "".concat(instanceUID, "-ds-toolbar-button-").concat(label));
+    }
+  }), [toolbar, instanceUID]);
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: itemsList
+  });
+};
+
+exports.ToolbarItems = ToolbarItems;

package/cjs/components/Toolbar/styles.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Button = /*#__PURE__*/styled__default["default"].button.withConfig({
+  componentId: "sc-1gqj0i3-0"
+})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.brand[700];
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral['000'];
+});
+
+exports.Button = Button;

package/cjs/config/useGetPropsWithDefaults.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var defaultProps = require('../defaultProps.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const useGetPropsWithDefaults = props => {
+  const {
+    toolbar,
+    breadcrumb,
+    Logo,
+    LogoWithBrand
+  } = props;
+  return React.useMemo(() => _objectSpread(_objectSpread({}, defaultProps.defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
+};
+
+exports.useGetPropsWithDefaults = useGetPropsWithDefaults;

package/cjs/config/useGlobalHeader.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var uid = require('uid');
+var useGetPropsWithDefaults = require('./useGetPropsWithDefaults.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const useGlobalHeader = props => {
+  const [showIconOnly, setShowIconOnly] = React.useState(false);
+  const instanceUID = React.useMemo(() => uid.uid(5), []);
+  const globalHeaderToolbarGrid = React.useMemo(() => {
+    var _props$toolbar$length, _props$toolbar;
+
+    return new Array((_props$toolbar$length = props === null || props === void 0 ? void 0 : (_props$toolbar = props.toolbar) === null || _props$toolbar === void 0 ? void 0 : _props$toolbar.length) !== null && _props$toolbar$length !== void 0 ? _props$toolbar$length : 0).fill('auto');
+  }, [props.toolbar]);
+  const globalHeaderBreadcrumbGrid = React.useMemo(() => {
+    var _props$breadcrumb$len, _props$breadcrumb;
+
+    return ['auto', ...new Array((_props$breadcrumb$len = props === null || props === void 0 ? void 0 : (_props$breadcrumb = props.breadcrumb) === null || _props$breadcrumb === void 0 ? void 0 : _props$breadcrumb.length) !== null && _props$breadcrumb$len !== void 0 ? _props$breadcrumb$len : 0).fill('auto'), '1fr'];
+  }, [props.breadcrumb]);
+  const propsWithDefaults = useGetPropsWithDefaults.useGetPropsWithDefaults(props);
+  const ctx = React__default["default"].useMemo(() => ({
+    props: propsWithDefaults,
+    showIconOnly,
+    setShowIconOnly,
+    instanceUID,
+    globalHeaderToolbarGrid,
+    globalHeaderBreadcrumbGrid
+  }), [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid]);
+  return ctx;
+};
+
+exports.useGlobalHeader = useGlobalHeader;

package/cjs/config/useValidateProps.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var validateHelpers = require('./validateHelpers.js');
+
+const validatePopupItem = componentProps => {
+  if (componentProps.options && !Array.isArray(componentProps.options)) {
+    validateHelpers.throwToolbarPopupItemError('options', componentProps.options);
+  }
+
+  if (componentProps.closeOnClick && typeof componentProps.closeOnClick !== 'boolean') {
+    validateHelpers.throwToolbarPopupItemError('closeOnClick', componentProps.closeOnClick);
+  }
+};
+
+const validateAppPickerItem = componentProps => {
+  if (componentProps.apps && !Array.isArray(componentProps.apps)) {
+    validateHelpers.throwToolbarAppPickerItemError('apps', componentProps.apps);
+  }
+
+  if (componentProps.customApps && !Array.isArray(componentProps.customApps)) {
+    validateHelpers.throwToolbarAppPickerItemError('customApps', componentProps.customApps);
+  }
+
+  if (componentProps.sectionTitle && typeof componentProps.sectionTitle !== 'string') {
+    validateHelpers.throwToolbarAppPickerItemError('sectionTitle', componentProps.sectionTitle);
+  }
+
+  if (componentProps.customSectionTitle && typeof componentProps.customSectionTitle !== 'string') {
+    validateHelpers.throwToolbarAppPickerItemError('customSectionTitle', componentProps.customSectionTitle);
+  }
+};
+
+const useValidateProps = props => {
+  const {
+    breadcrumb,
+    toolbar,
+    Logo,
+    LogoWithBrand
+  } = props;
+
+  if (Logo && typeof Logo !== 'function') {
+    validateHelpers.throwLogoError('Logo', Logo);
+  }
+
+  if (LogoWithBrand && typeof LogoWithBrand !== 'function') {
+    validateHelpers.throwLogoError('LogoWithBrand', LogoWithBrand);
+  }
+
+  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
+    if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
+      validateHelpers.throwBreadcrumbItemError('label', breadcrumbItem.label);
+    }
+
+    if (breadcrumbItem.onClick && typeof breadcrumbItem.onClick !== 'function') {
+      validateHelpers.throwBreadcrumbItemError('onClick', breadcrumbItem.onClick);
+    }
+
+    if (breadcrumbItem.hasNext && typeof breadcrumbItem.hasNext !== 'boolean') {
+      validateHelpers.throwBreadcrumbItemError('hasNext', breadcrumbItem.hasNext);
+    }
+
+    if (breadcrumbItem.isSelected && typeof breadcrumbItem.isSelected !== 'boolean') {
+      validateHelpers.throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
+    }
+  });
+  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
+    if (toolbarItem.type) {
+      if (!validateHelpers.isValidToolbarType(toolbarItem.type)) {
+        validateHelpers.throwToolbarItemGenericError('type', toolbarItem.type);
+      }
+
+      if (toolbarItem.componentProps && !validateHelpers.isObject(toolbarItem.componentProps)) {
+        validateHelpers.throwToolbarItemGenericError('componentProps', toolbarItem.componentProps);
+      }
+
+      if (toolbarItem.type === 'ds-popup-menu') {
+        validatePopupItem(toolbarItem.componentProps);
+      }
+
+      if (toolbarItem.type === 'ds-app-picker') {
+        validateAppPickerItem(toolbarItem.componentProps);
+      }
+    }
+  });
+};
+
+exports.useValidateProps = useValidateProps;