@atlaskit/editor-toolbar 0.3.4 → 0.3.5

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-toolbar
 
+## 0.3.5
+
+### Patch Changes
+
+- [`286abb4d35eba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/286abb4d35eba) -
+  [ux] [ED-28960] Finish full page primary toolbar migration
+
+  - Align with design update (separator, gap, height, icon size)
+  - Add keyboard shortcut to focus toolbar and arrow key navigation
+  - Address accessibility
+
 ## 0.3.4
 
 ### Patch Changes

package/dist/cjs/hooks/ui-context.js

@@ -10,7 +10,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   preventDefaultOnMouseDown: false,
-  isDisabled: false
+  isDisabled: false,
+  popupsMountPoint: undefined
 });
 
 /**
@@ -27,12 +28,14 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
   var children = _ref.children,
     onDropdownOpenChanged = _ref.onDropdownOpenChanged,
     preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    popupsMountPoint = _ref.popupsMountPoint;
   return /*#__PURE__*/_react.default.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
       preventDefaultOnMouseDown: preventDefaultOnMouseDown,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      popupsMountPoint: popupsMountPoint
     }
   }, children);
 };

package/dist/cjs/ui/Toolbar.compiled.css

@@ -1,13 +1,10 @@
 
-._2rkoi2wt{border-radius:6px}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._2rkoi2wt{border-radius:6px}
+._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1e0c1txw{display:flex}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
-._ca0q12x7{padding-top:var(--ds-space-075,6px)}
-._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/Toolbar.js

@@ -12,9 +12,9 @@ var _react = _interopRequireDefault(require("react"));
 var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
   toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
-  primaryToolbar: "_bfhkvuon _1tkezwfg _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp"
+  primaryToolbar: "_bfhkvuon _1tkezwfg"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar

package/dist/cjs/ui/ToolbarButtonGroup.compiled.css

@@ -1,6 +1,5 @@
 
-._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
-._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
+._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
 ._1jiyidpf button{border-bottom-left-radius:0}
 ._t1diidpf button{border-top-right-radius:0}
 ._u6eridpf button{border-bottom-right-radius:0}

package/dist/cjs/ui/ToolbarButtonGroup.js

@@ -14,7 +14,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   container: "_1e0c1txw",
-  firstChild: "_fb251b66 _t1diidpf _u6eridpf",
+  firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
   lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
 };
 var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {

package/dist/cjs/ui/ToolbarSection.compiled.css

@@ -1,2 +1,7 @@
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._195gu2gc{margin-inline:var(--ds-space-100,8px)}
+._1bsbt94y{width:1px}
 ._1e0c1txw{display:flex}
-._4cvr1h6o{align-items:center}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}
+._bfhkmuej{background-color:var(--ds-border,#091e4224)}

package/dist/cjs/ui/ToolbarSection.js

@@ -1,23 +1,29 @@
 /* ToolbarSection.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarSection = void 0;
 require("./ToolbarSection.compiled.css");
+var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  container: "_1e0c1txw _4cvr1h6o"
+  container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
 };
+var separator = null;
 var ToolbarSection = exports.ToolbarSection = function ToolbarSection(_ref) {
   var children = _ref.children,
-    testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.container,
+    testId = _ref.testId,
+    hasSeparator = _ref.hasSeparator;
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.container),
     testId: testId
-  }, children);
+  }, hasSeparator && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+  }), children);
 };

package/dist/es2019/hooks/ui-context.js

@@ -2,7 +2,8 @@ import React, { createContext, useContext } from 'react';
 const ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: () => {},
   preventDefaultOnMouseDown: false,
-  isDisabled: false
+  isDisabled: false,
+  popupsMountPoint: undefined
 });
 
 /**
@@ -19,13 +20,15 @@ export const ToolbarUIProvider = ({
   children,
   onDropdownOpenChanged,
   preventDefaultOnMouseDown,
-  isDisabled
+  isDisabled,
+  popupsMountPoint
 }) => {
   return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged,
       preventDefaultOnMouseDown,
-      isDisabled
+      isDisabled,
+      popupsMountPoint
     }
   }, children);
 };

package/dist/es2019/ui/Toolbar.compiled.css

@@ -1,13 +1,10 @@
 
-._2rkoi2wt{border-radius:6px}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._2rkoi2wt{border-radius:6px}
+._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1e0c1txw{display:flex}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
-._ca0q12x7{padding-top:var(--ds-space-075,6px)}
-._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/ui/Toolbar.js

@@ -5,9 +5,9 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
   toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
-  primaryToolbar: "_bfhkvuon _1tkezwfg _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp"
+  primaryToolbar: "_bfhkvuon _1tkezwfg"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar

package/dist/es2019/ui/ToolbarButtonGroup.compiled.css

@@ -1,6 +1,5 @@
 
-._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
-._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
+._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
 ._1jiyidpf button{border-bottom-left-radius:0}
 ._t1diidpf button{border-top-right-radius:0}
 ._u6eridpf button{border-bottom-right-radius:0}

package/dist/es2019/ui/ToolbarButtonGroup.js

@@ -6,7 +6,7 @@ import { Children, Fragment } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
   container: "_1e0c1txw",
-  firstChild: "_fb251b66 _t1diidpf _u6eridpf",
+  firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
   lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
 };
 export const ToolbarButtonGroup = ({

package/dist/es2019/ui/ToolbarSection.compiled.css

@@ -1,2 +1,7 @@
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._195gu2gc{margin-inline:var(--ds-space-100,8px)}
+._1bsbt94y{width:1px}
 ._1e0c1txw{display:flex}
-._4cvr1h6o{align-items:center}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}
+._bfhkmuej{background-color:var(--ds-border,#091e4224)}

package/dist/es2019/ui/ToolbarSection.js

@@ -1,17 +1,22 @@
 /* ToolbarSection.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ToolbarSection.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  container: "_1e0c1txw _4cvr1h6o"
+  container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
 };
+const separator = null;
 export const ToolbarSection = ({
   children,
-  testId
+  testId,
+  hasSeparator
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container,
+    xcss: cx(styles.container),
     testId: testId
-  }, children);
+  }, hasSeparator && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+  }), children);
 };

package/dist/esm/hooks/ui-context.js

@@ -2,7 +2,8 @@ import React, { createContext, useContext } from 'react';
 var ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   preventDefaultOnMouseDown: false,
-  isDisabled: false
+  isDisabled: false,
+  popupsMountPoint: undefined
 });
 
 /**
@@ -19,12 +20,14 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
   var children = _ref.children,
     onDropdownOpenChanged = _ref.onDropdownOpenChanged,
     preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    popupsMountPoint = _ref.popupsMountPoint;
   return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
       preventDefaultOnMouseDown: preventDefaultOnMouseDown,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      popupsMountPoint: popupsMountPoint
     }
   }, children);
 };

package/dist/esm/ui/Toolbar.compiled.css

@@ -1,13 +1,10 @@
 
-._2rkoi2wt{border-radius:6px}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._2rkoi2wt{border-radius:6px}
+._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1e0c1txw{display:flex}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
-._ca0q12x7{padding-top:var(--ds-space-075,6px)}
-._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/ui/Toolbar.js

@@ -5,9 +5,9 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
   toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
-  primaryToolbar: "_bfhkvuon _1tkezwfg _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp"
+  primaryToolbar: "_bfhkvuon _1tkezwfg"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar

package/dist/esm/ui/ToolbarButtonGroup.compiled.css

@@ -1,6 +1,5 @@
 
-._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
-._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
+._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
 ._1jiyidpf button{border-bottom-left-radius:0}
 ._t1diidpf button{border-top-right-radius:0}
 ._u6eridpf button{border-bottom-right-radius:0}

package/dist/esm/ui/ToolbarButtonGroup.js

@@ -6,7 +6,7 @@ import { Children, Fragment } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
   container: "_1e0c1txw",
-  firstChild: "_fb251b66 _t1diidpf _u6eridpf",
+  firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
   lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
 };
 export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {

package/dist/esm/ui/ToolbarSection.compiled.css

@@ -1,2 +1,7 @@
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._195gu2gc{margin-inline:var(--ds-space-100,8px)}
+._1bsbt94y{width:1px}
 ._1e0c1txw{display:flex}
-._4cvr1h6o{align-items:center}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}
+._bfhkmuej{background-color:var(--ds-border,#091e4224)}

package/dist/esm/ui/ToolbarSection.js

@@ -1,16 +1,21 @@
 /* ToolbarSection.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ToolbarSection.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  container: "_1e0c1txw _4cvr1h6o"
+  container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
 };
+var separator = null;
 export var ToolbarSection = function ToolbarSection(_ref) {
   var children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    hasSeparator = _ref.hasSeparator;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container,
+    xcss: cx(styles.container),
     testId: testId
-  }, children);
+  }, hasSeparator && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+  }), children);
 };

package/dist/types/hooks/ui-context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
-type ToolbarUIContextType = {
+export type ToolbarUIContextType = {
     /**
      * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
      *
@@ -15,6 +15,7 @@ type ToolbarUIContextType = {
      * Indicates whether the toolbar is disabled when the editor is offline.
      */
     isDisabled?: boolean;
+    popupsMountPoint?: HTMLElement;
 };
 /**
  * Access consumer specific config and state within a toolbar component
@@ -23,5 +24,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -66,4 +66,4 @@ export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export type { IconComponent } from './types';
-export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
+export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';

package/dist/types/ui/Toolbar.d.ts

@@ -1,6 +1,11 @@
 import React, { type ReactNode } from 'react';
 type ToolbarProps = {
     children?: ReactNode;
+    /**
+     * aria-label for the toolbar (No localisation needed as it won't be read by screen readers).
+     *
+     * use case: query select the toolbar to position floating toolbar
+     */
     label: string;
 };
 /**

package/dist/types/ui/ToolbarSection.d.ts

@@ -1,7 +1,15 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarSectionProps = {
     children?: ReactNode;
     testId?: string;
+    /**
+     * Whether to add a separator at the start of the section
+     */
+    hasSeparator?: boolean;
 };
-export declare const ToolbarSection: ({ children, testId }: ToolbarSectionProps) => React.JSX.Element;
+export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/hooks/ui-context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
-type ToolbarUIContextType = {
+export type ToolbarUIContextType = {
     /**
      * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
      *
@@ -15,6 +15,7 @@ type ToolbarUIContextType = {
      * Indicates whether the toolbar is disabled when the editor is offline.
      */
     isDisabled?: boolean;
+    popupsMountPoint?: HTMLElement;
 };
 /**
  * Access consumer specific config and state within a toolbar component
@@ -23,5 +24,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/index.d.ts

@@ -66,4 +66,4 @@ export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export type { IconComponent } from './types';
-export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
+export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';

package/dist/types-ts4.5/ui/Toolbar.d.ts

@@ -1,6 +1,11 @@
 import React, { type ReactNode } from 'react';
 type ToolbarProps = {
     children?: ReactNode;
+    /**
+     * aria-label for the toolbar (No localisation needed as it won't be read by screen readers).
+     *
+     * use case: query select the toolbar to position floating toolbar
+     */
     label: string;
 };
 /**

package/dist/types-ts4.5/ui/ToolbarSection.d.ts

@@ -1,7 +1,15 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarSectionProps = {
     children?: ReactNode;
     testId?: string;
+    /**
+     * Whether to add a separator at the start of the section
+     */
+    hasSeparator?: boolean;
 };
-export declare const ToolbarSection: ({ children, testId }: ToolbarSectionProps) => React.JSX.Element;
+export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.3.4",
+	"version": "0.3.5",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",

package/src/hooks/ui-context.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext } from 'react';
 
 import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
 
-type ToolbarUIContextType = {
+export type ToolbarUIContextType = {
 	/**
 	 * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
 	 *
@@ -19,12 +19,14 @@ type ToolbarUIContextType = {
 	 * Indicates whether the toolbar is disabled when the editor is offline.
 	 */
 	isDisabled?: boolean;
+	popupsMountPoint?: HTMLElement;
 };
 
 const ToolbarUIContext = createContext<ToolbarUIContextType>({
 	onDropdownOpenChanged: () => {},
 	preventDefaultOnMouseDown: false,
 	isDisabled: false,
+	popupsMountPoint: undefined,
 });
 
 /**
@@ -49,10 +51,11 @@ export const ToolbarUIProvider = ({
 	onDropdownOpenChanged,
 	preventDefaultOnMouseDown,
 	isDisabled,
+	popupsMountPoint,
 }: ToolbarUIProviderProps) => {
 	return (
 		<ToolbarUIContext.Provider
-			value={{ onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled }}
+			value={{ onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint }}
 		>
 			{children}
 		</ToolbarUIContext.Provider>

package/src/index.ts

@@ -71,4 +71,4 @@ export { default as ColorPalette } from './ui/ColorPalette';
 
 export type { IconComponent } from './types';
 
-export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
+export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';

package/src/ui/Toolbar.tsx

@@ -10,6 +10,7 @@ const styles = cssMap({
 		borderRadius: '6px',
 		display: 'flex',
 		alignItems: 'center',
+		gap: token('space.050'),
 	},
 	toolbar: {
 		height: '36px',
@@ -20,15 +21,16 @@ const styles = cssMap({
 	primaryToolbar: {
 		backgroundColor: token('elevation.surface'),
 		minHeight: '32px',
-		paddingTop: token('space.075'),
-		paddingBottom: token('space.075'),
-		paddingLeft: token('space.150'),
-		paddingRight: token('space.150'),
 	},
 });
 
 type ToolbarProps = {
 	children?: ReactNode;
+	/**
+	 * aria-label for the toolbar (No localisation needed as it won't be read by screen readers).
+	 *
+	 * use case: query select the toolbar to position floating toolbar
+	 */
 	label: string;
 };
 

package/src/ui/ToolbarButtonGroup.tsx

@@ -18,7 +18,7 @@ const styles = cssMap({
 		button: {
 			borderTopRightRadius: 0,
 			borderBottomRightRadius: 0,
-			paddingInline: token('space.050'),
+			paddingInline: token('space.075'),
 		},
 	},
 	lastChild: {

package/src/ui/ToolbarSection.tsx

@@ -1,23 +1,43 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 
-import { cssMap } from '@atlaskit/css';
+import { css, jsx } from '@compiled/react';
+
+import { cssMap, cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
 	container: {
 		display: 'flex',
 		alignItems: 'center',
+		gap: token('space.050'),
 	},
 });
 
+const separator = css({
+	marginInline: token('space.100'),
+	height: '20px',
+	width: '1px',
+	backgroundColor: token('color.border'),
+});
+
 type ToolbarSectionProps = {
 	children?: ReactNode;
 	testId?: string;
+	/**
+	 * Whether to add a separator at the start of the section
+	 */
+	hasSeparator?: boolean;
 };
 
-export const ToolbarSection = ({ children, testId }: ToolbarSectionProps) => {
+export const ToolbarSection = ({ children, testId, hasSeparator }: ToolbarSectionProps) => {
 	return (
-		<Box xcss={styles.container} testId={testId}>
+		<Box xcss={cx(styles.container)} testId={testId}>
+			{hasSeparator && <div css={separator} />}
 			{children}
 		</Box>
 	);