@elliemae/ds-toolbar 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/DSToolbarItemV2.js

@@ -0,0 +1,50 @@
+'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 uid = require('uid');
+var DSToolbarV2Context = require('./DSToolbarV2Context.js');
+var styled = require('./styled.js');
+var useToolbarItemHandlers = require('./useToolbarItemHandlers.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);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const DSToolbarItemV2 = _ref => {
+  let {
+    render
+  } = _ref;
+  const {
+    registerReference
+  } = React.useContext(DSToolbarV2Context.DSToolbarV2Context);
+  const ref = React.useRef(null);
+  const toolbarItemId = React.useMemo(() => {
+    const id = "ds-toolbar-item-".concat(uid.uid());
+    registerReference(id, ref);
+    return id;
+  }, [registerReference, ref]);
+  const handlers = useToolbarItemHandlers.useToolbarItemHandlers(toolbarItemId);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledToolbarItem, _objectSpread(_objectSpread({
+    id: toolbarItemId,
+    "data-testid": "ds-toolbar-item",
+    className: "ds-toolbar-item"
+  }, handlers), {}, {
+    children: render({
+      innerRef: ref
+    })
+  }));
+};
+
+exports.DSToolbarItemV2 = DSToolbarItemV2;

package/cjs/DSToolbarSeparatorV2.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('./styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _StyledSeparator;
+const DSToolbarSeparatorV2 = () => _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
+  className: "ds-toolbar-separator"
+}));
+
+exports.DSToolbarSeparatorV2 = DSToolbarSeparatorV2;

package/cjs/DSToolbarV2.js

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+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 dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var reactDesc = require('react-desc');
+var uid = require('uid');
+var DSToolbarV2Context = require('./DSToolbarV2Context.js');
+var props = require('./props.js');
+var styled = require('./styled.js');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DSToolbarV2 = props$1 => {
+  const {
+    alignment,
+    withDepth,
+    compact,
+    innerRef,
+    children
+  } = props$1;
+  dsPropsHelpers.useValidateTypescriptPropTypes(props$1, props.DSToolbarV2Schema);
+  const toolbarUid = React.useMemo(() => "ds-toolbar-".concat(uid.uid()), []);
+  const [itemReferences, setItemReferences] = React.useState({});
+  const registerReference = React.useCallback((itemId, ref) => {
+    setItemReferences(prevItemReferences => _objectSpread(_objectSpread({}, prevItemReferences), {}, {
+      [itemId]: ref
+    }));
+  }, [setItemReferences]);
+  return /*#__PURE__*/_jsx__default["default"](DSToolbarV2Context.DSToolbarV2Context.Provider, {
+    value: {
+      toolbarUid,
+      registerReference,
+      itemReferences
+    }
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledToolbarWrapper, {
+    role: "toolbar",
+    "data-testid": "ds-toolbar-wrapper",
+    id: toolbarUid,
+    alignItems: "center",
+    justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+    withDepth: withDepth,
+    cols: React__default["default"].Children.map(children, () => ['auto']),
+    gutter: "xxs2",
+    compact: compact,
+    ref: innerRef,
+    children: children
+  }));
+};
+
+DSToolbarV2.defaultProps = {
+  alignment: 'right',
+  withDepth: true,
+  compact: false
+};
+const DSToolbarV2WithSchema = reactDesc.describe(DSToolbarV2).description('Toolbar');
+DSToolbarV2WithSchema.propTypes = props.DSToolbarV2Schema;
+
+exports.DSToolbarV2 = DSToolbarV2;
+exports.DSToolbarV2WithSchema = DSToolbarV2WithSchema;

package/cjs/DSToolbarV2Context.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const DSToolbarV2Context = /*#__PURE__*/React.createContext({
+  registerReference: () => null,
+  itemReferences: {},
+  toolbarUid: ''
+});
+
+exports.DSToolbarV2Context = DSToolbarV2Context;

package/cjs/{DSToolbar.js → deprecated/DSToolbar.js}

@@ -2,6 +2,11 @@
 
 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 _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -9,7 +14,7 @@ var React = require('react');
 var reactDesc = require('react-desc');
 var dsClassnames = require('@elliemae/ds-classnames');
 var FocusGroupProvider = require('@elliemae/ds-shared/FocusGroup/FocusGroupManager');
-var system = require('@elliemae/ds-utilities/system');
+var dsUtilities = require('@elliemae/ds-utilities');
 var decorateToolbarChildren = require('./decorateToolbarChildren.js');
 var ToolbarItem = require('./ToolbarItem.js');
 var ToolbarGroup = require('./ToolbarGroup.js');
