@atlaskit/editor-common 72.4.1 → 72.5.1

package/dist/es2019/ui-menu/ToolbarButton/index.js

@@ -33,6 +33,7 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     'aria-pressed': ariaPressed,
     'aria-keyshortcuts': ariaKeyShortcuts,
     onClick,
+    onKeyDown,
     onItemClick
   } = props;
   const handleClick = useCallback((event, analyticsEvent) => {
@@ -75,7 +76,8 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-haspopup": ariaHasPopup,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
-    "aria-keyshortcuts": ariaKeyShortcuts
+    "aria-keyshortcuts": ariaKeyShortcuts,
+    onKeyDown: onKeyDown
   }, children);
   if (!title) {
     return button;

package/dist/es2019/ui-menu/index.js

@@ -1,3 +1,6 @@
 export { default as DropdownMenu } from '../ui-menu/DropdownMenu';
 export { default as ToolbarButton, TOOLBAR_BUTTON } from '../ui-menu/ToolbarButton';
+export { ArrowKeyNavigationProvider } from '../ui-menu/ArrowKeyNavigationProvider';
+export { ArrowKeyNavigationType } from '../ui-menu/ArrowKeyNavigationProvider/types';
+export { ColorPaletteArrowKeyNavigationProvider } from './ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider';
 export { default as Dropdown } from './Dropdown';

package/dist/es2019/utils/analytics.js

@@ -13,6 +13,7 @@ export const getAnalyticsAppearance = appearance => {
       return EDITOR_APPEARANCE_CONTEXT.MOBILE;
   }
 };
