@hitachivantara/uikit-react-core 5.46.2 → 5.47.1

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/hooks/useLabels.js

@@ -1,9 +1,8 @@
-import React__default from "react";
+import { useMemo } from "react";
 function useLabels(defaultLabels, labels) {
-  const merged = React__default.useMemo(() => {
+  return useMemo(() => {
     return { ...defaultLabels, ...labels };
   }, [defaultLabels, labels]);
-  return merged;
 }
 export {
   useLabels

package/dist/esm/hooks/useLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLabels.js","sources":["../../../src/hooks/useLabels.ts"],"sourcesContent":["import React from \"react\";\n\nexport function useLabels<T>(defaultLabels: Partial<T>, labels: T): T {\n  const merged = React.useMemo(() => {\n    return { ...defaultLabels, ...labels };\n  }, [defaultLabels, labels]);\n\n  return merged;\n}\n"],"names":["React"],"mappings":";AAEgB,SAAA,UAAa,eAA2B,QAAc;AAC9D,QAAA,SAASA,eAAM,QAAQ,MAAM;AACjC,WAAO,EAAE,GAAG,eAAe,GAAG;EAAO,GACpC,CAAC,eAAe,MAAM,CAAC;AAEnB,SAAA;AACT;"}
+{"version":3,"file":"useLabels.js","sources":["../../../src/hooks/useLabels.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nexport function useLabels<T>(defaultLabels: T, labels?: Partial<T>): T {\n  return useMemo(() => {\n    return { ...defaultLabels, ...labels };\n  }, [defaultLabels, labels]);\n}\n"],"names":[],"mappings":";AAEgB,SAAA,UAAa,eAAkB,QAAwB;AACrE,SAAO,QAAQ,MAAM;AACnB,WAAO,EAAE,GAAG,eAAe,GAAG;EAAO,GACpC,CAAC,eAAe,MAAM,CAAC;AAC5B;"}

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}