@@ -27,19 +32,22 @@ const _excluded = ["containerProps", "innerRef", "withDepth", "alignment", "auto
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const blockName = 'toolbar';
-const ToolbarContainer = dsClassnames.aggregatedClasses('div')(blockName, null, ({
-  withDepth,
-  alignment,
-  size
-}) => ({
-  'without-depth': !withDepth,
-  [alignment]: !!alignment,
-  [size]: size
-}));
+const ToolbarContainer = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    withDepth,
+    alignment,
+    size
+  } = _ref;
+  return {
+    'without-depth': !withDepth,
+    [alignment]: !!alignment,
+    [size]: size
+  };
+});
 
-const DSToolbar = _ref => {
+const DSToolbar = _ref2 => {
   let {
     containerProps = {},
     innerRef,
@@ -49,11 +57,11 @@ const DSToolbar = _ref => {
     autoFocusOnMount = true,
     children = [],
     size = 'normal'
-  } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
 
   const containerRef = React.useRef(null);
-  return /*#__PURE__*/_jsx__default['default'](FocusGroupProvider__default['default'], {
+  return /*#__PURE__*/_jsx__default["default"](FocusGroupProvider__default["default"], {
     autoFocusOnMount: autoFocusOnMount,
     getContainer: () => containerRef.current,
     keyBindings: {
@@ -66,7 +74,7 @@ const DSToolbar = _ref => {
       alignment,
       size
     },
-    innerRef: system.mergeRefs(innerRef, containerRef),
+    innerRef: dsUtilities.mergeRefs(innerRef, containerRef),
     children: decorateToolbarChildren(children)
   })));
 };
@@ -88,4 +96,4 @@ exports.ToolbarGroup = ToolbarGroup;
 exports.ToolbarDivider = ToolbarDivider;
 exports.DSToolbar = DSToolbar;
 exports.ToolbarWithSchema = ToolbarWithSchema;
-exports['default'] = DSToolbar;
+exports["default"] = DSToolbar;

package/cjs/{ToolbarGroup.js → deprecated/ToolbarGroup.js}

@@ -10,22 +10,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const blockName = 'toolbar-group';
-const ToolbarGroupContainer = dsClassnames.aggregatedClasses('div')(blockName, null, ({
-  space
-}) => ({
-  [`space-${space}`]: !!space
-}));
-
-const ToolbarGroup = ({
-  children,
-  size,
-  space = 0
-}) => /*#__PURE__*/_jsx__default['default'](ToolbarGroupContainer, {
-  classProps: {
+const ToolbarGroupContainer = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
     space
-  }
-}, void 0, decorateToolbarChildren(children, {
-  size
-}));
+  } = _ref;
+  return {
+    ["space-".concat(space)]: !!space
+  };
+});
+
+const ToolbarGroup = _ref2 => {
+  let {
+    children,
+    size,
+    space = 0
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](ToolbarGroupContainer, {
+    classProps: {
+      space
+    }
+  }, void 0, decorateToolbarChildren(children, {
+    size
+  }));
+};
 
 module.exports = ToolbarGroup;

package/cjs/{ToolbarItem.js → deprecated/ToolbarItem.js}

@@ -2,10 +2,16 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.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 FocusGroup = require('@elliemae/ds-shared/FocusGroup');
 var DSButton = require('@elliemae/ds-button');
