@atlaskit/editor-common 67.0.0 → 68.0.1

package/dist/esm/ui/OverflowShadow/shadowObserver.js

@@ -0,0 +1,98 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var ShadowKeys;
+
+(function (ShadowKeys) {
+  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
+  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
+})(ShadowKeys || (ShadowKeys = {}));
+
+export var shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+
+var requestIdleCallback = function requestIdleCallback(fn) {
+  return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
+};
+
+var cancelIdleCallback = function cancelIdleCallback(id) {
+  return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
+};
+
+export var ShadowObserver = /*#__PURE__*/function () {
+  function ShadowObserver(_ref) {
+    var _defineProperty2,
+        _this = this;
+
+    var scrollContainer = _ref.scrollContainer,
+        onUpdateShadows = _ref.onUpdateShadows;
+
+    _classCallCheck(this, ShadowObserver);
+
+    _defineProperty(this, "sentinels", {});
+
+    _defineProperty(this, "shadowStates", (_defineProperty2 = {}, _defineProperty(_defineProperty2, ShadowKeys.SHOW_LEFT_SHADOW, false), _defineProperty(_defineProperty2, ShadowKeys.SHOW_RIGHT_SHADOW, false), _defineProperty2));
+
+    _defineProperty(this, "init", function () {
+      if (!_this.scrollContainer || _this.intersectionObserver) {
+        return;
+      }
+
+      _this.sentinels.right = document.createElement('div');
+
+      _this.sentinels.right.classList.add(shadowObserverClassNames.SENTINEL_RIGHT);
+
+      _this.scrollContainer.appendChild(_this.sentinels.right);
+
+      _this.sentinels.left = document.createElement('div');
+
+      _this.sentinels.left.classList.add(shadowObserverClassNames.SENTINEL_LEFT);
+
+      _this.scrollContainer.prepend(_this.sentinels.left);
+
+      _this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+        entries.forEach(_this.onIntersect);
+      }, {
+        root: _this.scrollContainer
+      });
+
+      _this.intersectionObserver.observe(_this.sentinels.left);
+
+      _this.intersectionObserver.observe(_this.sentinels.right);
+    });
+
+    _defineProperty(this, "onIntersect", function (entry) {
+      _this.requestCallbackId = requestIdleCallback(function () {
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_LEFT)) {
+          _this.shadowStates[ShadowKeys.SHOW_LEFT_SHADOW] = !entry.isIntersecting;
+        }
+
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_RIGHT)) {
+          _this.shadowStates[ShadowKeys.SHOW_RIGHT_SHADOW] = !entry.isIntersecting;
+        }
+
+        _this.onUpdateShadows(_this.shadowStates);
+      });
+    });
+
+    this.scrollContainer = scrollContainer;
+    this.onUpdateShadows = onUpdateShadows;
+    this.init();
+  }
+
+  _createClass(ShadowObserver, [{
+    key: "dispose",
+    value: function dispose() {
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+        this.intersectionObserver = undefined;
+        this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
+      }
+    }
+  }]);
+
+  return ShadowObserver;
+}();

package/dist/esm/ui/index.js

@@ -10,6 +10,7 @@ export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
 export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
+export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';

package/dist/esm/utils/breakout.js

@@ -29,8 +29,8 @@ var breakoutConsts = {
         return '100%';
     }
   },
-  calcLineLength: function calcLineLength(containerWidth, allowDynamicTextSizing) {
-    return allowDynamicTextSizing && containerWidth ? breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth)) : breakoutConsts.defaultLayoutWidth;
+  calcLineLength: function calcLineLength() {
+    return breakoutConsts.defaultLayoutWidth;
   },
   calcWideWidth: function calcWideWidth() {
     var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;

package/dist/esm/utils/unsupportedContent/get-unsupported-content-level-data.js

@@ -1,4 +1,4 @@
-import { traverse } from '@atlaskit/adf-utils';
+import { traverse } from '@atlaskit/adf-utils/traverse';
 export var UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
 
 (function (UNSUPPORTED_CONTENT_LEVEL_SEVERITY) {

package/dist/esm/utils/validate-using-spec.js

@@ -1,4 +1,4 @@
-import { validator } from '@atlaskit/adf-utils';
+import { validator } from '@atlaskit/adf-utils/validator';
 export var UNSUPPORTED_NODE_ATTRIBUTE = 'unsupportedNodeAttribute';
 import { ACTION_SUBJECT_ID } from './analytics';
 import { fireUnsupportedEvent } from './track-unsupported-content';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "67.0.0",
+	"version": "68.0.1",
 	"sideEffects": false
 }

package/dist/types/extensions/manifest-helpers.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionKey, ExtensionManifest, ExtensionModuleAction, ExtensionModuleActionObject, ExtensionType, Module } from './types/extension-manifest';
 export declare const FORGE_EXTENSION_TYPE = "com.atlassian.ecosystem";
 export declare const getExtensionKeyAndNodeKey: (extensionKey: ExtensionKey, extensionType: ExtensionType) => string[];

package/dist/types/extensions/module-helpers.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionAPI, ExtensionAutoConvertHandler, ExtensionManifest, ExtensionModule, ExtensionProvider, ExtensionToolbarButton, MenuItem } from './types';
 export declare const groupBy: <T>(arr: T[], attr: keyof T, keyRenamer: (key: T[keyof T]) => string) => {
     [k: string]: T;

package/dist/types/extensions/types/extension-handler.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { Parameters } from './extension-parameters';
 export interface ExtensionParams<T extends Parameters> {
     extensionKey: string;

package/dist/types/extensions/types/extension-manifest-toolbar-item.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionAPI } from './extension-handler';
 import { ExtensionIconModule } from './extension-manifest-common';
 export declare type ToolbarButtonAction = (contextNode: ADFEntity, api: ExtensionAPI) => Promise<void>;

package/dist/types/extensions/types/extension-manifest.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionParams, UpdateExtension } from './extension-handler';
 import { ExtensionIconModule, MaybeESModule } from './extension-manifest-common';
 import { ContextualToolbar } from './extension-manifest-toolbar-item';

