@atlaskit/renderer 103.0.0 → 103.0.1

package/dist/esm/ui/SortingIcon.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
@@ -10,14 +10,9 @@ import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
-import { token } from '@atlaskit/tokens'; // We use data url here because of this issue:
-// https://product-fabric.atlassian.net/browse/ED-8001
-// Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
-// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
-
-export var TableSortIconDataUrl = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M-8-6h24v24H-8z\"></path><path d=\"M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z\" fill=\"#42526E\"></path></g></svg>"));
-var TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-export var StatusClassNames; // TODO: get design to check border
+import { token } from '@atlaskit/tokens';
+import { RendererCssClassName } from '../consts';
+export var StatusClassNames;
 
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -26,23 +21,34 @@ export var StatusClassNames; // TODO: get design to check border
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (StatusClassNames = {}));
 
-var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), token('color.border.inverse', '#fff'), gridSize() / 2, token('color.background.neutral.subtle', N20), token('color.background.neutral.subtle.hovered', N30), StatusClassNames.SORTING_NOT_ALLOWED);
-var tableSortingIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
+var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), token('color.border', '#fff'), gridSize() / 2, token('elevation.surface.overlay', N20), token('elevation.surface.overlay.hovered', N30), token('elevation.surface.overlay.pressed', 'rgba(179, 212, 255, 0.6)'), RendererCssClassName.SORTABLE_COLUMN_ICON);
+var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, RendererCssClassName.SORTABLE_COLUMN_ICON); // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
+// The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
+// For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
+
+var iconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), token('color.icon', '#42526E'), token('color.icon', '#42526E'));
+
+var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
+  var activated = sortOrdered !== SortOrder.NO_ORDER;
+  var activeStatusClass = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');
+
+  if (!isSortingAllowed) {
+    return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
+  }
 
-var getClassName = function getClassName(status) {
-  switch (status) {
+  switch (sortOrdered) {
     case SortOrder.ASC:
-      return StatusClassNames.ASC;
+      return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
 
     case SortOrder.DESC:
-      return StatusClassNames.DESC;
+      return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
 
     default:
-      return StatusClassNames.NO_ORDER;
+      return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
   }
 };
 
-var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
+var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
   var noOrderLabel = sortingIconMessages.noOrderLabel,
       ascOrderLabel = sortingIconMessages.ascOrderLabel,
       descOrderLabel = sortingIconMessages.descOrderLabel,
@@ -52,7 +58,7 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
     return intl.formatMessage(invalidLabel);
   }
 
-  switch (status) {
+  switch (sortOrdered) {
     case SortOrder.NO_ORDER:
       return intl.formatMessage(noOrderLabel);
 
@@ -69,21 +75,43 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
 var SortingIcon = function SortingIcon(_ref) {
   var isSortingAllowed = _ref.isSortingAllowed,
       sortOrdered = _ref.sortOrdered,
-      intl = _ref.intl;
-  var activated = sortOrdered !== SortOrder.NO_ORDER;
-  var wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
+      intl = _ref.intl,
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown;
+  var buttonClassName = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
   var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
+
+  var handleClick = function handleClick() {
+    if (isSortingAllowed) {
+      onClick();
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (isSortingAllowed) {
+      onKeyDown(event);
+    }
+  };
+
   return jsx(Tooltip, {
     delay: 0,
     content: content,
     position: "top"
-  }, jsx("figure", {
-    css: wrapperStyles,
-    className: wrapperClassName
   }, jsx("div", {
-    css: tableSortingIconStyles,
-    className: "".concat(getClassName(sortOrdered), " ").concat(TABLE_SORTING_ICON_CLASS, "-").concat(activated ? 'active' : 'inactive')
-  })));
+    css: buttonStyles,
+    className: buttonClassName,
+    role: "button",
+    tabIndex: isSortingAllowed ? 0 : -1,
+    "aria-label": "sort column",
+    "aria-disabled": !isSortingAllowed,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  }, jsx("div", {
+    css: iconWrapperStyles,
+    className: getIconClassName(isSortingAllowed, sortOrdered)
+  }, jsx("div", {
+    css: iconStyles
+  }))));
 };
 
 export default injectIntl(SortingIcon);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "103.0.0",