-var positions = require('@elliemae/ds-popper/positions');
+var dsPopper = require('@elliemae/ds-popper');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,7 +25,7 @@ const _excluded = ["icon", "labelText", "menu"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const ToolbarItem = _ref => {
   let {
@@ -27,12 +33,12 @@ const ToolbarItem = _ref => {
     labelText,
     menu = undefined
   } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const [ref, setRef] = React.useState(null);
   FocusGroup.useFocusGroupWithState(ref);
 
-  const btn = /*#__PURE__*/jsxRuntime.jsx(DSButton__default['default'], _objectSpread(_objectSpread({}, otherProps), {}, {
+  const btn = /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, otherProps), {}, {
     buttonType: "text",
     icon: icon,
     innerRef: r => setRef(r),
@@ -40,8 +46,8 @@ const ToolbarItem = _ref => {
   }));
 
   if (menu) {
-    return /*#__PURE__*/React__default['default'].cloneElement(menu, _objectSpread(_objectSpread({}, menu.props), {}, {
-      placement: positions.Position.BOTTOM_END,
+    return /*#__PURE__*/React__default["default"].cloneElement(menu, _objectSpread(_objectSpread({}, menu.props), {}, {
+      placement: dsPopper.PopperPositions.BOTTOM_END,
       triggerComponent: btn
     }));
   }

package/cjs/{decorateToolbarChildren.js → deprecated/decorateToolbarChildren.js}

@@ -1,6 +1,13 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,9 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var decorateToolbarChildren = ((children, extraProps = {}) => React__default['default'].Children.map(children, component => component ? /*#__PURE__*/React.cloneElement(component, _objectSpread(_objectSpread(_objectSpread({}, extraProps), component.props), {}, {
-  className: `${component.props.className} toolbar-item`
-})) : component, null));
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var decorateToolbarChildren = (function (children) {
+  let extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return React__default["default"].Children.map(children, component => component ? /*#__PURE__*/React.cloneElement(component, _objectSpread(_objectSpread(_objectSpread({}, extraProps), component.props), {}, {
+    className: "".concat(component.props.className, " toolbar-item")
+  })) : component, null);
+});
 
 module.exports = decorateToolbarChildren;

package/cjs/deprecated/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSToolbar = require('./DSToolbar.js');
+var ToolbarItem = require('./ToolbarItem.js');
+var ToolbarGroup = require('./ToolbarGroup.js');
+var ToolbarDivider = require('./ToolbarDivider.js');
+
+
+
+exports.DSToolbar = DSToolbar.DSToolbar;
+exports.ToolbarWithSchema = DSToolbar.ToolbarWithSchema;
+exports["default"] = DSToolbar.DSToolbar;
+exports.ToolbarItem = ToolbarItem;
+exports.ToolbarGroup = ToolbarGroup;
+exports.ToolbarDivider = ToolbarDivider;

package/cjs/index.js

@@ -2,16 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DSToolbar = require('./DSToolbar.js');
-var ToolbarItem = require('./ToolbarItem.js');
-var ToolbarGroup = require('./ToolbarGroup.js');
-var ToolbarDivider = require('./ToolbarDivider.js');
+var DSToolbar = require('./deprecated/DSToolbar.js');
+var DSToolbarV2 = require('./DSToolbarV2.js');
+var DSToolbarItemV2 = require('./DSToolbarItemV2.js');
+var DSToolbarSeparatorV2 = require('./DSToolbarSeparatorV2.js');
+var ToolbarItem = require('./deprecated/ToolbarItem.js');
+var ToolbarGroup = require('./deprecated/ToolbarGroup.js');
+var ToolbarDivider = require('./deprecated/ToolbarDivider.js');
 
 
 
 exports.DSToolbar = DSToolbar.DSToolbar;
 exports.ToolbarWithSchema = DSToolbar.ToolbarWithSchema;
-exports.default = DSToolbar.DSToolbar;
+exports["default"] = DSToolbar.DSToolbar;
+exports.DSToolbarV2 = DSToolbarV2.DSToolbarV2;
+exports.DSToolbarV2WithSchema = DSToolbarV2.DSToolbarV2WithSchema;
+exports.DSToolbarItemV2 = DSToolbarItemV2.DSToolbarItemV2;
+exports.DSToolbarSeparatorV2 = DSToolbarSeparatorV2.DSToolbarSeparatorV2;
 exports.ToolbarItem = ToolbarItem;
 exports.ToolbarGroup = ToolbarGroup;
 exports.ToolbarDivider = ToolbarDivider;

package/cjs/props.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const DSToolbarV2Schema = {
+  alignment: reactDesc.PropTypes.oneOf(['right', 'left']).description('Whether to align the content left or right').defaultValue('right'),
+  withDepth: reactDesc.PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),
+  compact: reactDesc.PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.object]).description('Reference to attach to the wrapper')
+};
+
+exports.DSToolbarV2Schema = DSToolbarV2Schema;

package/cjs/styled.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var Grid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const StyledToolbarWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-8ez8n4-0"
+})(["background-color:", ";min-height:", ";max-height:", ";padding:0 ", ";box-shadow:", ";"], props => props.theme.colors.neutral['000'], props => props.compact ? '28px' : '40px', props => props.theme.space.xxl, props => props.theme.space.xxs, props => !props.withDepth ? 'none' : '0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)');
+const StyledToolbarItem = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-8ez8n4-1"
+})([""]);
+const StyledSeparator = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-8ez8n4-2"
+})(["height:30px;width:1px;background-color:", ";"], props => props.theme.colors.neutral[200]);
+
+exports.StyledSeparator = StyledSeparator;
+exports.StyledToolbarItem = StyledToolbarItem;
+exports.StyledToolbarWrapper = StyledToolbarWrapper;

