@hitachivantara/uikit-react-core 5.46.2 → 5.47.0

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

@@ -9,27 +9,24 @@ const Focus = require("../../Focus/Focus.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className) => {
-  if (element != null) {
-    return React__default.default.cloneElement(element, {
-      className,
-      checked: !!selected,
-      disabled,
-      onChange: (evt) => onClick?.(evt)
-    });
-  }
-  return null;
+  if (element == null)
+    return null;
+  return React__default.default.cloneElement(element, {
+    className,
+    checked: !!selected,
+    disabled,
+    onChange: onClick
+  });
 };
 const applyClassNameToElement = (element, className) => {
-  if (element != null) {
-    return React__default.default.cloneElement(element, {
-      className
-    });
-  }
-  return null;
+  if (element == null)
+    return null;
+  return React__default.default.cloneElement(element, {
+    className
+  });
 };
 const HvListItem = React.forwardRef((props, ref) => {
   const {
-    id,
     classes: classesProp,
     className,
     role,
@@ -53,14 +50,14 @@ const HvListItem = React.forwardRef((props, ref) => {
     disableGutters: disableGuttersContext,
     interactive: interactiveContext
   } = React.useContext(ListContext.default);
-  const condensed = condensedProp != null ? condensedProp : condensedContext;
-  const disableGutters = disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;
-  const interactive = interactiveProp != null ? interactiveProp : interactiveContext;
-  const handleOnClick = React.useCallback(
+  const condensed = condensedProp ?? condensedContext;
+  const disableGutters = disableGuttersProp ?? disableGuttersContext;
+  const interactive = interactiveProp ?? interactiveContext;
+  const handleClick = React.useCallback(
     (evt) => {
-      if (!disabled) {
-        onClick?.(evt);
-      }
+      if (disabled)
+        return;
+      onClick?.(evt);
     },
     [disabled, onClick]
   );
@@ -69,7 +66,7 @@ const HvListItem = React.forwardRef((props, ref) => {
       startAdornment,
       selected,
       disabled,
-      handleOnClick,
+      handleClick,
       cx(
         classes.startAdornment,
         { [classes.disabled]: disabled },
@@ -81,7 +78,7 @@ const HvListItem = React.forwardRef((props, ref) => {
       classes?.startAdornment,
       classes?.disabled,
       disabled,
-      handleOnClick,
+      handleClick,
       selected,
       startAdornment
     ]
@@ -103,11 +100,10 @@ const HvListItem = React.forwardRef((props, ref) => {
   } : {};
   const listItem = (
     // For later: this should only have an onClick event if interactive and has the appropriate role.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
-        id,
         ref,
         role,
         value,
@@ -117,16 +113,15 @@ const HvListItem = React.forwardRef((props, ref) => {
             [classes.gutters]: !disableGutters,
             [classes.condensed]: condensed,
             [classes.interactive]: interactive,
-            [classes.selected]: !!selected,
-            [classes.disabled]: !!disabled,
+            [classes.selected]: selected || props["aria-selected"],
+            [classes.disabled]: disabled || props["aria-disabled"],
             [classes.withStartAdornment]: startAdornment != null,
             [classes.withEndAdornment]: endAdornment != null
           },
           className
         ),
-        onClick: handleOnClick,
-        onKeyDown: () => {
-        },
+        tabIndex: interactive ? void 0 : tabIndex,
+        onClick: handleClick,
         ...roleOptionAriaProps,
         ...others,
         children: [

package/dist/cjs/ListContainer/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFocus } from \"../../Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["React","forwardRef","useDefaultProps","useClasses","useContext","HvListContext","useCallback","useMemo","jsxs","jsx","HvFocus"],"mappings":"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"}
+{"version":3,"file":"ListItem.cjs","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFocus } from \"../../Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element: any,\n  selected: boolean | undefined,\n  disabled: boolean | undefined,\n  onClick: React.MouseEventHandler<HTMLLIElement>,\n  className?: string\n) => {\n  if (element == null) return null;\n\n  return React.cloneElement(element, {\n    className,\n    checked: !!selected,\n    disabled,\n    onChange: onClick,\n  });\n};\n\nconst applyClassNameToElement = (element, className?: string) => {\n  if (element == null) return null;\n\n  return React.cloneElement(element, {\n    className,\n  });\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp ?? condensedContext;\n  const disableGutters = disableGuttersProp ?? disableGuttersContext;\n  const interactive = interactiveProp ?? interactiveContext;\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLLIElement>>(\n    (evt) => {\n      if (disabled) return;\n      onClick?.(evt);\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n    <li\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: selected || props[\"aria-selected\"],\n          [classes.disabled]: disabled || props[\"aria-disabled\"],\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      tabIndex={interactive ? undefined : tabIndex}\n      onClick={handleClick}\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["React","forwardRef","useDefaultProps","useClasses","useContext","HvListContext","useCallback","useMemo","jsxs","jsx","HvFocus"],"mappings":"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"}

package/dist/cjs/Panel/Panel.cjs

@@ -1,19 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const Panel_styles = require("./Panel.styles.cjs");
-const HvPanel = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    children,
-    ...others
-  } = useDefaultProps.useDefaultProps("HvPanel", props);
-  const { classes, cx } = Panel_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: cx(classes.root, className), ...others, children });
-};
+const HvPanel = React.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      classes: classesProp,
+      children,
+      ...others
+    } = useDefaultProps.useDefaultProps("HvPanel", props);
+    const { classes, cx } = Panel_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+  }
+);
 exports.panelClasses = Panel_styles.staticClasses;
 exports.HvPanel = HvPanel;
 //# sourceMappingURL=Panel.cjs.map

package/dist/cjs/Panel/Panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.cjs","sources":["../../../src/Panel/Panel.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as panelClasses };\n\nexport type HvPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPanelProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n}\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = (props: HvPanelProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPanel\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsx"],"mappings":";;;;;AAsBa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAIC,wBAAW,WAAW;AAG5C,SAAAC,2BAAA,IAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,SACH,CAAA;AAEJ;;;"}
+{"version":3,"file":"Panel.cjs","sources":["../../../src/Panel/Panel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as panelClasses };\n\nexport type HvPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPanelProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n}\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = forwardRef<HTMLDivElement, HvPanelProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvPanel\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)} {...others}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","jsx"],"mappings":";;;;;;AAwBO,MAAM,UAAUA,MAAA;AAAA,EACrB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,WAAW,KAAK;AACpC,UAAM,EAAE,SAAS,GAAG,IAAIC,wBAAW,WAAW;AAG5C,WAAAC,2BAAA,IAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAAA,EAEJ;AACF;;;"}

package/dist/cjs/Section/Section.cjs

@@ -22,6 +22,7 @@ const HvSection = React.forwardRef(
       actions,
       onToggle,
       expandButtonProps,
+      raisedHeader,
       children,
       ...others
     } = useDefaultProps.useDefaultProps("HvSection", props);
@@ -41,31 +42,42 @@ const HvSection = React.forwardRef(
         className: cx(classes.root, className),
         ...others,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.header, children: [
-            expandable && /* @__PURE__ */ jsxRuntime.jsx(
-              Button.HvButton,
-              {
-                icon: true,
-                onClick: (event) => {
-                  setIsOpen((o) => !o);
-                  onToggle?.(event, !isOpen);
-                },
-                "aria-expanded": isOpen,
-                "aria-controls": contentId,
-                "aria-label": isOpen ? "Collapse" : "Expand",
-                ...expandButtonProps,
-                children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {})
-              }
-            ),
-            title,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
-          ] }),
+          (title || actions || expandable) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cx(classes.header, {
+                [classes.raisedHeader]: raisedHeader && isOpen
+              }),
+              children: [
+                expandable && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.HvButton,
+                  {
+                    icon: true,
+                    onClick: (event) => {
+                      setIsOpen((o) => !o);
+                      onToggle?.(event, !isOpen);
+                    },
+                    "aria-expanded": isOpen,
+                    "aria-controls": contentId,
+                    "aria-label": isOpen ? "Collapse" : "Expand",
+                    ...expandButtonProps,
+                    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {})
+                  }
+                ),
+                title,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               id: contentId,
               hidden: !isOpen,
-              className: cx(classes.content, { [classes.hidden]: !showContent }),
+              className: cx(classes.content, {
+                [classes.hidden]: !showContent,
+                [classes.spaceTop]: !(title || actions || expandable)
+              }),
               children
             }
           )

