@atlaskit/editor-common 103.11.2 → 103.12.1

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

@@ -0,0 +1,264 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '../../ui-react';
+import Popup from '../Popup';
+import tableSelectorPopup, { TABLE_SELECTOR_BUTTON_GAP, TABLE_SELECTOR_BUTTON_SIZE } from './table-selector';
+var TABLE_SELECTOR_PADDING_TOP = 8;
+var TABLE_SELECTOR_PADDING_SIDE = 10;
+var DEFAULT_TABLE_SELECTOR_ROWS = 5;
+var DEFAULT_TABLE_SELECTOR_COLS = 10;
+var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
+var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
+var TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
+var initialSizeState = {
+  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+};
+var tableSelectorPopupWrapperStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")"),
+  padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
+});
+export var TableSelectorPopup = function TableSelectorPopup(props) {
+  var _useState = useState(_objectSpread(_objectSpread({}, initialSizeState), props.defaultSize)),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var tablePopupRef = useRef(null);
+  // If popup opened by keyboard enable keyboard mode
+  var isKeyboardMode = useRef(props.isOpenedByKeyboard);
+  var enableKeyboardMode = useCallback(function () {
+    if (!isKeyboardMode.current) {
+      isKeyboardMode.current = true;
+    }
+  }, [isKeyboardMode]);
+  var disableKeyboardMode = useCallback(function () {
+    if (isKeyboardMode.current) {
+      isKeyboardMode.current = false;
+    }
+  }, [isKeyboardMode]);
+
+  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
+  var handleMouseMove = useCallback(function (e) {
+    if (!tablePopupRef.current) {
+      return;
+    }
+    disableKeyboardMode();
+    var tablePopup = tablePopupRef.current;
+    var _tablePopup$getBoundi = tablePopup.getBoundingClientRect(),
+      left = _tablePopup$getBoundi.left,
+      top = _tablePopup$getBoundi.top;
+
+    // Mouse position on popup
+    var selectedWidth = e.clientX - left;
+    var selectedHeight = e.clientY - top;
+
+    // Calculate number grid cells selected
+    var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+    var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+    // Keep the selected rows and columns within the defined bounds
+    var gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
+    if (selectedGridCols < 1) {
+      selectedGridCols = 1;
+    }
+    if (selectedGridCols > size.maxCol) {
+      selectedGridCols = size.maxCol;
+    }
+    if (selectedGridRows < 1) {
+      selectedGridRows = 1;
+    }
+
+    // Expand grid when row selection is greater than the default grid size
+    if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS && selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+      gridRows = selectedGridRows + 1;
+    }
+    if (selectedGridRows >= DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+      selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+      gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+    }
+    if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
+      setSize({
+        col: selectedGridCols,
+        row: selectedGridRows,
+        maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+        maxRow: gridRows
+      });
+    }
+  }, [disableKeyboardMode, size, setSize]);
+  var decreasingSequence = function decreasingSequence(maxNumber, prevNumber) {
+    var nextNumber = prevNumber - 1;
+    if (prevNumber === 1) {
+      nextNumber = maxNumber;
+    }
+    return nextNumber;
+  };
+  var getMaxRow = function getMaxRow(prevSize, eventKey) {
+    switch (eventKey) {
+      case 'ArrowDown':
+        // Expand the grid size when last row selected
+        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
+          return prevSize.maxRow + 1;
+        }
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+        }
+        return prevSize.maxRow;
+      case 'ArrowLeft':
+        var moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
+        var moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
+        // Expand the popup to max size when selected row wraps around to last row
+        if (moveToLastRow) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+        }
+        // Decrease the popup when decreased row selection
+        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowUp':
+        if (prevSize.row === 1) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowRight':
+        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        var increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
+
+        // Decrease popup size for wrap around to selection 1 x 1
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.col === DEFAULT_TABLE_SELECTOR_COLS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (increaseMaxRow) {
+          return prevSize.maxRow + 1;
+        }
+        return prevSize.maxRow;
+      default:
+        return prevSize.maxRow;
+    }
+  };
+  var handleInitialButtonFocus = useCallback(function () {
+    if (isKeyboardMode.current !== true) {
+      enableKeyboardMode();
+      setSize(initialSizeState);
+    }
+  }, [enableKeyboardMode, setSize]);
+  var handleKeyDown = useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function (event) {
+    if (event.key === 'ArrowDown') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: prevSize.row % prevSize.maxRow + 1,
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+    if (event.key === 'ArrowRight') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
+          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowLeft') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var getRow = function getRow(prevRow, prevCol) {
+          var row = prevRow;
+          // Move to previous row for wrap around
+          if (prevSize.col === 1 && prevSize.row > 1) {
+            return prevRow - 1;
+            // Increase the selection to max size when selected row and column wraps around
+          } else if (prevRow === 1 && prevCol === 1) {
+            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          }
+          return row;
+        };
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: decreasingSequence(prevSize.maxCol, prevSize.col),
+          row: getRow(prevSize.row, prevSize.col),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowUp') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToLastRow = prevSize.row === 1;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+  }, [enableKeyboardMode, setSize]);
+  useEffect(function () {
+    var unbind;
+    var target = props.allowOutsideSelection ? window : tablePopupRef.current;
+    if (target) {
+      unbind = bind(target, {
+        type: 'mousemove',
+        listener: handleMouseMove
+      });
+    }
+    return unbind;
+  }, [handleMouseMove, props.allowOutsideSelection, tablePopupRef]);
+  return jsx(Popup, {
+    target: props.target,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    focusTrap: true,
+    onUnmount: props.onUnmount,
+    zIndex: akEditorMenuZIndex
+  }, jsx("div", {
+    css: tableSelectorPopupWrapperStyles,
+    ref: tablePopupRef
+  }, jsx(TableSelectorWithListeners, {
+    handleClickOutside: props.handleClickOutside,
+    handleEscapeKeydown: props.handleEscapeKeydown,
+    maxCols: size.maxCol,
+    maxRows: size.maxRow,
+    onSelection: props.onSelection,
+    selectedCol: size.col,
+    selectedRow: size.row,
+    onKeyDown: handleKeyDown,
+    isFocused: isKeyboardMode.current,
+    handleInitialButtonFocus: handleInitialButtonFocus
+  })));
+};
+export default TableSelectorPopup;

