@atlaskit/editor-toolbar 1.8.1 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/hooks/ui-context.js +3 -0
  3. package/dist/cjs/ui/ToolbarButton.js +6 -3
  4. package/dist/cjs/ui/ToolbarNestedDropdownMenu.js +2 -0
  5. package/dist/es2019/hooks/ui-context.js +3 -0
  6. package/dist/es2019/ui/ToolbarButton.js +6 -3
  7. package/dist/es2019/ui/ToolbarNestedDropdownMenu.js +2 -0
  8. package/dist/esm/hooks/ui-context.js +3 -0
  9. package/dist/esm/ui/ToolbarButton.js +6 -3
  10. package/dist/esm/ui/ToolbarNestedDropdownMenu.js +2 -0
  11. package/dist/types/hooks/ui-context.d.ts +7 -1
  12. package/dist/types/ui/ToolbarButton.d.ts +1 -0
  13. package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts +4 -3
  14. package/dist/types-ts4.5/hooks/ui-context.d.ts +7 -1
  15. package/dist/types-ts4.5/ui/ToolbarButton.d.ts +1 -0
  16. package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts +4 -3
  17. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 1.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`450368a4cccf5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/450368a4cccf5) -
8
+ Support optional shouldIgnoreCloseEvent prop in ToolbarNestedDropdownMenu.
9
+
10
+ ### Patch Changes
11
+
12
+ - [`4f322a101cf47`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4f322a101cf47) -
13
+ Adds a disabledWithoutInteractionLogic prop to the toolbar to selectively enable some buttons
14
+ before editor interaction
15
+ - Updated dependencies
16
+
3
17
  ## 1.8.1
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/hooks/ui-context.js CHANGED
@@ -11,6 +11,7 @@ var ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
11
11
  onDropdownOpenChanged: function onDropdownOpenChanged() {},
12
12
  preventDefaultOnMouseDown: false,
13
13
  isDisabled: false,
14
+ disabledWithoutInteractionLogic: false,
14
15
  popupsMountPoint: undefined,
15
16
  fireAnalyticsEvent: undefined,
16
17
  keyboardNavigation: undefined
@@ -31,6 +32,7 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
31
32
  onDropdownOpenChanged = _ref.onDropdownOpenChanged,
32
33
  preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
33
34
  isDisabled = _ref.isDisabled,
35
+ disabledWithoutInteractionLogic = _ref.disabledWithoutInteractionLogic,
34
36
  popupsMountPoint = _ref.popupsMountPoint,
35
37
  popupsBoundariesElement = _ref.popupsBoundariesElement,
36
38
  popupsScrollableElement = _ref.popupsScrollableElement,
@@ -42,6 +44,7 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
42
44
  onDropdownOpenChanged: onDropdownOpenChanged,
43
45
  preventDefaultOnMouseDown: preventDefaultOnMouseDown,
44
46
  isDisabled: isDisabled,
47
+ disabledWithoutInteractionLogic: disabledWithoutInteractionLogic,
45
48
  popupsMountPoint: popupsMountPoint,
46
49
  popupsBoundariesElement: popupsBoundariesElement,
47
50
  popupsScrollableElement: popupsScrollableElement,
package/dist/cjs/ui/ToolbarButton.js CHANGED
@@ -35,11 +35,14 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
35
35
  isDisabled = _ref.isDisabled,
36
36
  ariaKeyshortcuts = _ref.ariaKeyshortcuts,
37
37
  label = _ref.label,
38
- interactionName = _ref.interactionName;
38
+ interactionName = _ref.interactionName,
39
+ ignoreInteractionDisabled = _ref.ignoreInteractionDisabled;
39
40
  var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
40
41
  preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
41
- ctxDisabled = _useToolbarUI.isDisabled;
42
- var disabled = Boolean(ctxDisabled || isDisabled);
42
+ ctxDisabled = _useToolbarUI.isDisabled,
43
+ disabledWithoutInteractionLogic = _useToolbarUI.disabledWithoutInteractionLogic;
44
+ // When ignoreInteractionDisabled=true, only use the disabled state without the interaction check
45
+ var disabled = Boolean((ignoreInteractionDisabled ? disabledWithoutInteractionLogic : ctxDisabled) || isDisabled);
43
46
  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
44
47
  ref: ref,
45
48
  xcss: (0, _css.cx)(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
package/dist/cjs/ui/ToolbarNestedDropdownMenu.js CHANGED
@@ -35,11 +35,13 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
35
35
  _onClick = _ref.onClick,
36
36
  _ref$shouldFitContain = _ref.shouldFitContainer,
37
37
  shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
38
+ shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
38
39
  shouldTitleWrap = _ref.shouldTitleWrap,
39
40
  tooltipContent = _ref.tooltipContent,
40
41
  dataExtensionItemKey = _ref['data-extension-item-key'];
41
42
  return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
42
43
  shouldFitContainer: shouldFitContainer,
44
+ shouldIgnoreCloseEvent: (0, _platformFeatureFlags.fg)('cc_blocks_changeboarding') ? shouldIgnoreCloseEvent : undefined,
43
45
  placement: "right-start",
44
46
  testId: dropdownTestId
45
47
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
package/dist/es2019/hooks/ui-context.js CHANGED
@@ -3,6 +3,7 @@ const ToolbarUIContext = /*#__PURE__*/createContext({
3
3
  onDropdownOpenChanged: () => {},
4
4
  preventDefaultOnMouseDown: false,
5
5
  isDisabled: false,
6
+ disabledWithoutInteractionLogic: false,
6
7
  popupsMountPoint: undefined,
7
8
  fireAnalyticsEvent: undefined,
8
9
  keyboardNavigation: undefined
@@ -23,6 +24,7 @@ export const ToolbarUIProvider = ({
23
24
  onDropdownOpenChanged,
24
25
  preventDefaultOnMouseDown,
25
26
  isDisabled,
27
+ disabledWithoutInteractionLogic,
26
28
  popupsMountPoint,
27
29
  popupsBoundariesElement,
28
30
  popupsScrollableElement,
@@ -35,6 +37,7 @@ export const ToolbarUIProvider = ({
35
37
  onDropdownOpenChanged,
36
38
  preventDefaultOnMouseDown,
37
39
  isDisabled,
40
+ disabledWithoutInteractionLogic,
38
41
  popupsMountPoint,
39
42
  popupsBoundariesElement,
40
43
  popupsScrollableElement,
package/dist/es2019/ui/ToolbarButton.js CHANGED
@@ -27,13 +27,16 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
27
27
  isDisabled,
28
28
  ariaKeyshortcuts,
29
29
  label,
30
- interactionName
30
+ interactionName,
31
+ ignoreInteractionDisabled
31
32
  }, ref) => {
32
33
  const {
33
34
  preventDefaultOnMouseDown,
34
- isDisabled: ctxDisabled
35
+ isDisabled: ctxDisabled,
36
+ disabledWithoutInteractionLogic
35
37
  } = useToolbarUI();
36
- const disabled = Boolean(ctxDisabled || isDisabled);
38
+ // When ignoreInteractionDisabled=true, only use the disabled state without the interaction check
39
+ const disabled = Boolean((ignoreInteractionDisabled ? disabledWithoutInteractionLogic : ctxDisabled) || isDisabled);
37
40
  return /*#__PURE__*/React.createElement(Pressable, {
38
41
  ref: ref,
39
42
  xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
package/dist/es2019/ui/ToolbarNestedDropdownMenu.js CHANGED
@@ -24,12 +24,14 @@ export const ToolbarNestedDropdownMenu = ({
24
24
  enableMaxHeight = false,
25
25
  onClick,
26
26
  shouldFitContainer = false,
27
+ shouldIgnoreCloseEvent,
27
28
  shouldTitleWrap,
28
29
  tooltipContent,
29
30
  'data-extension-item-key': dataExtensionItemKey
30
31
  }) => {
31
32
  return /*#__PURE__*/React.createElement(DropdownMenu, {
32
33
  shouldFitContainer: shouldFitContainer,
34
+ shouldIgnoreCloseEvent: fg('cc_blocks_changeboarding') ? shouldIgnoreCloseEvent : undefined,
33
35
  placement: "right-start",
34
36
  testId: dropdownTestId
35
37
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
package/dist/esm/hooks/ui-context.js CHANGED
@@ -3,6 +3,7 @@ var ToolbarUIContext = /*#__PURE__*/createContext({
3
3
  onDropdownOpenChanged: function onDropdownOpenChanged() {},
4
4
  preventDefaultOnMouseDown: false,
5
5
  isDisabled: false,
6
+ disabledWithoutInteractionLogic: false,
6
7
  popupsMountPoint: undefined,
7
8
  fireAnalyticsEvent: undefined,
8
9
  keyboardNavigation: undefined
@@ -23,6 +24,7 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
23
24
  onDropdownOpenChanged = _ref.onDropdownOpenChanged,
24
25
  preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
25
26
  isDisabled = _ref.isDisabled,
27
+ disabledWithoutInteractionLogic = _ref.disabledWithoutInteractionLogic,
26
28
  popupsMountPoint = _ref.popupsMountPoint,
27
29
  popupsBoundariesElement = _ref.popupsBoundariesElement,
28
30
  popupsScrollableElement = _ref.popupsScrollableElement,
@@ -34,6 +36,7 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
34
36
  onDropdownOpenChanged: onDropdownOpenChanged,
35
37
  preventDefaultOnMouseDown: preventDefaultOnMouseDown,
36
38
  isDisabled: isDisabled,
39
+ disabledWithoutInteractionLogic: disabledWithoutInteractionLogic,
37
40
  popupsMountPoint: popupsMountPoint,
38
41
  popupsBoundariesElement: popupsBoundariesElement,
39
42
  popupsScrollableElement: popupsScrollableElement,
package/dist/esm/ui/ToolbarButton.js CHANGED
@@ -27,11 +27,14 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
27
27
  isDisabled = _ref.isDisabled,
28
28
  ariaKeyshortcuts = _ref.ariaKeyshortcuts,
29
29
  label = _ref.label,
30
- interactionName = _ref.interactionName;
30
+ interactionName = _ref.interactionName,
31
+ ignoreInteractionDisabled = _ref.ignoreInteractionDisabled;
31
32
  var _useToolbarUI = useToolbarUI(),
32
33
  preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
33
- ctxDisabled = _useToolbarUI.isDisabled;
34
- var disabled = Boolean(ctxDisabled || isDisabled);
34
+ ctxDisabled = _useToolbarUI.isDisabled,
35
+ disabledWithoutInteractionLogic = _useToolbarUI.disabledWithoutInteractionLogic;
36
+ // When ignoreInteractionDisabled=true, only use the disabled state without the interaction check
37
+ var disabled = Boolean((ignoreInteractionDisabled ? disabledWithoutInteractionLogic : ctxDisabled) || isDisabled);
35
38
  return /*#__PURE__*/React.createElement(Pressable, {
36
39
  ref: ref,
37
40
  xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
package/dist/esm/ui/ToolbarNestedDropdownMenu.js CHANGED
@@ -26,11 +26,13 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
26
26
  _onClick = _ref.onClick,
27
27
  _ref$shouldFitContain = _ref.shouldFitContainer,
28
28
  shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
29
+ shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
29
30
  shouldTitleWrap = _ref.shouldTitleWrap,
30
31
  tooltipContent = _ref.tooltipContent,
31
32
  dataExtensionItemKey = _ref['data-extension-item-key'];
32
33
  return /*#__PURE__*/React.createElement(DropdownMenu, {
33
34
  shouldFitContainer: shouldFitContainer,
35
+ shouldIgnoreCloseEvent: fg('cc_blocks_changeboarding') ? shouldIgnoreCloseEvent : undefined,
34
36
  placement: "right-start",
35
37
  testId: dropdownTestId
36
38
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
package/dist/types/hooks/ui-context.d.ts CHANGED
@@ -9,6 +9,12 @@ type AnalyticsEventPayload = {
9
9
  };
10
10
  type FireAnalyticsEvent = (payload: AnalyticsEventPayload) => void | undefined;
11
11
  export type ToolbarUIContextType = {
12
+ /**
13
+ * True only when the toolbar is disabled from isDisabled.
14
+ * Excludes disabling under platform_editor_default_toolbar_state, where buttons are
15
+ * disabled by default until the user interacts with the editor.
16
+ */
17
+ disabledWithoutInteractionLogic?: boolean;
12
18
  fireAnalyticsEvent?: FireAnalyticsEvent;
13
19
  /**
14
20
  * Indicates whether the toolbar is disabled when the editor is offline.
@@ -39,5 +45,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
39
45
  type ToolbarUIProviderProps = {
40
46
  children: React.ReactNode;
41
47
  } & ToolbarUIContextType;
42
- export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
48
+ export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, disabledWithoutInteractionLogic, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
43
49
  export {};
package/dist/types/ui/ToolbarButton.d.ts CHANGED
@@ -6,6 +6,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
6
6
  children?: ReactNode;
7
7
  iconBefore: React.ReactNode;
8
8
  id?: string;
9
+ ignoreInteractionDisabled?: boolean;
9
10
  interactionName?: string;
10
11
  isDisabled?: boolean;
11
12
  isSelected?: boolean;
package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import type { ReactNode } from 'react';
5
+ import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
6
6
  type ToolbarNestedDropdownMenuProps = {
7
7
  children?: ReactNode;
8
8
  'data-extension-item-key'?: string;
@@ -15,12 +15,13 @@ type ToolbarNestedDropdownMenuProps = {
15
15
  */
16
16
  enableMaxHeight?: boolean;
17
17
  isDisabled?: boolean;
18
- onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
18
+ onClick?: (e: MouseEvent | KeyboardEvent) => void;
19
19
  shouldFitContainer?: boolean;
20
+ shouldIgnoreCloseEvent?: (event: Event | MouseEvent | KeyboardEvent) => boolean;
20
21
  shouldTitleWrap?: boolean;
21
22
  testId?: string;
22
23
  text?: string;
23
24
  tooltipContent?: ReactNode;
24
25
  };
25
- export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
26
+ export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldIgnoreCloseEvent, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
26
27
  export {};
package/dist/types-ts4.5/hooks/ui-context.d.ts CHANGED
@@ -9,6 +9,12 @@ type AnalyticsEventPayload = {
9
9
  };
10
10
  type FireAnalyticsEvent = (payload: AnalyticsEventPayload) => void | undefined;
11
11
  export type ToolbarUIContextType = {
12
+ /**
13
+ * True only when the toolbar is disabled from isDisabled.
14
+ * Excludes disabling under platform_editor_default_toolbar_state, where buttons are
15
+ * disabled by default until the user interacts with the editor.
16
+ */
17
+ disabledWithoutInteractionLogic?: boolean;
12
18
  fireAnalyticsEvent?: FireAnalyticsEvent;
13
19
  /**
14
20
  * Indicates whether the toolbar is disabled when the editor is offline.
@@ -39,5 +45,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
39
45
  type ToolbarUIProviderProps = {
40
46
  children: React.ReactNode;
41
47
  } & ToolbarUIContextType;
42
- export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
48
+ export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, disabledWithoutInteractionLogic, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
43
49
  export {};
package/dist/types-ts4.5/ui/ToolbarButton.d.ts CHANGED
@@ -6,6 +6,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
6
6
  children?: ReactNode;
7
7
  iconBefore: React.ReactNode;
8
8
  id?: string;
9
+ ignoreInteractionDisabled?: boolean;
9
10
  interactionName?: string;
10
11
  isDisabled?: boolean;
11
12
  isSelected?: boolean;
package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import type { ReactNode } from 'react';
5
+ import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
6
6
  type ToolbarNestedDropdownMenuProps = {
7
7
  children?: ReactNode;
8
8
  'data-extension-item-key'?: string;
@@ -15,12 +15,13 @@ type ToolbarNestedDropdownMenuProps = {
15
15
  */
16
16
  enableMaxHeight?: boolean;
17
17
  isDisabled?: boolean;
18
- onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
18
+ onClick?: (e: MouseEvent | KeyboardEvent) => void;
19
19
  shouldFitContainer?: boolean;
20
+ shouldIgnoreCloseEvent?: (event: Event | MouseEvent | KeyboardEvent) => boolean;
20
21
  shouldTitleWrap?: boolean;
21
22
  testId?: string;
22
23
  text?: string;
23
24
  tooltipContent?: ReactNode;
24
25
  };
25
- export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
26
+ export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldIgnoreCloseEvent, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
26
27
  export {};
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "1.8.1",
6
+ "version": "1.9.0",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "react-compiler": {
@@ -31,11 +31,11 @@
31
31
  "@atlaskit/badge": "^18.6.0",
32
32
  "@atlaskit/browser-apis": "^0.0.2",
33
33
  "@atlaskit/css": "^0.19.0",
34
- "@atlaskit/dropdown-menu": "^16.9.0",
34
+ "@atlaskit/dropdown-menu": "^16.10.0",
35
35
  "@atlaskit/icon": "^35.3.0",
36
36
  "@atlaskit/icon-lab": "^6.12.0",
37
37
  "@atlaskit/platform-feature-flags": "^1.1.0",
38
- "@atlaskit/popup": "^4.22.0",
38
+ "@atlaskit/popup": "^4.23.0",
39
39
  "@atlaskit/primitives": "^19.0.0",
40
40
  "@atlaskit/tmp-editor-statsig": "^85.0.0",
41
41
  "@atlaskit/tokens": "^13.1.0",