@atlaskit/editor-common 72.4.1 → 72.5.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @atlaskit/editor-common
 
+## 72.5.0
+
+### Minor Changes
+
+- [`2ee31675e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ee31675e66) - [ED-16557] Refactor Editor and EditorNext to share common code in editor-core.
+
+  Introduce new hooks in editor-common including:
+
+  1. `usePreviousState` can be used to remember the last props passed to a functional component
+
+  2. `useConstructor` can be used to run only once on a functional component
+
+- [`15059b00c15`](https://bitbucket.org/atlassian/atlassian-frontend/commits/15059b00c15) - [ED-16585] Allow editorActions.replaceSelection and processRawValue to accept fragments. Allow quickInsert actions on extensions to return a fragment.
+- [`c22905e224e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c22905e224e) - [ux] ED-16335: First menu item gains focus when the dropdown menu is opened by keyboard.
+- [`9a25538e0ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9a25538e0ef) - [ux] ED-16723 Custom panel background color is tokensied. More details at https://hello.atlassian.net/wiki/spaces/DST/pages/2382075153/Draft+Custom+panel+background+color+is+tokenised
+- [`c14933555ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c14933555ee) - Add getAnalyticsEditorAppearance utility function
+- [`1d11b24f17e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1d11b24f17e) - [ux] ED-15549 Implemented keyboard navigation in color palette
+- [`dfb37c5d4c2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfb37c5d4c2) - [ED-16752] Migrated fireAnlyticsEvent, getAnalyticsEventsFromTransaction, FireAnalyticsEvent, FireAnalyticsEventPayload
+  and extended FireAnalyticsEvent type with optional createAnalyticsEvent parameter in @atlaskit/editor-common. Decoupled
+  plugin dependency in some areas of @atlaskit/editor-core to now use the migrated code from @atlaskit/editor-common instead by
+  updating import endpoints.
+- [`56d6c797d39`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56d6c797d39) - ED-16654 Calculate correct input latency and also added other timings for it
+
+### Patch Changes
+
+- [`286cc5d6e94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/286cc5d6e94) - Minor improvement to WidthEmitter to stop console error logging and test migration.
+- [`6a031b9b2da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a031b9b2da) - [ED-16334] Merge NextEditorPlugin interface with NextEditorPluginWithDependencies
+- [`e907b6924cc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e907b6924cc) - [ux] ED-16505 Update confirmation dialog message shown when data source element is about to removed
+- [`19c1c5e554a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19c1c5e554a) - [ux] TSLA-487 Fixes horizontal scroll shadow and places the scroll bar on the last row instead of below the table. See expected behavior on TSLA-27
+- [`2d6074f31bb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d6074f31bb) - ED-16740: [ux] Updated the dropdown menu to shift the focus for indentation and outdentation button to their respective opposite in case they become disabled. Also added fallback case where any disabled button will adjust focus to the next button down in the dropdown menu
+- [`710adab73cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/710adab73cf) - [ED-16557] Introduces EditorMigrationComponent which
+  can be used as a replacement for Editor. This
+  component calls Editor under the hood but if the
+  `useEditorNext` feature flag is active will start
+  using an experimental version of the Editor API.
+
+  At this stage Makers can start adopting
+  EditorMigrationComponent to replace the Editor
+  component.
+
+  This change also introduces the `useEditorNext`
+  feature flag. Activating this flag will start to use
+  the new Editor API.
+
+  Warning: This new Editor API is in development and
+  should not be used until the EditorNext component is
+  released and the API is stable.
+
+- [`2644ff2a1e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2644ff2a1e7) - [ux] ED-16838: fix keyboard shortcut toggleBlockQuote, now matches shortcut listed in https://support.atlassian.com/jira-software-cloud/docs/markdown-and-keyboard-shortcuts/ and made it work on Windows
+- [`a6cf418fe1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a6cf418fe1b) - ED-16904 Fixed floating toolbar disappearing on clicking color picker button."
+- Updated dependencies
+
 ## 72.4.1
 
 ### Patch Changes

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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnalyticsQueue = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var AnalyticsQueue = /*#__PURE__*/function () {
+  function AnalyticsQueue() {
+    (0, _classCallCheck2.default)(this, AnalyticsQueue);
+    (0, _defineProperty2.default)(this, "tasks", []);
+    (0, _defineProperty2.default)(this, "running", false);
+  }
+  (0, _createClass2.default)(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;
+}();
+exports.AnalyticsQueue = AnalyticsQueue;
+(0, _defineProperty2.default)(AnalyticsQueue, "get", (0, _memoizeOne.default)(function () {
+  return new AnalyticsQueue();
+}));

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fireAnalyticsEvent = void 0;
+var _analyticsListeners = require("@atlaskit/analytics-listeners");
+var _analyticsQueue = require("./analytics-queue");
+var editorAnalyticsChannel = _analyticsListeners.FabricChannel.editor;
+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.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);
+    }
+  };
+};
+exports.fireAnalyticsEvent = fireAnalyticsEvent;