package/cjs/useToolbarItemHandlers.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 DSToolbarV2Context = require('./DSToolbarV2Context.js');
+
+const useToolbarItemHandlers = toolbarItemId => {
+  const {
+    toolbarUid,
+    itemReferences
+  } = React.useContext(DSToolbarV2Context.DSToolbarV2Context);
+  const onKeyDown = React.useCallback(e => {
+    const toolbarItems = [...document.querySelectorAll("#".concat(toolbarUid, " .ds-toolbar-item"))];
+    let nextToolbarItemIndex = -1;
+
+    if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {
+      const toolbarItemIndex = toolbarItems.findIndex(domElem => domElem.id === toolbarItemId);
+      nextToolbarItemIndex = toolbarItemIndex + (e.code === 'ArrowLeft' ? -1 : 1);
+    } else if (e.code === 'Home') {
+      nextToolbarItemIndex = 0;
+    } else if (e.code === 'End') {
+      nextToolbarItemIndex = toolbarItems.length - 1;
+    }
+
+    if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {
+      e.preventDefault();
+      e.stopPropagation();
+      const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
+      if (ref.current) ref.current.focus();
+    }
+  }, [toolbarUid, toolbarItemId, itemReferences]);
+  return {
+    onKeyDown
+  };
+};
+
+exports.useToolbarItemHandlers = useToolbarItemHandlers;

package/esm/DSToolbarItemV2.js

@@ -0,0 +1,42 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useRef, useMemo } from 'react';
+import { uid } from 'uid';
+import { DSToolbarV2Context } from './DSToolbarV2Context.js';
+import { StyledToolbarItem } from './styled.js';
+import { useToolbarItemHandlers } from './useToolbarItemHandlers.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const DSToolbarItemV2 = _ref => {
+  let {
+    render
+  } = _ref;
+  const {
+    registerReference
+  } = useContext(DSToolbarV2Context);
+  const ref = useRef(null);
+  const toolbarItemId = useMemo(() => {
+    const id = "ds-toolbar-item-".concat(uid());
+    registerReference(id, ref);
+    return id;
+  }, [registerReference, ref]);
+  const handlers = useToolbarItemHandlers(toolbarItemId);
+  return /*#__PURE__*/jsx(StyledToolbarItem, _objectSpread(_objectSpread({
+    id: toolbarItemId,
+    "data-testid": "ds-toolbar-item",
+    className: "ds-toolbar-item"
+  }, handlers), {}, {
+    children: render({
+      innerRef: ref
+    })
+  }));
+};
+
+export { DSToolbarItemV2 };

package/esm/DSToolbarSeparatorV2.js

@@ -0,0 +1,10 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { StyledSeparator } from './styled.js';
+
+var _StyledSeparator;
+const DSToolbarSeparatorV2 = () => _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+  className: "ds-toolbar-separator"
+}));
+
+export { DSToolbarSeparatorV2 };

package/esm/DSToolbarV2.js

@@ -0,0 +1,69 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React, { useMemo, useState, useCallback } from 'react';
+import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { describe } from 'react-desc';
+import { uid } from 'uid';
+import { DSToolbarV2Context } from './DSToolbarV2Context.js';
+import { DSToolbarV2Schema } from './props.js';
+import { StyledToolbarWrapper } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DSToolbarV2 = props => {
+  const {
+    alignment,
+    withDepth,
+    compact,
+    innerRef,
+    children
+  } = props;
+  useValidateTypescriptPropTypes(props, DSToolbarV2Schema);
+  const toolbarUid = useMemo(() => "ds-toolbar-".concat(uid()), []);
+  const [itemReferences, setItemReferences] = useState({});
+  const registerReference = useCallback((itemId, ref) => {
+    setItemReferences(prevItemReferences => _objectSpread(_objectSpread({}, prevItemReferences), {}, {
+      [itemId]: ref
+    }));
+  }, [setItemReferences]);
+  return /*#__PURE__*/_jsx(DSToolbarV2Context.Provider, {
+    value: {
+      toolbarUid,
+      registerReference,
+      itemReferences
+    }
+  }, void 0, /*#__PURE__*/jsx(StyledToolbarWrapper, {
+    role: "toolbar",
+    "data-testid": "ds-toolbar-wrapper",
+    id: toolbarUid,
+    alignItems: "center",
+    justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+    withDepth: withDepth,
+    cols: React.Children.map(children, () => ['auto']),
+    gutter: "xxs2",
+    compact: compact,
+    ref: innerRef,
+    children: children
+  }));
+};
+
+DSToolbarV2.defaultProps = {
+  alignment: 'right',
+  withDepth: true,
+  compact: false
+};
+const DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');
+DSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;
+
+export { DSToolbarV2, DSToolbarV2WithSchema };

