@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

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

@@ -1,24 +1,27 @@
+import { createContext, useMemo, useReducer } from "react";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useReducer, useMemo } from "react";
-const reducer = (state, action) => {
-  switch (action.type) {
-    case "setItemFocused":
-      return { itemFocused: action.itemFocused };
-    default:
-      return state;
-  }
+//#region src/Header/Navigation/utils/FocusContext.tsx
+var 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 = createContext(initialState);
-const FocusProvider = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const contextValue = useMemo(
-    () => ({ ...state, dispatch }),
-    [state, dispatch]
-  );
-  return /* @__PURE__ */ jsx(FocusContext.Provider, { value: contextValue, children });
+var initialState = {
+	itemFocused: void 0,
+	dispatch: void 0
 };
-export {
-  FocusContext,
-  FocusProvider
+var FocusContext = createContext(initialState);
+var FocusProvider = ({ children }) => {
+	const [state, dispatch] = useReducer(reducer, initialState);
+	const contextValue = useMemo(() => ({
+		...state,
+		dispatch
+	}), [state, dispatch]);
+	return /* @__PURE__ */ jsx(FocusContext.Provider, {
+		value: contextValue,
+		children
+	});
 };
+//#endregion
+export { FocusContext, FocusProvider };

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

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-const SelectionContext = createContext([""]);
-export {
-  SelectionContext
-};
+//#region src/Header/Navigation/utils/SelectionContext.ts
+var SelectionContext = createContext([""]);
+//#endregion
+export { SelectionContext };

package/dist/IconButton/IconButton.js

@@ -1,35 +1,28 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { fixedForwardRef } from "../types/generic.js";
-import { HvTooltip } from "../Tooltip/Tooltip.js";
 import { HvButton } from "../Button/Button.js";
-const HvIconButton = fixedForwardRef(function HvIconButton2(props, ref) {
-  const {
-    title,
-    placement = "top",
-    enterDelay = 500,
-    tooltipProps,
-    ...others
-  } = useDefaultProps("HvIconButton", props);
-  return /* @__PURE__ */ jsx(
-    HvTooltip,
-    {
-      title,
-      enterDelay,
-      placement,
-      ...tooltipProps,
-      children: /* @__PURE__ */ jsx(
-        HvButton,
-        {
-          icon: true,
-          ref,
-          focusableWhenDisabled: true,
-          ...others
-        }
-      )
-    }
-  );
+import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/IconButton/IconButton.tsx
+/**
+* The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.
+* As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.
+* This component provides this behavior out of the box.
+*/
+var HvIconButton = fixedForwardRef(function HvIconButton(props, ref) {
+	const { title, placement = "top", enterDelay = 500, tooltipProps, ...others } = useDefaultProps("HvIconButton", props);
+	return /* @__PURE__ */ jsx(HvTooltip, {
+		title,
+		enterDelay,
+		placement,
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(HvButton, {
+			icon: true,
+			ref,
+			focusableWhenDisabled: true,
+			...others
+		})
+	});
 });
-export {
-  HvIconButton
-};
+//#endregion
+export { HvIconButton };

package/dist/IconContainer/IconContainer.js

@@ -1,81 +1,60 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps, mergeStyles, createClasses } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = 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
-  }
+import { createClasses, mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/IconContainer/IconContainer.tsx
+var { staticClasses, useClasses } = createClasses("HvIconContainer", {
+	root: {
+		display: "inline-flex",
+		flex: "0 0 auto",
+		fontSize: `var(--isize, 16px)`,
+		transition: "rotate 0.2s ease",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: 8
+	},
+	xs: {
+		fontSize: 12,
+		padding: 10
+	},
+	sm: { fontSize: 16 },
+	md: { fontSize: 32 },
+	lg: { fontSize: 96 },
+	xl: { fontSize: 112 }
 });
-const HvIconContainer = forwardRef(function HvIconContainer2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    style,
-    color,
-    size = "S",
-    rotate,
-    children,
-    ...others
-  } = useDefaultProps("HvIconContainer", props);
-  const { cx, classes } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cx(classes.root, className, {
-        [classes[mapSizes(size)]]: size
-      }),
-      style: mergeStyles(style, {
-        "--isize": typeof size === "number" ? `${size}px` : void 0,
-        color: getColor(color),
-        rotate: rotate ? "180deg" : void 0,
-        ...style
-      }),
-      ...others,
-      children
-    }
-  );
+/**
+* This component allows using the theme utilities, such as `color` and `size` in icons from
+* external icon libraries, such as FontAwesome or Phosphor.
+*
+* @example
+* <HvIconContainer size="lg" color="warning">
+*  <FontAwesomeIcon icon={faUser} />
+* </HvIconContainer>
+*/
+var HvIconContainer = forwardRef(function HvIconContainer(props, ref) {
+	const { className, classes: classesProp, style, color, size = "S", rotate, children, ...others } = useDefaultProps("HvIconContainer", props);
+	const { cx, classes } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx(classes.root, className, { [classes[mapSizes(size)]]: size }),
+		style: mergeStyles(style, {
+			"--isize": typeof size === "number" ? `${size}px` : void 0,
+			color: 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;
+	if (typeof size === "number") return void 0;
+	return {
+		XS: "xs",
+		S: "sm",
+		M: "md",
+		L: "lg"
+	}[size] || size;
 }
-export {
-  HvIconContainer,
-  staticClasses as iconContainerClasses,
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { HvIconContainer, staticClasses, useClasses };

package/dist/InlineEditor/InlineEditor.js

@@ -1,136 +1,110 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef } from "react";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
-import { useControlled } from "../hooks/useControlled.js";
-import { useEnhancedEffect } from "../hooks/useEnhancedEffect.js";
-import { HvIcon } from "../icons.js";
 import { fixedForwardRef } from "../types/generic.js";
+import { HvTypography } from "../Typography/Typography.js";
 import { isKey } from "../utils/keyboardUtils.js";
-import { useClasses } from "./InlineEditor.styles.js";
-import { staticClasses } from "./InlineEditor.styles.js";
-import { HvInput } from "../Input/Input.js";
+import { HvIcon } from "../icons.js";
+import { useControlled } from "../hooks/useControlled.js";
 import { HvButton } from "../Button/Button.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
-import { HvTypography } from "../Typography/Typography.js";
-const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    value: valueProp,
-    defaultValue = "",
-    showIcon,
-    component: InputComponent = HvInput,
-    variant = "body",
-    placeholder = "Enter text",
-    onBlur,
-    onChange,
-    onKeyDown,
-    buttonProps,
-    typographyProps,
-    disabled,
-    ...others
-  } = useDefaultProps("HvInlineEditor", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [value, setValue] = useControlled(valueProp, defaultValue);
-  const [editMode, setEditMode] = useState(false);
-  const [cachedValue, setCachedValue] = useState(value);
-  const inputRef = useRef(void 0);
-  const { activeTheme } = useTheme();
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  const typographyStyles = activeTheme?.typography[variant] || {};
-  const { lineHeight } = typographyStyles;
-  const checkOverflow = (el) => {
-    if (!el) return;
-    setIsOverflowing(el.scrollWidth > el.clientWidth);
-  };
-  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 (isKey(event, "Esc")) {
-      newValue = cachedValue;
-      setEditMode(false);
-      setValue(newValue);
-    }
-    onKeyDown?.(event, newValue);
-  };
-  const handleChange = (event, val) => {
-    setValue(val);
-    onChange?.(event, val);
-  };
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsx(
-    InputComponent,
-    {
-      ref,
-      inputRef,
-      classes: {
-        inputRoot: classes.inputRoot,
-        input: classes.input
-      },
-      inputProps: {
-        style: {
-          ...typographyStyles,
-          height: InputComponent === HvInput ? lineHeight : void 0
-        }
-      },
-      value,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      ...others
-    }
-  ) : /* @__PURE__ */ jsx(
-    HvButton,
-    {
-      variant: "secondaryGhost",
-      endIcon: /* @__PURE__ */ jsx(
-        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__ */ jsx(HvTooltip, { title: isOverflowing && value, children: /* @__PURE__ */ jsx(
-        HvTypography,
-        {
-          component: "div",
-          ref: checkOverflow,
-          variant,
-          noWrap: true,
-          className: cx(classes.text, { [classes.textEmpty]: !value }),
-          ...typographyProps,
-          children: value || placeholder
-        }
-      ) })
-    }
-  ) });
+import { HvInput } from "../Input/Input.js";
+import { useEnhancedEffect } from "../hooks/useEnhancedEffect.js";
+import { useClasses } from "./InlineEditor.styles.js";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/InlineEditor/InlineEditor.tsx
+/**
+* An Inline Editor allows the user to edit a record without making a major switch
+* between viewing and editing, making it an efficient method of updating a record.
+*/
+var HvInlineEditor = fixedForwardRef(function HvInlineEditor(props, ref) {
+	const { className, classes: classesProp, value: valueProp, defaultValue = "", showIcon, component: InputComponent = HvInput, variant = "body", placeholder = "Enter text", onBlur, onChange, onKeyDown, buttonProps, typographyProps, disabled, ...others } = useDefaultProps("HvInlineEditor", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [value, setValue] = useControlled(valueProp, defaultValue);
+	const [editMode, setEditMode] = useState(false);
+	const [cachedValue, setCachedValue] = useState(value);
+	const inputRef = useRef(void 0);
+	const { activeTheme } = useTheme();
+	const [isOverflowing, setIsOverflowing] = useState(false);
+	const typographyStyles = activeTheme?.typography[variant] || {};
+	const { lineHeight } = typographyStyles;
+	const checkOverflow = (el) => {
+		if (!el) return;
+		setIsOverflowing(el.scrollWidth > el.clientWidth);
+	};
+	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 (isKey(event, "Esc")) {
+			newValue = cachedValue;
+			setEditMode(false);
+			setValue(newValue);
+		}
+		onKeyDown?.(event, newValue);
+	};
+	const handleChange = (event, val) => {
+		setValue(val);
+		onChange?.(event, val);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.root, className),
+		children: editMode && !disabled ? /* @__PURE__ */ jsx(InputComponent, {
+			ref,
+			inputRef,
+			classes: {
+				inputRoot: classes.inputRoot,
+				input: classes.input
+			},
+			inputProps: { style: {
+				...typographyStyles,
+				height: InputComponent === HvInput ? lineHeight : void 0
+			} },
+			value,
+			onBlur: handleBlur,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			...others
+		}) : /* @__PURE__ */ jsx(HvButton, {
+			variant: "secondaryGhost",
+			endIcon: /* @__PURE__ */ jsx(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__ */ jsx(HvTooltip, {
+				title: isOverflowing && value,
+				children: /* @__PURE__ */ jsx(HvTypography, {
+					component: "div",
+					ref: checkOverflow,
+					variant,
+					noWrap: true,
+					className: cx(classes.text, { [classes.textEmpty]: !value }),
+					...typographyProps,
+					children: value || placeholder
+				})
+			})
+		})
+	});
 });
-export {
-  HvInlineEditor,
-  staticClasses as inlineEditorClasses
-};
+//#endregion
+export { HvInlineEditor };

package/dist/InlineEditor/InlineEditor.styles.js

@@ -1,55 +1,46 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
-  root: {},
-  input: {},
-  inputRoot: {
-    height: "100%",
-    minHeight: "32px"
-  },
-  text: {},
-  largeText: {},
-  textEmpty: {
-    color: theme.colors.textDisabled
-  },
-  button: {
-    padding: theme.spacing(0, "xs"),
-    minHeight: "32px",
-    boxSizing: "border-box",
-    cursor: "text",
-    height: "100%",
-    width: "100%",
-    maxWidth: "100%",
-    justifyContent: "start",
-    textAlign: "start",
-    alignItems: "center",
-    backgroundColor: theme.colors.bgContainer,
-    borderColor: "transparent",
-    "&:hover, &:focus": {
-      borderColor: theme.colors.primary,
-      backgroundColor: theme.colors.bgContainer,
-      "& $icon": {
-        visibility: "visible"
-      }
-    },
-    "&:active": {
-      borderColor: theme.colors.text,
-      backgroundColor: "transparent",
-      "& $icon": {
-        visibility: "visible"
-      }
-    }
-  },
-  icon: {
-    cursor: "pointer",
-    visibility: "hidden",
-    alignSelf: "center"
-  },
-  iconVisible: {
-    visibility: "visible"
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/InlineEditor/InlineEditor.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvInlineEditor", {
+	root: {},
+	input: {},
+	inputRoot: {
+		height: "100%",
+		minHeight: "32px"
+	},
+	text: {},
+	largeText: {},
+	textEmpty: { color: theme.colors.textDisabled },
+	button: {
+		padding: theme.spacing(0, "xs"),
+		minHeight: "32px",
+		boxSizing: "border-box",
+		cursor: "text",
+		height: "100%",
+		width: "100%",
+		maxWidth: "100%",
+		justifyContent: "start",
+		textAlign: "start",
+		alignItems: "center",
+		backgroundColor: theme.colors.bgContainer,
+		borderColor: "transparent",
+		"&:hover, &:focus": {
+			borderColor: theme.colors.primary,
+			backgroundColor: theme.colors.bgContainer,
+			"& $icon": { visibility: "visible" }
+		},
+		"&:active": {
+			borderColor: theme.colors.text,
+			backgroundColor: "transparent",
+			"& $icon": { visibility: "visible" }
+		}
+	},
+	icon: {
+		cursor: "pointer",
+		visibility: "hidden",
+		alignSelf: "center"
+	},
+	iconVisible: { visibility: "visible" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };