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

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.46.12",
+  "version": "6.0.0-next.1",
+  "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -25,22 +26,22 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.16.14",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "@mui/material": "^7.0.2",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.106.0",
-    "@hitachivantara/uikit-react-icons": "^5.16.5",
-    "@hitachivantara/uikit-react-utils": "^0.2.45",
-    "@hitachivantara/uikit-styles": "^5.51.0",
+    "@hitachivantara/uikit-react-core": "^6.0.0-next.1",
+    "@hitachivantara/uikit-react-icons": "^6.0.0-next.1",
+    "@hitachivantara/uikit-react-utils": "^6.0.0-next.1",
+    "@hitachivantara/uikit-styles": "^6.0.0-next.1",
     "@mui/base": "5.0.0-beta.68",
     "@types/react-grid-layout": "^1.3.5",
+    "@xyflow/react": "^12.8.2",
     "react-grid-layout": "^1.4.4",
-    "reactflow": "^11.10.1",
     "uid": "^2.0.2",
     "usehooks-ts": "^2.16.0",
     "zustand": "^4.5.2"
@@ -52,14 +53,13 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "59aa34bf80dd55a1b71c463047a17606443ef766",
+  "gitHead": "f8dfa00a9f29ffdfcabe9cd00553ddf8b7458bd0",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.cjs",
-      "import": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
-  "types": "dist/types/index.d.ts",
-  "module": "dist/esm/index.js"
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js"
 }

package/dist/cjs/Blade/Blade.cjs

