@hitachivantara/uikit-react-core 5.87.3 → 5.89.0

package/dist/cjs/IconContainer/IconContainer.cjs

@@ -0,0 +1,81 @@
+"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(--icsize, 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: sizeProp = "S",
+    rotate,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvIconContainer", props);
+  const { cx, classes } = useClasses(classesProp);
+  const size = mapSizes(sizeProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cx(classes.root, className, {
+        [classes[size]]: size
+      }),
+      style: uikitReactUtils.mergeStyles(style, {
+        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/Input/Input.cjs

@@ -54,7 +54,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     id,
     name,
     value: valueProp,
-    defaultValue = "",
+    defaultValue,
     required,
     readOnly,
     disabled,
@@ -99,8 +99,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   const suggestionsRef = React.useRef(null);
   const [focused, setFocused] = React.useState(false);
   const isDirty = React.useRef(false);
-  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
-  const isEmptyValue = value == null || value === "";
+  const isEmptyValue = !inputRef.current?.value;
   const [validationState, setValidationState] = useControlled.useControlled(
     status,
     utils$1.validationStates.standBy
@@ -124,7 +123,6 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
-      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -145,8 +143,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     setValidationMessage,
     setValidationState,
     validation,
-    validationType,
-    value
+    validationType
   ]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && validations.hasBuiltInValidations(
     required,
@@ -200,7 +197,6 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   };
   const onChangeHandler = (event, newValue) => {
     isDirty.current = true;
-    setValue(newValue);
     onChange?.(event, newValue);
     if (canShowSuggestions) {
       suggestionHandler(newValue);
@@ -210,12 +206,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;
     setFocused(false);
     const inputValidity = performValidation();
-    onBlur?.(event, String(value), inputValidity);
+    onBlur?.(event, event.target.value, inputValidity);
   };
   const onFocusHandler = (event) => {
     setFocused(true);
     setValidationState(utils$1.validationStates.standBy);
-    onFocus?.(event, String(value));
+    onFocus?.(event, event.target.value);
   };
   const getSuggestions = (li) => {
     const listEl = document.getElementById(
@@ -232,13 +228,14 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     }
   };
   const onKeyDownHandler = (event) => {
+    const { value } = event.currentTarget;
     if (keyboardUtils.isKey(event, "ArrowDown") && hasSuggestions) {
       const li = getSuggestions(0);
       li?.focus();
     } else if (keyboardUtils.isKey(event, "Enter")) {
-      onEnter?.(event, String(value));
+      onEnter?.(event, value);
     }
-    onKeyDown?.(event, String(value));
+    onKeyDown?.(event, value);
   };
   const onContainerBlurHandler = (event) => {
     if (event.relatedTarget) {
@@ -248,8 +245,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
       }, 10);
     }
   };
-  const hasOnEnter = onEnter != null;
-  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== utils$1.validationStates.standBy);
+  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== utils$1.validationStates.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
   const handleClear = React.useCallback(
@@ -289,42 +285,27 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     elementId,
     cx
   ]);
-  const handleSearch = React.useCallback(
-    (event) => {
-      onEnter?.(event, String(value));
-    },
-    [onEnter, value]
-  );
   const searchButton = React.useMemo(() => {
-    const reallyShowIt = showSearchIcon && (isEmptyValue || hasOnEnter && validationState === utils$1.validationStates.standBy);
-    if (!reallyShowIt) {
-      return null;
-    }
+    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === utils$1.validationStates.standBy);
+    if (!reallyShowIt) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Adornment.HvAdornment,
       {
         className: classes.adornmentButton,
-        onClick: hasOnEnter ? handleSearch : void 0,
-        "aria-label": labels?.searchButtonLabel,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, {})
+        onClick: onEnter && ((evt) => onEnter?.(evt, inputRef.current?.value ?? "")),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, { title: labels.searchButtonLabel })
       }
     );
   }, [
     showSearchIcon,
     isEmptyValue,
-    hasOnEnter,
+    onEnter,
     validationState,
     classes.adornmentButton,
-    handleSearch,
-    labels?.searchButtonLabel
+    labels.searchButtonLabel
   ]);
