@hitachivantara/uikit-react-core 5.103.0 → 5.104.0

package/dist/cjs/packages/core/src/Header/Brand/Brand.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Brand_styles = require("./Brand.styles.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const HvHeaderBrand = a.forwardRef(function HvHeaderBrand2(props, ref) {
+  const {
+    classes: classesProp,
+    logo,
+    name,
+    className,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvHeaderBrand", props);
+  const { classes, cx } = Brand_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+    logo,
+    logo && name && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator }),
+    name && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.brandName, variant: "label", children: name })
+  ] });
+});
+exports.headerBrandClasses = Brand_styles.staticClasses;
+exports.HvHeaderBrand = HvHeaderBrand;

package/dist/cjs/packages/core/src/Header/Header.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Header_styles = require("./Header.styles.cjs");
+const HvHeader = a.forwardRef(function HvHeader2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    children,
+    position = "fixed",
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvHeader", props);
+  const { classes, cx } = Header_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      ref,
+      style: { position },
+      className: cx(
+        classes.root,
+        classes.backgroundColor,
+        { [classes.fixed]: position === "fixed" },
+        className
+      ),
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.header, children })
+    }
+  );
+});
+exports.headerClasses = Header_styles.staticClasses;
+exports.HvHeader = HvHeader;

package/dist/cjs/packages/core/src/Header/Navigation/MenuBar/Bar.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const SelectionContext = require("../utils/SelectionContext.cjs");
+const Bar_styles = require("./Bar.styles.cjs");
+const Bar = (props) => {
+  const {
+    data = [],
+    type = "menubar",
+    className,
+    children,
+    classes: classesProp
+  } = uikitReactUtils.useDefaultProps("HvHeaderMenuBarBar", props);
+  const { classes, cx } = Bar_styles.useClasses(classesProp);
+  const selectionPath = a.useContext(SelectionContext.SelectionContext);
+  const isMenu = type === "menu";
+  const isActive = isMenu && data.some((item) => item.id === selectionPath?.[1]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        classes[type],
+        {
+          [classes.hidden]: isMenu,
+          [classes.active]: isActive
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classes.list, onFocus: () => {
+      }, children })
+    }
+  );
+};
+exports.headerMenuBarClasses = Bar_styles.staticClasses;
+exports.Bar = Bar;

package/dist/cjs/packages/core/src/Header/Navigation/MenuItem/MenuItem.cjs

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
+const Bar = require("../MenuBar/Bar.cjs");
+const FocusContext = require("../utils/FocusContext.cjs");
+const SelectionContext = require("../utils/SelectionContext.cjs");
+const MenuItem_styles = require("./MenuItem.styles.cjs");
+const Typography = require("../../../Typography/Typography.cjs");
+const traverseItem = (node) => {
+  let href;
+  let target;
+  if (node?.href) {
+    href = node?.href;
+    target = node?.target;
+  } else if (node?.data != null && node?.data?.length > 0) {
+    let i = 0;
+    while (href == null && i < node.data.length) {
+      const childNavItem = traverseItem(node?.data[i]);
+      if (childNavItem?.href != null) {
+        href = childNavItem?.href;
+        target = childNavItem?.target;
+        break;
+      }
+      i += 1;
+    }
+  }
+  return { href, target };
+};
+const HvHeaderMenuItem = (props) => {
+  const {
+    id,
+    item,
+    type,
+    onClick,
+    levels,
+    currentLevel,
+    classes: classesProp,
+    className
+  } = uikitReactUtils.useDefaultProps("HvHeaderMenuItem", props);
+  const { classes, cx } = MenuItem_styles.useClasses(classesProp);
+  const selectionPath = a.useContext(SelectionContext.SelectionContext);
+  const { dispatch } = a.useContext(FocusContext.FocusContext);
+  const { data } = item;
+  const hasSubLevel = data?.length;
+  const isMenu = type === "menu";
+  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;
+  const isCurrent = isSelected ? hasSubLevel ? true : "page" : void 0;
+  const actionHandler = (event) => {
+    if (event.type === "click" || keyboardUtils.isKey(event, "Enter") || keyboardUtils.isKey(event, "Space")) {
+      if (event.type === "click") {
+        event.currentTarget.blur();
+      }
+      onClick?.(event, item);
+    }
+  };
+  const handleFocus = (event) => {
+    dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
+  };
+  const label = /* @__PURE__ */ jsxRuntime.jsx(
+    Typography.HvTypography,
+    {
+      component: "span",
+      variant: isSelected ? "label" : "body",
+      "data-text": item.label,
+      children: item.label
+    }
+  );
+  let itemHref = item?.href;
+  let itemTarget = item?.target;
+  if (item?.href == null) {
+    const { href, target } = traverseItem(item);
+    itemHref = href;
+    itemTarget = target;
+  }
+  const ItemComponent = itemHref ? "a" : "div";
+  const itemProps = itemHref ? { href: itemHref, target: itemTarget, "aria-label": item.label } : { role: "button", tabIndex: 0 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      id,
+      className: cx(
+        classes.root,
+        {
+          [classes.menu]: isMenu,
+          [classes.menubar]: !isMenu,
+          [classes.selected]: !!isSelected
+        },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ItemComponent,
+          {
+            className: cx(classes.item, {
+              [classes.link]: itemHref,
+              [classes.button]: !itemHref
+            }),
+            onFocus: handleFocus,
+            onClick: actionHandler,
+            onKeyDown: actionHandler,
+            "aria-current": isCurrent,
+            ...itemProps,
+            children: label
+          }
+        ),
+        hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsxRuntime.jsx(
+          HvHeaderMenuItem,
+          {
+            item: itm,
+            type: "menu",
+            onClick,
+            levels,
+            currentLevel: currentLevel + 1
+          },
+          itm.id
+        )) })
+      ]
+    }
+  );
+};
+exports.headerMenuItemClasses = MenuItem_styles.staticClasses;
+exports.HvHeaderMenuItem = HvHeaderMenuItem;