package/esm/DSToolbarV2Context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const DSToolbarV2Context = /*#__PURE__*/createContext({
+  registerReference: () => null,
+  itemReferences: {},
+  toolbarUid: ''
+});
+
+export { DSToolbarV2Context };

package/esm/{DSToolbar.js → deprecated/DSToolbar.js}

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -5,7 +10,7 @@ import { useRef } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import FocusGroupProvider from '@elliemae/ds-shared/FocusGroup/FocusGroupManager';
-import { mergeRefs } from '@elliemae/ds-utilities/system';
+import { mergeRefs } from '@elliemae/ds-utilities';
 import decorateToolbarChildren from './decorateToolbarChildren.js';
 export { default as ToolbarItem } from './ToolbarItem.js';
 export { default as ToolbarGroup } from './ToolbarGroup.js';
@@ -18,17 +23,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const blockName = 'toolbar';
-const ToolbarContainer = aggregatedClasses('div')(blockName, null, ({
-  withDepth,
-  alignment,
-  size
-}) => ({
-  'without-depth': !withDepth,
-  [alignment]: !!alignment,
-  [size]: size
-}));
+const ToolbarContainer = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    withDepth,
+    alignment,
+    size
+  } = _ref;
+  return {
+    'without-depth': !withDepth,
+    [alignment]: !!alignment,
+    [size]: size
+  };
+});
 
-const DSToolbar = _ref => {
+const DSToolbar = _ref2 => {
   let {
     containerProps = {},
     innerRef,
@@ -38,8 +46,8 @@ const DSToolbar = _ref => {
     autoFocusOnMount = true,
     children = [],
     size = 'normal'
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
 
   const containerRef = useRef(null);
   return /*#__PURE__*/_jsx(FocusGroupProvider, {

package/esm/{ToolbarGroup.js → deprecated/ToolbarGroup.js}

@@ -4,22 +4,28 @@ import { aggregatedClasses } from '@elliemae/ds-classnames';
 import decorateToolbarChildren from './decorateToolbarChildren.js';
 
 const blockName = 'toolbar-group';
-const ToolbarGroupContainer = aggregatedClasses('div')(blockName, null, ({
-  space
-}) => ({
-  [`space-${space}`]: !!space
-}));
-
-const ToolbarGroup = ({
-  children,
-  size,
-  space = 0
-}) => /*#__PURE__*/_jsx(ToolbarGroupContainer, {
-  classProps: {
+const ToolbarGroupContainer = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
     space
-  }
-}, void 0, decorateToolbarChildren(children, {
-  size
-}));
+  } = _ref;
+  return {
+    ["space-".concat(space)]: !!space
+  };
+});
+
+const ToolbarGroup = _ref2 => {
+  let {
+    children,
+    size,
+    space = 0
+  } = _ref2;
+  return /*#__PURE__*/_jsx(ToolbarGroupContainer, {
+    classProps: {
+      space
+    }
+  }, void 0, decorateToolbarChildren(children, {
+    size
+  }));
+};
 
 export { ToolbarGroup as default };

package/esm/{ToolbarItem.js → deprecated/ToolbarItem.js}

@@ -1,9 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React, { useState } from 'react';
 import { useFocusGroupWithState } from '@elliemae/ds-shared/FocusGroup';
 import DSButton from '@elliemae/ds-button';
-import { Position } from '@elliemae/ds-popper/positions';
+import { PopperPositions } from '@elliemae/ds-popper';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["icon", "labelText", "menu"];
@@ -32,7 +38,7 @@ const ToolbarItem = _ref => {
 
   if (menu) {
     return /*#__PURE__*/React.cloneElement(menu, _objectSpread(_objectSpread({}, menu.props), {}, {
-      placement: Position.BOTTOM_END,
+      placement: PopperPositions.BOTTOM_END,
       triggerComponent: btn
     }));
   }

package/esm/{decorateToolbarChildren.js → deprecated/decorateToolbarChildren.js}

@@ -1,11 +1,21 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React, { cloneElement } from 'react';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var decorateToolbarChildren = ((children, extraProps = {}) => React.Children.map(children, component => component ? /*#__PURE__*/cloneElement(component, _objectSpread(_objectSpread(_objectSpread({}, extraProps), component.props), {}, {
-  className: `${component.props.className} toolbar-item`
-})) : component, null));
+var decorateToolbarChildren = (function (children) {
+  let extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return React.Children.map(children, component => component ? /*#__PURE__*/cloneElement(component, _objectSpread(_objectSpread(_objectSpread({}, extraProps), component.props), {}, {
+    className: "".concat(component.props.className, " toolbar-item")
+  })) : component, null);
+});
 
 export { decorateToolbarChildren as default };

package/esm/deprecated/index.js

@@ -0,0 +1,4 @@
+export { DSToolbar, ToolbarWithSchema, DSToolbar as default } from './DSToolbar.js';
+export { default as ToolbarItem } from './ToolbarItem.js';
+export { default as ToolbarGroup } from './ToolbarGroup.js';
+export { default as ToolbarDivider } from './ToolbarDivider.js';

package/esm/index.js

@@ -1,4 +1,7 @@
-export { DSToolbar, ToolbarWithSchema, DSToolbar as default } from './DSToolbar.js';
-export { default as ToolbarItem } from './ToolbarItem.js';
-export { default as ToolbarGroup } from './ToolbarGroup.js';
-export { default as ToolbarDivider } from './ToolbarDivider.js';
+export { DSToolbar, ToolbarWithSchema, DSToolbar as default } from './deprecated/DSToolbar.js';
+export { DSToolbarV2, DSToolbarV2WithSchema } from './DSToolbarV2.js';
+export { DSToolbarItemV2 } from './DSToolbarItemV2.js';
+export { DSToolbarSeparatorV2 } from './DSToolbarSeparatorV2.js';
+export { default as ToolbarItem } from './deprecated/ToolbarItem.js';
+export { default as ToolbarGroup } from './deprecated/ToolbarGroup.js';
+export { default as ToolbarDivider } from './deprecated/ToolbarDivider.js';

package/esm/props.js

@@ -0,0 +1,10 @@
+import { PropTypes } from 'react-desc';
+
+const DSToolbarV2Schema = {
+  alignment: PropTypes.oneOf(['right', 'left']).description('Whether to align the content left or right').defaultValue('right'),
+  withDepth: PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),
+  compact: PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Reference to attach to the wrapper')
+};
+
+export { DSToolbarV2Schema };

package/esm/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const StyledToolbarWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-8ez8n4-0"
+})(["background-color:", ";min-height:", ";max-height:", ";padding:0 ", ";box-shadow:", ";"], props => props.theme.colors.neutral['000'], props => props.compact ? '28px' : '40px', props => props.theme.space.xxl, props => props.theme.space.xxs, props => !props.withDepth ? 'none' : '0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)');
+const StyledToolbarItem = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-8ez8n4-1"
+})([""]);
+const StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-8ez8n4-2"
+})(["height:30px;width:1px;background-color:", ";"], props => props.theme.colors.neutral[200]);
+
+export { StyledSeparator, StyledToolbarItem, StyledToolbarWrapper };

package/esm/useToolbarItemHandlers.js