package/dist/cjs/Section/Section.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Section.cjs","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const elementId = useUniqueId(id, \"hvSection\");\n    const contentId = setId(elementId, \"content\");\n\n    const showContent = expandable ? !!isOpen : true;\n\n    return (\n      <div\n        ref={ref}\n        id={elementId}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        <div className={classes.header}>\n          {expandable && (\n            <HvButton\n              icon\n              onClick={(event) => {\n                setIsOpen((o) => !o);\n                onToggle?.(event, !isOpen);\n              }}\n              aria-expanded={isOpen}\n              aria-controls={contentId}\n              aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n              {...expandButtonProps}\n            >\n              {isOpen ? <Up /> : <Down />}\n            </HvButton>\n          )}\n          {title}\n          <div className={classes.actions}>{actions}</div>\n        </div>\n        <div\n          id={contentId}\n          hidden={!isOpen}\n          className={cx(classes.content, { [classes.hidden]: !showContent })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useControlled","useUniqueId","setId","jsxs","jsx","HvButton","Up","Down"],"mappings":";;;;;;;;;;;AA2CO,MAAM,YAAYA,MAAA;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,aAAa,KAAK;AAEtC,UAAM,EAAE,SAAS,GAAG,IAAIC,0BAAW,WAAW;AAExC,UAAA,CAAC,QAAQ,SAAS,IAAIC,cAAA;AAAA,MAC1B;AAAA,MACA,QAAQ,eAAe;AAAA,IAAA;AAGnB,UAAA,YAAYC,YAAAA,YAAY,IAAI,WAAW;AACvC,UAAA,YAAYC,MAAAA,MAAM,WAAW,SAAS;AAE5C,UAAM,cAAc,aAAa,CAAC,CAAC,SAAS;AAG1C,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAACA,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,QACrB,UAAA;AAAA,YACC,cAAAC,2BAAA;AAAA,cAACC,OAAA;AAAA,cAAA;AAAA,gBACC,MAAI;AAAA,gBACJ,SAAS,CAAC,UAAU;AACR,4BAAA,CAAC,MAAM,CAAC,CAAC;AACR,6BAAA,OAAO,CAAC,MAAM;AAAA,gBAC3B;AAAA,gBACA,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACf,cAAY,SAAS,aAAa;AAAA,gBACjC,GAAG;AAAA,gBAEH,UAAS,SAAAD,2BAAAA,IAACE,gBAAG,IAAA,CAAA,CAAA,mCAAMC,gBAAK,MAAA,EAAA;AAAA,cAAA;AAAA,YAC3B;AAAA,YAED;AAAA,YACAH,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,UAAA,GAC5C;AAAA,UACAA,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,aAAa;AAAA,cAEhE;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;;;"}
+{"version":3,"file":"Section.cjs","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** Determines whether or not the header has a shadow on the bottom border. */\n  raisedHeader?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      raisedHeader,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const elementId = useUniqueId(id, \"hvSection\");\n    const contentId = setId(elementId, \"content\");\n\n    const showContent = expandable ? !!isOpen : true;\n\n    return (\n      <div\n        ref={ref}\n        id={elementId}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(title || actions || expandable) && (\n          <div\n            className={cx(classes.header, {\n              [classes.raisedHeader]: raisedHeader && isOpen,\n            })}\n          >\n            {expandable && (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  setIsOpen((o) => !o);\n                  onToggle?.(event, !isOpen);\n                }}\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n                {...expandButtonProps}\n              >\n                {isOpen ? <Up /> : <Down />}\n              </HvButton>\n            )}\n            {title}\n            <div className={classes.actions}>{actions}</div>\n          </div>\n        )}\n        <div\n          id={contentId}\n          hidden={!isOpen}\n          className={cx(classes.content, {\n            [classes.hidden]: !showContent,\n            [classes.spaceTop]: !(title || actions || expandable),\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useControlled","useUniqueId","setId","jsxs","jsx","HvButton","Up","Down"],"mappings":";;;;;;;;;;;AA6CO,MAAM,YAAYA,MAAA;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,aAAa,KAAK;AAEtC,UAAM,EAAE,SAAS,GAAG,IAAIC,0BAAW,WAAW;AAExC,UAAA,CAAC,QAAQ,SAAS,IAAIC,cAAA;AAAA,MAC1B;AAAA,MACA,QAAQ,eAAe;AAAA,IAAA;AAGnB,UAAA,YAAYC,YAAAA,YAAY,IAAI,WAAW;AACvC,UAAA,YAAYC,MAAAA,MAAM,WAAW,SAAS;AAE5C,UAAM,cAAc,aAAa,CAAC,CAAC,SAAS;AAG1C,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,SAAS,WAAW,eACpBA,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,cAAA,CACzC;AAAA,cAEA,UAAA;AAAA,gBACC,cAAAC,2BAAA;AAAA,kBAACC,OAAA;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,SAAS,CAAC,UAAU;AACR,gCAAA,CAAC,MAAM,CAAC,CAAC;AACR,iCAAA,OAAO,CAAC,MAAM;AAAA,oBAC3B;AAAA,oBACA,iBAAe;AAAA,oBACf,iBAAe;AAAA,oBACf,cAAY,SAAS,aAAa;AAAA,oBACjC,GAAG;AAAA,oBAEH,UAAS,SAAAD,2BAAAA,IAACE,gBAAG,IAAA,CAAA,CAAA,mCAAMC,gBAAK,MAAA,EAAA;AAAA,kBAAA;AAAA,gBAC3B;AAAA,gBAED;AAAA,gBACAH,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5C;AAAA,UAEFA,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,gBACnB,CAAC,QAAQ,QAAQ,GAAG,EAAE,SAAS,WAAW;AAAA,cAAA,CAC3C;AAAA,cAEA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;;;"}

package/dist/cjs/Section/Section.styles.cjs

