@uipath/apollo-react 4.6.3 → 4.8.0

package/dist/canvas/components/ButtonHandle/ButtonHandle.styles.js

@@ -1,161 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Handle, Position } from "../../xyflow/react.js";
-import { motion } from "motion/react";
-import { useButtonHandleSizeAndPosition } from "./useButtonHandleSizeAndPosition.js";
-const StyledAddButton = styled(motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: var(--canvas-background);
-  color: var(--canvas-foreground-emp);
-  border-radius: 50%;
-  border: 1px solid var(--canvas-border-de-emp);
-  cursor: pointer;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease,
-    border-color 0.2s ease;
-
-  &:hover {
-    background-color: var(--canvas-selection-indicator);
-    color: var(--canvas-background);
-    border-color: var(--canvas-selection-indicator);
-  }
-`;
-const StyledWrapper = styled.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-
-  ${(p)=>p.$position === Position.Top && css`
-      flex-direction: column-reverse;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-    `}
-  ${(p)=>p.$position === Position.Bottom && css`
-      flex-direction: column;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-    `}
-  ${(p)=>p.$position === Position.Left && css`
-      flex-direction: row-reverse;
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-    `}
-  ${(p)=>p.$position === Position.Right && css`
-      flex-direction: row;
-      left: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-    `}
-`;
-const StyledLine = styled.div`
-  background-color: transparent;
-  border-style: solid;
-  border-width: 1px;
-  border-color: ${(p)=>p.$selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
-  height: ${(p)=>p.$isVertical ? p.$size : '1px'};
-  width: ${(p)=>p.$isVertical ? '1px' : p.$size};
-  transition: border-color 0.2s ease-in-out;
-`;
-const StyledLabel = styled.div`
-  position: absolute;
-  background-color: ${(p)=>p.$backgroundColor};
-  padding: 2px 6px;
-  border-radius: 4px;
-  z-index: 1;
-  white-space: nowrap;
-  user-select: none;
-  ${(p)=>p.$shouldTruncate && css`
-      max-width: 50px;
-      overflow: hidden;
-    `}
-
-  ${(p)=>p.$position === Position.Top && css`
-      bottom: calc(100% + 4px);
-      left: 50%;
-      transform: translateX(-50%);
-    `}
-  ${(p)=>p.$position === Position.Bottom && css`
-      top: calc(100% + 4px);
-      left: 50%;
-      transform: translateX(-50%);
-    `}
-  ${(p)=>p.$position === Position.Left && css`
-      right: calc(100% + 4px);
-      top: 50%;
-      transform: translateY(-50%);
-    `}
-  ${(p)=>p.$position === Position.Right && css`
-      left: calc(100% + 4px);
-      top: 50%;
-      transform: translateY(-50%);
-    `}
-`;
-const StyledNotch = styled.div`
-  width: ${(p)=>{
-    if ('input' === p.$handleType && !p.$isVertical) return '8px';
-    if ('artifact' === p.$handleType) return '10px';
-    return '12px';
-}};
-  height: ${(p)=>{
-    if ('input' === p.$handleType && p.$isVertical) return '8px';
-    if ('artifact' === p.$handleType) return '10px';
-    return '12px';
-}};
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${(p)=>{
-    if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
-    return 'var(--canvas-border)';
-}};
-  border-radius: ${(p)=>'artifact' === p.$handleType || 'input' === p.$handleType ? 0 : '50%'};
-  transform: ${(p)=>'artifact' === p.$handleType ? 'rotate(45deg)' : 'none'};
-  background-color: ${(p)=>{
-    if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
-    return 'var(--canvas-background, white)';
-}};
-  opacity: ${(p)=>p.$showNotch ? 1 : 0};
-  pointer-events: none;
-  transition: all 0.2s ease-in-out;
-`;
-const StyledHandle = (props)=>{
-    const { $total, $visible, $positionPercent, $customPositionAndOffsets, ...handleProps } = props;
-    const { position } = handleProps;
-    const { width, height, top, bottom, left, right, transform } = useButtonHandleSizeAndPosition({
-        position,
-        positionPercent: $positionPercent,
-        numHandles: $total,
-        customPositionAndOffsets: $customPositionAndOffsets
-    });
-    return /*#__PURE__*/ jsx(Handle, {
-        ...handleProps,
-        style: {
-            width,
-            height,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderWidth: 0,
-            borderRadius: 0,
-            backgroundColor: 'transparent',
-            opacity: $visible ? 1 : 0,
-            cursor: 'crosshair',
-            top,
-            bottom,
-            left,
-            right,
-            transform
-        }
-    });
-};
-export { StyledAddButton, StyledHandle, StyledLabel, StyledLine, StyledNotch, StyledWrapper };