+	"version": "103.0.1",
 	"sideEffects": false
 }

package/dist/types/consts.d.ts

@@ -4,9 +4,9 @@ export declare const RendererCssClassName: {
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
     NUMBER_COLUMN: string;
+    SORTABLE_COLUMN_WRAPPER: string;
     SORTABLE_COLUMN: string;
-    SORTABLE_COLUMN_BUTTON: string;
-    SORTABLE_COLUMN_NOT_ALLOWED: string;
+    SORTABLE_COLUMN_ICON_WRAPPER: string;
     SORTABLE_COLUMN_ICON: string;
     SORTABLE_COLUMN_NO_ORDER: string;
 };

package/dist/types/react/nodes/bodiedExtension.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node as PMNode } from 'prosemirror-model';
+import { Mark as PMMark, Node as PMNode } from 'prosemirror-model';
 import { RendererContext } from '../types';
 import { Serializer } from '../..';
 import { ExtensionLayout } from '@atlaskit/adf-schema';
@@ -18,6 +18,7 @@ export interface Props {
     content?: any;
     layout?: ExtensionLayout;
     localId?: string;
+    marks?: PMMark[];
 }
 declare const BodiedExtension: React.FunctionComponent<Props>;
 export default BodiedExtension;

package/dist/types/react/nodes/extension.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node as PMNode } from 'prosemirror-model';
+import { Mark as PMMark, Node as PMNode } from 'prosemirror-model';
 import { RendererContext } from '../types';
 import { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -16,6 +16,7 @@ export interface Props {
     parameters?: any;
     layout?: ExtensionLayout;
     localId?: string;
+    marks?: PMMark[];
 }
 declare type AllOrNone<T> = T | {
     [K in keyof T]?: never;

package/dist/types/react/nodes/inlineExtension.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RendererContext } from '../types';
+import { Mark as PMMark } from 'prosemirror-model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 export interface Props {
@@ -11,6 +12,7 @@ export interface Props {
     text?: string;
     parameters?: any;
     localId?: string;
+    marks?: PMMark[];
 }
 declare const InlineExtension: React.StatelessComponent<Props>;
 export default InlineExtension;

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

@@ -4,6 +4,7 @@ import { ExtensionLayout } from '@atlaskit/adf-schema';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import type { ExtensionHandlers, ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { Mark as PMMark } from 'prosemirror-model';
 export interface Props {
     type: 'extension' | 'inlineExtension' | 'bodiedExtension';
     extensionHandlers?: ExtensionHandlers;
@@ -16,6 +17,7 @@ export interface Props {
     content?: any;
     layout?: ExtensionLayout;
     localId?: string;
+    marks?: PMMark[];
     children: ({ result }: {
         result?: JSX.Element | null;
     }) => JSX.Element;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const TableSortIconDataUrl: string;
 export declare enum StatusClassNames {
     ASC = "sorting-icon-svg__asc",
     DESC = "sorting-icon-svg__desc",
@@ -11,10 +10,14 @@ export declare enum StatusClassNames {
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<{
     isSortingAllowed: boolean;
     sortOrdered?: SortOrder | undefined;
+    onClick: () => void;
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
 } & WrappedComponentProps<"intl">>> & {
     WrappedComponent: import("react").ComponentType<{
         isSortingAllowed: boolean;
         sortOrdered?: SortOrder | undefined;
+        onClick: () => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
     } & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types-ts4.0/consts.d.ts

@@ -4,9 +4,9 @@ export declare const RendererCssClassName: {
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
     NUMBER_COLUMN: string;
+    SORTABLE_COLUMN_WRAPPER: string;
     SORTABLE_COLUMN: string;
-    SORTABLE_COLUMN_BUTTON: string;
-    SORTABLE_COLUMN_NOT_ALLOWED: string;
+    SORTABLE_COLUMN_ICON_WRAPPER: string;
     SORTABLE_COLUMN_ICON: string;
     SORTABLE_COLUMN_NO_ORDER: string;
 };

package/dist/types-ts4.0/react/nodes/bodiedExtension.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node as PMNode } from 'prosemirror-model';
+import { Mark as PMMark, Node as PMNode } from 'prosemirror-model';
 import { RendererContext } from '../types';
 import { Serializer } from '../..';
 import { ExtensionLayout } from '@atlaskit/adf-schema';
@@ -18,6 +18,7 @@ export interface Props {
     content?: any;
     layout?: ExtensionLayout;
     localId?: string;
+    marks?: PMMark[];
 }
 declare const BodiedExtension: React.FunctionComponent<Props>;
 export default BodiedExtension;

package/dist/types-ts4.0/react/nodes/extension.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node as PMNode } from 'prosemirror-model';
+import { Mark as PMMark, Node as PMNode } from 'prosemirror-model';
 import { RendererContext } from '../types';
 import { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -16,6 +16,7 @@ export interface Props {
     parameters?: any;
     layout?: ExtensionLayout;
     localId?: string;
+    marks?: PMMark[];
 }
 declare type AllOrNone<T> = T | {
     [K in keyof T]?: never;

package/dist/types-ts4.0/react/nodes/inlineExtension.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RendererContext } from '../types';
+import { Mark as PMMark } from 'prosemirror-model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 export interface Props {
@@ -11,6 +12,7 @@ export interface Props {
     text?: string;
     parameters?: any;
     localId?: string;
+    marks?: PMMark[];
 }
 declare const InlineExtension: React.StatelessComponent<Props>;
 export default InlineExtension;

package/dist/types-ts4.0/ui/ExtensionRenderer.d.ts

@@ -4,6 +4,7 @@ import { ExtensionLayout } from '@atlaskit/adf-schema';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import type { ExtensionHandlers, ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { Mark as PMMark } from 'prosemirror-model';
 export interface Props {
     type: 'extension' | 'inlineExtension' | 'bodiedExtension';
     extensionHandlers?: ExtensionHandlers;
@@ -16,6 +17,7 @@ export interface Props {
     content?: any;
     layout?: ExtensionLayout;
     localId?: string;
+    marks?: PMMark[];
     children: ({ result }: {
         result?: JSX.Element | null;
     }) => JSX.Element;

package/dist/types-ts4.0/ui/SortingIcon.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const TableSortIconDataUrl: string;
 export declare enum StatusClassNames {
     ASC = "sorting-icon-svg__asc",
     DESC = "sorting-icon-svg__desc",
@@ -11,10 +10,14 @@ export declare enum StatusClassNames {
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<{
     isSortingAllowed: boolean;
     sortOrdered?: SortOrder | undefined;
+    onClick: () => void;
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
 } & WrappedComponentProps<"intl">>> & {
     WrappedComponent: import("react").ComponentType<{
         isSortingAllowed: boolean;
         sortOrdered?: SortOrder | undefined;
+        onClick: () => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
     } & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "103.0.0",
+  "version": "103.0.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -36,20 +37,20 @@
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/code": "^14.4.0",
-    "@atlaskit/editor-common": "^70.1.0",
+    "@atlaskit/editor-common": "^70.2.0",
     "@atlaskit/editor-json-transformer": "^8.8.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-card": "^74.1.0",
-    "@atlaskit/media-client": "^18.0.0",
-    "@atlaskit/media-common": "^2.16.0",
+    "@atlaskit/media-card": "^74.2.0",
+    "@atlaskit/media-client": "^18.1.0",
+    "@atlaskit/media-common": "^2.17.0",
     "@atlaskit/media-filmstrip": "^46.0.0",
     "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/media-viewer": "^47.1.0",
-    "@atlaskit/smart-card": "^23.0.0",
-    "@atlaskit/status": "^1.1.0",
+    "@atlaskit/smart-card": "^23.1.0",
+    "@atlaskit/status": "^1.2.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -69,15 +70,14 @@
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/media-core": "^34.0.0",
     "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/analytics-gas-types": "^5.0.5",
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^174.0.0",
+    "@atlaskit/editor-core": "^175.0.0",
     "@atlaskit/editor-test-helpers": "^17.2.0",
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",
@@ -88,7 +88,7 @@
     "@atlaskit/navigation-next": "^9.0.0",
     "@atlaskit/profilecard": "^17.2.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/range": "^6.1.0",
+    "@atlaskit/range": "^7.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/util-data-test": "^17.5.0",
     "@atlaskit/visual-regression": "*",
@@ -116,7 +116,11 @@
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   }
 }