@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.1

package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs

@@ -1,125 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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 = React.useContext(SelectionContext.SelectionContext);
-  const { dispatch } = React.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/Header/Navigation/MenuItem/MenuItem.styles.cjs

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../../utils/focusUtils.cjs");
-const item = {
-  border: "none",
-  cursor: "pointer",
-  padding: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`,
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  "&:active": {
-    outline: "none"
-  },
-  "&:focus": {
-    outline: "none"
-  },
-  "&:focus-visible": {
-    ...focusUtils.outlineStyles
-  },
-  "& span": {
-    display: "inline-flex",
-    color: "inherit",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  "& span::after": {
-    content: "attr(data-text)",
-    height: 0,
-    visibility: "hidden",
-    overflow: "hidden",
-    userSelect: "none",
-    pointerEvents: "none",
-    fontWeight: uikitStyles.theme.fontWeights.semibold,
-    "@media speech": {
-      display: "none"
-    }
-  }
-};
-const { staticClasses, useClasses } = uikitReactUtils.createClasses(
-  "HvHeader-MenuItem",
-  {
-    root: {
-      display: "inline",
-      height: "100%",
-      borderBottom: "4px solid transparent",
-      ":hover, :focus-within": {
-        backgroundColor: uikitStyles.theme.colors.bgHover
-      }
-    },
-    menu: {},
-    menubar: {},
-    selected: {
-      color: uikitStyles.theme.colors.text,
-      borderColor: "currentcolor"
-    },
-    item,
-    link: {
-      textDecoration: "none"
-    },
-    button: {
-      color: "inherit"
-    }
-  }
-);
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Header/Navigation/Navigation.cjs

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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 = React.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/Header/Navigation/Navigation.styles.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses(
-  "HvHeader-Navigation",
-  {
-    root: {
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      zIndex: 1,
-      top: "0px",
-      left: "0px"
-    }
-  }
-);
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Header/Navigation/useSelectionPath.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = 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] = React.useState([]);
-  React.useEffect(() => {
-    const path = getSelectionPath(data, selectedId);
-    setSelectionPath(path);
-  }, [data, selectedId]);
-  return selectionPath;
-};
-exports.useSelectionPath = useSelectionPath;

package/dist/cjs/Header/Navigation/utils/FocusContext.cjs

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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 = React.createContext(initialState);
-const FocusProvider = ({ children }) => {
-  const [state, dispatch] = React.useReducer(reducer, initialState);
-  const contextValue = React.useMemo(
-    () => ({ ...state, dispatch }),
-    [state, dispatch]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(FocusContext.Provider, { value: contextValue, children });
-};
-exports.FocusContext = FocusContext;
-exports.FocusProvider = FocusProvider;

package/dist/cjs/Header/Navigation/utils/SelectionContext.cjs

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

package/dist/cjs/IconButton/IconButton.cjs

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const generic = require("../types/generic.cjs");
-const Button = require("../Button/Button.cjs");
-const Tooltip = require("../Tooltip/Tooltip.cjs");
-const HvIconButton = generic.fixedForwardRef(function HvIconButton2(props, ref) {
-  const {
-    title,
-    placement = "top",
-    enterDelay = 500,
-    tooltipProps,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvIconButton", props);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tooltip.HvTooltip,
-    {
-      title,
-      enterDelay,
-      placement,
-      ...tooltipProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button.HvButton,
-        {
-          icon: true,
-          ref,
-          focusableWhenDisabled: true,
-          ...others
-        }
-      )
-    }
-  );
-});
-exports.HvIconButton = HvIconButton;

package/dist/cjs/IconContainer/IconContainer.cjs

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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 = React.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/InlineEditor/InlineEditor.cjs

@@ -1,135 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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] = React.useState(false);
-  const [cachedValue, setCachedValue] = React.useState(value);
-  const inputRef = React.useRef(void 0);
-  const { activeTheme } = uikitReactUtils.useTheme();
-  const [isOverflowing, setIsOverflowing] = React.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;

package/dist/cjs/InlineEditor/InlineEditor.styles.cjs

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEditor", {
-  root: {},
-  /** @deprecated unused. use `classes.root::after` instead */
-  inputBorderContainer: {},
-  input: {},
-  inputRoot: {
-    height: "100%",
-    minHeight: "32px"
-  },
-  text: {},
-  largeText: {},
-  textEmpty: {
-    color: uikitStyles.theme.colors.textDisabled
-  },
-  button: {
-    padding: uikitStyles.theme.spacing(0, "xs"),
-    minHeight: "32px",
-    boxSizing: "border-box",
-    cursor: "text",
-    height: "100%",
-    width: "100%",
-    maxWidth: "100%",
-    justifyContent: "start",
-    textAlign: "start",
-    alignItems: "center",
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    borderColor: "transparent",
-    "&:hover, &:focus": {
-      borderColor: uikitStyles.theme.colors.primary,
-      backgroundColor: uikitStyles.theme.colors.bgContainer,
-      "& $icon": {
-        visibility: "visible"
-      }
-    },
-    "&:active": {
-      borderColor: uikitStyles.theme.colors.text,
-      backgroundColor: "transparent",
-      "& $icon": {
-        visibility: "visible"
-      }
-    }
-  },
-  icon: {
-    cursor: "pointer",
-    visibility: "hidden",
-    alignSelf: "center"
-  },
-  iconVisible: {
-    visibility: "visible"
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;