package/dist/cjs/packages/core/src/Header/Navigation/Navigation.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Navigation_styles = require("./Navigation.styles.cjs");
+const useSelectionPath = require("./useSelectionPath.cjs");
+const FocusContext = require("./utils/FocusContext.cjs");
+const SelectionContext = require("./utils/SelectionContext.cjs");
+const MenuBar = require("./MenuBar/MenuBar.cjs");
+const HvHeaderNavigation = a.forwardRef(function HvHeaderNavigation2(props, ref) {
+  const {
+    data,
+    selected,
+    onClick,
+    className,
+    classes: classesProp,
+    levels = 2,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvHeaderNavigation", props);
+  const { classes, cx } = Navigation_styles.useClasses(classesProp);
+  const selectionPath = useSelectionPath.useSelectionPath(data, selected);
+  const handleClick = (event, selection) => {
+    event.preventDefault();
+    onClick?.(event, selection);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MenuBar.HvHeaderMenuBar,
+    {
+      data,
+      type: "menubar",
+      onClick: handleClick,
+      levels,
+      currentLevel: 1
+    }
+  ) }) }) });
+});
+exports.headerNavigationClasses = Navigation_styles.staticClasses;
+exports.HvHeaderNavigation = HvHeaderNavigation;

package/dist/cjs/packages/core/src/Header/Navigation/useSelectionPath.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const getSelectionPath = (data, selectedId, selection = [], idx = -1, parent = []) => {
+  data?.forEach((item, i) => {
+    const hasData = item.data?.length;
+    const isSelected = item.id === selectedId;
+    if (isSelected)
+      selection.push(...idx > -1 ? [parent[idx].id] : [], item.id);
+    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);
+  });
+  return selection;
+};
+const useSelectionPath = (data, selectedId) => {
+  const [selectionPath, setSelectionPath] = a.useState([]);
+  a.useEffect(() => {
+    const path = getSelectionPath(data, selectedId);
+    setSelectionPath(path);
+  }, [data, selectedId]);
+  return selectionPath;
+};
+exports.useSelectionPath = useSelectionPath;

package/dist/cjs/packages/core/src/Header/Navigation/utils/FocusContext.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "setItemFocused":
+      return { itemFocused: action.itemFocused };
+    default:
+      return state;
+  }
+};
+const initialState = { itemFocused: void 0, dispatch: void 0 };
+const FocusContext = a.createContext(initialState);
+const FocusProvider = ({ children }) => {
+  const [state, dispatch] = a.useReducer(reducer, initialState);
+  const contextValue = a.useMemo(
+    () => ({ ...state, dispatch }),
+    [state, dispatch]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FocusContext.Provider, { value: contextValue, children });
+};
+exports.FocusContext = FocusContext;
+exports.FocusProvider = FocusProvider;

package/dist/cjs/packages/core/src/Header/Navigation/utils/SelectionContext.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const SelectionContext = a.createContext([""]);
+exports.SelectionContext = SelectionContext;

