@atlaskit/editor-plugin-card 7.1.0 → 7.2.0

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;
-};