package/dist/types/extensions/types/utils.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionModuleActionHandler, ExtensionType, Icon } from './extension-manifest';
 export declare type MenuItem = {
     key: string;

package/dist/types/provider-factory/autoformatting-provider.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 export declare type AutoformatReplacement = ADFEntity;
 export declare type AutoformatHandler = (match: Array<string>) => Promise<AutoformatReplacement>;
 export declare type AutoformatRuleset = {

package/dist/types/ui/BaseTheme/index.d.ts

@@ -3,15 +3,13 @@ import { Breakpoints } from '../WidthProvider';
 export declare function mapBreakpointToLayoutMaxWidth(breakpoint: Breakpoints): 760 | 850 | 680;
 declare type BaseThemeWrapperProps = {
     breakpoint: Breakpoints;
-    dynamicTextSizing?: boolean;
     children: React.ReactNode;
     baseFontSize?: number;
 };
-export declare function BaseThemeWrapper({ breakpoint, dynamicTextSizing, baseFontSize, children, }: BaseThemeWrapperProps): JSX.Element;
+export declare function BaseThemeWrapper({ baseFontSize, children, }: BaseThemeWrapperProps): JSX.Element;
 declare type BaseThemeProps = {
     children: React.ReactNode;
-    dynamicTextSizing?: boolean;
     baseFontSize?: number;
 };
-export declare function BaseTheme({ children, dynamicTextSizing, baseFontSize, }: BaseThemeProps): JSX.Element;
+export declare function BaseTheme({ children, baseFontSize }: BaseThemeProps): JSX.Element;
 export {};

package/dist/types/ui/OverflowShadow/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import { ShadowObserver } from './shadowObserver';
 export declare const shadowClassNames: {
     RIGHT_SHADOW: string;
     LEFT_SHADOW: string;
 };
 export interface OverflowShadowProps {
-    handleRef: (ref: HTMLElement | null) => void;
-    shadowClassNames: string;
+    handleRef?: (ref: HTMLElement | null) => void;
+    shadowClassNames?: string;
 }
 export interface OverflowShadowState {
     showLeftShadow: boolean;
@@ -13,12 +14,14 @@ export interface OverflowShadowState {
 }
 export interface OverflowShadowOptions {
     overflowSelector: string;
-    scrollableSelector?: string;
+    useShadowObserver?: boolean;
 }
 export default function overflowShadow<P>(Component: React.ComponentType<P & OverflowShadowProps> | React.StatelessComponent<P & OverflowShadowProps>, options: OverflowShadowOptions): {
     new (props: Readonly<P>): {
         overflowContainer?: HTMLElement | null | undefined;
         container?: HTMLElement | undefined;
+        shadowObserver?: ShadowObserver | undefined;
+        overflowContainerWidth: number;
         scrollable?: NodeList | undefined;
         diff?: number | undefined;
         state: {
@@ -33,6 +36,7 @@ export default function overflowShadow<P>(Component: React.ComponentType<P & Ove
         calcOverflowDiff: () => number;
         calcScrollableWidth: () => number;
         handleContainer: (container: HTMLElement | null) => void;
+        initShadowObserver(): void;
         render(): JSX.Element;
         context: any;
         setState<K extends keyof OverflowShadowState>(state: OverflowShadowState | ((prevState: Readonly<OverflowShadowState>, props: Readonly<P>) => OverflowShadowState | Pick<OverflowShadowState, K> | null) | Pick<OverflowShadowState, K> | null, callback?: (() => void) | undefined): void;
@@ -57,6 +61,8 @@ export default function overflowShadow<P>(Component: React.ComponentType<P & Ove
     new (props: P, context?: any): {
         overflowContainer?: HTMLElement | null | undefined;
         container?: HTMLElement | undefined;
+        shadowObserver?: ShadowObserver | undefined;
+        overflowContainerWidth: number;
         scrollable?: NodeList | undefined;
         diff?: number | undefined;
         state: {
@@ -71,6 +77,7 @@ export default function overflowShadow<P>(Component: React.ComponentType<P & Ove
         calcOverflowDiff: () => number;
         calcScrollableWidth: () => number;
         handleContainer: (container: HTMLElement | null) => void;
+        initShadowObserver(): void;
         render(): JSX.Element;
         context: any;
         setState<K extends keyof OverflowShadowState>(state: OverflowShadowState | ((prevState: Readonly<OverflowShadowState>, props: Readonly<P>) => OverflowShadowState | Pick<OverflowShadowState, K> | null) | Pick<OverflowShadowState, K> | null, callback?: (() => void) | undefined): void;

package/dist/types/ui/OverflowShadow/shadowObserver.d.ts

@@ -0,0 +1,27 @@
+export declare enum ShadowKeys {
+    SHOW_LEFT_SHADOW = "showLeftShadow",
+    SHOW_RIGHT_SHADOW = "showRightShadow"
+}
+export declare type ShadowsStates = {
+    [ShadowKey in ShadowKeys]: boolean;
+};
+export declare const shadowObserverClassNames: {
+    SENTINEL_LEFT: string;
+    SENTINEL_RIGHT: string;
+    SHADOW_CONTAINER: string;
+};
+export declare class ShadowObserver {
+    private intersectionObserver?;
+    private scrollContainer;
+    private onUpdateShadows;
+    private sentinels;
+    private requestCallbackId?;
+    readonly shadowStates: ShadowsStates;
+    constructor({ scrollContainer, onUpdateShadows, }: {
+        scrollContainer: HTMLElement;
+        onUpdateShadows: (eventData: ShadowsStates) => void;
+    });
+    private init;
+    private onIntersect;
+    dispose(): void;
+}

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

@@ -16,6 +16,7 @@ export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export type { WidthConsumerContext, Breakpoints } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export type { OverflowShadowOptions, OverflowShadowProps, OverflowShadowState, } from './OverflowShadow';
+export { shadowObserverClassNames, ShadowObserver, } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef, } from './Expand';
 export type { StyleProps as ExpandStyleProps } from './Expand';

package/dist/types/utils/unsupportedContent/get-unsupported-content-level-data.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 export declare enum UNSUPPORTED_CONTENT_LEVEL_SEVERITY {
     NORMAL = "normal",
     DEGRADED = "degraded",

package/dist/types/utils/validate-using-spec.d.ts

@@ -1,5 +1,6 @@
 import { Schema } from 'prosemirror-model';
-import { ADFEntity, ErrorCallbackOptions, Validate, ValidationError } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
+import type { ErrorCallbackOptions, Validate, ValidationError } from '@atlaskit/adf-utils/validatorTypes';
 export declare const UNSUPPORTED_NODE_ATTRIBUTE = "unsupportedNodeAttribute";
 import { UnsupportedContentPayload } from './analytics';
 export declare type DispatchAnalyticsEvent = (event: UnsupportedContentPayload) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "67.0.0",
+  "version": "68.0.1",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,26 +44,26 @@
   },
   "dependencies": {
     "@atlaskit/activity-provider": "^2.3.0",
-    "@atlaskit/adf-schema": "^23.0.0",
-    "@atlaskit/adf-utils": "^16.0.0",
+    "@atlaskit/adf-schema": "^23.1.0",
+    "@atlaskit/adf-utils": "^17.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^2.1.0",
-    "@atlaskit/emoji": "^64.6.0",
+    "@atlaskit/emoji": "^64.7.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-card": "^73.6.0",
-    "@atlaskit/media-client": "^16.0.0",
-    "@atlaskit/media-picker": "^62.0.0",
+    "@atlaskit/media-card": "^73.8.0",
+    "@atlaskit/media-client": "^17.0.0",
+    "@atlaskit/media-picker": "^63.0.0",
     "@atlaskit/mention": "^21.0.0",
-    "@atlaskit/profilecard": "^16.4.0",
+    "@atlaskit/profilecard": "^16.5.0",
     "@atlaskit/smart-card": "^19.1.0",
-    "@atlaskit/smart-user-picker": "^5.0.2",
+    "@atlaskit/smart-user-picker": "^5.1.0",
     "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/width-detector": "^4.0.0",
@@ -94,7 +94,7 @@
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-test-helpers": "^17.0.0",
     "@atlaskit/media-core": "^33.0.0",
-    "@atlaskit/util-data-test": "^17.2.0",
+    "@atlaskit/util-data-test": "^17.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",