package/dist/cjs/packages/core/src/IconContainer/IconContainer.cjs

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvIconContainer", {
+  root: {
+    display: "inline-flex",
+    flex: "0 0 auto",
+    // ensure icon doesn't flex grow/shrink
+    fontSize: `var(--isize, 16px)`,
+    // default size of 16px
+    transition: "rotate 0.2s ease",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 8
+    // default padding
+    // we're assuming svg children inherits from text color and size
+  },
+  xs: {
+    fontSize: 12,
+    padding: 10
+  },
+  sm: {
+    fontSize: 16
+  },
+  md: {
+    fontSize: 32
+  },
+  lg: {
+    fontSize: 96
+  },
+  xl: {
+    fontSize: 112
+  }
+});
+const HvIconContainer = a.forwardRef(function HvIconContainer2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    style,
+    color,
+    size = "S",
+    rotate,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvIconContainer", props);
+  const { cx, classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cx(classes.root, className, {
+        [classes[mapSizes(size)]]: size
+      }),
+      style: uikitReactUtils.mergeStyles(style, {
+        "--isize": typeof size === "number" ? `${size}px` : void 0,
+        color: uikitStyles.getColor(color),
+        rotate: rotate ? "180deg" : void 0,
+        ...style
+      }),
+      ...others,
+      children
+    }
+  );
+});
+function mapSizes(size) {
+  if (typeof size === "number") return void 0;
+  const iconSizeMap = {
+    XS: "xs",
+    S: "sm",
+    M: "md",
+    L: "lg"
+  };
+  return iconSizeMap[size] || size;
+}
+exports.HvIconContainer = HvIconContainer;
+exports.iconContainerClasses = staticClasses;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/packages/core/src/InlineEditor/InlineEditor.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useControlled = require("../hooks/useControlled.cjs");
+const useEnhancedEffect = require("../hooks/useEnhancedEffect.cjs");
+const icons = require("../icons.cjs");
+const generic = require("../types/generic.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const InlineEditor_styles = require("./InlineEditor.styles.cjs");
+const Button = require("../Button/Button.cjs");
+const Input = require("../Input/Input.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    value: valueProp,
+    defaultValue = "",
+    showIcon,
+    component: InputComponent = Input.HvInput,
+    variant = "body",
+    placeholder = "Enter text",
+    onBlur,
+    onChange,
+    onKeyDown,
+    buttonProps,
+    typographyProps,
+    disabled,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvInlineEditor", props);
+  const { classes, cx } = InlineEditor_styles.useClasses(classesProp);
+  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
+  const [editMode, setEditMode] = a.useState(false);
+  const [cachedValue, setCachedValue] = a.useState(value);
+  const inputRef = a.useRef(void 0);
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const [isOverflowing, setIsOverflowing] = a.useState(false);
+  const typographyStyles = activeTheme?.typography[variant] || {};
+  const { lineHeight } = typographyStyles;
+  const checkOverflow = (el) => {
+    if (!el) return;
+    setIsOverflowing(el.scrollWidth > el.clientWidth);
+  };
+  useEnhancedEffect.useEnhancedEffect(() => {
+    const input = inputRef.current;
+    if (editMode && input) {
+      input.focus();
+      input.select();
+    }
+  }, [editMode]);
+  const handleClick = () => {
+    setEditMode(true);
+    setCachedValue(value);
+  };
+  const handleBlur = (event) => {
+    setEditMode(false);
+    const newValue = value || cachedValue;
+    setValue(newValue);
+    onBlur?.(event, newValue);
+  };
+  const handleKeyDown = (event) => {
+    let newValue = value;
+    if (keyboardUtils.isKey(event, "Esc")) {
+      newValue = cachedValue;
+      setEditMode(false);
+      setValue(newValue);
+    }
+    onKeyDown?.(event, newValue);
+  };
+  const handleChange = (event, val) => {
+    setValue(val);
+    onChange?.(event, val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+    InputComponent,
+    {
+      ref,
+      inputRef,
+      classes: {
+        inputRoot: classes.inputRoot,
+        input: classes.input
+      },
+      inputProps: {
+        style: {
+          ...typographyStyles,
+          height: InputComponent === Input.HvInput ? lineHeight : void 0
+        }
+      },
+      value,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      ...others
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    Button.HvButton,
+    {
+      variant: "secondaryGhost",
+      endIcon: /* @__PURE__ */ jsxRuntime.jsx(
+        icons.HvIcon,
+        {
+          compact: true,
+          name: "Edit",
+          color: "textDisabled",
+          className: cx(classes.icon, {
+            [classes.iconVisible]: showIcon
+          })
+        }
+      ),
+      className: cx(classes.button, {
+        [classes.largeText]: Number(lineHeight) >= 28
+      }),
+      onClick: handleClick,
+      disabled,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: isOverflowing && value, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          component: "div",
+          ref: checkOverflow,
+          variant,
+          noWrap: true,
+          className: cx(classes.text, { [classes.textEmpty]: !value }),
+          ...typographyProps,
+          children: value || placeholder
+        }
+      ) })
+    }
+  ) });
+});
+exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
+exports.HvInlineEditor = HvInlineEditor;