@atlaskit/editor-toolbar 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-toolbar
 
+## 0.3.3
+
+### Patch Changes
+
+- [`f78a34afab8d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f78a34afab8d4) -
+  [ux] ED-28961 register undo redo and track changes buttons to new toolbar behind
+  platform_editor_toolbar_aifc. adds ai buttons into comment toolbar.
+
 ## 0.3.2
 
 ### Patch Changes

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

@@ -9,7 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 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 ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
-  preventDefaultOnMouseDown: false
+  preventDefaultOnMouseDown: false,
+  isDisabled: false
 });
 
 /**
@@ -25,11 +26,13 @@ var useToolbarUI = exports.useToolbarUI = function useToolbarUI() {
 var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_ref) {
   var children = _ref.children,
     onDropdownOpenChanged = _ref.onDropdownOpenChanged,
-    preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown;
+    preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
+    isDisabled = _ref.isDisabled;
   return /*#__PURE__*/_react.default.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
-      preventDefaultOnMouseDown: preventDefaultOnMouseDown
+      preventDefaultOnMouseDown: preventDefaultOnMouseDown,
+      isDisabled: isDisabled
     }
   }, children);
 };

package/dist/cjs/index.js

@@ -178,6 +178,12 @@ Object.defineProperty(exports, "HeadingTwoIcon", {
     return _HeadingTwoIcon.HeadingTwoIcon;
   }
 });
+Object.defineProperty(exports, "HistoryIcon", {
+  enumerable: true,
+  get: function get() {
+    return _HistoryIcon.HistoryIcon;
+  }
+});
 Object.defineProperty(exports, "ImageIcon", {
   enumerable: true,
   get: function get() {
@@ -268,6 +274,12 @@ Object.defineProperty(exports, "QuoteIcon", {
     return _QuoteIcon.QuoteIcon;
   }
 });
+Object.defineProperty(exports, "RedoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _RedoIcon.RedoIcon;
+  }
+});
 Object.defineProperty(exports, "ShowMoreHorizontalIcon", {
   enumerable: true,
   get: function get() {
@@ -394,6 +406,12 @@ Object.defineProperty(exports, "UnderlineIcon", {
     return _UnderlineIcon.UnderlineIcon;
   }
 });
+Object.defineProperty(exports, "UndoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _UndoIcon.UndoIcon;
+  }
+});
 Object.defineProperty(exports, "useToolbarDropdownMenu", {
   enumerable: true,
   get: function get() {
@@ -469,5 +487,8 @@ var _ImageIcon = require("./ui/icons/ImageIcon");
 var _MentionIcon = require("./ui/icons/MentionIcon");
 var _TableIcon = require("./ui/icons/TableIcon");
 var _TaskIcon = require("./ui/icons/TaskIcon");
+var _UndoIcon = require("./ui/icons/UndoIcon");
+var _RedoIcon = require("./ui/icons/RedoIcon");
+var _HistoryIcon = require("./ui/icons/HistoryIcon");
 var _ColorPalette = _interopRequireDefault(require("./ui/ColorPalette"));
 var _uiContext = require("./hooks/ui-context");

package/dist/cjs/ui/ToolbarButton.js

@@ -35,10 +35,12 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
-    preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown;
+    preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
+    ctxDisabled = _useToolbarUI.isDisabled;
+  var disabled = Boolean(ctxDisabled || isDisabled);
   return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     ref: ref,
-    xcss: (0, _css.cx)(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
+    xcss: (0, _css.cx)(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
     "aria-pressed": isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
@@ -50,7 +52,7 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     onBlur: onBlur,
     onFocus: onFocus,
     testId: testId,
-    isDisabled: isDisabled,
+    isDisabled: disabled,
     onMouseDown: function onMouseDown(event) {
       if (preventDefaultOnMouseDown) {
         event.preventDefault();

package/dist/cjs/ui/icons/HistoryIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HistoryIcon", {
+  enumerable: true,
+  get: function get() {
+    return _history.default;
+  }
+});
+var _history = _interopRequireDefault(require("@atlaskit/icon-lab/core/history"));

package/dist/cjs/ui/icons/RedoIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RedoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _redo.default;
+  }
+});
+var _redo = _interopRequireDefault(require("@atlaskit/icon/core/redo"));

package/dist/cjs/ui/icons/UndoIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UndoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _undo.default;
+  }
+});
+var _undo = _interopRequireDefault(require("@atlaskit/icon/core/undo"));

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

@@ -1,7 +1,8 @@
 import React, { createContext, useContext } from 'react';
 const ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: () => {},
-  preventDefaultOnMouseDown: false
+  preventDefaultOnMouseDown: false,
+  isDisabled: false
 });
 
 /**
@@ -17,12 +18,14 @@ export const useToolbarUI = () => {
 export const ToolbarUIProvider = ({
   children,
   onDropdownOpenChanged,
-  preventDefaultOnMouseDown
+  preventDefaultOnMouseDown,
+  isDisabled
 }) => {
   return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged,
-      preventDefaultOnMouseDown
+      preventDefaultOnMouseDown,
+      isDisabled
     }
   }, children);
 };

package/dist/es2019/index.js

@@ -62,5 +62,8 @@ export { ImageIcon } from './ui/icons/ImageIcon';
 export { MentionIcon } from './ui/icons/MentionIcon';
 export { TableIcon } from './ui/icons/TableIcon';
 export { TaskIcon } from './ui/icons/TaskIcon';
+export { UndoIcon } from './ui/icons/UndoIcon';
+export { RedoIcon } from './ui/icons/RedoIcon';
+export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/es2019/ui/ToolbarButton.js

@@ -28,11 +28,13 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   label
 }, ref) => {
   const {
-    preventDefaultOnMouseDown
+    preventDefaultOnMouseDown,
+    isDisabled: ctxDisabled
   } = useToolbarUI();
+  const disabled = Boolean(ctxDisabled || isDisabled);
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
-    xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
+    xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
     "aria-pressed": isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
@@ -44,7 +46,7 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
     onBlur: onBlur,
     onFocus: onFocus,
     testId: testId,
-    isDisabled: isDisabled,
+    isDisabled: disabled,
     onMouseDown: event => {
       if (preventDefaultOnMouseDown) {
         event.preventDefault();

package/dist/es2019/ui/icons/HistoryIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HistoryIcon } from '@atlaskit/icon-lab/core/history';

package/dist/es2019/ui/icons/RedoIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as RedoIcon } from '@atlaskit/icon/core/redo';

package/dist/es2019/ui/icons/UndoIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as UndoIcon } from '@atlaskit/icon/core/undo';

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

@@ -1,7 +1,8 @@
 import React, { createContext, useContext } from 'react';
 var ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
-  preventDefaultOnMouseDown: false
+  preventDefaultOnMouseDown: false,
+  isDisabled: false
 });
 
 /**
@@ -17,11 +18,13 @@ export var useToolbarUI = function useToolbarUI() {
 export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
   var children = _ref.children,
     onDropdownOpenChanged = _ref.onDropdownOpenChanged,
-    preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown;
+    preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
+    isDisabled = _ref.isDisabled;
   return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
-      preventDefaultOnMouseDown: preventDefaultOnMouseDown
+      preventDefaultOnMouseDown: preventDefaultOnMouseDown,
+      isDisabled: isDisabled
     }
   }, children);
 };

package/dist/esm/index.js

@@ -62,5 +62,8 @@ export { ImageIcon } from './ui/icons/ImageIcon';
 export { MentionIcon } from './ui/icons/MentionIcon';
 export { TableIcon } from './ui/icons/TableIcon';
 export { TaskIcon } from './ui/icons/TaskIcon';
+export { UndoIcon } from './ui/icons/UndoIcon';
+export { RedoIcon } from './ui/icons/RedoIcon';
+export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/esm/ui/ToolbarButton.js

@@ -27,10 +27,12 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label;
   var _useToolbarUI = useToolbarUI(),
-    preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown;
+    preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
+    ctxDisabled = _useToolbarUI.isDisabled;
+  var disabled = Boolean(ctxDisabled || isDisabled);
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
-    xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
+    xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
     "aria-pressed": isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
@@ -42,7 +44,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     testId: testId,
-    isDisabled: isDisabled,
+    isDisabled: disabled,
     onMouseDown: function onMouseDown(event) {
       if (preventDefaultOnMouseDown) {
         event.preventDefault();

package/dist/esm/ui/icons/HistoryIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HistoryIcon } from '@atlaskit/icon-lab/core/history';

package/dist/esm/ui/icons/RedoIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as RedoIcon } from '@atlaskit/icon/core/redo';

package/dist/esm/ui/icons/UndoIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as UndoIcon } from '@atlaskit/icon/core/undo';

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

@@ -11,6 +11,10 @@ type ToolbarUIContextType = {
      * Whether to prevent default behavior on mouse down events on ToolbarButton.
      */
     preventDefaultOnMouseDown?: boolean;
+    /**
+     * Indicates whether the toolbar is disabled when the editor is offline.
+     */
+    isDisabled?: boolean;
 };
 /**
  * Access consumer specific config and state within a toolbar component
@@ -19,5 +23,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -61,6 +61,9 @@ export { ImageIcon } from './ui/icons/ImageIcon';
 export { MentionIcon } from './ui/icons/MentionIcon';
 export { TableIcon } from './ui/icons/TableIcon';
 export { TaskIcon } from './ui/icons/TaskIcon';
+export { UndoIcon } from './ui/icons/UndoIcon';
+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';

package/dist/types/ui/icons/HistoryIcon.d.ts

@@ -0,0 +1 @@
+export { default as HistoryIcon } from '@atlaskit/icon-lab/core/history';

package/dist/types/ui/icons/RedoIcon.d.ts

@@ -0,0 +1 @@
+export { default as RedoIcon } from '@atlaskit/icon/core/redo';

package/dist/types/ui/icons/UndoIcon.d.ts

@@ -0,0 +1 @@
+export { default as UndoIcon } from '@atlaskit/icon/core/undo';

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

@@ -11,6 +11,10 @@ type ToolbarUIContextType = {
      * Whether to prevent default behavior on mouse down events on ToolbarButton.
      */
     preventDefaultOnMouseDown?: boolean;
+    /**
+     * Indicates whether the toolbar is disabled when the editor is offline.
+     */
+    isDisabled?: boolean;
 };
 /**
  * Access consumer specific config and state within a toolbar component
@@ -19,5 +23,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

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

@@ -61,6 +61,9 @@ export { ImageIcon } from './ui/icons/ImageIcon';
 export { MentionIcon } from './ui/icons/MentionIcon';
 export { TableIcon } from './ui/icons/TableIcon';
 export { TaskIcon } from './ui/icons/TaskIcon';
+export { UndoIcon } from './ui/icons/UndoIcon';
+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';

package/dist/types-ts4.5/ui/icons/HistoryIcon.d.ts

@@ -0,0 +1 @@
+export { default as HistoryIcon } from '@atlaskit/icon-lab/core/history';

package/dist/types-ts4.5/ui/icons/RedoIcon.d.ts

@@ -0,0 +1 @@
+export { default as RedoIcon } from '@atlaskit/icon/core/redo';

package/dist/types-ts4.5/ui/icons/UndoIcon.d.ts

@@ -0,0 +1 @@
+export { default as UndoIcon } from '@atlaskit/icon/core/undo';

package/package.json

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

package/src/hooks/ui-context.tsx

@@ -14,11 +14,17 @@ type ToolbarUIContextType = {
 	 * Whether to prevent default behavior on mouse down events on ToolbarButton.
 	 */
 	preventDefaultOnMouseDown?: boolean;
+
+	/**
+	 * Indicates whether the toolbar is disabled when the editor is offline.
+	 */
+	isDisabled?: boolean;
 };
 
 const ToolbarUIContext = createContext<ToolbarUIContextType>({
 	onDropdownOpenChanged: () => {},
 	preventDefaultOnMouseDown: false,
+	isDisabled: false,
 });
 
 /**
@@ -42,9 +48,12 @@ export const ToolbarUIProvider = ({
 	children,
 	onDropdownOpenChanged,
 	preventDefaultOnMouseDown,
+	isDisabled,
 }: ToolbarUIProviderProps) => {
 	return (
-		<ToolbarUIContext.Provider value={{ onDropdownOpenChanged, preventDefaultOnMouseDown }}>
+		<ToolbarUIContext.Provider
+			value={{ onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled }}
+		>
 			{children}
 		</ToolbarUIContext.Provider>
 	);

package/src/index.ts

@@ -63,6 +63,9 @@ export { ImageIcon } from './ui/icons/ImageIcon';
 export { MentionIcon } from './ui/icons/MentionIcon';
 export { TableIcon } from './ui/icons/TableIcon';
 export { TaskIcon } from './ui/icons/TaskIcon';
+export { UndoIcon } from './ui/icons/UndoIcon';
+export { RedoIcon } from './ui/icons/RedoIcon';
+export { HistoryIcon } from './ui/icons/HistoryIcon';
 
 export { default as ColorPalette } from './ui/ColorPalette';
 

package/src/ui/ToolbarButton.tsx

@@ -84,14 +84,15 @@ export const ToolbarButton = forwardRef(
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
-		const { preventDefaultOnMouseDown } = useToolbarUI();
+		const { preventDefaultOnMouseDown, isDisabled: ctxDisabled } = useToolbarUI();
+		const disabled = Boolean(ctxDisabled || isDisabled);
 
 		return (
 			<Pressable
 				ref={ref}
 				xcss={cx(
 					styles.button,
-					isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
+					disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
 				)}
 				aria-pressed={isSelected}
 				aria-expanded={ariaExpanded}
@@ -104,7 +105,7 @@ export const ToolbarButton = forwardRef(
 				onBlur={onBlur}
 				onFocus={onFocus}
 				testId={testId}
-				isDisabled={isDisabled}
+				isDisabled={disabled}
 				onMouseDown={(event) => {
 					if (preventDefaultOnMouseDown) {
 						event.preventDefault();

package/src/ui/icons/HistoryIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HistoryIcon } from '@atlaskit/icon-lab/core/history'

package/src/ui/icons/ImageIcon.tsx

@@ -1,2 +1,2 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
-export {default as ImageIcon} from '@atlaskit/icon/core/image';
+export { default as ImageIcon } from '@atlaskit/icon/core/image';

package/src/ui/icons/LayoutIcon.tsx

@@ -1,2 +1,2 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
-export {default as LayoutIcon} from '@atlaskit/icon/core/layout-two-columns';
+export { default as LayoutIcon } from '@atlaskit/icon/core/layout-two-columns';

package/src/ui/icons/RedoIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as RedoIcon } from '@atlaskit/icon/core/redo'

package/src/ui/icons/UndoIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as UndoIcon } from '@atlaskit/icon/core/undo';