package/dist/cjs/analytics/index.js

@@ -231,4 +231,18 @@ Object.defineProperty(exports, "USER_CONTEXT", {
     return _types.USER_CONTEXT;
   }
 });
-var _types = require("./types");
+Object.defineProperty(exports, "fireAnalyticsEvent", {
+  enumerable: true,
+  get: function get() {
+    return _fireAnalyticsEvent.fireAnalyticsEvent;
+  }
+});
+Object.defineProperty(exports, "getAnalyticsEventsFromTransaction", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getAnalyticsEventsFromTransaction;
+  }
+});
+var _types = require("./types");
+var _fireAnalyticsEvent = require("./fire-analytics-event");
+var _utils = require("./utils");

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

@@ -65,6 +65,10 @@ exports.ACTION = 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/cjs/analytics/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAnalyticsEventsFromTransaction = getAnalyticsEventsFromTransaction;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _steps = require("@atlaskit/adf-schema/steps");
+function getAnalyticsEventsFromTransaction(tr) {
+  return tr.steps.filter(function (step) {
+    return step instanceof _steps.AnalyticsStep;
+  }).reduce(function (acc, step) {
+    return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(step.analyticsEvents));
+  }, []);
+}

package/dist/cjs/hooks/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useConstructor", {
+  enumerable: true,
+  get: function get() {
+    return _useConstructor.default;
+  }
+});
+Object.defineProperty(exports, "usePreviousState", {
+  enumerable: true,
+  get: function get() {
+    return _usePreviousState.default;
+  }
+});
+var _usePreviousState = _interopRequireDefault(require("./usePreviousState"));
+var _useConstructor = _interopRequireDefault(require("./useConstructor"));

