@hitachivantara/uikit-react-core 5.76.0 → 5.78.0

package/dist/cjs/Footer/Footer.cjs

@@ -11,7 +11,7 @@ const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const HvFooter = (props) => {
   const {
     name = "Hitachi Vantara",
-    copyright = `© Hitachi Vantara Corporation ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
+    copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
     links,
     classes: classesProp,
     className,

package/dist/cjs/Forms/Suggestions/Suggestions.cjs

@@ -5,6 +5,8 @@ const React = require("react");
 const ClickAwayListener = require("@mui/base/ClickAwayListener");
 const Popper = require("@mui/base/Popper");
 const utils = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const document = require("../../utils/document.cjs");
 const setId = require("../../utils/setId.cjs");
 const Suggestions_styles = require("./Suggestions.styles.cjs");
 const SelectionList = require("../../SelectionList/SelectionList.cjs");
@@ -16,6 +18,7 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
     className,
     classes: classesProp,
     expanded = false,
+    enablePortal = false,
     open: openProp,
     anchorEl,
     suggestionValues = [],
@@ -24,6 +27,7 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
     ...others
   } = props;
   const { classes, cx } = Suggestions_styles.useClasses(classesProp);
+  const { rootId } = uikitReactUtils.useTheme();
   const { elementId } = React.useContext(FormElementContext.HvFormElementContext);
   const localId = id ?? setId.setId(elementId, "suggestions");
   const ref = React.useRef(null);
@@ -49,10 +53,17 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             Popper.Popper,
             {
+              style: {
+                // @ts-ignore
+                "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
+              },
               open: openProp ?? isOpen,
-              disablePortal: true,
+              disablePortal: !enablePortal,
+              container: enablePortal ? document.getContainerElement(rootId) : void 0,
               anchorEl,
-              className: classes.popper,
+              className: cx(classes.popper, {
+                [classes.portal]: enablePortal
+              }),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 SelectionList.HvSelectionList,
                 {

package/dist/cjs/Forms/Suggestions/Suggestions.styles.cjs

@@ -11,11 +11,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSuggestio
     width: "100%"
   },
   popper: {
-    width: "100%",
+    width: "var(--popper-width)",
     position: "absolute",
-    transform: "translate3d(0, -1px, 0) !important",
-    zIndex: uikitStyles.theme.zIndices.tooltip
-  }
+    zIndex: uikitStyles.theme.zIndices.tooltip,
+    ":not($portal)": {
+      transform: "translate3d(0, -1px, 0) !important"
+    }
+  },
+  portal: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Input/Input.cjs

@@ -57,6 +57,8 @@ const HvInput = React.forwardRef((props, ref) => {
     required = false,
     readOnly = false,
     disabled = false,
+    enablePortal = false,
+    suggestOnFocus = false,
     label,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -249,11 +251,17 @@ const HvInput = React.forwardRef((props, ref) => {
   const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== validationStates.default.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
-  const handleClear = React.useCallback(() => {
-    setValidationState(validationStates.default.standBy);
-    changeInputValue(inputRef.current, "");
-    setTimeout(focusInput);
-  }, [setValidationState]);
+  const handleClear = React.useCallback(
+    (event) => {
+      setValidationState(validationStates.default.standBy);
+      changeInputValue(inputRef.current, "");
+      if (canShowSuggestions && suggestOnFocus) event.stopPropagation();
+      else {
+        setTimeout(focusInput);
+      }
+    },
+    [canShowSuggestions, setValidationState, suggestOnFocus]
+  );
   const clearButton = React.useMemo(() => {
     if (!showClear) {
       return null;
@@ -455,6 +463,16 @@ const HvInput = React.forwardRef((props, ref) => {
               ref: inputRef,
               // prevent browsers auto-fill/suggestions when we have our own
               autoComplete: canShowSuggestions ? "off" : void 0,
+              onFocus: (event) => {
+                inputProps.onFocus?.(event);
+                if (canShowSuggestions && suggestOnFocus) {
+                  suggestionHandler(value);
+                }
+              },
+              onClick: (event) => {
+                inputProps.onClick?.(event);
+                if (canShowSuggestions && suggestOnFocus) event.stopPropagation();
+              },
               ...inputProps
             },
             inputRef: forkedRef,
@@ -478,7 +496,8 @@ const HvInput = React.forwardRef((props, ref) => {
               onClose: suggestionClearHandler,
               onKeyDown: onSuggestionKeyDown,
               onSuggestionSelected: suggestionSelectedHandler,
-              suggestionValues
+              suggestionValues,
+              enablePortal
             }
           )
         ] }),

package/dist/cjs/Loading/Loading.styles.cjs

@@ -12,13 +12,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
   },
   barContainer: {
     display: "flex",
+    alignItems: "center",
     justifyContent: "space-around",
     ":has($regular)": {
       width: 30,
       height: 30
     },
     ":has($small)": {
-      "--scaleY": "0.223",
+      "--height": "40%",
       width: 18,
       height: 18
     }
@@ -29,9 +30,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
     animation: "loading 1s ease-in-out infinite",
     // TODO: make this the default when it has better support
     width: "round(up, 0.11em, 2px)",
+    height: "100%",
     "@keyframes loading": {
       "50%": {
-        transform: "scale(1, var(--scaleY, 0.6))",
+        height: "var(--height, 60%)",
         backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.secondary})`
       }
     },