package/dist/esm/ui/TableSelector/table-selector.js

@@ -0,0 +1,154 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useContext, useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Stack } from '@atlaskit/primitives/compiled';
+import { B100 } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { toolbarInsertBlockMessages as messages } from '../../messages';
+import { OutsideClickTargetRefContext } from '../../ui-react';
+export var TABLE_SELECTOR_BUTTON_GAP = 2;
+export var TABLE_SELECTOR_BUTTON_SIZE = 17;
+var selectedButtonStyles = css({
+  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+  border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+});
+var buttonStyles = css({
+  height: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  width: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  border: "1px solid ".concat("var(--ds-border, #091e4224)"),
+  backgroundColor: "var(--ds-background-input, #ffffff)",
+  borderRadius: '3px',
+  cursor: 'pointer',
+  display: 'block',
+  '&:focus': {
+    outline: 'none',
+    border: "1px solid ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+    boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
+  }
+});
+var selectionSizeTextStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-075, 5px)",
+  padding: "var(--ds-space-075, 10px)"
+});
+var TableSelectorButton = function TableSelectorButton(_ref) {
+  var row = _ref.row,
+    col = _ref.col,
+    isActive = _ref.isActive,
+    _onClick = _ref.onClick,
+    label = _ref.label,
+    onKeyDown = _ref.onKeyDown,
+    isFocused = _ref.isFocused,
+    handleInitialButtonFocus = _ref.handleInitialButtonFocus;
+  var btnRef = useRef(null);
+  useEffect(function () {
+    if (btnRef.current) {
+      if (isFocused) {
+        btnRef.current.focus({
+          preventScroll: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker') ? true : undefined
+        });
+      } else {
+        btnRef.current.blur();
+      }
+    }
+  }, [isFocused, btnRef]);
+  var handleFocus = col === 1 && row === 1 ? function () {
+    return handleInitialButtonFocus();
+  } : undefined;
+  return jsx("button", {
+    type: "button",
+    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
+    onClick: function onClick() {
+      return _onClick(row, col);
+    },
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: btnRef,
+    onFocus: handleFocus
+  });
+};
+var createArray = function createArray(maxCols, maxRows) {
+  var arr = [];
+  for (var i = 1; i < maxRows + 1; i++) {
+    for (var j = 1; j < maxCols + 1; j++) {
+      arr.push({
+        col: j,
+        row: i
+      });
+    }
+  }
+  return arr;
+};
+var gridWrapperStyles = function gridWrapperStyles(_ref2) {
+  var maxCols = _ref2.maxCols,
+    maxRows = _ref2.maxRows;
+  return css({
+    display: 'grid',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gridTemplateColumns: "repeat(".concat(maxCols, ", 1fr)"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gridTemplateRows: "repeat(".concat(maxRows, ", 1fr)"),
+    gap: "".concat("var(--ds-space-025, ".concat("".concat(TABLE_SELECTOR_BUTTON_GAP, "px"), ")"))
+  });
+};
+var TableSelectorPopup = function TableSelectorPopup(_ref3) {
+  var maxCols = _ref3.maxCols,
+    maxRows = _ref3.maxRows,
+    onSelection = _ref3.onSelection,
+    selectedCol = _ref3.selectedCol,
+    selectedRow = _ref3.selectedRow,
+    onKeyDown = _ref3.onKeyDown,
+    isFocused = _ref3.isFocused,
+    handleInitialButtonFocus = _ref3.handleInitialButtonFocus,
+    formatMessage = _ref3.intl.formatMessage;
+  var buttons = useMemo(function () {
+    return createArray(maxCols, maxRows);
+  }, [maxCols, maxRows]);
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return jsx(Stack, {
+    ref: setOutsideClickTargetRef
+  }, jsx("div", {
+    "aria-label": "".concat(formatMessage(messages.tableSizeSelectorPopup)),
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    gridWrapperStyles({
+      maxCols: maxCols,
+      maxRows: maxRows
+    })
+  }, buttons.map(function (_ref4, index) {
+    var col = _ref4.col,
+      row = _ref4.row;
+    var isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
+    var isActive = selectedCol >= col && selectedRow >= row ? true : false;
+    return jsx(TableSelectorButton
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      key: index,
+      isActive: isActive,
+      col: col,
+      row: row,
+      onClick: onSelection,
+      label: "".concat(formatMessage(messages.tableSizeSelectorButton, {
+        numberOfColumns: col,
+        numberOfRows: row
+      })),
+      onKeyDown: onKeyDown,
+      isFocused: isCurrentFocused,
+      handleInitialButtonFocus: handleInitialButtonFocus
+    });
+  })), jsx("span", {
+    css: selectionSizeTextStyles,
+    "aria-hidden": true
+  }, "".concat(selectedCol, " x ").concat(selectedRow)));
+};
+export default injectIntl(TableSelectorPopup);

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

@@ -79,6 +79,7 @@ export var WidthProvider = function WidthProvider(_ref) {
       if (!isMountedRef.current) {
         return;
       }
+      widthRef.current = nextWidth;
       setWidth(nextWidth);
     });
   }, []);

package/dist/esm/ui/index.js

@@ -42,4 +42,5 @@ export { ToolbarDropdownWrapper } from './Toolbar/DropdownWrapper';
 export { ToolbarExpandIcon } from './Toolbar/ExpandIcon';
 export { ToolbarSeparator } from './Toolbar/Separator';
 export { default as DropList } from './DropList';
-export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
+export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
+export { default as TableSelectorPopup } from './TableSelector';

package/dist/esm/utils/get-dom-ref-from-selection.js

@@ -0,0 +1,32 @@
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+export var getDomRefFromSelection = function getDomRefFromSelection(view, actionSubjectId, dispatchAnalyticsEvent) {
+  try {
+    var domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
+    if (domRef instanceof HTMLElement) {
+      // If element is not a paragraph, we need to find the closest paragraph parent
+      if (domRef.nodeName !== 'P') {
+        var paragraphRef = domRef.closest('p');
+        if (paragraphRef) {
+          return paragraphRef;
+        }
+      }
+      return domRef;
+    } else {
+      throw new Error('Invalid DOM reference');
+    }
+  } catch (error) {
+    if (dispatchAnalyticsEvent) {
+      var payload = {
+        action: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: actionSubjectId,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Error getting DOM reference from selection'
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+};

package/dist/types/analytics/types/enums.d.ts

@@ -419,6 +419,7 @@ export declare enum ACTION_SUBJECT_ID {
     PICKER_MEDIA = "mediaPicker",
     PICKER_COLOR = "colorPicker",
     PICKER_EMOJI = "emojiPicker",
+    PICKER_TABLE_SIZE = "tableSizePicker",
     DOCKED_PRIMARY_TOOLBAR = "dockedPrimaryToolbar",
     PLACEHOLDER_TEXT = "placeholderText",
     POST_QUERY_SEARCH_RESULTS = "postQuerySearchResults",

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

@@ -0,0 +1,28 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type SyntheticEvent } from 'react';
+import { jsx } from '@emotion/react';
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+type SimpleEventHandler<T> = (event: T) => void;
+export interface TableSelectorPopupProps {
+    onUnmount?: () => void;
+    onSelection: OnTableSizeSelection;
+    target?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    handleClickOutside?: SimpleEventHandler<MouseEvent>;
+    handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+    isOpenedByKeyboard: boolean;
+    defaultSize?: {
+        row: number;
+        col: number;
+    };
+    allowOutsideSelection?: boolean;
+}
+export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
+export default TableSelectorPopup;

package/dist/types/ui/TableSelector/table-selector.d.ts

@@ -0,0 +1,31 @@
+import type { KeyboardEventHandler, SyntheticEvent } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
+export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
+export interface TableSelectorButtonProps {
+    row: number;
+    col: number;
+    isActive: boolean;
+    onClick: OnTableSizeSelection;
+    label: string;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
+}
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+interface TableSelectorPopupProps {
+    maxCols: number;
+    maxRows: number;
+    onSelection: OnTableSizeSelection;
+    selectedCol: number;
+    selectedRow: number;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps>;
+};
+export default _default;

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

@@ -54,3 +54,4 @@ export { default as DropList, type Props as DropListProps } from './DropList';
 export type { UseStickyToolbarType } from './Toolbar';
 export type { OpenChangedEvent } from './DropList';
 export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
+export { default as TableSelectorPopup, type TableSelectorPopupProps } from './TableSelector';

package/dist/types/utils/get-dom-ref-from-selection.d.ts

@@ -0,0 +1,4 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { DispatchAnalyticsEvent } from '../analytics';
+import { ACTION_SUBJECT_ID } from '../analytics';
+export declare const getDomRefFromSelection: (view: EditorView, actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA | ACTION_SUBJECT_ID.PICKER_TABLE_SIZE | ACTION_SUBJECT_ID.PICKER_EMOJI, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => HTMLElement | undefined;

package/dist/types-ts4.5/analytics/types/enums.d.ts

@@ -419,6 +419,7 @@ export declare enum ACTION_SUBJECT_ID {
     PICKER_MEDIA = "mediaPicker",
     PICKER_COLOR = "colorPicker",
     PICKER_EMOJI = "emojiPicker",
+    PICKER_TABLE_SIZE = "tableSizePicker",
     DOCKED_PRIMARY_TOOLBAR = "dockedPrimaryToolbar",
     PLACEHOLDER_TEXT = "placeholderText",
     POST_QUERY_SEARCH_RESULTS = "postQuerySearchResults",

package/dist/types-ts4.5/ui/TableSelector/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type SyntheticEvent } from 'react';
+import { jsx } from '@emotion/react';
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+type SimpleEventHandler<T> = (event: T) => void;
+export interface TableSelectorPopupProps {
+    onUnmount?: () => void;
+    onSelection: OnTableSizeSelection;
+    target?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    handleClickOutside?: SimpleEventHandler<MouseEvent>;
+    handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+    isOpenedByKeyboard: boolean;
+    defaultSize?: {
+        row: number;
+        col: number;
+    };
+    allowOutsideSelection?: boolean;
+}
+export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
+export default TableSelectorPopup;

package/dist/types-ts4.5/ui/TableSelector/table-selector.d.ts

@@ -0,0 +1,31 @@
+import type { KeyboardEventHandler, SyntheticEvent } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
+export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
+export interface TableSelectorButtonProps {
+    row: number;
+    col: number;
+    isActive: boolean;
+    onClick: OnTableSizeSelection;
+    label: string;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
+}
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+interface TableSelectorPopupProps {
+    maxCols: number;
+    maxRows: number;
+    onSelection: OnTableSizeSelection;
+    selectedCol: number;
+    selectedRow: number;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types-ts4.5/ui/index.d.ts

@@ -54,3 +54,4 @@ export { default as DropList, type Props as DropListProps } from './DropList';
 export type { UseStickyToolbarType } from './Toolbar';
 export type { OpenChangedEvent } from './DropList';
 export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
+export { default as TableSelectorPopup, type TableSelectorPopupProps } from './TableSelector';

package/dist/types-ts4.5/utils/get-dom-ref-from-selection.d.ts

@@ -0,0 +1,4 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { DispatchAnalyticsEvent } from '../analytics';
+import { ACTION_SUBJECT_ID } from '../analytics';
+export declare const getDomRefFromSelection: (view: EditorView, actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA | ACTION_SUBJECT_ID.PICKER_TABLE_SIZE | ACTION_SUBJECT_ID.PICKER_EMOJI, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => HTMLElement | undefined;

package/get-dom-ref-from-selection/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/editor-common/get-dom-ref-from-selection",
+  "main": "../dist/cjs/utils/get-dom-ref-from-selection.js",
+  "module": "../dist/esm/utils/get-dom-ref-from-selection.js",
+  "module:es2019": "../dist/es2019/utils/get-dom-ref-from-selection.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/utils/get-dom-ref-from-selection.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/utils/get-dom-ref-from-selection.d.ts"
+      ]
+    }
+  }
+}