@@ -1,174 +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 Blade_styles = require("./Blade.styles.cjs");
-const HvBlade = (props) => {
-  const {
-    id: idProp,
-    className,
-    classes: classesProp,
-    expanded,
-    defaultExpanded = false,
-    label,
-    labelVariant = "label",
-    headingLevel,
-    onChange,
-    disabled = false,
-    children,
-    fullWidth,
-    buttonProps,
-    containerProps,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvBlade", props);
-  const { classes, cx } = Blade_styles.useClasses(classesProp);
-  const [isExpanded, setIsExpanded] = uikitReactCore.useControlled(
-    expanded,
-    Boolean(defaultExpanded)
-  );
-  const handleAction = react.useCallback(
-    (event) => {
-      if (!disabled) {
-        onChange?.(event, !isExpanded);
-        setIsExpanded(!isExpanded);
-        return true;
-      }
-      return false;
-    },
-    [disabled, onChange, isExpanded, setIsExpanded]
-  );
-  const handleClick = react.useCallback(
-    (event) => {
-      handleAction(event);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [handleAction]
-  );
-  const handleKeyDown = react.useCallback(
-    (event) => {
-      let isEventHandled = false;
-      const { key } = event;
-      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
-        return;
-      }
-      switch (key) {
-        case "Enter":
-        case " ":
-          isEventHandled = handleAction(event);
-          break;
-        default:
-          return;
-      }
-      if (isEventHandled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [handleAction]
-  );
-  const id = uikitReactCore.useUniqueId(idProp);
-  const bladeHeaderId = uikitReactCore.setId(id, "button");
-  const bladeContainerId = uikitReactCore.setId(id, "container");
-  const bladeHeader = react.useMemo(() => {
-    const buttonLabel = typeof label === "function" ? label(isExpanded) : label;
-    const bladeButton = /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactCore.HvTypography,
-      {
-        id: bladeHeaderId,
-        component: "div",
-        role: "button",
-        className: cx(classes.button, {
-          [classes.textOnlyLabel]: typeof buttonLabel === "string",
-          [classes.disabled]: disabled
-        }),
-        style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
-        disabled,
-        tabIndex: 0,
-        onKeyDown: handleKeyDown,
-        onClick: handleClick,
-        variant: labelVariant,
-        "aria-expanded": isExpanded,
-        "aria-controls": bladeContainerId,
-        ...buttonProps,
-        children: buttonLabel
-      }
-    );
-    return headingLevel === void 0 ? bladeButton : /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactCore.HvTypography,
-      {
-        component: `h${headingLevel}`,
-        variant: labelVariant,
-        className: classes.heading,
-        style: { flexShrink: 0 },
-        children: bladeButton
-      }
-    );
-  }, [
-    bladeContainerId,
-    bladeHeaderId,
-    buttonProps,
-    classes.button,
-    classes.disabled,
-    classes.heading,
-    classes.textOnlyLabel,
-    cx,
-    disabled,
-    handleClick,
-    handleKeyDown,
-    headingLevel,
-    isExpanded,
-    label,
-    labelVariant
-  ]);
-  const bladeRef = react.useRef(null);
-  const [maxWidth, setMaxWidth] = react.useState(void 0);
-  react.useEffect(() => {
-    if (!bladeRef.current) return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      setMaxWidth(entries[0].target.clientWidth);
-    });
-    resizeObserver.observe(
-      // using the blade's container as reference max-width is more stable
-      bladeRef.current.parentElement ?? bladeRef.current
-    );
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [isExpanded]);
-  const { style: containerStyle, ...otherContainerProps } = containerProps || {};
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: bladeRef,
-      id: idProp,
-      className: cx(classes.root, className, {
-        [classes.fullWidth]: fullWidth,
-        [classes.expanded]: isExpanded
-      }),
-      ...others,
-      children: [
-        bladeHeader,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            id: bladeContainerId,
-            role: "region",
-            "aria-labelledby": bladeHeaderId,
-            className: classes.container,
-            hidden: !isExpanded,
-            style: {
-              ...containerStyle,
-              maxWidth: isExpanded ? maxWidth : 0
-            },
-            ...otherContainerProps,
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-exports.bladeClasses = Blade_styles.staticClasses;
-exports.HvBlade = HvBlade;

package/dist/cjs/Blade/Blade.styles.cjs

@@ -1,71 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvBlade", {
-  root: {
-    position: "relative",
-    display: "flex",
-    minWidth: 72,
-    "& + $root": {
-      marginLeft: uikitStyles.theme.spacing("sm")
-    },
-    transition: "flex-grow 600ms linear",
-    zIndex: 0,
-    color: uikitStyles.theme.colors.text,
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    borderRadius: uikitStyles.theme.radii.round,
-    border: `1px solid ${uikitStyles.theme.colors.border}`
-  },
-  expanded: {},
-  fullWidth: {
-    flexGrow: 0,
-    "&$expanded": {
-      flexGrow: 1
-    }
-  },
-  heading: {},
-  button: {
-    height: "100%",
-    minWidth: 70,
-    "&[disabled], &:active": {
-      outline: "none"
-    },
-    "&:focus": {
-      outline: "none",
-      background: uikitStyles.theme.colors.bgHover
-    },
-    "&:hover": {
-      background: uikitStyles.theme.colors.bgHover
-    },
-    "&:focus-visible": {
-      ...uikitReactCore.outlineStyles,
-      zIndex: 1
-    },
-    cursor: "pointer"
-  },
-  textOnlyLabel: {
-    padding: uikitStyles.theme.spacing("xs", "sm")
-  },
-  container: {
-    display: "inline-block",
-    height: "100%",
-    width: "100%",
-    minWidth: 0,
-    overflowX: "hidden",
-    maxWidth: 0,
-    transition: "max-width 600ms linear"
-  },
-  disabled: {
-    cursor: "not-allowed",
-    color: uikitStyles.theme.colors.textDisabled,
-    "&:focus": {
-      background: "none"
-    },
-    "&:hover": {
-      background: "none"
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Blades/Blades.cjs

@@ -1,104 +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 Blades_styles = require("./Blades.styles.cjs");
-function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
-  const childrenArray = react.Children.toArray(children);
-  const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
-    const childIsControlled = child?.props?.expanded !== void 0;
-    const childIsExpanded = childIsControlled ? child?.props?.expanded : child?.props?.defaultExpanded;
-    return childIsExpanded ? i : void 0;
-  }).filter((v) => v !== void 0);
-  const numberOfExpandedBlades = expandedBlades.length;
-  if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) {
-    return [0];
-  }
-  if (atMostOneExpanded && numberOfExpandedBlades > 1) {
-    return [expandedBlades[0]];
-  }
-  return expandedBlades;
-}
-const HvBlades = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    children,
-    expanded: expandedProp,
-    defaultExpanded,
-    atMostOneExpanded = false,
-    atLeastOneExpanded = false,
-    fullWidthBlades = false,
-    onChange,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvBlades", props);
-  const { classes, cx } = Blades_styles.useClasses(classesProp);
-  const [expanded, setExpanded] = uikitReactCore.useControlled(
-    expandedProp,
-    () => getExpandedBlades(
-      defaultExpanded,
-      children,
-      atMostOneExpanded,
-      atLeastOneExpanded
-    )
-  );
-  const onChildChangeInterceptor = react.useCallback(
-    (index, childOnChange, event, isExpanded) => {
-      const newValue = [];
-      if (atMostOneExpanded) {
-        if (isExpanded) {
-          newValue.push(index);
-        }
-      } else {
-        newValue.push(...expanded);
-        if (isExpanded) {
-          newValue.push(index);
-        } else {
-          newValue.splice(newValue.indexOf(index), 1);
-        }
-      }
-      if (atLeastOneExpanded && newValue.length === 0) {
-        newValue.push(index);
-      }
-      childOnChange?.(event, isExpanded);
-      onChange?.(event, newValue);
-      setExpanded(newValue);
-    },
-    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]
-  );
-  const modifiedChildren = react.useMemo(() => {
-    return react.Children.map(children, (child, i) => {
-      const childIsExpanded = expanded.includes(i);
-      return react.cloneElement(child, {
-        expanded: childIsExpanded,
-        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
-        buttonProps: {
-          ...child?.props?.buttonProps,
-          "aria-disabled": (
-            // If the accordion panel associated with an accordion header is visible,
-            // and if the accordion does not permit the panel to be collapsed, the header
-            // button element has aria-disabled set to true.
-            child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
-          )
-        },
-        onChange: (event, isExpanded) => onChildChangeInterceptor(
-          i,
-          child?.props?.onChange,
-          event,
-          isExpanded
-        )
-      });
-    });
-  }, [
-    children,
-    expanded,
-    fullWidthBlades,
-    atMostOneExpanded,
-    onChildChangeInterceptor
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: cx(classes.root, className), ...others, children: modifiedChildren });
-};
-exports.bladesClasses = Blades_styles.staticClasses;
-exports.HvBlades = HvBlades;

