@capillarytech/blaze-ui 6.4.0 → 6.6.0

package/CapDndGraphSidebar/styles.scss

@@ -1,57 +1,74 @@
 @import '../styles/_variables.scss';
 
-.dnd-graph-sidebar-container{
-    background: $CAP_G10;
-    width: 240px;
-    height: 100%;
-    display: inline-block;
-    padding: 15px $CAP_SPACE_24;
-    overflow: auto;
-
-    .title-row {
-        display: flex;
-
-        .info-icon {
-            display: flex;
-            align-items: center;
-            margin-left: $CAP_SPACE_04;
+.dnd-graph-sidebar-container {
+  background: $CAP_G10;
+  width: 17.143rem;
+  height: 100%;
+  display: inline-block;
+  padding: 1.071rem $CAP_SPACE_24;
+  overflow: auto;
+
+  .align-items-center {
+    display: flex;
+    align-items: center;
+  }
+
+  .margin-l-4 {
+    margin-left: $CAP_SPACE_04;
+  }
+
+  .margin-t-4 {
+    margin-top: $CAP_SPACE_04;
+  }
+
+  .info-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .title-row {
+    display: flex;
+  }
+
+  .category-container {
+    margin: $CAP_SPACE_16 0;
+
+    .icons-container {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+
+      .node-container {
+        width: calc(100% / 3);
+        text-align: center;
+        margin: $CAP_SPACE_04 0;
+        position: relative;
+
+        .cap-icon-background {
+          padding: 0.643rem;
+        }
+
+        .node-label {
+          white-space: nowrap;
+          align-items: center;
+          display: inline-block;
+          white-space: normal;
+        }
+
+        .premium-icon {
+          position: absolute;
+          top: -0.313rem;
+          right: 0.25rem;
+          z-index: 99;
+          padding: 0.125rem;
+          background-color: $CAP_WHITE;
+          border-radius: 50%;
         }
-    }
 
-    .category-container {
-        margin: $CAP_SPACE_16 0;
-
-        .icons-container {
-            display: flex;
-            flex-wrap: wrap;
-
-            .node-container {
-                width: calc(100% / 3);
-                text-align: center;
-                margin: $CAP_SPACE_04 0;
-                position: relative;
-
-                .cap-icon-background {
-                    padding: 9px;
-                }
-
-                .node-label {
-                    white-space: nowrap;
-                    align-items: center;
-                    display: inline-block;
-                    white-space: normal;
-                }
-
-                .premium-icon {
-                    position: absolute;
-                    top: -0.313rem;
-                    right: 0.25rem;
-                    z-index: 99;
-                    padding: 0.125rem;
-                    background-color: $CAP_WHITE;
-                    border-radius: 50%;
-                }
-            }
+        :global(.cap-tooltip-wrapper) {
+          display: block;
         }
+      }
     }
-}
+  }
+}

package/CapDndGraphSidebar/types.d.ts

@@ -0,0 +1,106 @@
+import type React from 'react';
+import type { DragSourceMonitor } from 'react-dnd';
+/**
+ * Child node structure for sidebar icons
+ */
+export interface ChildNode {
+    id: string;
+    type: string;
+    label: string;
+    isMultiPath?: boolean;
+    isDisabled?: boolean;
+    tooltipText?: string | ((id: string, isDisabled: boolean, handleModel: () => void) => React.ReactNode);
+    premiumTooltipText?: string;
+    showPremiumIcon?: boolean;
+    premiumModelContent?: () => React.ReactNode;
+}
+/**
+ * Node structure with categories and children
+ */
+export interface Node {
+    key: string;
+    title: string;
+    tooltipText?: string;
+    children: ChildNode[];
+    color: string;
+}
+/**
+ * Props for CapDndGraphSidebar component
+ */
+export interface CapDndGraphSidebarProps {
+    /** Array of node categories with their children */
+    nodes?: Node[];
+    /** Title displayed at the top of the sidebar */
+    sidebarTitle?: string;
+    /** Description text displayed below the title */
+    sidebarDescription?: string;
+    /** Info tooltip text for the sidebar title */
+    sidebarTitleInfo?: string;
+    /** Whether nodes can be dragged */
+    isNodeDraggable?: boolean;
+    /** Handler for drag end events */
+    endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
+    /** Whether the sidebar is in view-only mode */
+    viewMode?: boolean;
+    /** Callback when a node is dropped outside the canvas */
+    onDropOutsideCanvas?: (item: {
+        id: string;
+        type: string;
+        iconType: string;
+        color: string;
+        isMultiPath?: boolean;
+    }) => void;
+}
+/**
+ * Props for SideBarIcon component
+ */
+export interface SideBarIconProps {
+    /** Child node data */
+    childNode: ChildNode;
+    /** Color for the icon background */
+    color: string;
+    /** Whether the node can be dragged */
+    isNodeDraggable?: boolean;
+    /** Whether the sidebar is in view-only mode */
+    viewMode?: boolean;
+    /** Callback when a node is dropped outside the canvas */
+    onDropOutsideCanvas?: (item: {
+        id: string;
+        type: string;
+        iconType: string;
+        color: string;
+        isMultiPath?: boolean;
+    }) => void;
+    /** Whether the premium modal is shown */
+    showModel?: boolean;
+    /** Handler to toggle the premium modal */
+    setShowModel?: (show: boolean) => void;
+    /** Handler for drag end events (passed through but not used directly) */
+    endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
+}
+/**
+ * Props for SidebarNodesRendered component
+ */
+export interface SidebarNodesRenderedProps {
+    /** Array of node categories with their children */
+    nodes?: Node[];
+    /** Whether nodes can be dragged */
+    isNodeDraggable?: boolean;
+    /** Handler for drag end events */
+    endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
+    /** Whether the sidebar is in view-only mode */
+    viewMode?: boolean;
+    /** Callback when a node is dropped outside the canvas */
+    onDropOutsideCanvas?: (item: {
+        id: string;
+        type: string;
+        iconType: string;
+        color: string;
+        isMultiPath?: boolean;
+    }) => void;
+    /** Whether the premium modal is shown */
+    showModel?: boolean;
+    /** Handler to toggle the premium modal */
+    setShowModel?: (show: boolean) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapDndGraphSidebar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapDndGraphSidebar/types.ts"],"names":[],"mappings":"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"}

package/CapDndGraphSidebar/types.js

@@ -0,0 +1 @@
+

package/CapIcon/index.js

@@ -55,8 +55,8 @@ const CapIcon = React.forwardRef(
         {
           ref,
           className: classNames(
-            styles["cap-icon-wrapper"],
-            styles["cap-icon"],
+            styles["cap-icon-v2"],
+            type ? `cap-icon-v2-${type}` : null,
             styles[size],
             { [styles["with-text-label"]]: textLabel, [styles.disabled]: disabled },
             className
@@ -84,8 +84,8 @@ const CapIcon = React.forwardRef(
           {
             ref: withBackground ? void 0 : ref,
             className: classNames(
-              styles["cap-icon-wrapper"],
-              styles["cap-icon"],
+              styles["cap-icon-v2"],
+              type ? `cap-icon-v2-${type}` : null,
               styles[size],
               {
                 [styles.spin]: spin,
@@ -106,7 +106,7 @@ const CapIcon = React.forwardRef(
         "div",
         {
           ref,
-          className: classNames(styles["cap-icon-background-wrapper"], styles[size]),
+          className: classNames(styles["cap-icon-background"], styles[size]),
           ...backgroundProps,
           children: iconComponent
         }
@@ -120,8 +120,8 @@ const CapIcon = React.forwardRef(
         {
           ref: withBackground ? void 0 : ref,
           className: classNames(
-            styles["cap-icon-wrapper"],
-            styles["cap-icon"],
+            styles["cap-icon-v2"],
+            type ? `cap-icon-v2-${type}` : null,
             styles[size],
             { [styles.disabled]: disabled, [styles["with-text-label"]]: textLabel },
             className
@@ -139,7 +139,7 @@ const CapIcon = React.forwardRef(
         "span",
         {
           ref,
-          className: classNames(styles["cap-icon-background-wrapper"], styles[size]),
+          className: classNames(styles["cap-icon-background"], styles[size]),
           ...backgroundProps,
           children: iconComponent
         }
@@ -150,8 +150,8 @@ const CapIcon = React.forwardRef(
       {
         ref,
         className: classNames(
-          styles["cap-icon-wrapper"],
-          styles["cap-icon"],
+          styles["cap-icon-v2"],
+          type ? `cap-icon-v2-${type}` : null,
           styles[size],
           { [styles.disabled]: disabled, [styles["with-text-label"]]: textLabel },
           className
@@ -168,7 +168,7 @@ CapIcon.displayName = "CapIcon";
 const AntIcon = ({ className, ...rest }) => /* @__PURE__ */ jsx(
   "i",
   {
-    className: classNames(styles["cap-icon-ant-icon"], className),
+    className: classNames(styles["cap-icon-v2"], className),
     style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
     ...rest
   }
@@ -181,7 +181,7 @@ const CapIconAvatar = ({
   backgroundProps = {},
   labelProps = {}
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-icon-avatar"], className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-icon-v2-avatar"], className), children: [
     /* @__PURE__ */ jsx(LogoBackground, { width, height, ...backgroundProps }),
     text && /* @__PURE__ */ jsx("span", { className: styles["text-label"], ...labelProps, children: text })
   ] });

package/CapIcon/styles.css

@@ -6,50 +6,46 @@
 /* Border Width */
 /* Transition */
 /* Timezones Footer */
-.cap-icon-wrapper {
+.cap-icon-v2 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.cap-icon-wrapper.disabled {
+.cap-icon-v2.disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.cap-icon-wrapper.xs {
+.cap-icon-v2.xs {
   font-size: 0.857rem;
 }
-.cap-icon-wrapper.s {
+.cap-icon-v2.s {
   font-size: 1.143rem;
 }
-.cap-icon-wrapper.m {
+.cap-icon-v2.m {
   font-size: 1.714rem;
 }
-.cap-icon-wrapper.l {
+.cap-icon-v2.l {
   font-size: 2.286rem;
 }
-.cap-icon-wrapper.with-text-label {
+.cap-icon-v2.with-text-label {
   display: inline-flex;
   align-items: center;
   gap: 0.571rem;
 }
-.cap-icon-background-wrapper {
-  display: inline-flex;
+.cap-icon-v2 .anticon {
+  display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
-  background-color: #dfe2e7;
 }
-.cap-icon {
-  display: inline-flex;
-  align-items: center;
+.cap-icon-v2.spin {
+  animation: rotate 2s linear infinite;
 }
-.cap-icon .anticon {
-  display: flex;
+.cap-icon-background {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-}
-.cap-icon.spin {
-  animation: rotate 2s linear infinite;
+  border-radius: 50%;
+  background-color: #dfe2e7;
 }
 @keyframes rotate {
   from {
@@ -59,13 +55,13 @@
     transform: rotate(360deg);
   }
 }
-.cap-icon-avatar {
+.cap-icon-v2-avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
-.cap-icon-avatar .text-label {
+.cap-icon-v2-avatar .text-label {
   position: absolute;
   display: flex;
   align-items: center;

package/CapIcon/styles.module.scss.js

@@ -7,19 +7,18 @@ const anticon = "anticon";
 const spin = "spin";
 const rotate = "rotate";
 const styles = {
-  "cap-icon-wrapper": "cap-icon-wrapper",
+  "cap-icon-v2": "cap-icon-v2",
   disabled,
   xs,
   s,
   m,
   l,
   "with-text-label": "with-text-label",
-  "cap-icon-background-wrapper": "cap-icon-background-wrapper",
-  "cap-icon": "cap-icon",
   anticon,
   spin,
   rotate,
-  "cap-icon-avatar": "cap-icon-avatar",
+  "cap-icon-background": "cap-icon-background",
+  "cap-icon-v2-avatar": "cap-icon-v2-avatar",
   "text-label": "text-label"
 };
 export {

package/CapIcon/styles.scss

@@ -1,6 +1,6 @@
 @import '../styles/_variables';
 
-.cap-icon-wrapper {
+.cap-icon-v2 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -31,19 +31,6 @@
     align-items: center;
     gap: 0.571rem;
   }
-}
-
-.cap-icon-background-wrapper {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: $cap-g07;
-}
-
-.cap-icon {
-  display: inline-flex;
-  align-items: center;
 
   .anticon {
     display: flex;
@@ -56,6 +43,14 @@
   }
 }
 
+.cap-icon-background {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: $cap-g07;
+}
+
 @keyframes rotate {
   from {
     transform: rotate(0deg);
@@ -65,7 +60,7 @@
   }
 }
 
-.cap-icon-avatar {
+.cap-icon-v2-avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/CapMediaPreview/ImageRenderer.d.ts

@@ -1,17 +1,4 @@
-import PropTypes from 'prop-types';
-declare const ImageRenderer: {
-    ({ src, imageProps }: {
-        src: any;
-        imageProps: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        src: PropTypes.Requireable<string>;
-        imageProps: PropTypes.Requireable<object>;
-    };
-    defaultProps: {
-        src: string;
-        imageProps: {};
-    };
-};
+import type { ImageRendererProps } from './types';
+declare const ImageRenderer: ({ src, imageProps }: ImageRendererProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageRenderer;
 //# sourceMappingURL=ImageRenderer.d.ts.map

package/CapMediaPreview/ImageRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/ImageRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAOnC,QAAA,MAAM,aAAa;;;;;;;;;;;;;CAElB,CAAC;AAYF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/ImageRenderer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,QAAA,MAAM,aAAa,GAAI,qBAA+B,kBAAkB,4CAIvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/CapMediaPreview/ImageRenderer.js

@@ -1,18 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import CapImage from "../CapImage/index.js";
 import { CLASS_PREFIX } from "./constants.js";
-const ImageRenderer = ({ src, imageProps }) => {
-  return /* @__PURE__ */ jsx(CapImage, { className: classNames(`${CLASS_PREFIX}-image`), src, ...imageProps });
-};
-ImageRenderer.propTypes = {
-  src: PropTypes.string,
-  imageProps: PropTypes.object
-};
-ImageRenderer.defaultProps = {
-  src: "",
-  imageProps: {}
+import styles from "./styles.module.scss.js";
+const ImageRenderer = ({ src = "", imageProps = {} }) => {
+  return /* @__PURE__ */ jsx(CapImage, { className: classNames(styles[`${CLASS_PREFIX}-image`]), src, ...imageProps });
 };
 export {
   ImageRenderer as default

package/CapMediaPreview/MediaRenderer.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-declare const _default: React.ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
+import type { MediaRendererProps } from './types';
+declare const _default: React.ComponentType<Omit<MediaRendererProps, "intl">>;
 export default _default;
 //# sourceMappingURL=MediaRenderer.d.ts.map

package/CapMediaPreview/MediaRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaRenderer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/MediaRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;;AAmEnD,wBAAyC"}
+{"version":3,"file":"MediaRenderer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/MediaRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;;AAsDlD,wBAAyC"}

package/CapMediaPreview/MediaRenderer.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
 import { injectIntl } from "react-intl";
 import CapIcon from "../CapIcon/index.js";
@@ -8,8 +7,9 @@ import CapRow from "../CapRow/index.js";
 import { CLASS_PREFIX, MEDIA_TYPES } from "./constants.js";
 import ImageRenderer from "./ImageRenderer.js";
 import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
 import VideoPlayer from "./VideoPlayer.js";
-const MediaRenderer = ({ intl: { formatMessage }, currentMedia }) => {
+const MediaRenderer = ({ intl: { formatMessage }, currentMedia = {} }) => {
   var _a;
   const { type, file, imageProps, videoProps } = currentMedia;
   const [mediaUrl, setMediaUrl] = useState(null);
@@ -24,10 +24,10 @@ const MediaRenderer = ({ intl: { formatMessage }, currentMedia }) => {
         setMediaUrl(null);
       }
     } else {
-      setMediaUrl(file);
+      setMediaUrl(typeof file === "string" ? file : null);
     }
     return () => {
-      if (url) {
+      if (url && typeof URL !== "undefined" && URL.revokeObjectURL) {
         URL.revokeObjectURL(url);
       }
     };
@@ -39,19 +39,21 @@ const MediaRenderer = ({ intl: { formatMessage }, currentMedia }) => {
     case MEDIA_TYPES.VIDEO:
       return /* @__PURE__ */ jsx(VideoPlayer, { src: mediaUrl, videoProps });
     default:
-      return /* @__PURE__ */ jsxs(CapRow, { className: `${CLASS_PREFIX}-unsupported`, type: "flex", align: "middle", justify: "middle", children: [
-        /* @__PURE__ */ jsx(CapIcon, { type: "file", className: `${CLASS_PREFIX}-unsupported-icon` }),
-        /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", className: `${CLASS_PREFIX}-unsupported-label`, children: formatMessage(messages.thisFileTypeIsNotSupportedForPreview) })
-      ] });
+      return /* @__PURE__ */ jsxs(
+        CapRow,
+        {
+          className: styles[`${CLASS_PREFIX}-unsupported`],
+          type: "flex",
+          align: "middle",
+          justify: "middle",
+          children: [
+            /* @__PURE__ */ jsx(CapIcon, { type: "file", className: styles[`${CLASS_PREFIX}-unsupported-icon`] }),
+            /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", className: styles[`${CLASS_PREFIX}-unsupported-label`], children: formatMessage(messages.thisFileTypeIsNotSupportedForPreview) })
+          ]
+        }
+      );
   }
 };
-MediaRenderer.propTypes = {
-  intl: PropTypes.object.isRequired,
-  currentMedia: PropTypes.object
-};
-MediaRenderer.defaultProps = {
-  currentMedia: {}
-};
 const MediaRenderer$1 = injectIntl(MediaRenderer);
 export {
   MediaRenderer$1 as default

package/CapMediaPreview/VideoPlayer.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-declare const _default: React.ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
+import type { VideoPlayerProps } from './types';
+declare const _default: React.ComponentType<Omit<VideoPlayerProps, "intl">>;
 export default _default;
 //# sourceMappingURL=VideoPlayer.d.ts.map

package/CapMediaPreview/VideoPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/VideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;;AAsCjD,wBAAuC"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/VideoPlayer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AA4BhD,wBAAuC"}

package/CapMediaPreview/VideoPlayer.js

@@ -1,31 +1,32 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import { useRef, useEffect } from "react";
 import { injectIntl } from "react-intl";
 import CapLabelWithStatic from "../CapLabel/index.js";
 import { CLASS_PREFIX } from "./constants.js";
 import messages from "./messages.js";
-const VideoPlayer = ({ intl: { formatMessage }, src, videoProps }) => {
+import styles from "./styles.module.scss.js";
+const VideoPlayer = ({ intl: { formatMessage }, src = "", videoProps = {} }) => {
   const videoRef = useRef(null);
   useEffect(() => {
     if (videoRef.current) {
       videoRef.current.load();
     }
   }, [src]);
-  return /* @__PURE__ */ jsxs("video", { ref: videoRef, className: classNames(`${CLASS_PREFIX}-video`), controls: true, ...videoProps, children: [
-    /* @__PURE__ */ jsx("source", { src }),
-    /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", children: formatMessage(messages.yourBrowserDoesNotSupportVideoTag) })
-  ] });
-};
-VideoPlayer.propTypes = {
-  intl: PropTypes.object.isRequired,
-  src: PropTypes.string,
-  videoProps: PropTypes.object
-};
-VideoPlayer.defaultProps = {
-  src: "",
-  videoProps: {}
+  const { className: videoClassName, ...restVideoProps } = videoProps;
+  return /* @__PURE__ */ jsxs(
+    "video",
+    {
+      ref: videoRef,
+      className: classNames(styles[`${CLASS_PREFIX}-video`], videoClassName),
+      controls: true,
+      ...restVideoProps,
+      children: [
+        /* @__PURE__ */ jsx("source", { src: src || void 0 }),
+        /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", children: formatMessage(messages.yourBrowserDoesNotSupportVideoTag) })
+      ]
+    }
+  );
 };
 const VideoPlayer$1 = injectIntl(VideoPlayer);
 export {