@atlaskit/editor-plugin-card 7.1.0 → 7.2.1

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

@@ -1,171 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
-var _messages = require("@atlaskit/editor-common/messages");
-var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
-var _primitives = require("@atlaskit/primitives");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-
-var containerStyles = (0, _react2.css)({
-  position: 'relative'
-});
-var iconWrapperStyles = (0, _primitives.xcss)({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '17px',
-  width: '17px'
-});
-var hiddenTextStyle = (0, _react2.css)({
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  position: 'absolute',
-  visibility: 'hidden'
-});
-var iconAndLabelWrapperStyles = (0, _primitives.xcss)({
-  position: 'absolute',
-  left: 'space.025',
-  top: '-1px',
-  cursor: 'pointer',
-  display: 'inline-flex',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  paddingInline: 'space.050',
-  gap: 'space.025',
-  overflow: 'hidden',
-  zIndex: 'card',
-  backgroundColor: 'color.background.accent.gray.subtlest',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: 'color.text.subtle',
-  textDecoration: 'none',
-  whiteSpace: 'nowrap',
-  ':hover': {
-    backgroundColor: 'elevation.surface.hovered',
-    color: 'color.text.subtle',
-    textDecoration: 'none'
-  }
-});
-var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
-var ICON_WIDTH = 16;
-var DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
-
-var PanelButtonOverlay = function PanelButtonOverlay(_ref) {
-  var children = _ref.children,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-    editorAppearance = _ref.editorAppearance,
-    onClick = _ref.onClick;
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var label = formatMessage(_messages.cardMessages.panelButtonTitle);
-  var containerRef = (0, _react.useRef)(null);
-  var panelButtonRef = (0, _react.useRef)(null);
-  var hiddenTextRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showLabel = _useState2[0],
-    setShowLabel = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isHovered = _useState4[0],
-    setHovered = _useState4[1];
-  var panelTextWidthRef = (0, _react.useRef)(null);
-  (0, _react.useLayoutEffect)(function () {
-    var _containerRef$current, _panelButtonRef$curre;
-    if (!isVisible || !isHovered) {
-      return;
-    }
-    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    var panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
-
-    // Get the hidden text width
-    if (!panelTextWidthRef.current) {
-      var hiddenText = hiddenTextRef.current;
-      if (hiddenText) {
-        // Measure the width of the hidden text
-        // Temporarily make the element visible to measure its width
-        hiddenText.style.visibility = 'hidden';
-        hiddenText.style.display = 'inline';
-        panelTextWidthRef.current = hiddenText.offsetWidth;
-
-        // Reset the hiddenText's display property
-        hiddenText.style.display = 'none';
-        hiddenText.style.visibility = 'inherit';
-      } else {
-        panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
-      }
-    }
-    if (!cardWidth || !panelButtonWidth) {
-      return;
-    }
-    var panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
-    var canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
-    setShowLabel(canShowLabel);
-  }, [isVisible, isHovered]);
-  var handleOverlayChange = function handleOverlayChange(isHovered) {
-    setHovered(isHovered);
-  };
-  var handleClick = function handleClick() {
-    if (onClick) {
-      onClick();
-    }
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("span", {
-      ref: containerRef,
-      css: containerStyles,
-      onMouseEnter: function onMouseEnter() {
-        return handleOverlayChange(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return handleOverlayChange(false);
-      }
-    }, children, (0, _react2.jsx)("span", {
-      css: hiddenTextStyle,
-      "aria-hidden": "true"
-    }, (0, _react2.jsx)(_primitives.Text, {
-      ref: hiddenTextRef,
-      size: "small",
-      maxLines: 1
-    }, label)), isHovered && (0, _react2.jsx)(_primitives.Pressable, {
-      ref: panelButtonRef,
-      xcss: iconAndLabelWrapperStyles,
-      style: {
-        paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
-      },
-      onClick: handleClick
-    }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: iconWrapperStyles,
-      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
-    }, (0, _react2.jsx)(_panelRight.default, {
-      label: ""
-    })), showLabel && (0, _react2.jsx)(_primitives.Text, {
-      size: "small",
-      color: "color.text.subtle",
-      maxLines: 1
-    }, label)))
-  );
-};
-var _default = exports.default = PanelButtonOverlay;

package/dist/cjs/ui/PanelButtonOverlay/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

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