@@ -0,0 +1,35 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useCallback } from 'react';
+import { DSToolbarV2Context } from './DSToolbarV2Context.js';
+
+const useToolbarItemHandlers = toolbarItemId => {
+  const {
+    toolbarUid,
+    itemReferences
+  } = useContext(DSToolbarV2Context);
+  const onKeyDown = useCallback(e => {
+    const toolbarItems = [...document.querySelectorAll("#".concat(toolbarUid, " .ds-toolbar-item"))];
+    let nextToolbarItemIndex = -1;
+
+    if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {
+      const toolbarItemIndex = toolbarItems.findIndex(domElem => domElem.id === toolbarItemId);
+      nextToolbarItemIndex = toolbarItemIndex + (e.code === 'ArrowLeft' ? -1 : 1);
+    } else if (e.code === 'Home') {
+      nextToolbarItemIndex = 0;
+    } else if (e.code === 'End') {
+      nextToolbarItemIndex = toolbarItems.length - 1;
+    }
+
+    if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {
+      e.preventDefault();
+      e.stopPropagation();
+      const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
+      if (ref.current) ref.current.focus();
+    }
+  }, [toolbarUid, toolbarItemId, itemReferences]);
+  return {
+    onKeyDown
+  };
+};
+
+export { useToolbarItemHandlers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-toolbar",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Toolbar",
   "module": "./esm/index.js",
@@ -11,25 +11,57 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
-    "./ToolbarItem": {
-      "import": "./esm/ToolbarItem.js",
-      "require": "./cjs/ToolbarItem.js"
+    "./useToolbarItemHandlers": {
+      "import": "./esm/useToolbarItemHandlers.js",
+      "require": "./cjs/useToolbarItemHandlers.js"
     },
-    "./ToolbarGroup": {
-      "import": "./esm/ToolbarGroup.js",
-      "require": "./cjs/ToolbarGroup.js"
+    "./styled": {
+      "import": "./esm/styled.js",
+      "require": "./cjs/styled.js"
     },
-    "./ToolbarDivider": {
-      "import": "./esm/ToolbarDivider.js",
-      "require": "./cjs/ToolbarDivider.js"
+    "./props": {
+      "import": "./esm/props.js",
+      "require": "./cjs/props.js"
     },
-    "./DSToolbar": {
-      "import": "./esm/DSToolbar.js",
-      "require": "./cjs/DSToolbar.js"
+    "./DSToolbarV2Context": {
+      "import": "./esm/DSToolbarV2Context.js",
+      "require": "./cjs/DSToolbarV2Context.js"
     },
-    "./decorateToolbarChildren": {
-      "import": "./esm/decorateToolbarChildren.js",
-      "require": "./cjs/decorateToolbarChildren.js"
+    "./DSToolbarV2": {
+      "import": "./esm/DSToolbarV2.js",
+      "require": "./cjs/DSToolbarV2.js"
+    },
+    "./DSToolbarSeparatorV2": {
+      "import": "./esm/DSToolbarSeparatorV2.js",
+      "require": "./cjs/DSToolbarSeparatorV2.js"
+    },
+    "./DSToolbarItemV2": {
+      "import": "./esm/DSToolbarItemV2.js",
+      "require": "./cjs/DSToolbarItemV2.js"
+    },
+    "./deprecated/ToolbarItem": {
+      "import": "./esm/deprecated/ToolbarItem.js",
+      "require": "./cjs/deprecated/ToolbarItem.js"
+    },
+    "./deprecated/ToolbarGroup": {
+      "import": "./esm/deprecated/ToolbarGroup.js",
+      "require": "./cjs/deprecated/ToolbarGroup.js"
+    },
+    "./deprecated/ToolbarDivider": {
+      "import": "./esm/deprecated/ToolbarDivider.js",
+      "require": "./cjs/deprecated/ToolbarDivider.js"
+    },
+    "./deprecated": {
+      "import": "./esm/deprecated/index.js",
+      "require": "./cjs/deprecated/index.js"
+    },
+    "./deprecated/DSToolbar": {
+      "import": "./esm/deprecated/DSToolbar.js",
+      "require": "./cjs/deprecated/DSToolbar.js"
+    },
+    "./deprecated/decorateToolbarChildren": {
+      "import": "./esm/deprecated/decorateToolbarChildren.js",
+      "require": "./cjs/deprecated/decorateToolbarChildren.js"
     }
   },
   "sideEffects": [
@@ -52,22 +84,30 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-alpha.1",
-    "@elliemae/ds-classnames": "2.0.0-alpha.1",
-    "@elliemae/ds-popper": "2.0.0-alpha.1",
-    "@elliemae/ds-shared": "2.0.0-alpha.1",
-    "@elliemae/ds-utilities": "2.0.0-alpha.1",
+    "@elliemae/ds-button": "2.0.0-alpha.13",
+    "@elliemae/ds-classnames": "2.0.0-alpha.13",
+    "@elliemae/ds-grid": "2.0.0-alpha.13",
+    "@elliemae/ds-icons": "2.0.0-alpha.13",
+    "@elliemae/ds-popper": "2.0.0-alpha.13",
+    "@elliemae/ds-props-helpers": "2.0.0-alpha.13",
+    "@elliemae/ds-shared": "2.0.0-alpha.13",
+    "@elliemae/ds-system": "2.0.0-alpha.13",
+    "@elliemae/ds-utilities": "2.0.0-alpha.13",
     "prop-types": "~15.7.2",
-    "react-desc": "~4.1.3"
+    "react-desc": "~4.1.3",
+    "uid": "2.0.0"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSToolbarItemV2.d.ts

@@ -0,0 +1,8 @@
+import React, { MutableRefObject } from 'react';
+interface ToolbarItemProps {
+    render: (props: {
+        innerRef: MutableRefObject<HTMLElement>;
+    }) => JSX.Element;
+}
+export declare const DSToolbarItemV2: React.ComponentType<ToolbarItemProps>;
+export {};

package/types/DSToolbarSeparatorV2.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DSToolbarSeparatorV2: React.ComponentType;

package/types/DSToolbarV2.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ToolbarProps {
+    alignment?: 'left' | 'right';
+    withDepth?: boolean;
+    compact?: boolean;
+    innerRef?: React.MutableRefObject<HTMLDivElement>;
+}
+declare const DSToolbarV2: React.ComponentType<ToolbarProps>;
+declare const DSToolbarV2WithSchema: any;
+export { DSToolbarV2, DSToolbarV2WithSchema };

package/types/DSToolbarV2Context.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from 'react';
+interface IDSToolbarV2Context {
+    registerReference: (uid: string, ref: MutableRefObject<HTMLElement>) => void;
+    itemReferences: Record<string, MutableRefObject<HTMLElement>>;
+    toolbarUid: string;
+}
+export declare const DSToolbarV2Context: import("react").Context<IDSToolbarV2Context>;
+export {};

package/types/deprecated/DSToolbar.d.ts

@@ -0,0 +1,60 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+import Item from './ToolbarItem';
+import ToolbarGroup from './ToolbarGroup';
+import Divider from './ToolbarDivider';
+declare const DSToolbar: {
+    ({ containerProps, innerRef, withDepth, alignment, autoFocusOnMount, children, size, ...otherProps }: {
+        [x: string]: any;
+        containerProps?: {} | undefined;
+        innerRef: any;
+        withDepth?: boolean | undefined;
+        alignment?: string | undefined;
+        autoFocusOnMount?: boolean | undefined;
+        children?: never[] | undefined;
+        size?: string | undefined;
+    }): JSX.Element;
+    propTypes: {
+        containerProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        withDepth: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        alignment: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        size: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        autoFocusOnMount: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        children: import("react-desc").PropTypesDescValidator;
+        innerRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+};
+declare const ToolbarWithSchema: {
+    (props?: {
+        [x: string]: any;
+        containerProps?: {} | undefined;
+        innerRef: any;
+        withDepth?: boolean | undefined;
+        alignment?: string | undefined;
+        autoFocusOnMount?: boolean | undefined;
+        children?: never[] | undefined;
+        size?: string | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema, };
+export default DSToolbar;

package/types/deprecated/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DSToolbar';
+export { default } from './DSToolbar';

package/types/index.d.ts

@@ -1,2 +1,5 @@
-export * from './DSToolbar';
-export { default } from './DSToolbar';
+export * from './deprecated';
+export { default } from './deprecated';
+export * from './DSToolbarV2';
+export * from './DSToolbarItemV2';
+export * from './DSToolbarSeparatorV2';

package/types/props.d.ts

@@ -0,0 +1,18 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const DSToolbarV2Schema: {
+    alignment: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    withDepth: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    compact: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    innerRef: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+};

package/types/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledToolbarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledToolbarItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;

package/types/useToolbarItemHandlers.d.ts

@@ -0,0 +1,3 @@
+export declare const useToolbarItemHandlers: (toolbarItemId: string) => {
+    onKeyDown: React.KeyboardEventHandler;
+};

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/types/DSToolbar.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import Item from './ToolbarItem';
-import ToolbarGroup from './ToolbarGroup';
-import Divider from './ToolbarDivider';
-declare const DSToolbar: {
-    ({ containerProps, innerRef, withDepth, alignment, autoFocusOnMount, children, size, ...otherProps }: {
-        [x: string]: any;
-        containerProps?: {} | undefined;
-        innerRef: any;
-        withDepth?: boolean | undefined;
-        alignment?: string | undefined;
-        autoFocusOnMount?: boolean | undefined;
-        children?: never[] | undefined;
-        size?: string | undefined;
-    }): JSX.Element;
-    propTypes: {
-        containerProps: any;
-        withDepth: any;
-        alignment: any;
-        size: any;
-        autoFocusOnMount: any;
-        children: any;
-        innerRef: any;
-    };
-};
-declare const ToolbarWithSchema: any;
-export { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema, };
-export default DSToolbar;