@@ -7,7 +7,6 @@ const { staticClasses, useClasses } = classes.createClasses("HvSection", {
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    padding: uikitStyles.theme.space.sm,
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderRadius: uikitStyles.theme.radii.round,
     border: `1px solid ${uikitStyles.theme.colors.atmo4}`
@@ -17,16 +16,27 @@ const { staticClasses, useClasses } = classes.createClasses("HvSection", {
     display: "flex",
     alignItems: "center",
     position: "relative",
-    minHeight: uikitStyles.theme.sizes.sm
+    minHeight: uikitStyles.theme.sizes.sm,
+    padding: uikitStyles.theme.space.sm
   },
   content: {
-    marginTop: uikitStyles.theme.space.sm
+    padding: uikitStyles.theme.spacing(0, "sm", "sm", "sm")
+  },
+  spaceTop: {
+    paddingTop: uikitStyles.theme.space.sm
   },
   actions: {
     display: "flex",
     gap: uikitStyles.theme.space.xs,
     position: "absolute",
     right: 0
+  },
+  raisedHeader: {
+    zIndex: 1,
+    boxShadow: uikitStyles.theme.colors.shadow,
+    "+ div": {
+      paddingTop: uikitStyles.theme.space.sm
+    }
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Section/Section.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Section.styles.cjs","sources":["../../../src/Section/Section.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSection\", {\n  root: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  hidden: { height: 0, display: \"none\" },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    minHeight: theme.sizes.sm,\n  },\n  content: {\n    marginTop: theme.space.sm,\n  },\n  actions: {\n    display: \"flex\",\n    gap: theme.space.xs,\n    position: \"absolute\",\n    right: 0,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAASC,YAAAA,MAAM,MAAM;AAAA,IACrB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAWA,YAAAA,MAAM,MAAM;AAAA,EACzB;AAAA,EACA,SAAS;AAAA,IACP,WAAWA,YAAAA,MAAM,MAAM;AAAA,EACzB;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,KAAKA,YAAAA,MAAM,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF,CAAC;;;"}
+{"version":3,"file":"Section.styles.cjs","sources":["../../../src/Section/Section.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSection\", {\n  root: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  hidden: { height: 0, display: \"none\" },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    minHeight: theme.sizes.sm,\n    padding: theme.space.sm,\n  },\n  content: {\n    padding: theme.spacing(0, \"sm\", \"sm\", \"sm\"),\n  },\n  spaceTop: {\n    paddingTop: theme.space.sm,\n  },\n  actions: {\n    display: \"flex\",\n    gap: theme.space.xs,\n    position: \"absolute\",\n    right: 0,\n  },\n  raisedHeader: {\n    zIndex: 1,\n    boxShadow: theme.colors.shadow,\n    \"+ div\": {\n      paddingTop: theme.space.sm,\n    },\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,IAC9B,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAWA,YAAAA,MAAM,MAAM;AAAA,IACvB,SAASA,YAAAA,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACP,SAASA,YAAM,MAAA,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAC5C;AAAA,EACA,UAAU;AAAA,IACR,YAAYA,YAAAA,MAAM,MAAM;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,KAAKA,YAAAA,MAAM,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,WAAWA,YAAAA,MAAM,OAAO;AAAA,IACxB,SAAS;AAAA,MACP,YAAYA,YAAAA,MAAM,MAAM;AAAA,IAC1B;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/TableSection/TableSection.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const TableSection_styles = require("./TableSection.styles.cjs");
+const Section = require("../Section/Section.cjs");
+const HvTableSection = React.forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      classes: classesProp,
+      children,
+      ...others
+    } = useDefaultProps.useDefaultProps("HvTableSection", props);
+    const { classes } = TableSection_styles.useClasses(classesProp);
+    const elementId = useUniqueId.useUniqueId(id, "hvTableSection");
+    return /* @__PURE__ */ jsxRuntime.jsx(Section.HvSection, { id: elementId, ref, classes, ...others, children });
+  }
+);
+exports.tableSectionClasses = TableSection_styles.staticClasses;
+exports.HvTableSection = HvTableSection;
+//# sourceMappingURL=TableSection.cjs.map

package/dist/cjs/TableSection/TableSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection.cjs","sources":["../../../src/TableSection/TableSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { staticClasses, useClasses } from \"./TableSection.styles\";\nimport { HvSection, HvSectionProps } from \"../Section\";\n\nexport { staticClasses as tableSectionClasses };\n\nexport type HvTableSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableSectionProps extends HvSectionProps {}\n\n/**\n * The `TableSection` component is a wrapper for the `Section` component that applies\n * specific stylings for tables that follow the latest DS specifications.\n */\nexport const HvTableSection = forwardRef<HTMLDivElement, HvTableSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvTableSection\", props);\n\n    const { classes } = useClasses(classesProp);\n    const elementId = useUniqueId(id, \"hvTableSection\");\n\n    return (\n      <HvSection id={elementId} ref={ref} classes={classes} {...others}>\n        {children}\n      </HvSection>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useUniqueId","jsx","HvSection"],"mappings":";;;;;;;;AAkBO,MAAM,iBAAiBA,MAAA;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,kBAAkB,KAAK;AAE3C,UAAM,EAAE,QAAA,IAAYC,oBAAA,WAAW,WAAW;AACpC,UAAA,YAAYC,YAAAA,YAAY,IAAI,gBAAgB;AAGhD,WAAAC,+BAACC,QAAAA,aAAU,IAAI,WAAW,KAAU,SAAmB,GAAG,QACvD,SACH,CAAA;AAAA,EAEJ;AACF;;;"}