@@ -1,148 +0,0 @@
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
-import { useIntl } from 'react-intl-next';
-import { cardMessages } from '@atlaskit/editor-common/messages';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import PanelRightIcon from '@atlaskit/icon/core/panel-right';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box, Pressable, Text, xcss } from '@atlaskit/primitives';
-const containerStyles = css({
-  position: 'relative'
-});
-const iconWrapperStyles = xcss({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '17px',
-  width: '17px'
-});
-const hiddenTextStyle = css({
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  position: 'absolute',
-  visibility: 'hidden'
-});
-const iconAndLabelWrapperStyles = xcss({
-  position: 'absolute',
-  left: 'space.025',
-  top: '-1px',
-  cursor: 'pointer',
-  display: 'inline-flex',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  paddingInline: 'space.050',
-  gap: 'space.025',
-  overflow: 'hidden',
-  zIndex: 'card',
-  backgroundColor: 'color.background.accent.gray.subtlest',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: 'color.text.subtle',
-  textDecoration: 'none',
-  whiteSpace: 'nowrap',
-  ':hover': {
-    backgroundColor: 'elevation.surface.hovered',
-    color: 'color.text.subtle',
-    textDecoration: 'none'
-  }
-});
-const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
-const ICON_WIDTH = 16;
-const DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
-
-const PanelButtonOverlay = ({
-  children,
-  isVisible = false,
-  editorAppearance,
-  onClick
-}) => {
-  const {
-    formatMessage
-  } = useIntl();
-  const label = formatMessage(cardMessages.panelButtonTitle);
-  const containerRef = useRef(null);
-  const panelButtonRef = useRef(null);
-  const hiddenTextRef = useRef(null);
-  const [showLabel, setShowLabel] = useState(true);
-  const [isHovered, setHovered] = useState(false);
-  const panelTextWidthRef = useRef(null);
-  useLayoutEffect(() => {
-    var _containerRef$current, _panelButtonRef$curre;
-    if (!isVisible || !isHovered) {
-      return;
-    }
-    const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    const panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
-
-    // Get the hidden text width
-    if (!panelTextWidthRef.current) {
-      const hiddenText = hiddenTextRef.current;
-      if (hiddenText) {
-        // Measure the width of the hidden text
-        // Temporarily make the element visible to measure its width
-        hiddenText.style.visibility = 'hidden';
-        hiddenText.style.display = 'inline';
-        panelTextWidthRef.current = hiddenText.offsetWidth;
-
-        // Reset the hiddenText's display property
-        hiddenText.style.display = 'none';
-        hiddenText.style.visibility = 'inherit';
-      } else {
-        panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
-      }
-    }
-    if (!cardWidth || !panelButtonWidth) {
-      return;
-    }
-    const panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
-    const canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
-    setShowLabel(canShowLabel);
-  }, [isVisible, isHovered]);
-  const handleOverlayChange = isHovered => {
-    setHovered(isHovered);
-  };
-  const handleClick = () => {
-    if (onClick) {
-      onClick();
-    }
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("span", {
-      ref: containerRef,
-      css: containerStyles,
-      onMouseEnter: () => handleOverlayChange(true),
-      onMouseLeave: () => handleOverlayChange(false)
-    }, children, jsx("span", {
-      css: hiddenTextStyle,
-      "aria-hidden": "true"
-    }, jsx(Text, {
-      ref: hiddenTextRef,
-      size: "small",
-      maxLines: 1
-    }, label)), isHovered && jsx(Pressable, {
-      ref: panelButtonRef,
-      xcss: iconAndLabelWrapperStyles,
-      style: {
-        paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
-      },
-      onClick: handleClick
-    }, jsx(Box, {
-      xcss: iconWrapperStyles,
-      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
-    }, jsx(PanelRightIcon, {
-      label: ""
-    })), showLabel && jsx(Text, {
-      size: "small",
-      color: "color.text.subtle",
-      maxLines: 1
-    }, label)))
-  );
-};
-export default PanelButtonOverlay;