package/dist/cjs/hooks/useConstructor.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useConstructor;
+var _react = require("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
+ */
+function useConstructor(callback) {
+  var hasRun = (0, _react.useRef)(false);
+  if (!hasRun.current) {
+    callback();
+    hasRun.current = true;
+  }
+}

package/dist/cjs/hooks/usePreviousState.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePreviousState;
+var _react = require("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
+ */
+function usePreviousState(value, initialValue) {
+  var ref = (0, _react.useRef)(initialValue);
+  var prevValue = ref.current;
+  ref.current = value;
+  return prevValue;
+}

package/dist/cjs/keymaps/index.js

@@ -143,7 +143,7 @@ var ctrlBackSpace = makeKeyMapWithCommon('Cmd + Backspace', 'Mod-Backspace');
 exports.ctrlBackSpace = ctrlBackSpace;
 var toggleBulletList = makeKeyMapWithCommon('Bullet list', 'Mod-Shift-8');
 exports.toggleBulletList = toggleBulletList;
-var toggleBlockQuote = makeKeymap('Quote', '', 'Cmd-Alt-9');
+var toggleBlockQuote = makeKeyMapWithCommon('Quote', 'Mod-Shift-9');
 exports.toggleBlockQuote = toggleBlockQuote;
 var insertNewLine = makeKeyMapWithCommon('Insert new line', 'Shift-Enter');
 exports.insertNewLine = insertNewLine;

package/dist/cjs/styles/index.js

@@ -243,6 +243,12 @@ Object.defineProperty(exports, "tableMarginTop", {
     return _table.tableMarginTop;
   }
 });
+Object.defineProperty(exports, "tableMarginTopWithControl", {
+  enumerable: true,
+  get: function get() {
+    return _table.tableMarginTopWithControl;
+  }
+});
 Object.defineProperty(exports, "tableNewColumnMinWidth", {
   enumerable: true,
   get: function get() {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableSharedStyle = exports.tableResizeHandleWidth = exports.tableNewColumnMinWidth = exports.tableMarginTop = exports.tableMarginSides = exports.tableMarginBottom = exports.tableCellPadding = exports.tableCellMinWidth = exports.tableCellBorderWidth = exports.calcTableWidth = exports.TableSharedCssClassName = void 0;
+exports.tableSharedStyle = exports.tableResizeHandleWidth = exports.tableNewColumnMinWidth = exports.tableMarginTopWithControl = exports.tableMarginTop = exports.tableMarginSides = exports.tableMarginBottom = exports.tableCellPadding = exports.tableCellMinWidth = exports.tableCellBorderWidth = exports.calcTableWidth = exports.TableSharedCssClassName = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -19,6 +19,8 @@ var tableMarginTop = 24;
 exports.tableMarginTop = tableMarginTop;
 var tableMarginBottom = 16;
 exports.tableMarginBottom = tableMarginBottom;
+var tableMarginTopWithControl = 14;
+exports.tableMarginTopWithControl = tableMarginTopWithControl;
 var tableMarginSides = 8;
 exports.tableMarginSides = tableMarginSides;
 var tableCellMinWidth = 48;

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

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.4.1";
+var packageVersion = "72.5.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/index.js

@@ -119,6 +119,12 @@ Object.defineProperty(exports, "WidthConsumer", {
     return _WidthProvider.WidthConsumer;
   }
 });
+Object.defineProperty(exports, "WidthContext", {
+  enumerable: true,
+  get: function get() {
+    return _WidthProvider.WidthContext;
+  }
+});
 Object.defineProperty(exports, "WidthProvider", {
   enumerable: true,
   get: function get() {

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

@@ -15,7 +15,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _editorPalette = require("@atlaskit/editor-palette");
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -59,8 +58,8 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         borderColor = _this$props2.borderColor,
         _this$props2$checkMar = _this$props2.checkMarkColor,
         checkMarkColor = _this$props2$checkMar === void 0 ? _colors.N0 : _this$props2$checkMar,
-        useDesignTokens = _this$props2.useDesignTokens;
-      var colorStyle = useDesignTokens ? (0, _editorPalette.hexToEditorTextPaletteColor)(value) : value;
+        hexToPaletteColor = _this$props2.hexToPaletteColor;
+      var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
       return (0, _react2.jsx)(_tooltip.default, {
         content: label
       }, (0, _react2.jsx)("span", {

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

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

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

@@ -15,6 +15,7 @@ var _Color = _interopRequireDefault(require("./Color"));
 var _getColorMessage = _interopRequireDefault(require("./Palettes/getColorMessage"));
 var _paletteMessagesTokenModeNames = require("./Palettes/paletteMessagesTokenModeNames");
 var _styles = require("./styles");
+var _utils = require("./utils");
 /** @jsx jsx */
 
 /**
@@ -24,12 +25,12 @@ var _styles = require("./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 = [_colors.N0, _colors.N500].sort(function (a, b) {
     return _chromatism.default.difference(b, color) - _chromatism.default.difference(a, color);
   })[0];
-  if (!textPalette) {
+  if (!useIconToken) {
     return contrastColor;
   }
 
@@ -42,24 +43,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 ? _utils.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 = (0, _tokens.useThemeObserver)(),
     tokenTheme = _useThemeObserver.colorMode;
+  var useIconToken = !!hexToPaletteColor;
   var colorsPerRow = _react.default.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 (0, _utils.getColorsPerRowFromPalette)(palette, cols);
   }, [palette, cols]);
   return (0, _react2.jsx)(_react.default.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
     return (0, _react2.jsx)("div", {
@@ -87,8 +85,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/cjs/ui-color/ColorPalette/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_COLOR_PICKER_COLUMNS = void 0;
+exports.getColorsPerRowFromPalette = getColorsPerRowFromPalette;
+exports.getSelectedRowAndColumn = getSelectedRowAndColumn;
+exports.getSelectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette;
+var DEFAULT_COLOR_PICKER_COLUMNS = 7;
+exports.DEFAULT_COLOR_PICKER_COLUMNS = DEFAULT_COLOR_PICKER_COLUMNS;
+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;
+  }, []);
+}
+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
+  };
+}
+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/cjs/ui-color/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "DEFAULT_BORDER_COLOR", {
     return _common.DEFAULT_BORDER_COLOR;
   }
 });
+Object.defineProperty(exports, "DEFAULT_COLOR_PICKER_COLUMNS", {
+  enumerable: true,
+  get: function get() {
+    return _utils.DEFAULT_COLOR_PICKER_COLUMNS;
+  }
+});
 Object.defineProperty(exports, "cellBackgroundColorPalette", {
   enumerable: true,
   get: function get() {
@@ -40,6 +46,24 @@ Object.defineProperty(exports, "darkModeStatusColorPalette", {
     return _statusColorPalette.darkModeStatusColorPalette;
   }
 });
+Object.defineProperty(exports, "getColorsPerRowFromPalette", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getColorsPerRowFromPalette;
+  }
+});
+Object.defineProperty(exports, "getSelectedRowAndColumn", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getSelectedRowAndColumn;
+  }
+});
+Object.defineProperty(exports, "getSelectedRowAndColumnFromPalette", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getSelectedRowAndColumnFromPalette;
+  }
+});
 Object.defineProperty(exports, "lightModeStatusColorPalette", {
   enumerable: true,
   get: function get() {
@@ -66,6 +90,7 @@ Object.defineProperty(exports, "textColorPalette", {
 });
 var _ColorPalette = _interopRequireDefault(require("./ColorPalette"));
 var _Color = _interopRequireDefault(require("./ColorPalette/Color"));
+var _utils = require("./ColorPalette/utils");
 var _cellBackgroundColorPalette = _interopRequireDefault(require("./ColorPalette/Palettes/cellBackgroundColorPalette"));
 var _paletteMessages = _interopRequireDefault(require("./ColorPalette/Palettes/paletteMessages"));
 var _panelBackgroundPalette = require("./ColorPalette/Palettes/panelBackgroundPalette");