package/dist/cjs/TableSection/TableSection.styles.cjs

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../utils/classes.cjs");
+const Section_styles = require("../Section/Section.styles.cjs");
+require("../Section/Section.cjs");
+const TableContainer_styles = require("../Table/TableContainer/TableContainer.styles.cjs");
+require("../Table/TableContainer/TableContainer.cjs");
+const TableHeader_styles = require("../Table/TableHeader/TableHeader.styles.cjs");
+require("../Table/TableHeader/TableHeader.cjs");
+const TableCell_styles = require("../Table/TableCell/TableCell.styles.cjs");
+require("../Table/TableCell/TableCell.cjs");
+const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
+require("@emotion/react/jsx-runtime");
+const Pagination_styles = require("../Pagination/Pagination.styles.cjs");
+require("react");
+require("@mui/material/Hidden");
+require("@hitachivantara/uikit-react-icons");
+const { staticClasses, useClasses } = classes.createClasses("HvTableSection", {
+  root: {
+    padding: 0
+  },
+  header: {
+    padding: uikitStyles.theme.spacing("xs", "xs", "xs", "sm"),
+    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+    [`&.${Section_styles.staticClasses.raisedHeader}`]: {
+      "+ div": {
+        paddingTop: `0`
+      }
+    }
+  },
+  actions: {
+    right: uikitStyles.theme.space.sm
+  },
+  content: {
+    marginTop: 0,
+    padding: 0,
+    [`&&`]: {
+      paddingTop: 0
+    },
+    [`& .${TableContainer_styles.staticClasses.root}`]: {
+      paddingBottom: 0,
+      borderRadius: `${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round} 0 0`
+    },
+    [`& .${TableHeader_styles.staticClasses.head}`]: {
+      backgroundColor: uikitStyles.theme.colors.atmo2,
+      borderBottomColor: uikitStyles.theme.colors.atmo3,
+      [`&.${TableHeader_styles.staticClasses.variantCheckbox}`]: {
+        borderRight: "none"
+      }
+    },
+    [`& .${TableCell_styles.staticClasses.root}`]: {
+      borderBottomColor: uikitStyles.theme.colors.atmo3
+    },
+    [`& .${TableCell_styles.staticClasses.variantCheckbox}`]: {
+      borderRight: "none"
+    },
+    [`& .${BulkActions_styles.staticClasses.root}`]: {
+      marginBottom: 0,
+      border: "none",
+      borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+      padding: uikitStyles.theme.spacing("xs", "sm"),
+      borderRadius: `${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round} 0 0`
+    },
+    [`& .${Pagination_styles.staticClasses.root}`]: {
+      margin: 0,
+      backgroundColor: uikitStyles.theme.colors.atmo2,
+      padding: uikitStyles.theme.space.xs,
+      borderRadius: `0 0 ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`
+    },
+    [`& .${Pagination_styles.staticClasses.pageSizeOptions}`]: {
+      left: uikitStyles.theme.space.sm
+    }
+  },
+  hidden: {},
+  raisedHeader: {},
+  spaceTop: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=TableSection.styles.cjs.map

package/dist/cjs/TableSection/TableSection.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection.styles.cjs","sources":["../../../src/TableSection/TableSection.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { bulkActionsClasses } from \"../BulkActions\";\nimport { paginationClasses } from \"../Pagination\";\nimport { sectionClasses } from \"../Section\";\n\nimport { tableCellClasses } from \"../Table/TableCell\";\nimport { tableContainerClasses } from \"../Table/TableContainer\";\nimport { tableHeaderClasses } from \"../Table/TableHeader\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableSection\", {\n  root: {\n    padding: 0,\n  },\n  header: {\n    padding: theme.spacing(\"xs\", \"xs\", \"xs\", \"sm\"),\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n    [`&.${sectionClasses.raisedHeader}`]: {\n      \"+ div\": {\n        paddingTop: `0`,\n      },\n    },\n  },\n  actions: {\n    right: theme.space.sm,\n  },\n  content: {\n    marginTop: 0,\n    padding: 0,\n    [`&&`]: {\n      paddingTop: 0,\n    },\n    [`& .${tableContainerClasses.root}`]: {\n      paddingBottom: 0,\n      borderRadius: `${theme.radii.round} ${theme.radii.round} 0 0`,\n    },\n    [`& .${tableHeaderClasses.head}`]: {\n      backgroundColor: theme.colors.atmo2,\n      borderBottomColor: theme.colors.atmo3,\n      [`&.${tableHeaderClasses.variantCheckbox}`]: {\n        borderRight: \"none\",\n      },\n    },\n    [`& .${tableCellClasses.root}`]: {\n      borderBottomColor: theme.colors.atmo3,\n    },\n    [`& .${tableCellClasses.variantCheckbox}`]: {\n      borderRight: \"none\",\n    },\n    [`& .${bulkActionsClasses.root}`]: {\n      marginBottom: 0,\n      border: \"none\",\n      borderBottom: `1px solid ${theme.colors.atmo3}`,\n      padding: theme.spacing(\"xs\", \"sm\"),\n      borderRadius: `${theme.radii.round} ${theme.radii.round} 0 0`,\n    },\n    [`& .${paginationClasses.root}`]: {\n      margin: 0,\n      backgroundColor: theme.colors.atmo2,\n      padding: theme.space.xs,\n      borderRadius: `0 0 ${theme.radii.round} ${theme.radii.round}`,\n    },\n    [`& .${paginationClasses.pageSizeOptions}`]: {\n      left: theme.space.sm,\n    },\n  },\n  hidden: {},\n  raisedHeader: {},\n  spaceTop: {},\n});\n"],"names":["createClasses","theme","sectionClasses","tableContainerClasses","tableHeaderClasses","tableCellClasses","bulkActionsClasses","paginationClasses"],"mappings":";;;;;;;;;;;;;;;;;;AAYO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,SAASC,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,IAC7C,cAAc,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,IAC7C,CAAC,KAAKC,6BAAe,YAAY,EAAE,GAAG;AAAA,MACpC,SAAS;AAAA,QACP,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,OAAOD,YAAAA,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,CAAC,IAAI,GAAG;AAAA,MACN,YAAY;AAAA,IACd;AAAA,IACA,CAAC,MAAME,oCAAsB,IAAI,EAAE,GAAG;AAAA,MACpC,eAAe;AAAA,MACf,cAAc,GAAGF,YAAM,MAAA,MAAM,KAAK,IAAIA,kBAAM,MAAM,KAAK;AAAA,IACzD;AAAA,IACA,CAAC,MAAMG,iCAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,iBAAiBH,YAAAA,MAAM,OAAO;AAAA,MAC9B,mBAAmBA,YAAAA,MAAM,OAAO;AAAA,MAChC,CAAC,KAAKG,iCAAmB,eAAe,EAAE,GAAG;AAAA,QAC3C,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,MAAMC,+BAAiB,IAAI,EAAE,GAAG;AAAA,MAC/B,mBAAmBJ,YAAAA,MAAM,OAAO;AAAA,IAClC;AAAA,IACA,CAAC,MAAMI,+BAAiB,eAAe,EAAE,GAAG;AAAA,MAC1C,aAAa;AAAA,IACf;AAAA,IACA,CAAC,MAAMC,iCAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,cAAc,aAAaL,YAAM,MAAA,OAAO,KAAK;AAAA,MAC7C,SAASA,YAAA,MAAM,QAAQ,MAAM,IAAI;AAAA,MACjC,cAAc,GAAGA,YAAM,MAAA,MAAM,KAAK,IAAIA,kBAAM,MAAM,KAAK;AAAA,IACzD;AAAA,IACA,CAAC,MAAMM,gCAAkB,IAAI,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,iBAAiBN,YAAAA,MAAM,OAAO;AAAA,MAC9B,SAASA,YAAAA,MAAM,MAAM;AAAA,MACrB,cAAc,OAAOA,YAAAA,MAAM,MAAM,KAAK,IAAIA,YAAA,MAAM,MAAM,KAAK;AAAA,IAC7D;AAAA,IACA,CAAC,MAAMM,gCAAkB,eAAe,EAAE,GAAG;AAAA,MAC3C,MAAMN,YAAAA,MAAM,MAAM;AAAA,IACpB;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/index.cjs

@@ -302,6 +302,8 @@ const TreeView$1 = require("./VerticalNavigation/TreeView/TreeView.cjs");
 const TreeViewItem_styles = require("./VerticalNavigation/TreeView/TreeViewItem.styles.cjs");
 const TreeViewItem = require("./VerticalNavigation/TreeView/TreeViewItem.cjs");
 const VerticalNavigationContext = require("./VerticalNavigation/VerticalNavigationContext.cjs");
+const TableSection_styles = require("./TableSection/TableSection.styles.cjs");
+const TableSection = require("./TableSection/TableSection.cjs");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 Object.defineProperty(exports, "ds3", {
   enumerable: true,
@@ -673,6 +675,8 @@ exports.HvVerticalNavigationTreeView = TreeView$1.HvVerticalNavigationTreeView;
 exports.treeViewItemClasses = TreeViewItem_styles.staticClasses;
 exports.HvVerticalNavigationTreeViewItem = TreeViewItem.HvVerticalNavigationTreeViewItem;
 exports.VerticalNavigationContext = VerticalNavigationContext.VerticalNavigationContext;
+exports.tableSectionClasses = TableSection_styles.staticClasses;
+exports.HvTableSection = TableSection.HvTableSection;
 Object.defineProperty(exports, "EmotionContext", {
   enumerable: true,
   get: () => uikitReactShared.EmotionContext

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/ListContainer/ListItem/ListItem.js

@@ -6,27 +6,24 @@ import { staticClasses } from "./ListItem.styles.js";
 import HvListContext from "../ListContext/ListContext.js";
 import { HvFocus } from "../../Focus/Focus.js";
 const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className) => {
-  if (element != null) {
-    return React__default.cloneElement(element, {
-      className,
-      checked: !!selected,
-      disabled,
-      onChange: (evt) => onClick?.(evt)
-    });
-  }
-  return null;
+  if (element == null)
+    return null;
+  return React__default.cloneElement(element, {
+    className,
+    checked: !!selected,
+    disabled,
+    onChange: onClick
+  });
 };
 const applyClassNameToElement = (element, className) => {
-  if (element != null) {
-    return React__default.cloneElement(element, {
-      className
-    });
-  }
-  return null;
+  if (element == null)
+    return null;
+  return React__default.cloneElement(element, {
+    className
+  });
 };
 const HvListItem = forwardRef((props, ref) => {
   const {
-    id,
     classes: classesProp,
     className,
     role,
@@ -50,14 +47,14 @@ const HvListItem = forwardRef((props, ref) => {
     disableGutters: disableGuttersContext,
     interactive: interactiveContext
   } = useContext(HvListContext);
-  const condensed = condensedProp != null ? condensedProp : condensedContext;
-  const disableGutters = disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;
-  const interactive = interactiveProp != null ? interactiveProp : interactiveContext;
-  const handleOnClick = useCallback(
+  const condensed = condensedProp ?? condensedContext;
+  const disableGutters = disableGuttersProp ?? disableGuttersContext;
+  const interactive = interactiveProp ?? interactiveContext;
+  const handleClick = useCallback(
     (evt) => {
-      if (!disabled) {
-        onClick?.(evt);
-      }
+      if (disabled)
+        return;
+      onClick?.(evt);
     },
     [disabled, onClick]
   );
@@ -66,7 +63,7 @@ const HvListItem = forwardRef((props, ref) => {
       startAdornment,
       selected,
       disabled,
-      handleOnClick,
+      handleClick,
       cx(
         classes.startAdornment,
         { [classes.disabled]: disabled },
@@ -78,7 +75,7 @@ const HvListItem = forwardRef((props, ref) => {
       classes?.startAdornment,
       classes?.disabled,
       disabled,
-      handleOnClick,
+      handleClick,
       selected,
       startAdornment
     ]
@@ -100,11 +97,10 @@ const HvListItem = forwardRef((props, ref) => {
   } : {};
   const listItem = (
     // For later: this should only have an onClick event if interactive and has the appropriate role.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     /* @__PURE__ */ jsxs(
       "li",
       {
-        id,
         ref,
         role,
         value,
@@ -114,16 +110,15 @@ const HvListItem = forwardRef((props, ref) => {
             [classes.gutters]: !disableGutters,
             [classes.condensed]: condensed,
             [classes.interactive]: interactive,
-            [classes.selected]: !!selected,
-            [classes.disabled]: !!disabled,
+            [classes.selected]: selected || props["aria-selected"],
+            [classes.disabled]: disabled || props["aria-disabled"],
             [classes.withStartAdornment]: startAdornment != null,
             [classes.withEndAdornment]: endAdornment != null
           },
           className
         ),
-        onClick: handleOnClick,
-        onKeyDown: () => {
-        },
+        tabIndex: interactive ? void 0 : tabIndex,
+        onClick: handleClick,
         ...roleOptionAriaProps,
         ...others,
         children: [

package/dist/esm/ListContainer/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFocus } from \"../../Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFocus } from \"../../Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element: any,\n  selected: boolean | undefined,\n  disabled: boolean | undefined,\n  onClick: React.MouseEventHandler<HTMLLIElement>,\n  className?: string\n) => {\n  if (element == null) return null;\n\n  return React.cloneElement(element, {\n    className,\n    checked: !!selected,\n    disabled,\n    onChange: onClick,\n  });\n};\n\nconst applyClassNameToElement = (element, className?: string) => {\n  if (element == null) return null;\n\n  return React.cloneElement(element, {\n    className,\n  });\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp ?? condensedContext;\n  const disableGutters = disableGuttersProp ?? disableGuttersContext;\n  const interactive = interactiveProp ?? interactiveContext;\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLLIElement>>(\n    (evt) => {\n      if (disabled) return;\n      onClick?.(evt);\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n    <li\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: selected || props[\"aria-selected\"],\n          [classes.disabled]: disabled || props[\"aria-disabled\"],\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      tabIndex={interactive ? undefined : tabIndex}\n      onClick={handleClick}\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["React"],"mappings":"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"}

package/dist/esm/Panel/Panel.js

@@ -1,18 +1,20 @@
 import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./Panel.styles.js";
 import { staticClasses } from "./Panel.styles.js";
-const HvPanel = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    children,
-    ...others
-  } = useDefaultProps("HvPanel", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children });
-};
+const HvPanel = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      classes: classesProp,
+      children,
+      ...others
+    } = useDefaultProps("HvPanel", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+  }
+);
 export {
   HvPanel,
   staticClasses as panelClasses

package/dist/esm/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/Panel/Panel.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as panelClasses };\n\nexport type HvPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPanelProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n}\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = (props: HvPanelProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPanel\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAsBa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Panel.js","sources":["../../../src/Panel/Panel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as panelClasses };\n\nexport type HvPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPanelProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n}\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = forwardRef<HTMLDivElement, HvPanelProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvPanel\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)} {...others}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,UAAU;AAAA,EACrB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Section/Section.js

@@ -21,6 +21,7 @@ const HvSection = forwardRef(
       actions,
       onToggle,
       expandButtonProps,
+      raisedHeader,
       children,
       ...others
     } = useDefaultProps("HvSection", props);
@@ -40,31 +41,42 @@ const HvSection = forwardRef(
         className: cx(classes.root, className),
         ...others,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
-            expandable && /* @__PURE__ */ jsx(
-              HvButton,
-              {
-                icon: true,
-                onClick: (event) => {
-                  setIsOpen((o) => !o);
-                  onToggle?.(event, !isOpen);
-                },
-                "aria-expanded": isOpen,
-                "aria-controls": contentId,
-                "aria-label": isOpen ? "Collapse" : "Expand",
-                ...expandButtonProps,
-                children: isOpen ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {})
-              }
-            ),
-            title,
-            /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions })
-          ] }),
+          (title || actions || expandable) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(classes.header, {
+                [classes.raisedHeader]: raisedHeader && isOpen
+              }),
+              children: [
+                expandable && /* @__PURE__ */ jsx(
+                  HvButton,
+                  {
+                    icon: true,
+                    onClick: (event) => {
+                      setIsOpen((o) => !o);
+                      onToggle?.(event, !isOpen);
+                    },
+                    "aria-expanded": isOpen,
+                    "aria-controls": contentId,
+                    "aria-label": isOpen ? "Collapse" : "Expand",
+                    ...expandButtonProps,
+                    children: isOpen ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {})
+                  }
+                ),
+                title,
+                /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
               id: contentId,
               hidden: !isOpen,
-              className: cx(classes.content, { [classes.hidden]: !showContent }),
+              className: cx(classes.content, {
+                [classes.hidden]: !showContent,
+                [classes.spaceTop]: !(title || actions || expandable)
+              }),
               children
             }
           )