package/dist/cjs/Blades/Blades.styles.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvBlades", {
-  root: {
-    position: "relative",
-    display: "flex"
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Dashboard/Dashboard.cjs

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const reactGridLayout = require("react-grid-layout");
-const react$1 = require("@emotion/react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const Dashboard_styles = require("./Dashboard.styles.cjs");
-const GridLayout = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
-const defaultCols = {
-  xs: 12,
-  sm: 12,
-  md: 12,
-  lg: 12,
-  xl: 12
-};
-const HvDashboard = (props) => {
-  const {
-    children,
-    className,
-    layout,
-    cols: colsProp,
-    layouts: layoutsProp,
-    classes: classesProp,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvDashboard", props);
-  const { classes, cx } = Dashboard_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactCore.useTheme();
-  const layouts = react.useMemo(() => {
-    if (layoutsProp) return layoutsProp;
-    if (!layout) return {};
-    return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
-  }, [layoutsProp, layout]);
-  const cols = react.useMemo(() => {
-    if (!colsProp) return defaultCols;
-    if (typeof colsProp === "number") {
-      return {
-        xs: colsProp,
-        sm: colsProp,
-        md: colsProp,
-        lg: colsProp,
-        xl: colsProp
-      };
-    }
-    return colsProp;
-  }, [colsProp]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: Dashboard_styles.gridStyles }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      GridLayout,
-      {
-        className: cx(classes.root, className),
-        breakpoints: activeTheme?.breakpoints.values,
-        cols,
-        layouts,
-        ...others,
-        children
-      }
-    )
-  ] });
-};
-exports.dashboardClasses = Dashboard_styles.staticClasses;
-exports.HvDashboard = HvDashboard;

package/dist/cjs/Dashboard/Dashboard.styles.cjs

