@hitachivantara/uikit-react-lab 5.46.13 → 6.0.0-next.1

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const SidebarGroup_styles = require("./SidebarGroup.styles.cjs");
-const useFlowContext = require("../../hooks/useFlowContext.cjs");
-const DraggableSidebarGroupItem = require("./SidebarGroupItem/DraggableSidebarGroupItem.cjs");
-const HvFlowSidebarGroup = ({
-  id,
-  label,
-  items = [],
-  color,
-  description,
-  icon,
-  expandButtonProps,
-  classes: classesProp,
-  itemProps
-}) => {
-  const { classes, cx, css } = SidebarGroup_styles.useClasses(classesProp);
-  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
-  const opened = react.useMemo(
-    () => !!expandedNodeGroups?.find((group) => group === id),
-    [expandedNodeGroups, id]
-  );
-  const handleClick = react.useCallback(() => {
-    setExpandedNodeGroups?.(
-      (prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]
-    );
-  }, [id, opened, setExpandedNodeGroups]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx(css({ borderColor: uikitStyles.getColor(color) }), classes.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, role: "presentation", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title4", children: Object.keys(items).length > 1 ? `${label} (${Object.keys(items).length})` : label })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvButton,
-        {
-          icon: true,
-          onClick: handleClick,
-          "aria-expanded": opened,
-          ...expandButtonProps,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: opened })
-        }
-      )
-    ] }),
-    description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }) }),
-    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: Object.entries(items).map(([itemId, item]) => /* @__PURE__ */ jsxRuntime.jsx(
-      DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem,
-      {
-        ...itemProps,
-        ...item
-      },
-      itemId
-    )) })
-  ] });
-};
-exports.flowSidebarGroupClasses = SidebarGroup_styles.staticClasses;
-exports.HvFlowSidebarGroup = HvFlowSidebarGroup;

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.cjs

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses(
-  "HvFlowSidebarGroup",
-  {
-    root: {
-      padding: uikitReactCore.theme.space.sm,
-      borderRadius: uikitReactCore.theme.radii.round,
-      borderWidth: "1px",
-      borderTopWidth: "3px"
-    },
-    titleContainer: {
-      display: "flex",
-      justifyContent: "space-between"
-    },
-    labelContainer: {
-      display: "flex",
-      alignItems: "center"
-    },
-    icon: { paddingRight: uikitReactCore.theme.space.xs },
-    descriptionContainer: {
-      padding: `${uikitReactCore.theme.space.xs} 0 ${uikitReactCore.theme.space.sm} calc(32px + ${uikitReactCore.theme.space.xs})`
-    },
-    itemsContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: uikitReactCore.theme.space.xs,
-      paddingLeft: uikitReactCore.theme.space.sm
-    }
-  }
-);
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const core = require("@dnd-kit/core");
-const utils = require("@mui/material/utils");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const SidebarGroupItem = require("./SidebarGroupItem.cjs");
-const HvFlowDraggableSidebarGroupItem = ({
-  id: idProp,
-  label,
-  nodeType,
-  data,
-  ...others
-}) => {
-  const itemRef = react.useRef(null);
-  const id = uikitReactCore.useUniqueId(idProp);
-  const { attributes, listeners, setNodeRef, isDragging, transform } = core.useDraggable({
-    id,
-    data: {
-      hvFlow: {
-        // Needed to know which item is being dragged and dropped
-        type: nodeType,
-        // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow
-        label,
-        // Item position: used to position the item when dropped
-        x: itemRef.current?.getBoundingClientRect().x,
-        y: itemRef.current?.getBoundingClientRect().y,
-        // Data
-        data
-      }
-    }
-  });
-  const forkedRef = utils.useForkRef(itemRef, setNodeRef);
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
-  } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SidebarGroupItem.HvFlowSidebarGroupItem,
-    {
-      ref: forkedRef,
-      style,
-      label,
-      isDragging,
-      ...listeners,
-      ...attributes,
-      ...others
-    }
-  );
-};
-exports.HvFlowDraggableSidebarGroupItem = HvFlowDraggableSidebarGroupItem;

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const SidebarGroupItem_styles = require("./SidebarGroupItem.styles.cjs");
-const HvFlowSidebarGroupItem = react.forwardRef(function HvFlowSidebarGroupItem2(props, ref) {
-  const {
-    label,
-    isDragging,
-    classes: classesProp,
-    className,
-    ...others
-  } = props;
-  const { classes, cx } = SidebarGroupItem_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      className: cx(
-        classes.root,
-        { [classes.dragging]: isDragging },
-        className
-      ),
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, {})
-      ]
-    }
-  );
-});
-exports.flowSidebarGroupItemClasses = SidebarGroupItem_styles.staticClasses;
-exports.HvFlowSidebarGroupItem = HvFlowSidebarGroupItem;

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses(
-  "HvFlowSidebarGroupItem",
-  {
-    root: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      border: `1px solid ${uikitReactCore.theme.colors.border}`,
-      padding: uikitReactCore.theme.spacing(0, 0, 0, "sm"),
-      cursor: "pointer",
-      boxShadow: `0 1px 0 ${uikitReactCore.theme.colors.shad1}`,
-      "&:focus-visible": {
-        ...uikitReactCore.outlineStyles
-      }
-    },
-    dragging: { borderColor: uikitReactCore.theme.colors.primaryStrong }
-  }
-);
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Flow/base.cjs