package/dist/esm/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const elementId = useUniqueId(id, \"hvSection\");\n    const contentId = setId(elementId, \"content\");\n\n    const showContent = expandable ? !!isOpen : true;\n\n    return (\n      <div\n        ref={ref}\n        id={elementId}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        <div className={classes.header}>\n          {expandable && (\n            <HvButton\n              icon\n              onClick={(event) => {\n                setIsOpen((o) => !o);\n                onToggle?.(event, !isOpen);\n              }}\n              aria-expanded={isOpen}\n              aria-controls={contentId}\n              aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n              {...expandButtonProps}\n            >\n              {isOpen ? <Up /> : <Down />}\n            </HvButton>\n          )}\n          {title}\n          <div className={classes.actions}>{actions}</div>\n        </div>\n        <div\n          id={contentId}\n          hidden={!isOpen}\n          className={cx(classes.content, { [classes.hidden]: !showContent })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA2CO,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,CAAC,QAAQ,SAAS,IAAI;AAAA,MAC1B;AAAA,MACA,QAAQ,eAAe;AAAA,IAAA;AAGnB,UAAA,YAAY,YAAY,IAAI,WAAW;AACvC,UAAA,YAAY,MAAM,WAAW,SAAS;AAE5C,UAAM,cAAc,aAAa,CAAC,CAAC,SAAS;AAG1C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,QACrB,UAAA;AAAA,YACC,cAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAI;AAAA,gBACJ,SAAS,CAAC,UAAU;AACR,4BAAA,CAAC,MAAM,CAAC,CAAC;AACR,6BAAA,OAAO,CAAC,MAAM;AAAA,gBAC3B;AAAA,gBACA,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACf,cAAY,SAAS,aAAa;AAAA,gBACjC,GAAG;AAAA,gBAEH,UAAS,SAAA,oBAAC,IAAG,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,cAAA;AAAA,YAC3B;AAAA,YAED;AAAA,YACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,UAAA,GAC5C;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,aAAa;AAAA,cAEhE;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** Determines whether or not the header has a shadow on the bottom border. */\n  raisedHeader?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      raisedHeader,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const elementId = useUniqueId(id, \"hvSection\");\n    const contentId = setId(elementId, \"content\");\n\n    const showContent = expandable ? !!isOpen : true;\n\n    return (\n      <div\n        ref={ref}\n        id={elementId}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(title || actions || expandable) && (\n          <div\n            className={cx(classes.header, {\n              [classes.raisedHeader]: raisedHeader && isOpen,\n            })}\n          >\n            {expandable && (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  setIsOpen((o) => !o);\n                  onToggle?.(event, !isOpen);\n                }}\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n                {...expandButtonProps}\n              >\n                {isOpen ? <Up /> : <Down />}\n              </HvButton>\n            )}\n            {title}\n            <div className={classes.actions}>{actions}</div>\n          </div>\n        )}\n        <div\n          id={contentId}\n          hidden={!isOpen}\n          className={cx(classes.content, {\n            [classes.hidden]: !showContent,\n            [classes.spaceTop]: !(title || actions || expandable),\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA6CO,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,CAAC,QAAQ,SAAS,IAAI;AAAA,MAC1B;AAAA,MACA,QAAQ,eAAe;AAAA,IAAA;AAGnB,UAAA,YAAY,YAAY,IAAI,WAAW;AACvC,UAAA,YAAY,MAAM,WAAW,SAAS;AAE5C,UAAM,cAAc,aAAa,CAAC,CAAC,SAAS;AAG1C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,SAAS,WAAW,eACpB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,cAAA,CACzC;AAAA,cAEA,UAAA;AAAA,gBACC,cAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,SAAS,CAAC,UAAU;AACR,gCAAA,CAAC,MAAM,CAAC,CAAC;AACR,iCAAA,OAAO,CAAC,MAAM;AAAA,oBAC3B;AAAA,oBACA,iBAAe;AAAA,oBACf,iBAAe;AAAA,oBACf,cAAY,SAAS,aAAa;AAAA,oBACjC,GAAG;AAAA,oBAEH,UAAS,SAAA,oBAAC,IAAG,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,kBAAA;AAAA,gBAC3B;AAAA,gBAED;AAAA,gBACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5C;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,gBACnB,CAAC,QAAQ,QAAQ,GAAG,EAAE,SAAS,WAAW;AAAA,cAAA,CAC3C;AAAA,cAEA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/esm/Section/Section.styles.js

@@ -5,7 +5,6 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    padding: theme.space.sm,
     backgroundColor: theme.colors.atmo1,
     borderRadius: theme.radii.round,
     border: `1px solid ${theme.colors.atmo4}`
@@ -15,16 +14,27 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
     display: "flex",
     alignItems: "center",
     position: "relative",
-    minHeight: theme.sizes.sm
+    minHeight: theme.sizes.sm,
+    padding: theme.space.sm
   },
   content: {
-    marginTop: theme.space.sm
+    padding: theme.spacing(0, "sm", "sm", "sm")
+  },
+  spaceTop: {
+    paddingTop: theme.space.sm
   },
   actions: {
     display: "flex",
     gap: theme.space.xs,
     position: "absolute",
     right: 0
+  },
+  raisedHeader: {
+    zIndex: 1,
+    boxShadow: theme.colors.shadow,
+    "+ div": {
+      paddingTop: theme.space.sm
+    }
   }
 });
 export {

package/dist/esm/Section/Section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.styles.js","sources":["../../../src/Section/Section.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSection\", {\n  root: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  hidden: { height: 0, display: \"none\" },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    minHeight: theme.sizes.sm,\n  },\n  content: {\n    marginTop: theme.space.sm,\n  },\n  actions: {\n    display: \"flex\",\n    gap: theme.space.xs,\n    position: \"absolute\",\n    right: 0,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,EACzB;AAAA,EACA,SAAS;AAAA,IACP,WAAW,MAAM,MAAM;AAAA,EACzB;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF,CAAC;"}
+{"version":3,"file":"Section.styles.js","sources":["../../../src/Section/Section.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSection\", {\n  root: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  hidden: { height: 0, display: \"none\" },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    minHeight: theme.sizes.sm,\n    padding: theme.space.sm,\n  },\n  content: {\n    padding: theme.spacing(0, \"sm\", \"sm\", \"sm\"),\n  },\n  spaceTop: {\n    paddingTop: theme.space.sm,\n  },\n  actions: {\n    display: \"flex\",\n    gap: theme.space.xs,\n    position: \"absolute\",\n    right: 0,\n  },\n  raisedHeader: {\n    zIndex: 1,\n    boxShadow: theme.colors.shadow,\n    \"+ div\": {\n      paddingTop: theme.space.sm,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAC5C;AAAA,EACA,UAAU;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW,MAAM,OAAO;AAAA,IACxB,SAAS;AAAA,MACP,YAAY,MAAM,MAAM;AAAA,IAC1B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/TableSection/TableSection.js

@@ -0,0 +1,25 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useClasses } from "./TableSection.styles.js";
+import { staticClasses } from "./TableSection.styles.js";
+import { HvSection } from "../Section/Section.js";
+const HvTableSection = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      classes: classesProp,
+      children,
+      ...others
+    } = useDefaultProps("HvTableSection", props);
+    const { classes } = useClasses(classesProp);
+    const elementId = useUniqueId(id, "hvTableSection");
+    return /* @__PURE__ */ jsx(HvSection, { id: elementId, ref, classes, ...others, children });
+  }
+);
+export {
+  HvTableSection,
+  staticClasses as tableSectionClasses
+};
+//# sourceMappingURL=TableSection.js.map