package/dist/cjs/MultiButton/MultiButton.cjs

@@ -3,11 +3,9 @@ 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 setId = require("../utils/setId.cjs");
 const MultiButton_styles = require("./MultiButton.styles.cjs");
 const HvMultiButton = (props) => {
   const {
-    id,
     className,
     children,
     classes: classesProp,
@@ -18,13 +16,7 @@ const HvMultiButton = (props) => {
     split,
     ...others
   } = uikitReactUtils.useDefaultProps("HvMultiButton", props);
-  const { classes, cx, css } = MultiButton_styles.useClasses(classesProp);
-  const [color, type] = React.useMemo(() => {
-    const result = variant.split(/(?=[A-Z])/);
-    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
-      return [];
-    return result.map((x) => x.toLowerCase());
-  }, [variant]);
+  const { classes, cx } = MultiButton_styles.useClasses(classesProp);
   const buttons = React.useMemo(() => {
     const btns = [];
     React.Children.forEach(children, (child) => {
@@ -37,7 +29,6 @@ const HvMultiButton = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      id,
       className: cx(
         classes.root,
         {
@@ -53,35 +44,17 @@ const HvMultiButton = (props) => {
       ...others,
       children: buttons.map((child, index) => {
         const childIsSelected = !!child.props.selected;
-        const btnKey = setId.setId([id, index]);
-        return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-          React.cloneElement(child, {
-            variant,
-            disabled: disabled || child.props.disabled,
-            size,
-            className: cx(child.props.className, classes.button, {
-              [classes.firstButton]: index === 0,
-              [classes.lastButton]: index === buttons.length - 1,
-              [classes.selected]: childIsSelected
-            })
-          }),
-          split && index < buttons.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cx(
-                classes.splitContainer,
-                color && css(MultiButton_styles.getSplitContainerColor(color, type, disabled)),
-                size && css(MultiButton_styles.getSplitContainerHeight(size)),
-                {
-                  [classes.splitDisabled]: disabled
-                },
-                classes[variant]
-                // TODO - remove in v6
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.split })
-            }
-          )
-        ] }, btnKey);
+        return React.cloneElement(child, {
+          key: index,
+          variant,
+          disabled: disabled || child.props.disabled,
+          size,
+          className: cx(child.props.className, classes.button, {
+            [classes.firstButton]: index === 0,
+            [classes.lastButton]: index === buttons.length - 1,
+            [classes.selected]: childIsSelected
+          })
+        });
       })
     }
   );

package/dist/cjs/MultiButton/MultiButton.styles.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Button_styles = require("../Button/Button.styles.cjs");
 const DropDownMenu_styles = require("../DropDownMenu/DropDownMenu.styles.cjs");
 require("../DropDownMenu/DropDownMenu.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButton", {
@@ -98,44 +97,40 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   splitGroup: {
     width: "fit-content",
     background: uikitStyles.theme.colors.atmo1,
-    // Button
-    "& button$button": {
-      "&$firstButton": {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-        "& + div$splitContainer": {
-          marginLeft: -1
-        }
-      },
-      "&$lastButton": {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
-      }
-    },
-    // Dropdown Menu
-    [`& .${DropDownMenu_styles.staticClasses.root}`]: {
-      "&:has($firstButton)": {
-        "& + div$splitContainer": {
-          marginRight: -1
-        }
+    // HvButton, HvDropDownMenu
+    "& button$button:not($firstButton), & $button:not($firstButton) button": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      "&:not([aria-controls])": {
+        borderLeftWidth: 0
       }
     },
-    "& $button$firstButton > button": {
-      marginRight: -1.5,
+    // HvButton, HvDropDownMenu
+    "& button$button:not($lastButton), & $button:not($lastButton) button": {
       borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    },
-    "& $button$lastButton > button": {
-      marginLeft: -1.5,
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
+      borderBottomRightRadius: 0,
+      "&:not([aria-controls])": {
+        borderRightWidth: 0
+      },
+      "&::after": {
+        content: "''",
+        position: "absolute",
+        inset: "4px -1px 4px auto",
+        width: 1,
+        zIndex: 1,
+        height: "auto",
+        backgroundColor: "currentcolor"
+      }
     },
+    // HvDropDownMenu
     [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
       zIndex: 2
     }
   },
   splitGroupDisabled: { background: uikitStyles.theme.colors.atmo3 },
-  button: {},
+  button: {
+    position: "relative"
+  },
   selected: {},
   vertical: {
     flexDirection: "column",
@@ -197,23 +192,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       }
     }
   },
-  split: {
-    width: 1,
-    height: "100%",
-    background: "currentColor"
-  },
-  splitContainer: {
-    display: "flex",
-    justifyContent: "center",
-    zIndex: 1,
-    width: 2,
-    paddingTop: 4,
-    paddingBottom: 4,
-    height: "calc(32px - 2px)"
-  },
-  splitDisabled: {
-    color: uikitStyles.theme.colors.secondary_60
-  },
   firstButton: {},
   lastButton: {},
   // TODO - review the need for these classes in v6
@@ -224,14 +202,5 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   secondarySubtle: {},
   secondaryGhost: {}
 });
-const getSplitContainerColor = (color, type, disabled) => ({
-  color: Button_styles.getColoringStyle(color, type).color,
-  backgroundColor: disabled ? uikitStyles.theme.colors.atmo3 : type === "subtle" ? uikitStyles.theme.colors.atmo1 : "transparent"
-});
-const getSplitContainerHeight = (size) => ({
-  height: `calc(${Button_styles.getSizeStyles(size).height} - 2px)`
-});
-exports.getSplitContainerColor = getSplitContainerColor;
-exports.getSplitContainerHeight = getSplitContainerHeight;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Select/Select.styles.cjs

@@ -28,6 +28,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
     zIndex: uikitStyles.theme.zIndices.popover
   },
   panel: {
+    maxHeight: 400,
     border: `1px solid ${uikitStyles.theme.colors.secondary}`,
     marginTop: -1,
     marginBottom: -1

package/dist/cjs/Table/TableCell/TableCell.styles.cjs

@@ -7,6 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   /** Styles applied to the component root class. */
   root: {
     verticalAlign: "inherit",
+    alignContent: "inherit",
     textAlign: "left",
     padding: `calc(${uikitStyles.theme.space.xs} - 2px ) ${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.xs} - 3px ) ${uikitStyles.theme.spacing(4)}`,
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
@@ -15,6 +16,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   head: {
     height: 52,
     verticalAlign: "top",
+    alignContent: "start",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderTop: "1px solid transparent",
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
@@ -99,6 +101,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   /** Styles applied to the cell when its variant is list and actions. */
   variantListactions: {
     verticalAlign: "middle",
+    alignContent: "center",
     borderLeft: "none",
     paddingLeft: "0",
     textAlign: "center",

package/dist/cjs/Table/TableHeader/TableHeader.styles.cjs

@@ -8,6 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     "--cell-height": "32px",
     height: "var(--cell-height)",
     verticalAlign: "inherit",
+    alignContent: "inherit",
     textAlign: "left",
     padding: uikitStyles.theme.spacing(0, 1, 0, 4),
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
@@ -15,6 +16,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   head: {
     paddingTop: 8,
     verticalAlign: "top",
+    alignContent: "start",
     ...uikitStyles.theme.typography.label,
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     backgroundColor: uikitStyles.theme.colors.atmo1,
@@ -32,6 +34,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     },
     "&$sortable": {
       verticalAlign: "initial",
+      alignContent: "initial",
       paddingTop: 0,
       paddingLeft: 0,
       cursor: "pointer",

package/dist/cjs/Table/TableRow/TableRow.styles.cjs

@@ -9,6 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
     color: "inherit",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     verticalAlign: "middle",
+    alignContent: "center",
     outline: 0
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */

package/dist/cjs/Table/hooks/useRowExpand.cjs

@@ -15,7 +15,7 @@ const CellWithExpandButton = ({
   labels: labelsProp
 }) => {
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  const { onClick } = row.getToggleRowExpandedProps();
+  const rowProps = row.getToggleRowExpandedProps?.();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Button.HvButton,
@@ -23,8 +23,8 @@ const CellWithExpandButton = ({
         icon: true,
         "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
         "aria-expanded": row.isExpanded,
-        onClick,
-        children: row.isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {})
+        onClick: rowProps?.onClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { style: { rotate: row.isExpanded ? "180deg" : void 0 } })
       }
     ),
     cell?.value && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", component: "span", children: cell.value })

package/dist/cjs/Tooltip/Tooltip.styles.cjs

@@ -6,13 +6,9 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip", {
   root: {},
   tooltip: {},
-  tooltipMulti: {},
   popper: {
-    [`& .${Tooltip.tooltipClasses.popper}`]: {
-      opacity: 1
-    },
+    // TODO: move this to `tooltip` in v6 and make class always be applied
     [`& .${Tooltip.tooltipClasses.tooltip}`]: {
-      fontFamily: uikitStyles.theme.fontFamily.body,
       ...uikitStyles.theme.typography.body,
       display: "flex",
       width: "fit-content",
@@ -56,19 +52,29 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip",
       padding: uikitStyles.theme.space.sm
     },
     "& $tooltip": {
-      padding: "15px 20px",
+      padding: uikitStyles.theme.space.sm,
       borderRadius: uikitStyles.theme.radii.round,
       "& p": {
         wordBreak: "break-word"
       }
     }
   },
+  // TODO: remove in v6
+  /** @deprecated */
+  tooltipMulti: {},
+  /** @deprecated */
   title: {},
+  /** @deprecated */
   valuesContainer: {},
+  /** @deprecated */
   values: {},
+  /** @deprecated */
   color: {},
+  /** @deprecated */
   separatorColor: {},
+  /** @deprecated */
   separator: {},
+  /** @deprecated */
   valueWrapper: {}
 });
 exports.staticClasses = staticClasses;

package/dist/esm/Footer/Footer.js

@@ -8,7 +8,7 @@ import { HvTypography } from "../Typography/Typography.js";
 const HvFooter = (props) => {
   const {
     name = "Hitachi Vantara",
-    copyright = `© Hitachi Vantara Corporation ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
+    copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
     links,
     classes: classesProp,
     className,

package/dist/esm/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../src/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  /** Footer name. */\n  name?: React.ReactNode;\n  /** Footer copyright. */\n  copyright?: React.ReactNode;\n  /** Footer links. */\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara Corporation ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, { [classes.small]: isSmDown }, className)}\n      {...others}\n    >\n      <HvTypography variant=\"label\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA6Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ,OAAO;AAAA,IACP,YAAY,kCAAiC,oBAAI,KAAK,GAAE,YAAa,CAAA;AAAA,IACrE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,WAAW;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,KAAK,GAAG,SAAS,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAa,SAAQ,SAAQ,WAAW,QAAQ,MAC9C,UACH,MAAA;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,UAAA,oBAAC,cAAa,EAAA,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UACtD,SAAS,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,UAC5C;AAAA,QAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Footer.js","sources":["../../../src/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  /** Footer name. */\n  name?: React.ReactNode;\n  /** Footer copyright. */\n  copyright?: React.ReactNode;\n  /** Footer links. */\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara LLC ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, { [classes.small]: isSmDown }, className)}\n      {...others}\n    >\n      <HvTypography variant=\"label\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA6Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ,OAAO;AAAA,IACP,YAAY,0BAAyB,oBAAI,KAAK,GAAE,YAAa,CAAA;AAAA,IAC7D;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,WAAW;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,KAAK,GAAG,SAAS,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAa,SAAQ,SAAQ,WAAW,QAAQ,MAC9C,UACH,MAAA;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,UAAA,oBAAC,cAAa,EAAA,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UACtD,SAAS,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,UAC5C;AAAA,QAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Forms/Suggestions/Suggestions.js

@@ -3,6 +3,8 @@ import { forwardRef, useContext, useRef, useState, useEffect } from "react";
 import { ClickAwayListener } from "@mui/base/ClickAwayListener";
 import { Popper } from "@mui/base/Popper";
 import { useForkRef } from "@mui/material/utils";
+import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { getContainerElement } from "../../utils/document.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./Suggestions.styles.js";
 import { staticClasses } from "./Suggestions.styles.js";
@@ -15,6 +17,7 @@ const HvSuggestions = forwardRef((props, extRef) => {
     className,
     classes: classesProp,
     expanded = false,
+    enablePortal = false,
     open: openProp,
     anchorEl,
     suggestionValues = [],
@@ -23,6 +26,7 @@ const HvSuggestions = forwardRef((props, extRef) => {
     ...others
   } = props;
   const { classes, cx } = useClasses(classesProp);
+  const { rootId } = useTheme();
   const { elementId } = useContext(HvFormElementContext);
   const localId = id ?? setId(elementId, "suggestions");
   const ref = useRef(null);
@@ -48,10 +52,17 @@ const HvSuggestions = forwardRef((props, extRef) => {
           children: /* @__PURE__ */ jsx(
             Popper,
             {
+              style: {
+                // @ts-ignore
+                "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
+              },
               open: openProp ?? isOpen,
-              disablePortal: true,
+              disablePortal: !enablePortal,
+              container: enablePortal ? getContainerElement(rootId) : void 0,
               anchorEl,
-              className: classes.popper,
+              className: cx(classes.popper, {
+                [classes.portal]: enablePortal
+              }),
               children: /* @__PURE__ */ jsx(
                 HvSelectionList,
                 {

package/dist/esm/Forms/Suggestions/Suggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper as MuiPopper } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /** Whether suggestions is visible. @deprecated use `open` instead */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    expanded = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={localId}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <MuiPopper\n          open={openProp ?? isOpen}\n          disablePortal\n          anchorEl={anchorEl}\n          className={classes.popper}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(localId, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </MuiPopper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":["MuiPopper"],"mappings":";;;;;;;;;;;AA4CO,MAAM,gBAAgB,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AACrD,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAACA;AAAAA,YAAA;AAAA,cACC,MAAM,YAAY;AAAA,cAClB,eAAa;AAAA,cACb;AAAA,cACA,WAAW,QAAQ;AAAA,cAEnB,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,SAAS,MAAM;AAAA,kBACzB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,SADS,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={localId}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(localId, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsDO,MAAM,gBAAgB,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,WAAW;AAEnB,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AACrD,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cAED,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,SAAS,MAAM;AAAA,kBACzB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,SADS,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/Forms/Suggestions/Suggestions.styles.js

@@ -9,11 +9,14 @@ const { staticClasses, useClasses } = createClasses("HvSuggestions", {
     width: "100%"
   },
   popper: {
-    width: "100%",
+    width: "var(--popper-width)",
     position: "absolute",
-    transform: "translate3d(0, -1px, 0) !important",
-    zIndex: theme.zIndices.tooltip
-  }
+    zIndex: theme.zIndices.tooltip,
+    ":not($portal)": {
+      transform: "translate3d(0, -1px, 0) !important"
+    }
+  },
+  portal: {}
 });
 export {
   staticClasses,

package/dist/esm/Forms/Suggestions/Suggestions.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.styles.js","sources":["../../../../src/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSuggestions\", {\n  root: { position: \"relative\" },\n  list: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    padding: theme.space.xs,\n    width: \"100%\",\n  },\n  popper: {\n    width: \"100%\",\n    position: \"absolute\",\n    transform: \"translate3d(0, -1px, 0) !important\",\n    zIndex: theme.zIndices.tooltip,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,UAAU,WAAW;AAAA,EAC7B,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,SAAS,MAAM,MAAM;AAAA,IACrB,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,QAAQ,MAAM,SAAS;AAAA,EACzB;AACF,CAAC;"}
+{"version":3,"file":"Suggestions.styles.js","sources":["../../../../src/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSuggestions\", {\n  root: { position: \"relative\" },\n  list: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    padding: theme.space.xs,\n    width: \"100%\",\n  },\n  popper: {\n    width: \"var(--popper-width)\",\n    position: \"absolute\",\n    zIndex: theme.zIndices.tooltip,\n    \":not($portal)\": {\n      transform: \"translate3d(0, -1px, 0) !important\",\n    },\n  },\n  portal: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,UAAU,WAAW;AAAA,EAC7B,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,SAAS,MAAM,MAAM;AAAA,IACrB,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB;AAAA,MACf,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AACX,CAAC;"}