-  const handleRevealPassword = React.useCallback(() => {
-    setRevealPassword(!revealPassword);
-  }, [revealPassword]);
   const revealPasswordButton = React.useMemo(() => {
-    if (!showRevealPasswordButton) {
-      return null;
-    }
+    if (!showRevealPasswordButton) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.HvTooltip,
       {
@@ -335,10 +316,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
           Adornment.HvAdornment,
           {
             className: classes.adornmentButton,
-            onClick: handleRevealPassword,
+            onClick: () => setRevealPassword((s) => !s),
             "aria-label": labels?.revealPasswordButtonLabel,
             "aria-controls": setId.setId(elementId, "input"),
-            icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {})
+            icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {}),
+            tabIndex: 0,
+            ...{ selected: revealPassword }
           }
         )
       }
@@ -350,28 +333,23 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     labels?.revealPasswordButtonClickToShowTooltip,
     labels?.revealPasswordButtonLabel,
     classes.adornmentButton,
-    handleRevealPassword,
     elementId
   ]);
   const validationIcon = React.useMemo(() => {
-    if (!showValidationIcon) {
-      return null;
-    }
-    if (!utils$1.isValid(validationState)) {
-      return null;
-    }
+    if (!showValidationIcon) return null;
+    if (!utils$1.isValid(validationState)) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color: "positive", className: classes.icon });
   }, [showValidationIcon, validationState, classes.icon]);
   const customIconEl = React.useMemo(
-    () => React.isValidElement(endAdornment) && React.cloneElement(endAdornment, {
+    () => React.isValidElement(endAdornment) ? React.cloneElement(endAdornment, {
       className: cx(endAdornment.props.className, classes.icon)
-    }),
+    }) : endAdornment,
     [classes.icon, endAdornment, cx]
   );
   const adornments = React.useMemo(() => {
     if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
       return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox, "aria-hidden": "true", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox, children: [
       clearButton,
       revealPasswordButton,
       searchButton,
@@ -435,7 +413,8 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
           {
             id: hasLabel || showClear || showRevealPasswordButton ? setId.setId(elementId, "input") : setId.setId(id, "input"),
             name,
-            value,
+            value: valueProp,
+            defaultValue,
             required,
             readOnly,
             disabled,
@@ -461,13 +440,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
               "aria-errormessage": errorMessageId,
               "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId.setId(elementId, "description") : void 0,
               "aria-controls": canShowSuggestions ? setId.setId(elementId, "suggestions") : void 0,
-              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(String(value));
+                  suggestionHandler(event.currentTarget.value);
                 }
               },
               onClick: (event) => {
@@ -476,7 +454,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
               },
               ...inputProps
             },
-            inputRef: forkedRef,
+            ref: forkedRef,
             endAdornment: adornments,
             ...others
           }

package/dist/cjs/Input/Input.styles.cjs

@@ -13,6 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
     display: "flex",
     flexDirection: "row",
     height: "30px",
+    alignItems: "center",
     justifyContent: "center",
     marginRight: 1
   },

package/dist/cjs/List/List.cjs

@@ -11,9 +11,9 @@ const List_styles = require("./List.styles.cjs");
 const useSelectableList = require("./useSelectableList.cjs");
 const utils = require("./utils.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
+const Radio = require("../Radio/Radio.cjs");
 const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
 const Link = require("../Link/Link.cjs");
-const Radio = require("../Radio/Radio.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const DEFAULT_LABELS = {

package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs

@@ -62,9 +62,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     "& svg": {
       boxShadow: "none !important",
       outline: "none !important"
-    },
-    "$disabled > svg *.color0": {
-      fill: uikitStyles.theme.colors.secondary_60
     }
   },
   withEndAdornment: {
@@ -72,9 +69,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     "& svg": {
       boxShadow: "none !important",
       outline: "none !important"
-    },
-    "$disabled > svg *.color0": {
-      fill: uikitStyles.theme.colors.secondary_60
     }
   }
 });

package/dist/cjs/Loading/Loading.cjs

@@ -6,7 +6,6 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const helpers = require("../utils/helpers.cjs");
 const Loading_styles = require("./Loading.styles.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
   const {
     color,
@@ -51,7 +50,7 @@ const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
           },
           e
         )) }),
-        label && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption1", className: classes.label, children: label })
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
       ]
     }
   );

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

@@ -40,7 +40,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
     ":nth-of-type(2)": { animationDelay: "0.22s" },
     ":nth-of-type(3)": { animationDelay: "0.44s" }
   },
-  label: {},
+  label: {
+    ...uikitStyles.theme.typography.caption1
+  },
   overlay: {},
   blur: {},
   hidden: { display: "none" },

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
-require("../BaseDropdown/BaseDropdown.cjs");
 const Input_styles = require("../Input/Input.styles.cjs");
 require("../Input/Input.cjs");
+const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
+require("../BaseDropdown/BaseDropdown.cjs");
 const hoverColor = uikitStyles.theme.colors.atmo3;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */

package/dist/cjs/Pagination/Select.cjs

@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Select_styles = require("./Select.styles.cjs");
-const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const Panel = require("../Panel/Panel.cjs");
 const SelectionList = require("../SelectionList/SelectionList.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const Option = ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { ...props });
 const HvSelect = (props) => {
   const {

package/dist/cjs/Snackbar/Snackbar.cjs

@@ -19,13 +19,13 @@ const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
     id,
     open = false,
     onClose,
-    label = "",
+    label,
     anchorOrigin = { vertical: "top", horizontal: "right" },
     autoHideDuration = 5e3,
-    variant = "default",
-    showIcon = false,
-    customIcon = null,
-    action = null,
+    variant,
+    showIcon,
+    customIcon,
+    action,
     actionCallback,
     // TODO - remove in v6
     onAction,
@@ -82,6 +82,7 @@ const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
           action,
           actionCallback,
           onAction,
+          onClose,
           ...snackbarContentProps
         }
       )

package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.cjs

@@ -2,14 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const SnackbarContent = require("@mui/material/SnackbarContent");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const iconVariant = require("../../utils/iconVariant.cjs");
-const setId = require("../../utils/setId.cjs");
+const Callout = require("../../utils/Callout.cjs");
 const SnackbarContent_styles = require("./SnackbarContent.styles.cjs");
-const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
+const isActionGeneric = (action) => action && typeof action === "object" && "id" in action && "label" in action;
 const HvSnackbarContent = React.forwardRef(function HvSnackbarContent2(props, ref) {
   const {
     className,
@@ -23,37 +19,33 @@ const HvSnackbarContent = React.forwardRef(function HvSnackbarContent2(props, re
     actionCallback,
     // TODO - remove in v6
     onAction,
+    onClose,
     ...others
   } = uikitReactUtils.useDefaultProps("HvSnackbarContent", props);
-  const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "base_dark");
-  const innerAction = React.isValidElement(action) ? action : [action];
   const { classes, cx } = SnackbarContent_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactUtils.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SnackbarContent__default.default,
+    Callout.HvCallout,
     {
       ref,
       id,
+      variant,
       classes: {
-        root: classes.root,
-        message: classes.message
+        root: cx(classes.root, classes[variant], className),
+        message: cx(classes.message, classes.messageSpan),
+        messageIcon: classes.iconVariant,
+        messageContent: classes.messageText,
+        action: classes.action
       },
-      className: cx(classes?.[variant], className),
-      message: /* @__PURE__ */ jsxRuntime.jsxs("div", { id: setId.setId(id, "message"), className: classes.messageSpan, children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconVariant, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.messageText, children: label }),
-        action && /* @__PURE__ */ jsxRuntime.jsx("div", { id: setId.setId(id, "action"), className: classes.action, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ActionsGeneric.HvActionsGeneric,
-          {
-            id,
-            variant: activeTheme?.snackbar.actionButtonVariant,
-            actions: innerAction,
-            actionsCallback: actionCallback,
-            onAction
-          }
-        ) })
-      ] }),
-      ...others
+      showIcon,
+      customIcon,
+      actions: isActionGeneric(action) ? [action] : action,
+      onClose,
+      onAction: (evt, action2) => {
+        onAction?.(evt, action2);
+        actionCallback?.(evt, id, action2);
+      },
+      ...others,
+      children: label
     }
   );
 });

package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs

@@ -2,61 +2,31 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const ActionsGeneric_styles = require("../../ActionsGeneric/ActionsGeneric.styles.cjs");
-const { useClasses, staticClasses } = uikitReactUtils.createClasses(
-  "HvSnackbar-Content",
-  {
-    root: {
-      width: "310px",
-      minHeight: "52px",
-      maxHeight: "92px",
-      padding: uikitStyles.theme.space.xs,
-      boxShadow: "none"
-    },
-    success: {
-      backgroundColor: uikitStyles.theme.colors.positive_20
-    },
-    error: {
-      backgroundColor: uikitStyles.theme.colors.negative_20
-    },
-    default: {
-      backgroundColor: uikitStyles.theme.colors.neutral_20
-    },
-    warning: {
-      backgroundColor: uikitStyles.theme.colors.warning_20
-    },
-    message: {
-      padding: 0,
-      width: "100%"
-    },
-    messageSpan: {
-      display: "flex",
-      alignItems: "center",
-      minHeight: "32px"
-    },
-    messageText: {
-      paddingLeft: uikitStyles.theme.space.xs,
-      color: uikitStyles.theme.colors.base_dark,
-      fontFamily: uikitStyles.theme.fontFamily.body,
-      maxHeight: "72px",
-      wordBreak: "break-word",
-      textWrap: "balance",
-      overflow: "hidden"
-    },
-    action: {
-      textAlign: "right",
-      paddingLeft: uikitStyles.theme.space.xs,
-      marginLeft: "auto",
-      [`& .${ActionsGeneric_styles.staticClasses.button}`]: {
-        borderColor: uikitStyles.theme.colors.base_dark,
-        color: uikitStyles.theme.colors.base_dark,
-        "&:hover": {
-          borderColor: uikitStyles.theme.colors.base_dark
-        }
-      }
-    },
-    iconVariant: {}
-  }
-);
+const name = "HvSnackbarContent";
+const { useClasses, staticClasses } = uikitReactUtils.createClasses(name, {
+  root: {
+    width: "310px",
+    minHeight: "52px",
+    maxHeight: "92px",
+    padding: uikitStyles.theme.space.xs
+  },
+  success: {},
+  error: {},
+  default: {},
+  warning: {},
+  message: {
+    padding: 0,
+    width: "100%",
+    minHeight: "32px"
+  },
+  action: {},
+  messageText: {
+    paddingLeft: uikitStyles.theme.space.xs,
+    maxHeight: "72px"
+  },
+  iconVariant: {},
+  /** @deprecated use `classes.message` instead */
+  messageSpan: {}
+});
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Table/TableBody/TableBody.cjs

@@ -10,7 +10,7 @@ const TableBody_styles = require("./TableBody.styles.cjs");
 const Focus = require("../../Focus/Focus.cjs");
 const tableSectionContext = {
   type: "body",
-  filterClassName: "_grid"
+  filterClassName: "_trgrid"
 };
 const defaultComponent = "tbody";
 const HvTableBody = React.forwardRef(
@@ -36,22 +36,21 @@ const HvTableBody = React.forwardRef(
         role: Component === defaultComponent ? null : "rowgroup",
         ...others,
         children: withNavigation ? React.Children.map(children, (element) => {
-          if (React.isValidElement(element)) {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Focus.HvFocus,
-              {
-                id: `my-id-${element.key}`,
-                rootRef: bodyRef,
-                strategy: "grid",
-                filterClass: tableSectionContext.filterClassName,
-                navigationJump: 1,
-                focusDisabled: false,
-                selected: element.props.selected,
-                children: element
-              },
-              `row-${element.key}`
-            );
-          }
+          if (!React.isValidElement(element)) return void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Focus.HvFocus,
+            {
+              id: `my-id-${element.key}`,
+              rootRef: bodyRef,
+              strategy: "grid",
+              filterClass: tableSectionContext.filterClassName,
+              navigationJump: 1,
+              focusDisabled: false,
+              selected: element.props.selected,
+              children: element
+            },
+            `row-${element.key}`
+          );
         }) : children
       }
     ) });

package/dist/cjs/{TableSection → Table/TableSection}/TableSection.cjs

@@ -3,9 +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 useUniqueId = require("../hooks/useUniqueId.cjs");
+const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const TableSection_styles = require("./TableSection.styles.cjs");
-const Section = require("../Section/Section.cjs");
+const Section = require("../../Section/Section.cjs");
 const HvTableSection = React.forwardRef(
   function HvTableSection2(props, ref) {
     const {