package/dist/esm/ui/OpenButtonOverlay/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,158 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
-import { useIntl } from 'react-intl-next';
-import { cardMessages } from '@atlaskit/editor-common/messages';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import PanelRightIcon from '@atlaskit/icon/core/panel-right';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box, Pressable, Text, xcss } from '@atlaskit/primitives';
-var containerStyles = css({
-  position: 'relative'
-});
-var iconWrapperStyles = xcss({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '17px',
-  width: '17px'
-});
-var hiddenTextStyle = css({
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  position: 'absolute',
-  visibility: 'hidden'
-});
-var iconAndLabelWrapperStyles = xcss({
-  position: 'absolute',
-  left: 'space.025',
-  top: '-1px',
-  cursor: 'pointer',
-  display: 'inline-flex',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  paddingInline: 'space.050',
-  gap: 'space.025',
-  overflow: 'hidden',
-  zIndex: 'card',
-  backgroundColor: 'color.background.accent.gray.subtlest',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: 'color.text.subtle',
-  textDecoration: 'none',
-  whiteSpace: 'nowrap',
-  ':hover': {
-    backgroundColor: 'elevation.surface.hovered',
-    color: 'color.text.subtle',
-    textDecoration: 'none'
-  }
-});
-var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
-var ICON_WIDTH = 16;
-var DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
-
-var PanelButtonOverlay = function PanelButtonOverlay(_ref) {
-  var children = _ref.children,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-    editorAppearance = _ref.editorAppearance,
-    onClick = _ref.onClick;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var label = formatMessage(cardMessages.panelButtonTitle);
-  var containerRef = useRef(null);
-  var panelButtonRef = useRef(null);
-  var hiddenTextRef = useRef(null);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    showLabel = _useState2[0],
-    setShowLabel = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isHovered = _useState4[0],
-    setHovered = _useState4[1];
-  var panelTextWidthRef = useRef(null);
-  useLayoutEffect(function () {
-    var _containerRef$current, _panelButtonRef$curre;
-    if (!isVisible || !isHovered) {
-      return;
-    }
-    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    var panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
-
-    // Get the hidden text width
-    if (!panelTextWidthRef.current) {
-      var hiddenText = hiddenTextRef.current;
-      if (hiddenText) {
-        // Measure the width of the hidden text
-        // Temporarily make the element visible to measure its width
-        hiddenText.style.visibility = 'hidden';
-        hiddenText.style.display = 'inline';
-        panelTextWidthRef.current = hiddenText.offsetWidth;
-
-        // Reset the hiddenText's display property
-        hiddenText.style.display = 'none';
-        hiddenText.style.visibility = 'inherit';
-      } else {
-        panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
-      }
-    }
-    if (!cardWidth || !panelButtonWidth) {
-      return;
-    }
-    var panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
-    var canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
-    setShowLabel(canShowLabel);
-  }, [isVisible, isHovered]);
-  var handleOverlayChange = function handleOverlayChange(isHovered) {
-    setHovered(isHovered);
-  };
-  var handleClick = function handleClick() {
-    if (onClick) {
-      onClick();
-    }
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("span", {
-      ref: containerRef,
-      css: containerStyles,
-      onMouseEnter: function onMouseEnter() {
-        return handleOverlayChange(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return handleOverlayChange(false);
-      }
-    }, children, jsx("span", {
-      css: hiddenTextStyle,
-      "aria-hidden": "true"
-    }, jsx(Text, {
-      ref: hiddenTextRef,
-      size: "small",
-      maxLines: 1
-    }, label)), isHovered && jsx(Pressable, {
-      ref: panelButtonRef,
-      xcss: iconAndLabelWrapperStyles,
-      style: {
-        paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
-      },
-      onClick: handleClick
-    }, jsx(Box, {
-      xcss: iconWrapperStyles,
-      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
-    }, jsx(PanelRightIcon, {
-      label: ""
-    })), showLabel && jsx(Text, {
-      size: "small",
-      color: "color.text.subtle",
-      maxLines: 1
-    }, label)))
-  );
-};
-export default PanelButtonOverlay;

package/dist/esm/ui/PanelButtonOverlay/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,9 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import type { OpenButtonOverlayProps } from './types';
-declare const OpenButtonOverlay: ({ children, isVisible, url, editorAppearance, editorAnalyticsApi, view, }: React.PropsWithChildren<OpenButtonOverlayProps>) => jsx.JSX.Element;
-export default OpenButtonOverlay;

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

@@ -1,9 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import type { PanelButtonOverlayProps } from '../PanelButtonOverlay/types';
-declare const PanelButtonOverlay: ({ children, isVisible, editorAppearance, onClick, }: React.PropsWithChildren<PanelButtonOverlayProps>) => jsx.JSX.Element;
-export default PanelButtonOverlay;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { EditorAppearance } from '@atlaskit/editor-common/types';
-export type PanelButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
-    isVisible?: boolean;
-    editorAppearance?: EditorAppearance;
-    onClick?: () => void;
-};

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

@@ -1,9 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import type { OpenButtonOverlayProps } from './types';
-declare const OpenButtonOverlay: ({ children, isVisible, url, editorAppearance, editorAnalyticsApi, view, }: React.PropsWithChildren<OpenButtonOverlayProps>) => jsx.JSX.Element;
-export default OpenButtonOverlay;

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

@@ -1,9 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import type { PanelButtonOverlayProps } from '../PanelButtonOverlay/types';
-declare const PanelButtonOverlay: ({ children, isVisible, editorAppearance, onClick, }: React.PropsWithChildren<PanelButtonOverlayProps>) => jsx.JSX.Element;
-export default PanelButtonOverlay;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { EditorAppearance } from '@atlaskit/editor-common/types';
-export type PanelButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
-    isVisible?: boolean;
-    editorAppearance?: EditorAppearance;
-    onClick?: () => void;
-};