@@ -1,411 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const flowStyles = react.css`
-  /* this gets exported as style.css and can be used for the default theming */
-  /* these are the necessary styles for React Flow, they get used by base.css and style.css */
-  .react-flow__container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-  .react-flow__pane {
-    z-index: 1;
-    cursor: -webkit-grab;
-    cursor: grab;
-  }
-  .react-flow__pane.selection {
-    cursor: pointer;
-  }
-  .react-flow__pane.dragging {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-  }
-  .react-flow__viewport {
-    transform-origin: 0 0;
-    z-index: 2;
-    pointer-events: none;
-  }
-  .react-flow__renderer {
-    z-index: 4;
-  }
-  .react-flow__selection {
-    z-index: 6;
-  }
-  .react-flow__nodesselection-rect:focus,
-  .react-flow__nodesselection-rect:focus-visible {
-    outline: none;
-  }
-  .react-flow .react-flow__edges {
-    pointer-events: none;
-    overflow: visible;
-  }
-  .react-flow__edge-path,
-  .react-flow__connection-path {
-    stroke: ${uikitReactCore.theme.colors.text};
-    stroke-width: 1;
-    fill: none;
-  }
-  .react-flow__edge {
-    pointer-events: visibleStroke;
-    cursor: pointer;
-  }
-  .react-flow__edge.animated path {
-    stroke-dasharray: 5;
-    -webkit-animation: dashdraw 0.5s linear infinite;
-    animation: dashdraw 0.5s linear infinite;
-  }
-  .react-flow__edge.animated path.react-flow__edge-interaction {
-    stroke-dasharray: none;
-    -webkit-animation: none;
-    animation: none;
-  }
-  .react-flow__edge.inactive {
-    pointer-events: none;
-  }
-  .react-flow__edge.selected,
-  .react-flow__edge:focus,
-  .react-flow__edge:focus-visible {
-    outline: none;
-  }
-  .react-flow__edge.selected .react-flow__edge-path,
-  .react-flow__edge:focus .react-flow__edge-path,
-  .react-flow__edge:focus-visible .react-flow__edge-path {
-    stroke: #555;
-  }
-  .react-flow__edge-textwrapper {
-    pointer-events: all;
-  }
-  .react-flow__edge-textbg {
-    fill: white;
-  }
-  .react-flow__edge .react-flow__edge-text {
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-  .react-flow__connection {
-    pointer-events: none;
-  }
-  .react-flow__connection .animated {
-    stroke-dasharray: 5;
-    -webkit-animation: dashdraw 0.5s linear infinite;
-    animation: dashdraw 0.5s linear infinite;
-  }
-  .react-flow__connectionline {
-    z-index: 1001;
-  }
-  .react-flow__nodes {
-    pointer-events: none;
-    transform-origin: 0 0;
-  }
-  .react-flow__node {
-    position: absolute;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    pointer-events: all;
-    transform-origin: 0 0;
-    box-sizing: border-box;
-    cursor: -webkit-grab;
-    cursor: grab;
-  }
-  .react-flow__node.dragging {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-  }
-  .react-flow__nodesselection {
-    z-index: 3;
-    transform-origin: left top;
-    pointer-events: none;
-  }
-  .react-flow__nodesselection-rect {
-    position: absolute;
-    pointer-events: all;
-    cursor: -webkit-grab;
-    cursor: grab;
-  }
-  .react-flow__handle {
-    position: absolute;
-    pointer-events: none;
-    min-width: 5px;
-    min-height: 5px;
-    width: 6px;
-    height: 6px;
-    background: #1a192b;
-    border: 1px solid white;
-    border-radius: 100%;
-  }
-  .react-flow__handle.connectionindicator {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-  .react-flow__handle-bottom {
-    top: auto;
-    left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
-  }
-  .react-flow__handle-top {
-    left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
-  }
-  .react-flow__handle-left {
-    top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
-  }
-  .react-flow__handle-right {
-    right: -4px;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-  .react-flow__edgeupdater {
-    cursor: move;
-    pointer-events: all;
-  }
-  .react-flow__panel {
-    position: absolute;
-    z-index: 5;
-    margin: 15px;
-  }
-  .react-flow__panel.top {
-    top: 0;
-  }
-  .react-flow__panel.bottom {
-    bottom: 0;
-  }
-  .react-flow__panel.left {
-    left: 0;
-  }
-  .react-flow__panel.right {
-    right: 0;
-  }
-  .react-flow__panel.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  .react-flow__attribution {
-    font-size: 10px;
-    background: rgba(255, 255, 255, 0.5);
-    padding: 2px 3px;
-    margin: 0;
-  }
-  .react-flow__attribution a {
-    text-decoration: none;
-    color: #999;
-  }
-  @-webkit-keyframes dashdraw {
-    from {
-      stroke-dashoffset: 10;
-    }
-  }
-  @keyframes dashdraw {
-    from {
-      stroke-dashoffset: 10;
-    }
-  }
-  .react-flow__edgelabel-renderer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-  .react-flow__edge.updating .react-flow__edge-path {
-    stroke: #777;
-  }
-  .react-flow__edge-text {
-    font-size: 10px;
-  }
-  .react-flow__node.selectable:focus,
-  .react-flow__node.selectable:focus-visible {
-    outline: none;
-  }
-  .react-flow__node-default,
-  .react-flow__node-input,
-  .react-flow__node-output {
-    padding: ${uikitReactCore.theme.space.sm};
-    border-radius: ${uikitReactCore.theme.radii.round};
-    width: 150px;
-    color: ${uikitReactCore.theme.colors.text};
-    text-align: center;
-    border: 1px solid ${uikitReactCore.theme.colors.negative};
-    background-color: ${uikitReactCore.theme.colors.negativeDimmed};
-  }
-  .react-flow__node-group {
-    color: ${uikitReactCore.theme.colors.text};
-    text-align: center;
-  }
-  .react-flow__node-default::before {
-    content: "Unknown node type";
-    display: block;
-  }
-  .react-flow__node-default.selectable:hover,
-  .react-flow__node-input.selectable:hover,
-  .react-flow__node-output.selectable:hover,
-  .react-flow__node-group.selectable:hover {
-  }
-  .react-flow__node-default.selectable.selected,
-  .react-flow__node-default.selectable:focus,
-  .react-flow__node-default.selectable:focus-visible,
-  .react-flow__node-input.selectable.selected,
-  .react-flow__node-input.selectable:focus,
-  .react-flow__node-input.selectable:focus-visible,
-  .react-flow__node-output.selectable.selected,
-  .react-flow__node-output.selectable:focus,
-  .react-flow__node-output.selectable:focus-visible,
-  .react-flow__node-group.selectable.selected,
-  .react-flow__node-group.selectable:focus,
-  .react-flow__node-group.selectable:focus-visible {
-  }
-  .react-flow__node-group {
-    background-color: rgba(240, 240, 240, 0.25);
-  }
-  .react-flow__nodesselection-rect,
-  .react-flow__selection {
-    background: rgba(0, 89, 220, 0.08);
-  }
-  .react-flow__nodesselection-rect:focus,
-  .react-flow__nodesselection-rect:focus-visible,
-  .react-flow__selection:focus,
-  .react-flow__selection:focus-visible {
-    outline: none;
-  }
-  .react-flow__controls {
-    box-shadow: ${uikitReactCore.theme.colors.shadow};
-  }
-  .react-flow__controls-button {
-    border: none;
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    padding: 5px;
-  }
-  .react-flow__controls-button:hover {
-    background: #f4f4f4;
-  }
-  .react-flow__controls-button svg {
-    width: 100%;
-    max-width: 12px;
-    max-height: 12px;
-  }
-  .react-flow__controls-button:disabled {
-    pointer-events: none;
-  }
-  .react-flow__controls-button:disabled svg {
-    fill-opacity: 0.4;
-  }
-  .react-flow__minimap {
-    background-color: #fff;
-  }
-  .react-flow__resize-control {
-    position: absolute;
-  }
-  .react-flow__resize-control.left,
-  .react-flow__resize-control.right {
-    cursor: ew-resize;
-  }
-  .react-flow__resize-control.top,
-  .react-flow__resize-control.bottom {
-    cursor: ns-resize;
-  }
-  .react-flow__resize-control.top.left,
-  .react-flow__resize-control.bottom.right {
-    cursor: nwse-resize;
-  }
-  .react-flow__resize-control.bottom.left,
-  .react-flow__resize-control.top.right {
-    cursor: nesw-resize;
-  }
-  /* handle styles */
-  .react-flow__resize-control.handle {
-    width: 4px;
-    height: 4px;
-    border: 1px solid #fff;
-    border-radius: 1px;
-    background-color: ${uikitReactCore.theme.colors.primary};
-    transform: translate(-50%, -50%);
-  }
-  .react-flow__resize-control.handle.left {
-    left: 0;
-    top: 50%;
-  }
-  .react-flow__resize-control.handle.right {
-    left: 100%;
-    top: 50%;
-  }
-  .react-flow__resize-control.handle.top {
-    left: 50%;
-    top: 0;
-  }
-  .react-flow__resize-control.handle.bottom {
-    left: 50%;
-    top: 100%;
-  }
-  .react-flow__resize-control.handle.top.left {
-    left: 0;
-  }
-  .react-flow__resize-control.handle.bottom.left {
-    left: 0;
-  }
-  .react-flow__resize-control.handle.top.right {
-    left: 100%;
-  }
-  .react-flow__resize-control.handle.bottom.right {
-    left: 100%;
-  }
-  /* line styles */
-  .react-flow__resize-control.line {
-    border-color: ${uikitReactCore.theme.colors.primaryStrong};
-    border-width: 0;
-    border-style: dashed;
-  }
-  .react-flow__resize-control.line.left,
-  .react-flow__resize-control.line.right {
-    width: 1px;
-    transform: translate(-50%, 0);
-    top: 0;
-    height: 100%;
-  }
-  .react-flow__resize-control.line.left {
-    left: 0;
-    border-left-width: 1px;
-  }
-  .react-flow__resize-control.line.right {
-    left: 100%;
-    border-right-width: 1px;
-  }
-  .react-flow__resize-control.line.top,
-  .react-flow__resize-control.line.bottom {
-    height: 1px;
-    transform: translate(0, -50%);
-    left: 0;
-    width: 100%;
-  }
-  .react-flow__resize-control.line.top {
-    top: 0;
-    border-top-width: 1px;
-  }
-  .react-flow__resize-control.line.bottom {
-    border-bottom-width: 1px;
-    top: 100%;
-  }
-`;
-exports.flowStyles = flowStyles;

package/dist/cjs/Flow/hooks/useFlowContext.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const FlowContext = require("../FlowContext/FlowContext.cjs");
-const useFlowContext = () => react.useContext(FlowContext.HvFlowContext);
-exports.useFlowContext = useFlowContext;

package/dist/cjs/Flow/hooks/useFlowInstance.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const reactflow = require("reactflow");
-function useFlowInstance() {
-  return reactflow.useReactFlow();
-}
-exports.useFlowInstance = useFlowInstance;