package/dist/esm/TableSection/TableSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection.js","sources":["../../../src/TableSection/TableSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { staticClasses, useClasses } from \"./TableSection.styles\";\nimport { HvSection, HvSectionProps } from \"../Section\";\n\nexport { staticClasses as tableSectionClasses };\n\nexport type HvTableSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableSectionProps extends HvSectionProps {}\n\n/**\n * The `TableSection` component is a wrapper for the `Section` component that applies\n * specific stylings for tables that follow the latest DS specifications.\n */\nexport const HvTableSection = forwardRef<HTMLDivElement, HvTableSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvTableSection\", props);\n\n    const { classes } = useClasses(classesProp);\n    const elementId = useUniqueId(id, \"hvTableSection\");\n\n    return (\n      <HvSection id={elementId} ref={ref} classes={classes} {...others}>\n        {children}\n      </HvSection>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,YAAY,YAAY,IAAI,gBAAgB;AAGhD,WAAA,oBAAC,aAAU,IAAI,WAAW,KAAU,SAAmB,GAAG,QACvD,SACH,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/TableSection/TableSection.styles.js

@@ -0,0 +1,81 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+import { staticClasses as staticClasses$1 } from "../Section/Section.styles.js";
+import "../Section/Section.js";
+import { staticClasses as staticClasses$2 } from "../Table/TableContainer/TableContainer.styles.js";
+import "../Table/TableContainer/TableContainer.js";
+import { staticClasses as staticClasses$3 } from "../Table/TableHeader/TableHeader.styles.js";
+import "../Table/TableHeader/TableHeader.js";
+import { staticClasses as staticClasses$4 } from "../Table/TableCell/TableCell.styles.js";
+import "../Table/TableCell/TableCell.js";
+import { staticClasses as staticClasses$5 } from "../BulkActions/BulkActions.styles.js";
+import "@emotion/react/jsx-runtime";
+import { staticClasses as staticClasses$6 } from "../Pagination/Pagination.styles.js";
+import "react";
+import "@mui/material/Hidden";
+import "@hitachivantara/uikit-react-icons";
+const { staticClasses, useClasses } = createClasses("HvTableSection", {
+  root: {
+    padding: 0
+  },
+  header: {
+    padding: theme.spacing("xs", "xs", "xs", "sm"),
+    borderBottom: `1px solid ${theme.colors.atmo3}`,
+    [`&.${staticClasses$1.raisedHeader}`]: {
+      "+ div": {
+        paddingTop: `0`
+      }
+    }
+  },
+  actions: {
+    right: theme.space.sm
+  },
+  content: {
+    marginTop: 0,
+    padding: 0,
+    [`&&`]: {
+      paddingTop: 0
+    },
+    [`& .${staticClasses$2.root}`]: {
+      paddingBottom: 0,
+      borderRadius: `${theme.radii.round} ${theme.radii.round} 0 0`
+    },
+    [`& .${staticClasses$3.head}`]: {
+      backgroundColor: theme.colors.atmo2,
+      borderBottomColor: theme.colors.atmo3,
+      [`&.${staticClasses$3.variantCheckbox}`]: {
+        borderRight: "none"
+      }
+    },
+    [`& .${staticClasses$4.root}`]: {
+      borderBottomColor: theme.colors.atmo3
+    },
+    [`& .${staticClasses$4.variantCheckbox}`]: {
+      borderRight: "none"
+    },
+    [`& .${staticClasses$5.root}`]: {
+      marginBottom: 0,
+      border: "none",
+      borderBottom: `1px solid ${theme.colors.atmo3}`,
+      padding: theme.spacing("xs", "sm"),
+      borderRadius: `${theme.radii.round} ${theme.radii.round} 0 0`
+    },
+    [`& .${staticClasses$6.root}`]: {
+      margin: 0,
+      backgroundColor: theme.colors.atmo2,
+      padding: theme.space.xs,
+      borderRadius: `0 0 ${theme.radii.round} ${theme.radii.round}`
+    },
+    [`& .${staticClasses$6.pageSizeOptions}`]: {
+      left: theme.space.sm
+    }
+  },
+  hidden: {},
+  raisedHeader: {},
+  spaceTop: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TableSection.styles.js.map

package/dist/esm/TableSection/TableSection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection.styles.js","sources":["../../../src/TableSection/TableSection.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { bulkActionsClasses } from \"../BulkActions\";\nimport { paginationClasses } from \"../Pagination\";\nimport { sectionClasses } from \"../Section\";\n\nimport { tableCellClasses } from \"../Table/TableCell\";\nimport { tableContainerClasses } from \"../Table/TableContainer\";\nimport { tableHeaderClasses } from \"../Table/TableHeader\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableSection\", {\n  root: {\n    padding: 0,\n  },\n  header: {\n    padding: theme.spacing(\"xs\", \"xs\", \"xs\", \"sm\"),\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n    [`&.${sectionClasses.raisedHeader}`]: {\n      \"+ div\": {\n        paddingTop: `0`,\n      },\n    },\n  },\n  actions: {\n    right: theme.space.sm,\n  },\n  content: {\n    marginTop: 0,\n    padding: 0,\n    [`&&`]: {\n      paddingTop: 0,\n    },\n    [`& .${tableContainerClasses.root}`]: {\n      paddingBottom: 0,\n      borderRadius: `${theme.radii.round} ${theme.radii.round} 0 0`,\n    },\n    [`& .${tableHeaderClasses.head}`]: {\n      backgroundColor: theme.colors.atmo2,\n      borderBottomColor: theme.colors.atmo3,\n      [`&.${tableHeaderClasses.variantCheckbox}`]: {\n        borderRight: \"none\",\n      },\n    },\n    [`& .${tableCellClasses.root}`]: {\n      borderBottomColor: theme.colors.atmo3,\n    },\n    [`& .${tableCellClasses.variantCheckbox}`]: {\n      borderRight: \"none\",\n    },\n    [`& .${bulkActionsClasses.root}`]: {\n      marginBottom: 0,\n      border: \"none\",\n      borderBottom: `1px solid ${theme.colors.atmo3}`,\n      padding: theme.spacing(\"xs\", \"sm\"),\n      borderRadius: `${theme.radii.round} ${theme.radii.round} 0 0`,\n    },\n    [`& .${paginationClasses.root}`]: {\n      margin: 0,\n      backgroundColor: theme.colors.atmo2,\n      padding: theme.space.xs,\n      borderRadius: `0 0 ${theme.radii.round} ${theme.radii.round}`,\n    },\n    [`& .${paginationClasses.pageSizeOptions}`]: {\n      left: theme.space.sm,\n    },\n  },\n  hidden: {},\n  raisedHeader: {},\n  spaceTop: {},\n});\n"],"names":["sectionClasses","tableContainerClasses","tableHeaderClasses","tableCellClasses","bulkActionsClasses","paginationClasses"],"mappings":";;;;;;;;;;;;;;;;AAYO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,IAC7C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC7C,CAAC,KAAKA,gBAAe,YAAY,EAAE,GAAG;AAAA,MACpC,SAAS;AAAA,QACP,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,OAAO,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,CAAC,IAAI,GAAG;AAAA,MACN,YAAY;AAAA,IACd;AAAA,IACA,CAAC,MAAMC,gBAAsB,IAAI,EAAE,GAAG;AAAA,MACpC,eAAe;AAAA,MACf,cAAc,GAAG,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IACzD;AAAA,IACA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB,MAAM,OAAO;AAAA,MAChC,CAAC,KAAKA,gBAAmB,eAAe,EAAE,GAAG;AAAA,QAC3C,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,MAAMC,gBAAiB,IAAI,EAAE,GAAG;AAAA,MAC/B,mBAAmB,MAAM,OAAO;AAAA,IAClC;AAAA,IACA,CAAC,MAAMA,gBAAiB,eAAe,EAAE,GAAG;AAAA,MAC1C,aAAa;AAAA,IACf;AAAA,IACA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,MAC7C,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,MACjC,cAAc,GAAG,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IACzD;AAAA,IACA,CAAC,MAAMC,gBAAkB,IAAI,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS,MAAM,MAAM;AAAA,MACrB,cAAc,OAAO,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IAC7D;AAAA,IACA,CAAC,MAAMA,gBAAkB,eAAe,EAAE,GAAG;AAAA,MAC3C,MAAM,MAAM,MAAM;AAAA,IACpB;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/index.js

@@ -300,6 +300,8 @@ import { HvVerticalNavigationTreeView } from "./VerticalNavigation/TreeView/Tree
 import { staticClasses as staticClasses116 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
 import { HvVerticalNavigationTreeViewItem } from "./VerticalNavigation/TreeView/TreeViewItem.js";
 import { VerticalNavigationContext } from "./VerticalNavigation/VerticalNavigationContext.js";
+import { staticClasses as staticClasses117 } from "./TableSection/TableSection.styles.js";
+import { HvTableSection } from "./TableSection/TableSection.js";
 import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 export {
   CellWithCheckBox,
@@ -421,6 +423,7 @@ export {
   HvTableHead,
   HvTableHeader,
   HvTableRow,
+  HvTableSection,
   HvTabs,
   HvTag,
   HvTagsInput,
@@ -608,6 +611,7 @@ export {
   staticClasses96 as tableHeadClasses,
   staticClasses97 as tableHeaderClasses,
   staticClasses98 as tableRowClasses,
+  staticClasses117 as tableSectionClasses,
   staticClasses100 as tabsClasses,
   staticClasses101 as tagClasses,
   staticClasses102 as tagsInputClasses,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -4662,7 +4662,7 @@ export declare interface HvPaginationProps extends HvBaseProps {
  * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.
  * Regardless of its content, a panel look and feel should be consistent.
  */
-export declare const HvPanel: (props: HvPanelProps) => JSX_2.Element;
+export declare const HvPanel: ForwardRefExoticComponent<HvPanelProps & RefAttributes<HTMLDivElement>>;
 
 export declare type HvPanelClasses = ExtractNames<typeof useClasses_87>;
 
@@ -5503,6 +5503,8 @@ export declare interface HvSectionProps extends Omit<HvBaseProps<HTMLDivElement>
     onToggle?: (event: React.MouseEvent<HTMLButtonElement>, open: boolean) => void;
     /** Props to be passed to the expand button */
     expandButtonProps?: HvButtonProps;
+    /** Determines whether or not the header has a shadow on the bottom border. */
+    raisedHeader?: boolean;
     /** A Jss Object used to override or extend the styles applied to the empty state component. */
     classes?: HvSectionClasses;
 }
@@ -6322,6 +6324,17 @@ export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement
     classes?: HvTableRowClasses;
 }
 
+/**
+ * The `TableSection` component is a wrapper for the `Section` component that applies
+ * specific stylings for tables that follow the latest DS specifications.
+ */
+export declare const HvTableSection: ForwardRefExoticComponent<HvTableSectionProps & RefAttributes<HTMLDivElement>>;
+
+export declare type HvTableSectionClasses = ExtractNames<typeof useClasses_124>;
+
+export declare interface HvTableSectionProps extends HvSectionProps {
+}
+
 export declare interface HvTableState<D extends object = Record<string, unknown>> extends TableState<D>, Partial<UseColumnOrderState<D>>, Partial<UseExpandedState<D>>, Partial<UseFiltersState<D>>, Partial<UseGlobalFiltersState<D>>, Partial<UseGroupByState<D>>, Partial<UsePaginationState<D>>, Partial<UseResizeColumnsState<D>>, Partial<UseSortByState<D>>, Partial<UseRowStateState<D>>, Partial<UseHvRowSelectionState<D>> {
     rowCount: number;
 }
@@ -7804,6 +7817,8 @@ export declare const sectionClasses: {
     root: "HvSection-root";
     hidden: "HvSection-hidden";
     actions: "HvSection-actions";
+    spaceTop: "HvSection-spaceTop";
+    raisedHeader: "HvSection-raisedHeader";
 };
 
 export declare const selectionListClasses: {
@@ -8012,6 +8027,16 @@ export declare const tableRowClasses: {
     variantListHead: "HvTableRow-variantListHead";
 };
 
+export declare const tableSectionClasses: {
+    content: "HvTableSection-content";
+    header: "HvTableSection-header";
+    root: "HvTableSection-root";
+    hidden: "HvTableSection-hidden";
+    actions: "HvTableSection-actions";
+    spaceTop: "HvTableSection-spaceTop";
+    raisedHeader: "HvTableSection-raisedHeader";
+};
+
 export declare const tabsClasses: {
     root: "HvTabs-root";
     indicator: "HvTabs-indicator";
@@ -8697,6 +8722,23 @@ declare const useClasses_123: (classesProp?: Partial<Record<"content" | "label"
     cx: (...args: any) => string;
 };
 
+declare const useClasses_124: (classesProp?: Partial<Record<"content" | "header" | "root" | "hidden" | "actions" | "spaceTop" | "raisedHeader", string>>, addStatic?: boolean) => {
+    classes: {
+        content: string;
+        header: string;
+        root: string;
+        hidden: string;
+        actions: string;
+        spaceTop: string;
+        raisedHeader: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 declare const useClasses_13: (classesProp?: Partial<Record<"root" | "disabled" | "readOnly" | "inputBorderContainer" | "inputRootReadOnly" | "inputRoot" | "inputRootFocused" | "inputRootMultiline" | "input" | "inputReadOnly" | "invalid" | "resizable" | "inputRootInvalid" | "inputRootDisabled" | "inputDisabled" | "inputResizable", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
@@ -10301,13 +10343,15 @@ declare const useClasses_94: (classesProp?: Partial<Record<"root" | "selected" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_95: (classesProp?: Partial<Record<"content" | "header" | "root" | "hidden" | "actions", string>>, addStatic?: boolean) => {
+declare const useClasses_95: (classesProp?: Partial<Record<"content" | "header" | "root" | "hidden" | "actions" | "spaceTop" | "raisedHeader", string>>, addStatic?: boolean) => {
     classes: {
         content: string;
         header: string;
         root: string;
         hidden: string;
         actions: string;
+        spaceTop: string;
+        raisedHeader: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.46.2",
+  "version": "5.47.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -63,7 +63,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "23369cdfe68738be6ab438315abd48d7178c5450",
+  "gitHead": "429cf3af573487ff551fd5c38ed0ea7d604bcc29",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {