@atlaskit/editor-core 187.45.3 → 187.46.0

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -1,213 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
-import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
-import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
-import Button from '@atlaskit/button';
-import Tooltip from '@atlaskit/tooltip';
-import { DN50, N0, N60A, N30A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import ColorPalette from '../ColorPalette';
-import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
-import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-
-// helps adjusts position of popup
-const colorPickerButtonWrapper = css`
-  position: relative;
-`;
-const colorPickerExpandContainer = css`
-  margin: 0px ${"var(--ds-space-negative-050, -4px)"};
-`;
-
-// Control the size of color picker buttons and preview
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-const colorPickerWrapper = theme => css`
-  border-radius: ${borderRadius()}px;
-  background-color: ${themed({
-  light: `var(--ds-surface-overlay, ${N0})`,
-  dark: `var(--ds-surface-overlay, ${DN50})`
-})(theme)};
-  box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
-  padding: ${"var(--ds-space-100, 8px)"} 0px;
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
-const ColorPickerButton = props => {
-  const buttonRef = React.useRef(null);
-  const [isPopupOpen, setIsPopupOpen] = React.useState(false);
-  const [isPopupPositioned, setIsPopupPositioned] = React.useState(false);
-  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = React.useState(false);
-  const togglePopup = () => {
-    setIsPopupOpen(!isPopupOpen);
-    if (!isPopupOpen) {
-      setIsOpenedByKeyboard(false);
-      setIsPopupPositioned(false);
-    }
-  };
-  React.useEffect(() => {
-    if (props.setDisableParentScroll) {
-      props.setDisableParentScroll(isPopupOpen);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPopupOpen]);
-  const focusButton = () => {
-    var _buttonRef$current;
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  };
-  const handleEsc = React.useCallback(() => {
-    setIsOpenedByKeyboard(false);
-    setIsPopupPositioned(false);
-    setIsPopupOpen(false);
-    focusButton();
-  }, []);
-  const onPositionCalculated = React.useCallback(position => {
-    setIsPopupPositioned(true);
-    return position;
-  }, []);
-  const {
-    onChange,
-    createAnalyticsEvent,
-    colorPalette,
-    placement,
-    skipFocusButtonAfterPick
-  } = props;
-  const onColorSelected = React.useCallback((color, label) => {
-    setIsOpenedByKeyboard(false);
-    setIsPopupOpen(false);
-    setIsPopupPositioned(false);
-    if (onChange) {
-      if (createAnalyticsEvent) {
-        // fire analytics
-        const payload = {
-          action: ACTION.UPDATED,
-          actionSubject: ACTION_SUBJECT.PICKER,
-          actionSubjectId: ACTION_SUBJECT_ID.PICKER_COLOR,
-          attributes: {
-            color,
-            label,
-            placement: placement
-          },
-          eventType: EVENT_TYPE.TRACK
-        };
-        createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
-      }
-      const newPalette = colorPalette.find(colorPalette => colorPalette.value === color);
-      newPalette && onChange(newPalette);
-    }
-    if (!skipFocusButtonAfterPick) {
-      focusButton();
-    }
-  }, [colorPalette, onChange, createAnalyticsEvent, placement, skipFocusButtonAfterPick]);
-  const renderPopup = () => {
-    if (!isPopupOpen || !buttonRef.current) {
-      return;
-    }
-    const selectedColor = props.currentColor || null;
-    const {
-      selectedRowIndex,
-      selectedColumnIndex
-    } = getSelectedRowAndColumnFromPalette(props.colorPalette, selectedColor, props.cols);
-    return jsx(Popup, {
-      target: buttonRef.current,
-      fitHeight: 350,
-      fitWidth: 350,
-      offset: [0, 10],
-      alignX: props.alignX,
-      mountTo: props.setDisableParentScroll ? props.mountPoint : undefined
-      // Confluence inline comment editor has z-index: 500
-      // if the toolbar is scrollable, this will be mounted in the root editor
-      // we need an index of > 500 to display over it
-      ,
-      zIndex: props.setDisableParentScroll ? 600 : undefined,
-      ariaLabel: "Color picker popup",
-      onPositionCalculated: onPositionCalculated
-    }, jsx("div", {
-      css: colorPickerWrapper,
-      "data-test-id": "color-picker-menu"
-    }, jsx(ArrowKeyNavigationProvider, {
-      type: ArrowKeyNavigationType.COLOR,
-      selectedRowIndex: selectedRowIndex,
-      selectedColumnIndex: selectedColumnIndex,
-      closeOnTab: true,
-      handleClose: () => setIsPopupOpen(false),
-      isOpenedByKeyboard: isOpenedByKeyboard,
-      isPopupPositioned: isPopupPositioned
-    }, jsx(ColorPaletteWithListeners, {
-      cols: props.cols,
-      selectedColor: selectedColor,
-      onClick: onColorSelected,
-      handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
-    }))));
-  };
-  const title = props.title || '';
-  const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  const buttonStyle = theme => {
-    var _props$size, _props$size2, _props$size3;
-    return css`
-    padding: 0 10px;
-    background-color: ${"var(--ds-background-neutral-subtle, transparent)"};
-    ${
-    /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
-    &:before {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      align-self: center;
-      content: '';
-      border: 1px solid ${DEFAULT_BORDER_COLOR};
-      border-radius: ${borderRadius()}px;
-      background-color: ${currentColor || 'transparent'};
-      width: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px'};
-      height: ${((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px'};
-      padding: 0;
-      margin: 0px ${"var(--ds-space-025, 2px)"};
-    }
-    &:hover {
-      background: ${themed({
-      light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
-      dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
-    })(theme)};
-    }
-  `;
-  };
-  return jsx("div", {
-    css: colorPickerButtonWrapper
-  }, jsx(Tooltip, {
-    content: title,
-    position: "top"
-  }, jsx(Button, {
-    ref: buttonRef,
-    "aria-label": title,
-    spacing: "compact",
-    onClick: togglePopup,
-    onKeyDown: event => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        togglePopup();
-        setIsOpenedByKeyboard(true);
-      }
-    },
-    css: buttonStyle,
-    iconAfter: jsx("span", {
-      css: colorPickerExpandContainer
-    }, jsx(ExpandIcon, {
-      label: ""
-    }))
-  })), renderPopup());
-};
-export default withAnalyticsContext({
-  source: 'ConfigPanel'
-})(withAnalyticsEvents()(ColorPickerButton));

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

@@ -1,198 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-/** @jsx jsx */
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
-import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
-import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
-import Button from '@atlaskit/button';
-import Tooltip from '@atlaskit/tooltip';
-import { DN50, N0, N60A, N30A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import ColorPalette from '../ColorPalette';
-import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
-import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-
-// helps adjusts position of popup
-var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-var colorPickerExpandContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
-
-// Control the size of color picker buttons and preview
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var colorPickerWrapper = function colorPickerWrapper(theme) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), borderRadius(), themed({
-    light: "var(--ds-surface-overlay, ".concat(N0, ")"),
-    dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
-  })(theme), N60A, N60A, "var(--ds-space-100, 8px)");
-};
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-var ColorPaletteWithListeners = withOuterListeners(ColorPalette);
-var ColorPickerButton = function ColorPickerButton(props) {
-  var buttonRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isPopupOpen = _React$useState2[0],
-    setIsPopupOpen = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isPopupPositioned = _React$useState4[0],
-    setIsPopupPositioned = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isOpenedByKeyboard = _React$useState6[0],
-    setIsOpenedByKeyboard = _React$useState6[1];
-  var togglePopup = function togglePopup() {
-    setIsPopupOpen(!isPopupOpen);
-    if (!isPopupOpen) {
-      setIsOpenedByKeyboard(false);
-      setIsPopupPositioned(false);
-    }
-  };
-  React.useEffect(function () {
-    if (props.setDisableParentScroll) {
-      props.setDisableParentScroll(isPopupOpen);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPopupOpen]);
-  var focusButton = function focusButton() {
-    var _buttonRef$current;
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  };
-  var handleEsc = React.useCallback(function () {
-    setIsOpenedByKeyboard(false);
-    setIsPopupPositioned(false);
-    setIsPopupOpen(false);
-    focusButton();
-  }, []);
-  var onPositionCalculated = React.useCallback(function (position) {
-    setIsPopupPositioned(true);
-    return position;
-  }, []);
-  var onChange = props.onChange,
-    createAnalyticsEvent = props.createAnalyticsEvent,
-    colorPalette = props.colorPalette,
-    placement = props.placement,
-    skipFocusButtonAfterPick = props.skipFocusButtonAfterPick;
-  var onColorSelected = React.useCallback(function (color, label) {
-    setIsOpenedByKeyboard(false);
-    setIsPopupOpen(false);
-    setIsPopupPositioned(false);
-    if (onChange) {
-      if (createAnalyticsEvent) {
-        // fire analytics
-        var payload = {
-          action: ACTION.UPDATED,
-          actionSubject: ACTION_SUBJECT.PICKER,
-          actionSubjectId: ACTION_SUBJECT_ID.PICKER_COLOR,
-          attributes: {
-            color: color,
-            label: label,
-            placement: placement
-          },
-          eventType: EVENT_TYPE.TRACK
-        };
-        createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
-      }
-      var newPalette = colorPalette.find(function (colorPalette) {
-        return colorPalette.value === color;
-      });
-      newPalette && onChange(newPalette);
-    }
-    if (!skipFocusButtonAfterPick) {
-      focusButton();
-    }
-  }, [colorPalette, onChange, createAnalyticsEvent, placement, skipFocusButtonAfterPick]);
-  var renderPopup = function renderPopup() {
-    if (!isPopupOpen || !buttonRef.current) {
-      return;
-    }
-    var selectedColor = props.currentColor || null;
-    var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(props.colorPalette, selectedColor, props.cols),
-      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
-      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
-    return jsx(Popup, {
-      target: buttonRef.current,
-      fitHeight: 350,
-      fitWidth: 350,
-      offset: [0, 10],
-      alignX: props.alignX,
-      mountTo: props.setDisableParentScroll ? props.mountPoint : undefined
-      // Confluence inline comment editor has z-index: 500
-      // if the toolbar is scrollable, this will be mounted in the root editor
-      // we need an index of > 500 to display over it
-      ,
-      zIndex: props.setDisableParentScroll ? 600 : undefined,
-      ariaLabel: "Color picker popup",
-      onPositionCalculated: onPositionCalculated
-    }, jsx("div", {
-      css: colorPickerWrapper,
-      "data-test-id": "color-picker-menu"
-    }, jsx(ArrowKeyNavigationProvider, {
-      type: ArrowKeyNavigationType.COLOR,
-      selectedRowIndex: selectedRowIndex,
-      selectedColumnIndex: selectedColumnIndex,
-      closeOnTab: true,
-      handleClose: function handleClose() {
-        return setIsPopupOpen(false);
-      },
-      isOpenedByKeyboard: isOpenedByKeyboard,
-      isPopupPositioned: isPopupPositioned
-    }, jsx(ColorPaletteWithListeners, {
-      cols: props.cols,
-      selectedColor: selectedColor,
-      onClick: onColorSelected,
-      handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
-    }))));
-  };
-  var title = props.title || '';
-  var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = function buttonStyle(theme) {
-    var _props$size, _props$size2, _props$size3;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
-    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", themed({
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
-    })(theme));
-  };
-  return jsx("div", {
-    css: colorPickerButtonWrapper
-  }, jsx(Tooltip, {
-    content: title,
-    position: "top"
-  }, jsx(Button, {
-    ref: buttonRef,
-    "aria-label": title,
-    spacing: "compact",
-    onClick: togglePopup,
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        togglePopup();
-        setIsOpenedByKeyboard(true);
-      }
-    },
-    css: buttonStyle,
-    iconAfter: jsx("span", {
-      css: colorPickerExpandContainer
-    }, jsx(ExpandIcon, {
-      label: ""
-    }))
-  })), renderPopup());
-};
-export default withAnalyticsContext({
-  source: 'ConfigPanel'
-})(withAnalyticsEvents()(ColorPickerButton));

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

@@ -1,28 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import type { PaletteColor, PaletteTooltipMessages } from '../ColorPalette/Palettes';
-import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-type Props = WithAnalyticsEventsProps & {
-    currentColor?: string;
-    title?: string;
-    onChange?: (color: PaletteColor) => void;
-    colorPalette: PaletteColor[];
-    placement: string;
-    cols?: number;
-    alignX?: 'left' | 'right' | 'center' | 'end';
-    size?: {
-        width: string;
-        height: string;
-    };
-    mountPoint?: HTMLElement;
-    setDisableParentScroll?: (disable: boolean) => void;
-    hexToPaletteColor?: (hexColor: string) => string | undefined;
-    paletteColorTooltipMessages?: PaletteTooltipMessages;
-    /**
-     * After picking the color the default behaviour is to focus the color picker button.
-     * To prevent this use skipFocusButtonAfterPick.
-     */
-    skipFocusButtonAfterPick?: boolean;
-};
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "title" | "key" | "onChange" | "size" | "currentColor" | "cols" | "analyticsContext" | "alignX" | "colorPalette" | "placement" | "mountPoint" | "setDisableParentScroll" | "hexToPaletteColor" | "paletteColorTooltipMessages" | "skipFocusButtonAfterPick"> & React.RefAttributes<any>>;
-export default _default;

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

@@ -1,28 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import type { PaletteColor, PaletteTooltipMessages } from '../ColorPalette/Palettes';
-import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-type Props = WithAnalyticsEventsProps & {
-    currentColor?: string;
-    title?: string;
-    onChange?: (color: PaletteColor) => void;
-    colorPalette: PaletteColor[];
-    placement: string;
-    cols?: number;
-    alignX?: 'left' | 'right' | 'center' | 'end';
-    size?: {
-        width: string;
-        height: string;
-    };
-    mountPoint?: HTMLElement;
-    setDisableParentScroll?: (disable: boolean) => void;
-    hexToPaletteColor?: (hexColor: string) => string | undefined;
-    paletteColorTooltipMessages?: PaletteTooltipMessages;
-    /**
-     * After picking the color the default behaviour is to focus the color picker button.
-     * To prevent this use skipFocusButtonAfterPick.
-     */
-    skipFocusButtonAfterPick?: boolean;
-};
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "title" | "key" | "onChange" | "size" | "currentColor" | "cols" | "analyticsContext" | "alignX" | "colorPalette" | "placement" | "mountPoint" | "setDisableParentScroll" | "hexToPaletteColor" | "paletteColorTooltipMessages" | "skipFocusButtonAfterPick"> & React.RefAttributes<any>>;
-export default _default;