@@ -1,196 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvDashboard", {
-  root: {}
-});
-const gridStyles = react.css`
-  .react-grid-layout {
-    position: relative;
-    transition: height 200ms ease;
-  }
-  .react-grid-item {
-    transition: all 200ms ease;
-    transition-property: left, top, width, height;
-  }
-  .react-grid-item img {
-    pointer-events: none;
-    user-select: none;
-  }
-  .react-grid-item.cssTransforms {
-    transition-property: transform, width, height;
-  }
-  .react-grid-item.resizing {
-    transition: none;
-    z-index: 1;
-    will-change: width, height;
-  }
-
-  .react-grid-item.react-draggable-dragging {
-    transition: none;
-    z-index: 3;
-    will-change: transform;
-  }
-
-  .react-grid-item.dropping {
-    visibility: hidden;
-  }
-
-  .react-grid-item.react-grid-placeholder {
-    background: ${uikitReactCore.theme.colors.primaryDimmed};
-    transition-duration: 100ms;
-    z-index: 2;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-  }
-
-  .react-grid-item.react-grid-placeholder.placeholder-resizing {
-    transition: none;
-  }
-
-  .react-grid-item > .react-resizable-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-  }
-
-  .react-grid-item > .react-resizable-handle::after {
-    content: "";
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-    width: 5px;
-    height: 5px;
-    border-right: 2px solid rgba(0, 0, 0, 0.4);
-    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
-  }
-
-  .react-resizable-hide > .react-resizable-handle {
-    display: none;
-  }
-
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
-    bottom: 0;
-    left: 0;
-    cursor: sw-resize;
-    transform: rotate(90deg);
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
-    bottom: 0;
-    right: 0;
-    cursor: se-resize;
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
-    top: 0;
-    left: 0;
-    cursor: nw-resize;
-    transform: rotate(180deg);
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
-    top: 0;
-    right: 0;
-    cursor: ne-resize;
-    transform: rotate(270deg);
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
-    top: 50%;
-    margin-top: -10px;
-    cursor: ew-resize;
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
-    left: 0;
-    transform: rotate(135deg);
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
-    right: 0;
-    transform: rotate(315deg);
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
-    left: 50%;
-    margin-left: -10px;
-    cursor: ns-resize;
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
-    top: 0;
-    transform: rotate(225deg);
-  }
-  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
-    bottom: 0;
-    transform: rotate(45deg);
-  }
-
-  .react-resizable {
-    position: relative;
-  }
-  .react-resizable-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    box-sizing: border-box;
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
-    background-position: bottom right;
-    padding: 0 3px 3px 0;
-  }
-  .react-resizable-handle-sw {
-    bottom: 0;
-    left: 0;
-    cursor: sw-resize;
-    transform: rotate(90deg);
-  }
-  .react-resizable-handle-se {
-    bottom: 0;
-    right: 0;
-    cursor: se-resize;
-  }
-  .react-resizable-handle-nw {
-    top: 0;
-    left: 0;
-    cursor: nw-resize;
-    transform: rotate(180deg);
-  }
-  .react-resizable-handle-ne {
-    top: 0;
-    right: 0;
-    cursor: ne-resize;
-    transform: rotate(270deg);
-  }
-  .react-resizable-handle-w,
-  .react-resizable-handle-e {
-    top: 50%;
-    margin-top: -10px;
-    cursor: ew-resize;
-  }
-  .react-resizable-handle-w {
-    left: 0;
-    transform: rotate(135deg);
-  }
-  .react-resizable-handle-e {
-    right: 0;
-    transform: rotate(315deg);
-  }
-  .react-resizable-handle-n,
-  .react-resizable-handle-s {
-    left: 50%;
-    margin-left: -10px;
-    cursor: ns-resize;
-  }
-  .react-resizable-handle-n {
-    top: 0;
-    transform: rotate(225deg);
-  }
-  .react-resizable-handle-s {
-    bottom: 0;
-    transform: rotate(45deg);
-  }
-`;
-exports.gridStyles = gridStyles;
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Flow/Background/Background.cjs

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const reactflow = require("reactflow");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const HvFlowBackground = ({
-  color = "secondary",
-  ...others
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactflow.Background,
-    {
-      color: uikitStyles.getColor(color, uikitStyles.theme.colors.textSubtle),
-      gap: 16,
-      ...others
-    }
-  );
-};
-exports.HvFlowBackground = HvFlowBackground;