+export const getAnalyticsEditorAppearance = editorAppearance => editorAppearance ? `editor_${getAnalyticsAppearance(editorAppearance)}` : '_unknown';
 export const getAnalyticsEventSeverity = (duration, normalThreshold, degradedThreshold) => {
   if (duration > normalThreshold && duration <= degradedThreshold) {
     return SEVERITY.DEGRADED;

package/dist/es2019/utils/index.js

@@ -11,7 +11,7 @@ export { pluginFactory } from './plugin-state-factory';
 export { getFragmentBackingArray, mapFragment, mapSlice, flatmap, mapChildren } from './slice';
 export { walkUpTreeUntil, unwrap, removeNestedEmptyEls, containsClassName, closest, closestElement, parsePx, mapElem, maphElem } from './dom';
 export { default as ADFTraversor } from './traversor';
-export { analyticsEventKey, getAnalyticsAppearance, getAnalyticsEventSeverity, SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './analytics';
+export { analyticsEventKey, getAnalyticsAppearance, getAnalyticsEditorAppearance, getAnalyticsEventSeverity, SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './analytics';
 export { findAndTrackUnsupportedContentNodes } from './track-unsupported-content';
 export { getDistortedDurationMonitor, measureRender } from './performance/measure-render';
 export { startMeasure, stopMeasure, clearMeasure } from './performance/measure';

package/dist/es2019/utils/referentiality.js

@@ -27,7 +27,7 @@ export const isReferencedSource = (state, node) => {
   });
   return found;
 };
-const getConnections = state => {
+export const getConnections = state => {
   const result = {};
   const {
     doc,
@@ -42,7 +42,7 @@ const getConnections = state => {
   // Perform a prelim scan creating the initial id to connection link mappings.
   // This will also save a list of data sources consumed per node.
   doc.descendants((node, pos) => {
-    var _node$attrs2, _fragmentMark$attrs$l, _fragmentMark, _fragmentMark$attrs, _node$attrs3, _fragmentMark2, _fragmentMark2$attrs, _node$attrs4, _fragmentMark$attrs$n, _fragmentMark3, _fragmentMark3$attrs;
+    var _node$attrs2, _fragmentMark$attrs$l, _fragmentMark, _fragmentMark$attrs, _node$attrs3, _fragmentMark2, _fragmentMark2$attrs, _node$attrs4, _fragmentMark3, _fragmentMark3$attrs;
     let dataConsumer;
     let fragmentMark;
     node.marks.some(mark => {
@@ -76,7 +76,7 @@ const getConnections = state => {
     }
     result[normalizedId] = {
       localId: normalizedId,
-      name: (_fragmentMark$attrs$n = (_fragmentMark3 = fragmentMark) === null || _fragmentMark3 === void 0 ? void 0 : (_fragmentMark3$attrs = _fragmentMark3.attrs) === null || _fragmentMark3$attrs === void 0 ? void 0 : _fragmentMark3$attrs.name) !== null && _fragmentMark$attrs$n !== void 0 ? _fragmentMark$attrs$n : normalizedId,
+      name: (_fragmentMark3 = fragmentMark) === null || _fragmentMark3 === void 0 ? void 0 : (_fragmentMark3$attrs = _fragmentMark3.attrs) === null || _fragmentMark3$attrs === void 0 ? void 0 : _fragmentMark3$attrs.name,
       node,
       pos,
       targets: []
@@ -155,6 +155,7 @@ const getIdsToBeDeleted = (selectedIds, allNodes) => {
 
 // for get children info for confirmation dialog
 export const getChildrenInfo = (state, node) => {
+  let allChildrenHadName = true;
   if (!node) {
     return [];
   }
@@ -167,14 +168,19 @@ export const getChildrenInfo = (state, node) => {
       allNodes[id].targets.forEach(childrenIdSet.add, childrenIdSet);
     }
   });
-  childrenIdSet.forEach(id => {
-    childrenInfoArray.push({
-      id,
-      name: getNodeNameById(id, allNodes),
-      amount: getChildrenNodeAmount(id, allNodes)
-    });
-  });
-  return childrenInfoArray;
+  for (const id of childrenIdSet) {
+    if (!getNodeNameById(id, allNodes)) {
+      allChildrenHadName = false;
+      break;
+    } else {
+      childrenInfoArray.push({
+        id,
+        name: getNodeNameById(id, allNodes),
+        amount: getChildrenNodeAmount(id, allNodes)
+      });
+    }
+  }
+  return allChildrenHadName ? childrenInfoArray : [];
 };
 const getChildrenNodeAmount = (id, allNodes) => {
   const searchTerms = new Set([id]);
@@ -203,19 +209,17 @@ const getNodeTargetsById = (id, allNodes) => {
   }
   return allNodes[id].targets;
 };
-const DEFAULT_EXTENSION_NAME = 'Default extension';
 const getNodeNameById = (id, allNodes) => {
   if (typeof id === 'object') {
-    var _name2;
     let name;
     id.forEach(localId => {
       var _name, _allNodes$localId;
       name = (_name = name) !== null && _name !== void 0 ? _name : (_allNodes$localId = allNodes[localId]) === null || _allNodes$localId === void 0 ? void 0 : _allNodes$localId.name;
     });
-    return (_name2 = name) !== null && _name2 !== void 0 ? _name2 : DEFAULT_EXTENSION_NAME;
+    return name || null;
   }
   if (!id || !allNodes[id]) {
-    return DEFAULT_EXTENSION_NAME;
+    return null;
   }
   return allNodes[id].name;
 };

package/dist/es2019/version.json

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

package/dist/esm/analytics/analytics-queue.js

@@ -0,0 +1,71 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import memoizeOne from 'memoize-one';
+export var AnalyticsQueue = /*#__PURE__*/function () {
+  function AnalyticsQueue() {
+    _classCallCheck(this, AnalyticsQueue);
+    _defineProperty(this, "tasks", []);
+    _defineProperty(this, "running", false);
+  }
+  _createClass(AnalyticsQueue, [{
+    key: "request",
+    value: function request(fn) {
+      if (window.requestIdleCallback) {
+        window.requestIdleCallback(fn);
+      } else {
+        var start = performance.now();
+        setTimeout(function () {
+          fn({
+            didTimeout: false,
+            timeRemaining: function timeRemaining() {
+              return Math.max(0, 50 - (performance.now() - start));
+            }
+          });
+        }, 0);
+      }
+    }
+  }, {
+    key: "pending",
+    value: function pending() {
+      var _window$navigator, _window$navigator$sch;
+      // Defensive coding as navigator.scheduling.isInputPending is an experimental API
+      if (typeof ((_window$navigator = window.navigator) === null || _window$navigator === void 0 ? void 0 : (_window$navigator$sch = _window$navigator.scheduling) === null || _window$navigator$sch === void 0 ? void 0 : _window$navigator$sch.isInputPending) === 'function') {
+        var _window$navigator2, _window$navigator2$sc;
+        return ((_window$navigator2 = window.navigator) === null || _window$navigator2 === void 0 ? void 0 : (_window$navigator2$sc = _window$navigator2.scheduling) === null || _window$navigator2$sc === void 0 ? void 0 : _window$navigator2$sc.isInputPending()) === true;
+      }
+      return false;
+    }
+  }, {
+    key: "process",
+    value: function process() {
+      var _this = this;
+      if (this.running) {
+        return;
+      }
+      this.running = true;
+      this.request(function (deadline) {
+        while (deadline.timeRemaining() > 0 && _this.tasks.length > 0 && !_this.pending()) {
+          var task = _this.tasks.shift();
+          if (task) {
+            task();
+          }
+        }
+        _this.running = false;
+        if (_this.tasks.length > 0) {
+          _this.process();
+        }
+      });
+    }
+  }, {
+    key: "schedule",
+    value: function schedule(task) {
+      this.tasks.push(task);
+      this.process();
+    }
+  }]);
+  return AnalyticsQueue;
+}();
+_defineProperty(AnalyticsQueue, "get", memoizeOne(function () {
+  return new AnalyticsQueue();
+}));

package/dist/esm/analytics/fire-analytics-event.js

@@ -0,0 +1,29 @@
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { AnalyticsQueue } from './analytics-queue';
+var editorAnalyticsChannel = FabricChannel.editor;
+export var fireAnalyticsEvent = function fireAnalyticsEvent(createAnalyticsEvent) {
+  return function (_ref) {
+    var payload = _ref.payload,
+      _ref$channel = _ref.channel,
+      channel = _ref$channel === void 0 ? editorAnalyticsChannel : _ref$channel;
+    if (!createAnalyticsEvent) {
+      return;
+    }
+
+    // START TEMPORARY CODE ED-10584
+    // __queueAnalytics property set in ReactEditorView based on featureFlags.queueAnalytics
+    var queueAnalytics = Boolean(createAnalyticsEvent.__queueAnalytics);
+    // END TEMPORARY CODE ED-10584
+
+    if (queueAnalytics) {
+      var queue = AnalyticsQueue.get();
+      queue.schedule(function () {
+        var _createAnalyticsEvent;
+        return (_createAnalyticsEvent = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent === void 0 ? void 0 : _createAnalyticsEvent.fire(channel);
+      });
+    } else {
+      var _createAnalyticsEvent2;
+      (_createAnalyticsEvent2 = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent2 === void 0 ? void 0 : _createAnalyticsEvent2.fire(channel);
+    }
+  };
+};

package/dist/esm/analytics/index.js

@@ -1 +1,3 @@
-export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT } from './types';
+export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT } from './types';
+export { fireAnalyticsEvent } from './fire-analytics-event';
+export { getAnalyticsEventsFromTransaction } from './utils';

package/dist/esm/analytics/types/enums.js

@@ -57,6 +57,10 @@ export var ACTION;
   ACTION["INITIALISED_FRAGMENT_MARK"] = "initialisedFragmentMark";
   ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
   ACTION["INPUT_PERF_SAMPLING_AVG"] = "inputPerfSamplingAvg";
+  ACTION["INPUT_PERF_SAMPLING_SINGLE_KEYPRESS"] = "inputPerfSamplingSingleKeypress";
+  ACTION["INPUT_PERF_SAMPLING_SINGLE_KEYPRESS_AVG"] = "inputPerfSamplingSingleKeypressAvg";
+  ACTION["INPUT_PERF_SAMPLING_RENDERED"] = "inputPerfSamplingRendered";
+  ACTION["INPUT_PERF_SAMPLING_RENDERED_AVG"] = "inputPerfSamplingRenderedAvg";
   ACTION["INSERTED"] = "inserted";
   ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
   ACTION["INVOKED"] = "invoked";

package/dist/esm/analytics/utils.js

@@ -0,0 +1,9 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
+export function getAnalyticsEventsFromTransaction(tr) {
+  return tr.steps.filter(function (step) {
+    return step instanceof AnalyticsStep;
+  }).reduce(function (acc, step) {
+    return [].concat(_toConsumableArray(acc), _toConsumableArray(step.analyticsEvents));
+  }, []);
+}

package/dist/esm/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as usePreviousState } from './usePreviousState';
+export { default as useConstructor } from './useConstructor';

package/dist/esm/hooks/useConstructor.js

@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+
+/**
+ *
+ * Hook to run code once in a functional component.
+ * Emulates the behaviour of a `constructor` in a class component
+ * Place this at the top of your functional component so that it is run first.
+ *
+ * @param callback Callback function to run once
+ */
+export default function useConstructor(callback) {
+  var hasRun = useRef(false);
+  if (!hasRun.current) {
+    callback();
+    hasRun.current = true;
+  }
+}

package/dist/esm/hooks/usePreviousState.js

@@ -0,0 +1,18 @@
+import { useRef } from 'react';
+
+/**
+ *
+ * Can be used to get the previous state of a prop.
+ * This can be helpful when converting class components to functional
+ * where we don't have the `prevProps`.
+ *
+ * @param value New state of the
+ * @param initialValue Optional parameter for the inital state of the component
+ * @returns
+ */
+export default function usePreviousState(value, initialValue) {
+  var ref = useRef(initialValue);
+  var prevValue = ref.current;
+  ref.current = value;
+  return prevValue;
+}

package/dist/esm/keymaps/index.js

@@ -26,7 +26,7 @@ export var toggleHeading6 = makeKeyMapWithCommon('Heading 6', 'Mod-Alt-6');
 export var toggleOrderedList = makeKeyMapWithCommon('Numbered list', 'Mod-Shift-7');
 export var ctrlBackSpace = makeKeyMapWithCommon('Cmd + Backspace', 'Mod-Backspace');
 export var toggleBulletList = makeKeyMapWithCommon('Bullet list', 'Mod-Shift-8');
-export var toggleBlockQuote = makeKeymap('Quote', '', 'Cmd-Alt-9');
+export var toggleBlockQuote = makeKeyMapWithCommon('Quote', 'Mod-Shift-9');
 export var insertNewLine = makeKeyMapWithCommon('Insert new line', 'Shift-Enter');
 export var shiftBackspace = makeKeyMapWithCommon('Shift Backspace', 'Shift-Backspace');
 export var splitCodeBlock = makeKeyMapWithCommon('Split code block', 'Enter');

package/dist/esm/styles/index.js

@@ -1,5 +1,5 @@
 export { textColorStyles } from './shared/text-color';
-export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding } from './shared/table';
+export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl } from './shared/table';
 export { AnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
 export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';

package/dist/esm/styles/shared/table.js

@@ -12,6 +12,7 @@ import browser from '../../utils/browser';
 import { CodeBlockSharedCssClassName } from './code-block';
 export var tableMarginTop = 24;
 export var tableMarginBottom = 16;
+export var tableMarginTopWithControl = 14;
 export var tableMarginSides = 8;
 export var tableCellMinWidth = 48;
 export var tableNewColumnMinWidth = 140;

package/dist/esm/ui/DropList/index.js

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.4.1";
+var packageVersion = "72.5.1";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/index.js

@@ -8,7 +8,7 @@ export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
-export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
+export { WidthContext, WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -10,7 +10,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -50,8 +49,8 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         borderColor = _this$props2.borderColor,
         _this$props2$checkMar = _this$props2.checkMarkColor,
         checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar,
-        useDesignTokens = _this$props2.useDesignTokens;
-      var colorStyle = useDesignTokens ? hexToEditorTextPaletteColor(value) : value;
+        hexToPaletteColor = _this$props2.hexToPaletteColor;
+      var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
       return jsx(Tooltip, {
         content: label
       }, jsx("span", {

package/dist/esm/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -73,7 +73,7 @@ export var panelBackgroundPalette = [{
   value: colors.P100
 }].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
-    border: DEFAULT_BORDER_COLOR
+    border: "var(--ds-border, ".concat(DEFAULT_BORDER_COLOR, ")")
   });
 });
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/ui-color/ColorPalette/index.js

@@ -9,6 +9,7 @@ import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
 import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
 import { colorPaletteWrapper } from './styles';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette } from './utils';
 /**
  * For a given color pick the color from a list of colors with
  * the highest contrast
@@ -16,12 +17,12 @@ import { colorPaletteWrapper } from './styles';
  * @param color color string, suppports HEX, RGB, RGBA etc.
  * @return Highest contrast color in pool
  */
-function getCheckMarkColor(color, textPalette) {
+function getCheckMarkColor(color, useIconToken) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var contrastColor = [N0, N500].sort(function (a, b) {
     return chromatism.difference(b, color) - chromatism.difference(a, color);
   })[0];
-  if (!textPalette) {
+  if (!useIconToken) {
     return contrastColor;
   }
 
@@ -34,24 +35,21 @@ function getCheckMarkColor(color, textPalette) {
 var ColorPalette = function ColorPalette(props) {
   var palette = props.palette,
     _props$cols = props.cols,
-    cols = _props$cols === void 0 ? 7 : _props$cols,
+    cols = _props$cols === void 0 ? DEFAULT_COLOR_PICKER_COLUMNS : _props$cols,
     onClick = props.onClick,
     selectedColor = props.selectedColor,
     className = props.className,
     formatMessage = props.intl.formatMessage,
     _props$textPalette = props.textPalette,
     textPalette = _props$textPalette === void 0 ? false : _props$textPalette,
+    hexToPaletteColor = props.hexToPaletteColor,
     _props$useSomewhatSem = props.useSomewhatSemanticTextColorNames,
     useSomewhatSemanticTextColorNames = _props$useSomewhatSem === void 0 ? false : _props$useSomewhatSem;
   var _useThemeObserver = useThemeObserver(),
     tokenTheme = _useThemeObserver.colorMode;
+  var useIconToken = !!hexToPaletteColor;
   var colorsPerRow = React.useMemo(function () {
-    return palette.reduce(function (resultArray, item, index) {
-      var chunkIndex = Math.floor(index / cols);
-      resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
-      resultArray[chunkIndex].push(item);
-      return resultArray;
-    }, []);
+    return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
   return jsx(React.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
     return jsx("div", {
@@ -79,8 +77,8 @@ var ColorPalette = function ColorPalette(props) {
         label: message ? formatMessage(message) : label,
         onClick: onClick,
         isSelected: value === selectedColor,
-        checkMarkColor: getCheckMarkColor(value, textPalette),
-        useDesignTokens: textPalette === true
+        checkMarkColor: getCheckMarkColor(value, useIconToken),
+        hexToPaletteColor: hexToPaletteColor
       });
     }));
   }));

package/dist/esm/ui-color/ColorPalette/utils.js

@@ -0,0 +1,32 @@
+export var DEFAULT_COLOR_PICKER_COLUMNS = 7;
+export function getColorsPerRowFromPalette(palette) {
+  var cols = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COLOR_PICKER_COLUMNS;
+  return palette.reduce(function (resultArray, item, index) {
+    var chunkIndex = Math.floor(index / cols);
+    resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
+    resultArray[chunkIndex].push(item);
+    return resultArray;
+  }, []);
+}
+export function getSelectedRowAndColumn(colorsPerRow, selectedColor) {
+  var selectedRowIndex = -1;
+  var selectedColumnIndex = -1;
+  colorsPerRow.forEach(function (row, rowIndex) {
+    row.forEach(function (_ref, columnIndex) {
+      var value = _ref.value;
+      if (value === selectedColor) {
+        selectedRowIndex = rowIndex;
+        selectedColumnIndex = columnIndex;
+      }
+    });
+  });
+  return {
+    selectedRowIndex: selectedRowIndex,
+    selectedColumnIndex: selectedColumnIndex
+  };
+}
+export function getSelectedRowAndColumnFromPalette(palette, selectedColor) {
+  var cols = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_COLOR_PICKER_COLUMNS;
+  var colorsPerRow = getColorsPerRowFromPalette(palette, cols);
+  return getSelectedRowAndColumn(colorsPerRow, selectedColor);
+}

package/dist/esm/ui-color/index.js

@@ -1,5 +1,6 @@
 export { default as ColorPalette } from './ColorPalette';
 export { default as Color } from './ColorPalette/Color';
+export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumn, getSelectedRowAndColumnFromPalette } from './ColorPalette/utils';
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -0,0 +1,131 @@
+import React, { useLayoutEffect, useRef } from 'react';
+/**
+ * This component is a wrapper for color picker which listens to keydown events of children
+ * and handles arrow key navigation
+ */
+export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNavigationProvider(_ref) {
+  var children = _ref.children,
+    selectedRowIndex = _ref.selectedRowIndex,
+    selectedColumnIndex = _ref.selectedColumnIndex,
+    isOpenedByKeyboard = _ref.isOpenedByKeyboard,
+    isPopupPositioned = _ref.isPopupPositioned,
+    handleClose = _ref.handleClose,
+    closeOnTab = _ref.closeOnTab;
+  var wrapperRef = useRef(null);
+  var currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
+  var currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
+    if (currentSelectedRowIndex.current === rowElements.length - 1) {
+      currentSelectedRowIndex.current = 0;
+    } else {
+      currentSelectedRowIndex.current = currentSelectedRowIndex.current + 1;
+    }
+  };
+  var decrementRowIndex = function decrementRowIndex(rowElements, columnElements) {
+    if (currentSelectedRowIndex.current === 0) {
+      currentSelectedRowIndex.current = rowElements.length - 1;
+    } else {
+      currentSelectedRowIndex.current = currentSelectedRowIndex.current - 1;
+    }
+  };
+  useLayoutEffect(function () {
+    var incrementColumnIndex = function incrementColumnIndex(rowElements, columnElements) {
+      if (currentSelectedColumnIndex.current === columnElements.length - 1) {
+        incrementRowIndex(rowElements, columnElements);
+        currentSelectedColumnIndex.current = 0;
+      } else {
+        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current + 1;
+      }
+    };
+    var decrementColumnIndex = function decrementColumnIndex(rowElements, columnElements) {
+      if (currentSelectedColumnIndex.current === 0) {
+        decrementRowIndex(rowElements, columnElements);
+        currentSelectedColumnIndex.current = columnElements.length - 1;
+      } else {
+        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current - 1;
+      }
+    };
+    var focusColorSwatch = function focusColorSwatch() {
+      var _focusableElements$cu;
+      var colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      var currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
+      var focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
+      if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
+        return;
+      }
+      (_focusableElements$cu = focusableElements[currentSelectedColumnIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
+    };
+
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Tab' && closeOnTab) {
+        handleClose(event);
+        return;
+      }
+      var colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      var currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
+      var focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
+      switch (event.key) {
+        case 'ArrowDown':
+          incrementRowIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowUp':
+          decrementRowIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+          decrementColumnIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowRight':
+          incrementColumnIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'Escape':
+          handleClose(event);
+          break;
+        default:
+          return;
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    // set focus to current selected color swatch if only opened by keyboard
+    if (isOpenedByKeyboard && isPopupPositioned) {
+      // Using timeout because, we need to wait till color palette is rendered
+      //  and visible on screen, then only focus color swatch, otherwise focus will be
+      //  moved to body
+      setTimeout(function () {
+        focusColorSwatch();
+      });
+    }
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, children);
+};
+function getColorSwatchesRows(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  var colorSwatchesRowElements = rootNode.querySelectorAll('div[role=radiogroup]') || [];
+  return Array.from(colorSwatchesRowElements);
+}
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  var focusableModalElements = rootNode.querySelectorAll('button[role=radio]:not([disabled])') || [];
+  return Array.from(focusableModalElements);
+}