@uipath/apollo-react 4.10.0 → 4.12.0

package/dist/canvas/components/Toolbar/NodeToolbar/useToolbarState.js

@@ -91,7 +91,7 @@ const useToolbarState = ({ config, expanded, nodeId, hidden })=>{
         displayState,
         actionsToDisplay,
         overflowActionsToDisplay: overflowActionsWithState,
-        separatorOrientation: 'top' === config.position || 'bottom' === config.position ? 'vertical' : 'horizontal',
+        separatorOrientation: config.position && 'top' !== config.position && 'bottom' !== config.position ? 'horizontal' : 'vertical',
         toggleDropdown
     };
 };

package/dist/canvas/components/Toolbar/shared/ToolbarButton.cjs

@@ -31,10 +31,10 @@ const index_cjs_namespaceObject = require("../../../utils/index.cjs");
 const external_react_namespaceObject = require("react");
 const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../../CanvasTooltip.cjs");
-const external_ToolbarButton_styles_cjs_namespaceObject = require("./ToolbarButton.styles.cjs");
+const external_ToolbarIconButton_cjs_namespaceObject = require("./ToolbarIconButton.cjs");
 const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
-    const hoverColor = action.color ? (0, index_cjs_namespaceObject.getLighterColor)(action.color) : void 0;
+    const hoverBg = action.color ? (0, index_cjs_namespaceObject.getLighterColor)(action.color) : void 0;
     const handleClick = (e)=>{
         e.stopPropagation();
         e.preventDefault();
@@ -43,7 +43,7 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         content: action.label,
         placement: "top",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_styles_cjs_namespaceObject.StyledToolbarButton, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarIconButton_cjs_namespaceObject.ToolbarIconButton, {
             layout: layoutId ? true : void 0,
             layoutId: layoutId,
             transition: {
@@ -57,10 +57,10 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
             "aria-label": action.label,
             "aria-disabled": !isEnabled,
             "aria-pressed": action.isToggled,
-            $disabled: !isEnabled,
-            $isToggled: action.isToggled,
-            $color: action.color,
-            $hoverColor: hoverColor,
+            disabled: !isEnabled,
+            isToggled: action.isToggled,
+            color: action.color,
+            hoverBg: hoverBg,
             children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                 icon: action.icon,
                 size: 16,

package/dist/canvas/components/Toolbar/shared/ToolbarButton.js

@@ -3,10 +3,10 @@ import { getLighterColor } from "../../../utils/index.js";
 import { memo } from "react";
 import { CanvasIcon } from "../../../utils/icon-registry.js";
 import { CanvasTooltip } from "../../CanvasTooltip.js";
-import { StyledToolbarButton } from "./ToolbarButton.styles.js";
+import { ToolbarIconButton } from "./ToolbarIconButton.js";
 const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
-    const hoverColor = action.color ? getLighterColor(action.color) : void 0;
+    const hoverBg = action.color ? getLighterColor(action.color) : void 0;
     const handleClick = (e)=>{
         e.stopPropagation();
         e.preventDefault();
@@ -15,7 +15,7 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
     return /*#__PURE__*/ jsx(CanvasTooltip, {
         content: action.label,
         placement: "top",
-        children: /*#__PURE__*/ jsx(StyledToolbarButton, {
+        children: /*#__PURE__*/ jsx(ToolbarIconButton, {
             layout: layoutId ? true : void 0,
             layoutId: layoutId,
             transition: {
@@ -29,10 +29,10 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
             "aria-label": action.label,
             "aria-disabled": !isEnabled,
             "aria-pressed": action.isToggled,
-            $disabled: !isEnabled,
-            $isToggled: action.isToggled,
-            $color: action.color,
-            $hoverColor: hoverColor,
+            disabled: !isEnabled,
+            isToggled: action.isToggled,
+            color: action.color,
+            hoverBg: hoverBg,
             children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: action.icon,
                 size: 16,

package/dist/canvas/components/Toolbar/shared/ToolbarIconButton.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ToolbarIconButton: ()=>ToolbarIconButton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const react_namespaceObject = require("motion/react");
+const external_react_namespaceObject = require("react");
+const TOOLBAR_ICON_BUTTON_CLASS = "grid place-items-center w-6 h-6 p-0 border-0 rounded-[4px] [transition:background-color_140ms_ease,color_140ms_ease,opacity_140ms_ease] [&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-[inherit] [&>svg]:origin-center [&>svg]:transition-transform [&>svg]:duration-[140ms] [&>svg]:ease-[ease] text-(--tb-color) bg-(--tb-bg) enabled:hover:bg-(--tb-hover-bg) enabled:hover:text-(--tb-hover-color) enabled:hover:[&>svg]:scale-[1.125]";
+const TOOLBAR_ICON_BUTTON_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
+const TOOLBAR_ICON_BUTTON_ENABLED_CLASS = 'cursor-pointer opacity-100';
+const ToolbarIconButtonInner = ({ disabled, isToggled, color, hoverBg, className, style, ...rest }, ref)=>{
+    const restColor = color ?? (isToggled ? 'var(--canvas-foreground)' : 'var(--canvas-foreground-de-emp)');
+    const effectiveHoverColor = color ?? 'var(--canvas-foreground)';
+    const restBg = isToggled ? hoverBg ?? 'var(--canvas-background-hover)' : 'transparent';
+    const effectiveHoverBg = hoverBg ?? 'var(--canvas-background-hover)';
+    const mergedStyle = {
+        ['--tb-color']: restColor,
+        ['--tb-hover-color']: effectiveHoverColor,
+        ['--tb-bg']: restBg,
+        ['--tb-hover-bg']: effectiveHoverBg,
+        ...style
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.button, {
+        ref: ref,
+        disabled: disabled,
+        className: (0, apollo_wind_namespaceObject.cn)(TOOLBAR_ICON_BUTTON_CLASS, disabled ? TOOLBAR_ICON_BUTTON_DISABLED_CLASS : TOOLBAR_ICON_BUTTON_ENABLED_CLASS, className),
+        style: mergedStyle,
+        ...rest
+    });
+};
+const ToolbarIconButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(ToolbarIconButtonInner);
+ToolbarIconButton.displayName = 'ToolbarIconButton';
+exports.ToolbarIconButton = __webpack_exports__.ToolbarIconButton;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ToolbarIconButton"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Toolbar/shared/ToolbarIconButton.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLMotionProps } from 'motion/react';
+export interface ToolbarIconButtonProps extends HTMLMotionProps<'button'> {
+    color?: string;
+    hoverBg?: string;
+    isToggled?: boolean;
+}
+export declare const ToolbarIconButton: import("react").ForwardRefExoticComponent<Omit<ToolbarIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToolbarIconButton.d.ts.map

package/dist/canvas/components/Toolbar/shared/ToolbarIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,cAAc,CAAC;AAsB5D,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAEvE,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAqCD,eAAO,MAAM,iBAAiB,mIAAqC,CAAC"}

package/dist/canvas/components/Toolbar/shared/ToolbarIconButton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { motion } from "motion/react";
+import { forwardRef } from "react";
+const TOOLBAR_ICON_BUTTON_CLASS = "grid place-items-center w-6 h-6 p-0 border-0 rounded-[4px] [transition:background-color_140ms_ease,color_140ms_ease,opacity_140ms_ease] [&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-[inherit] [&>svg]:origin-center [&>svg]:transition-transform [&>svg]:duration-[140ms] [&>svg]:ease-[ease] text-(--tb-color) bg-(--tb-bg) enabled:hover:bg-(--tb-hover-bg) enabled:hover:text-(--tb-hover-color) enabled:hover:[&>svg]:scale-[1.125]";
+const TOOLBAR_ICON_BUTTON_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
+const TOOLBAR_ICON_BUTTON_ENABLED_CLASS = 'cursor-pointer opacity-100';
+const ToolbarIconButtonInner = ({ disabled, isToggled, color, hoverBg, className, style, ...rest }, ref)=>{
+    const restColor = color ?? (isToggled ? 'var(--canvas-foreground)' : 'var(--canvas-foreground-de-emp)');
+    const effectiveHoverColor = color ?? 'var(--canvas-foreground)';
+    const restBg = isToggled ? hoverBg ?? 'var(--canvas-background-hover)' : 'transparent';
+    const effectiveHoverBg = hoverBg ?? 'var(--canvas-background-hover)';
+    const mergedStyle = {
+        ['--tb-color']: restColor,
+        ['--tb-hover-color']: effectiveHoverColor,
+        ['--tb-bg']: restBg,
+        ['--tb-hover-bg']: effectiveHoverBg,
+        ...style
+    };
+    return /*#__PURE__*/ jsx(motion.button, {
+        ref: ref,
+        disabled: disabled,
+        className: cn(TOOLBAR_ICON_BUTTON_CLASS, disabled ? TOOLBAR_ICON_BUTTON_DISABLED_CLASS : TOOLBAR_ICON_BUTTON_ENABLED_CLASS, className),
+        style: mergedStyle,
+        ...rest
+    });
+};
+const ToolbarIconButton = /*#__PURE__*/ forwardRef(ToolbarIconButtonInner);
+ToolbarIconButton.displayName = 'ToolbarIconButton';
+export { ToolbarIconButton };

package/dist/canvas/components/Toolbar/shared/index.cjs

@@ -3,8 +3,8 @@ var __webpack_modules__ = {
     "./ToolbarButton" (module) {
         module.exports = require("./ToolbarButton.cjs");
     },
-    "./ToolbarButton.styles" (module) {
-        module.exports = require("./ToolbarButton.styles.cjs");
+    "./ToolbarIconButton" (module) {
+        module.exports = require("./ToolbarIconButton.cjs");
     },
     "./toolbar.types" (module) {
         module.exports = require("./toolbar.types.cjs");
@@ -57,9 +57,9 @@ var __webpack_exports__ = {};
     var __rspack_reexport = {};
     for(const __rspack_import_key in _ToolbarButton__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ToolbarButton__rspack_import_0[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ToolbarButton_styles__rspack_import_1 = __webpack_require__("./ToolbarButton.styles");
+    var _ToolbarIconButton__rspack_import_1 = __webpack_require__("./ToolbarIconButton");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ToolbarButton_styles__rspack_import_1)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ToolbarButton_styles__rspack_import_1[__rspack_import_key];
+    for(const __rspack_import_key in _ToolbarIconButton__rspack_import_1)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ToolbarIconButton__rspack_import_1[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _toolbar_types__rspack_import_2 = __webpack_require__("./toolbar.types");
     var __rspack_reexport = {};

package/dist/canvas/components/Toolbar/shared/index.d.ts

@@ -1,4 +1,4 @@
 export * from './ToolbarButton';
-export * from './ToolbarButton.styles';
+export * from './ToolbarIconButton';
 export * from './toolbar.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/Toolbar/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}

package/dist/canvas/components/Toolbar/shared/index.js

@@ -1,3 +1,3 @@
 export * from "./ToolbarButton.js";
-export * from "./ToolbarButton.styles.js";
+export * from "./ToolbarIconButton.js";
 export * from "./toolbar.types.js";

package/dist/canvas/constants.cjs

@@ -72,7 +72,7 @@ const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
 const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
 const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
 const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
-const NODE_BORDER_SIZE = 2;
+const NODE_BORDER_SIZE = 1;
 const NODE_ERROR_ICON_SIZE = 40;
 const NODE_TEXT_BOTTOM_OFFSET = -8;
 const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;

package/dist/canvas/constants.d.ts

@@ -18,7 +18,7 @@ export declare const NODE_CONTAINER_RADIUS_RATIO: number;
 export declare const NODE_INNER_SHAPE_RATIO: number;
 export declare const NODE_INNER_ICON_RATIO: number;
 export declare const NODE_INNER_RADIUS_RATIO: number;
-export declare const NODE_BORDER_SIZE = 2;
+export declare const NODE_BORDER_SIZE = 1;
 export declare const NODE_ERROR_ICON_SIZE = 40;
 export declare const NODE_TEXT_BOTTOM_OFFSET = -8;
 export declare const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;

package/dist/canvas/constants.js

@@ -18,7 +18,7 @@ const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
 const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
 const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
 const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
-const NODE_BORDER_SIZE = 2;
+const NODE_BORDER_SIZE = 1;
 const NODE_ERROR_ICON_SIZE = 40;
 const NODE_TEXT_BOTTOM_OFFSET = -8;
 const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;

package/dist/canvas/storybook-utils/decorators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/canvas/storybook-utils/decorators.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,KAAK,0BAA0B,EAE/B,KAAK,2BAA2B,EAEjC,MAAM,UAAU,CAAC;AASlB,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AAK9D,MAAM,WAAW,sBAAsB;IAIrC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAKtC,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAM9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAqED,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,sBAA2B,GAAG,SAAS,CAmCnF;AAaD,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAQrE"}
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/canvas/storybook-utils/decorators.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,KAAK,0BAA0B,EAE/B,KAAK,2BAA2B,EAEjC,MAAM,UAAU,CAAC;AAelB,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AAK9D,MAAM,WAAW,sBAAsB;IAIrC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAKtC,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAM9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAqED,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,sBAA2B,GAAG,SAAS,CAuCnF;AAaD,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAQrE"}