@hitachivantara/uikit-react-core 5.73.1 → 5.74.0

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

@@ -1,104 +1,55 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const interval = 0.11;
-const bars = {
-  "&:nth-of-type(1)": {
-    animationDelay: "0"
-  },
-  "&:nth-of-type(2)": {
-    animationDelay: `${interval * 2}s`
-  },
-  "&:nth-of-type(3)": {
-    animationDelay: `${interval * 4}s`
-  }
-};
-const small = {
-  width: "2px",
-  height: "18px",
-  margin: "0px 2px",
-  ...bars
-};
-const regular = {
-  width: "4px",
-  height: "30px",
-  margin: "0 3px",
-  ...bars
-};
-const regularAnimation = react.keyframes`
-  0% { 
-    transform: scale(1);
-    background-color: ${uikitStyles.theme.colors.brand};
-  }
-  50% { 
-    transform: scale(1, 0.6); 
-    background-color: ${uikitStyles.theme.colors.secondary};
-  }
-`;
-const regularColorAnimation = react.keyframes`
-  0% { 
-    transform: scale(1);
-  }
-  50% { 
-    transform: scale(1, 0.6); 
-  }
-`;
-const smallAnimation = react.keyframes`
-  0% { 
-    transform: scale(1);
-  }
-  50% { 
-    transform: scale(1, 0.223); 
-  }
-  100%: {},
-`;
-const smallColorAnimation = react.keyframes`
-  0% { 
-    transform: scale(1);
-  }
-  50% { 
-    transform: scale(1, 0.223); 
-  }
-`;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading", {
   root: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: uikitStyles.theme.space.xs
+  },
+  barContainer: {
+    display: "flex",
+    justifyContent: "space-around",
+    ":has($regular)": {
+      width: 30,
+      height: 30
+    },
+    ":has($small)": {
+      "--scaleY": "0.223",
+      width: 18,
+      height: 18
+    }
   },
-  barContainer: { display: "flex" },
   loadingBar: {
+    backgroundColor: "currentcolor",
     display: "inline-block",
-    "@keyframes loading-small": {
-      "0%": {
-        transform: "scale(1)"
-      },
+    animation: "loading 1s ease-in-out infinite",
+    // TODO: make this the default when it has better support
+    width: "round(up, 0.11em, 2px)",
+    "@keyframes loading": {
       "50%": {
-        transform: "scale(1,0.223)"
-      },
-      "100%": {}
-    }
+        transform: "scale(1, var(--scaleY, 0.6))",
+        backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.secondary})`
+      }
+    },
+    ":nth-of-type(2)": { animationDelay: "0.22s" },
+    ":nth-of-type(3)": { animationDelay: "0.44s" }
   },
-  label: { marginTop: "15px" },
+  label: {},
   overlay: {},
   blur: {},
   hidden: { display: "none" },
-  small: { animation: `${smallAnimation} 1s ease-in-out infinite`, ...small },
-  regular: {
-    animation: `${regularAnimation} 1s ease-in-out infinite`,
-    ...regular
+  small: {
+    width: 2
   },
-  smallColor: {
-    animation: `${smallColorAnimation} 1s ease-in-out infinite`,
-    ...small
+  regular: {
+    width: 4
   },
-  regularColor: {
-    animation: `${regularColorAnimation} 1s ease-in-out infinite`,
-    ...regular
-  }
+  smallColor: {},
+  regularColor: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/LoadingContainer/LoadingContainer.cjs

@@ -17,7 +17,7 @@ const HvLoadingContainer = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvLoadingContainer", props);
   const { classes, cx } = LoadingContainer_styles.useClasses(classesProp);
-  const ariaLabel = ariaLabelProp || typeof label === "string" && label ? label : "Loading";
+  const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Loading.HvLoading,
@@ -28,7 +28,9 @@ const HvLoadingContainer = (props) => {
         label,
         hidden,
         "aria-label": ariaLabel,
-        style: uikitReactUtils.mergeStyles({}, { "--opacity": opacity })
+        style: uikitReactUtils.mergeStyles(void 0, {
+          "--opacity": opacity && `${opacity * 100}%`
+        })
       }
     ),
     children

package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoadingCo
     inset: 0,
     zIndex: uikitStyles.theme.zIndices.overlay,
     transition: "background-color .2s ease",
-    backgroundColor: uikitStyles.theme.alpha("atmo1", "var(--opacity, 0.8)")
+    backgroundColor: uikitStyles.theme.alpha("atmo1", "var(--opacity, 80%)")
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Section/Section.cjs

@@ -4,9 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useControlled = require("../hooks/useControlled.cjs");
-const useUniqueId = require("../hooks/useUniqueId.cjs");
-const setId = require("../utils/setId.cjs");
+const useExpandable = require("../hooks/useExpandable.cjs");
 const Section_styles = require("./Section.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const HvSection = React.forwardRef(
@@ -28,18 +26,17 @@ const HvSection = React.forwardRef(
       ...others
     } = uikitReactUtils.useDefaultProps("HvSection", props);
     const { classes, cx } = Section_styles.useClasses(classesProp);
-    const [isOpen, setIsOpen] = useControlled.useControlled(
+    const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
+      id,
       expanded,
-      Boolean(defaultExpanded)
-    );
-    const elementId = useUniqueId.useUniqueId(id);
-    const contentId = setId.setId(elementId, "content");
+      defaultExpanded
+    });
     const showContent = expandable ? !!isOpen : true;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        id: elementId,
+        id,
         className: cx(classes.root, className),
         ...others,
         children: [
@@ -55,14 +52,13 @@ const HvSection = React.forwardRef(
                   {
                     icon: true,
                     onClick: (event) => {
-                      setIsOpen((o) => !o);
+                      toggleOpen();
                       onToggle?.(event, !isOpen);
                     },
-                    "aria-expanded": isOpen,
-                    "aria-controls": contentId,
                     "aria-label": isOpen ? "Collapse" : "Expand",
+                    ...buttonProps,
                     ...expandButtonProps,
-                    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {})
+                    children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { style: { rotate: isOpen ? "180deg" : void 0 } })
                   }
                 ),
                 title,
@@ -74,12 +70,12 @@ const HvSection = React.forwardRef(
             "div",
             {
               ref: contentRef,
-              id: contentId,
               hidden: !isOpen,
               className: cx(classes.content, {
                 [classes.hidden]: !showContent,
                 [classes.spaceTop]: !(title || actions || expandable)
               }),
+              ...expandable && regionProps,
               children
             }
           )

package/dist/cjs/Table/hooks/useBulkActions.cjs

@@ -91,6 +91,5 @@ const useBulkActions = (hooks) => {
   hooks.useInstance.push(useInstanceHook);
 };
 useBulkActions.pluginName = "useHvBulkActions";
-const useBulkActions$1 = useBulkActions;
-exports.default = useBulkActions$1;
+exports.default = useBulkActions;
 exports.defaultgetHvBulkActionsProps = defaultgetHvBulkActionsProps;

package/dist/cjs/Table/hooks/useFilters.cjs

@@ -3,5 +3,4 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const reactTable = require("react-table");
 const useHvFilters = reactTable.useFilters.bind({});
 useHvFilters.pluginName = "useHvFilters";
-const useHvFilters$1 = useHvFilters;
-exports.default = useHvFilters$1;
+exports.default = useHvFilters;

package/dist/cjs/Table/hooks/useGlobalFilter.cjs

@@ -3,5 +3,4 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const reactTable = require("react-table");
 const useHvGlobalFilter = reactTable.useGlobalFilter.bind({});
 useHvGlobalFilter.pluginName = "useHvGlobalFilter";
-const useHvGlobalFilter$1 = useHvGlobalFilter;
-exports.default = useHvGlobalFilter$1;
+exports.default = useHvGlobalFilter;

package/dist/cjs/Table/hooks/useHeaderGroups.cjs

@@ -87,5 +87,4 @@ const useHeaderGroups = (hooks) => {
   hooks.getCellProps.push(getCellPropsHook);
 };
 useHeaderGroups.pluginName = "useHvHeaderGroups";
-const useHeaderGroups$1 = useHeaderGroups;
-exports.default = useHeaderGroups$1;
+exports.default = useHeaderGroups;

package/dist/cjs/Table/hooks/usePagination.cjs

@@ -52,6 +52,5 @@ const usePagination = (hooks) => {
   hooks.useInstance.push(useInstanceHook);
 };
 usePagination.pluginName = "useHvPagination";
-const usePagination$1 = usePagination;
-exports.default = usePagination$1;
+exports.default = usePagination;
 exports.defaultGetHvPaginationProps = defaultGetHvPaginationProps;

package/dist/cjs/Table/hooks/useResizeColumns.cjs

@@ -34,5 +34,4 @@ const useResizeColumns = (hooks) => {
   hooks.useInstance.push(useInstanceHook);
 };
 useResizeColumns.pluginName = "useHvResizeColumns";
-const useResizeColumns$1 = useResizeColumns;
-exports.default = useResizeColumns$1;
+exports.default = useResizeColumns;

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

@@ -73,6 +73,5 @@ const useRowExpand = (hooks) => {
   hooks.getRowProps.push(getRowPropsHook);
 };
 useRowExpand.pluginName = "useHvRowExpand";
-const useRowExpand$1 = useRowExpand;
 exports.CellWithExpandButton = CellWithExpandButton;
-exports.default = useRowExpand$1;
+exports.default = useRowExpand;

package/dist/cjs/Table/hooks/useRowSelection.cjs

@@ -439,9 +439,8 @@ const useRowSelection = (hooks) => {
   hooks.prepareRow.push(prepareRow);
 };
 useRowSelection.pluginName = "useHvRowSelection";
-const useRowSelection$1 = useRowSelection;
 exports.CellWithCheckBox = CellWithCheckBox;
-exports.default = useRowSelection$1;
+exports.default = useRowSelection;
 exports.defaultGetToggleAllPageRowsSelectedProps = defaultGetToggleAllPageRowsSelectedProps;
 exports.defaultGetToggleAllRowsSelectedProps = defaultGetToggleAllRowsSelectedProps;
 exports.defaultGetToggleRowSelectedProps = defaultGetToggleRowSelectedProps;

package/dist/cjs/Table/hooks/useRowState.cjs

@@ -3,5 +3,4 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const reactTable = require("react-table");
 const useHvRowState = reactTable.useRowState.bind({});
 useHvRowState.pluginName = "useHvRowState";
-const useHvRowState$1 = useHvRowState;
-exports.default = useHvRowState$1;
+exports.default = useHvRowState;

package/dist/cjs/Table/hooks/useSortBy.cjs

@@ -33,5 +33,4 @@ const useSortBy = (hooks) => {
   hooks.useInstance.push(useInstanceHook);
 };
 useSortBy.pluginName = "useHvSortBy";
-const useSortBy$1 = useSortBy;
-exports.default = useSortBy$1;
+exports.default = useSortBy;

package/dist/cjs/Table/hooks/useSticky.cjs

@@ -166,7 +166,6 @@ const useSticky = (hooks) => {
   hooks.getCellProps.push(getCellPropsHook);
 };
 useSticky.pluginName = "useHvTableSticky";
-const useSticky$1 = useSticky;
-exports.default = useSticky$1;
+exports.default = useSticky;
 exports.getHeaderGroupPropsHook = getHeaderGroupPropsHook;
 exports.getTableHeadPropsHook = getTableHeadPropsHook;

package/dist/cjs/Table/hooks/useTableStyles.cjs

@@ -86,6 +86,5 @@ const useTableStyles = (hooks) => {
   hooks.getCellProps.push(getCellPropsHook);
 };
 useTableStyles.pluginName = "useHvTableStyles";
-const useHvTableStyles = useTableStyles;
-exports.default = useHvTableStyles;
+exports.default = useTableStyles;
 exports.getHeaderFooterPropsHook = getHeaderFooterPropsHook;

package/dist/cjs/TextArea/TextArea.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTextArea", {
   root: { display: "inline-block", width: "100%" },
   disabled: {},
-  resizable: { width: "100%" },
+  resizable: { width: "fit-content" },
   invalid: {},
   baseInput: { clear: "both", float: "left" },
   input: {},

package/dist/cjs/hooks/useExpandable.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const setId = require("../utils/setId.cjs");
+const useControlled = require("./useControlled.cjs");
+const useUniqueId = require("./useUniqueId.cjs");
+function useExpandable({
+  id: idProp,
+  disabled,
+  expanded,
+  defaultExpanded
+}) {
+  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
+  const id = useUniqueId.useUniqueId(idProp);
+  const buttonId = setId.setId(id, "button");
+  const regionId = setId.setId(id, "container");
+  return {
+    isOpen,
+    toggleOpen: (newOpen) => setIsOpen((o) => newOpen ?? !o),
+    buttonProps: {
+      id: buttonId,
+      "aria-disabled": disabled,
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? regionId : void 0
+    },
+    regionProps: {
+      id: regionId,
+      role: "region",
+      "aria-labelledby": buttonId
+    }
+  };
+}
+exports.useExpandable = useExpandable;

package/dist/cjs/hooks/useUniqueId.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const useEnhancedEffect = require("./useEnhancedEffect.cjs");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -23,7 +24,7 @@ const useReactId = React__namespace["useId".toString()] || (() => void 0);
 let count = 0;
 const useUniqueId = (deterministicId, idPrefix) => {
   const [id, setId] = React__namespace.useState(useReactId());
-  React__namespace.useLayoutEffect(() => {
+  useEnhancedEffect.useEnhancedEffect(() => {
     if (!deterministicId) setId((reactId) => reactId ?? String(count++));
   }, [deterministicId, idPrefix]);
   return deterministicId || (idPrefix ? idPrefix + id : id ?? "");

package/dist/cjs/index.cjs

@@ -33,10 +33,24 @@ const useSavedState = require("./utils/useSavedState.cjs");
 const wrapperTooltip = require("./utils/wrapperTooltip.cjs");
 const helpers = require("./utils/helpers.cjs");
 const useTable = require("./Table/hooks/useTable.cjs");
+const useTableStyles = require("./Table/hooks/useTableStyles.cjs");
+const useSortBy = require("./Table/hooks/useSortBy.cjs");
+const useSticky = require("./Table/hooks/useSticky.cjs");
+const usePagination = require("./Table/hooks/usePagination.cjs");
+const useRowSelection = require("./Table/hooks/useRowSelection.cjs");
+const useBulkActions = require("./Table/hooks/useBulkActions.cjs");
+const useRowExpand = require("./Table/hooks/useRowExpand.cjs");
+const useHeaderGroups = require("./Table/hooks/useHeaderGroups.cjs");
+const useResizeColumns = require("./Table/hooks/useResizeColumns.cjs");
+const useGlobalFilter = require("./Table/hooks/useGlobalFilter.cjs");
+const useFilters = require("./Table/hooks/useFilters.cjs");
+const useRowState = require("./Table/hooks/useRowState.cjs");
 const utils = require("./Typography/utils.cjs");
 const Typography_styles = require("./Typography/Typography.styles.cjs");
 const Typography = require("./Typography/Typography.cjs");
 const Box = require("./Box/Box.cjs");
+const ButtonBase_styles = require("./ButtonBase/ButtonBase.styles.cjs");
+const ButtonBase = require("./ButtonBase/ButtonBase.cjs");
 const Focus_styles = require("./Focus/Focus.styles.cjs");
 const Focus = require("./Focus/Focus.cjs");
 const ListContainer_styles = require("./ListContainer/ListContainer.styles.cjs");
@@ -251,18 +265,6 @@ const TableRow_styles = require("./Table/TableRow/TableRow.styles.cjs");
 const TableRow = require("./Table/TableRow/TableRow.cjs");
 const TableCell_styles = require("./Table/TableCell/TableCell.styles.cjs");
 const TableCell = require("./Table/TableCell/TableCell.cjs");
-const useTableStyles = require("./Table/hooks/useTableStyles.cjs");
-const useSortBy = require("./Table/hooks/useSortBy.cjs");
-const useSticky = require("./Table/hooks/useSticky.cjs");
-const usePagination = require("./Table/hooks/usePagination.cjs");
-const useRowSelection = require("./Table/hooks/useRowSelection.cjs");
-const useBulkActions = require("./Table/hooks/useBulkActions.cjs");
-const useRowExpand = require("./Table/hooks/useRowExpand.cjs");
-const useHeaderGroups = require("./Table/hooks/useHeaderGroups.cjs");
-const useResizeColumns = require("./Table/hooks/useResizeColumns.cjs");
-const useGlobalFilter = require("./Table/hooks/useGlobalFilter.cjs");
-const useFilters = require("./Table/hooks/useFilters.cjs");
-const useRowState = require("./Table/hooks/useRowState.cjs");
 const renderers = require("./Table/renderers/renderers.cjs");
 const DateColumnCell = require("./Table/renderers/DateColumnCell/DateColumnCell.cjs");
 const DropdownColumnCell = require("./Table/renderers/DropdownColumnCell/DropdownColumnCell.cjs");
@@ -389,10 +391,37 @@ exports.wrapperTooltip = wrapperTooltip.wrapperTooltip;
 exports.uniqueId = helpers.uniqueId;
 exports.useHvData = useTable.default;
 exports.useHvTable = useTable.default;
+exports.getHeaderFooterPropsHook = useTableStyles.getHeaderFooterPropsHook;
+exports.useHvTableStyles = useTableStyles.default;
+exports.useHvSortBy = useSortBy.default;
+exports.getHeaderGroupPropsHook = useSticky.getHeaderGroupPropsHook;
+exports.getTableHeadPropsHook = useSticky.getTableHeadPropsHook;
+exports.useHvTableSticky = useSticky.default;
+exports.defaultGetHvPaginationProps = usePagination.defaultGetHvPaginationProps;
+exports.useHvPagination = usePagination.default;
+exports.CellWithCheckBox = useRowSelection.CellWithCheckBox;
+exports.defaultGetToggleAllPageRowsSelectedProps = useRowSelection.defaultGetToggleAllPageRowsSelectedProps;
+exports.defaultGetToggleAllRowsSelectedProps = useRowSelection.defaultGetToggleAllRowsSelectedProps;
+exports.defaultGetToggleRowSelectedProps = useRowSelection.defaultGetToggleRowSelectedProps;
+exports.prepareRow = useRowSelection.prepareRow;
+exports.reducer = useRowSelection.reducer;
+exports.useHvRowSelection = useRowSelection.default;
+exports.useInstance = useRowSelection.useInstance;
+exports.defaultgetHvBulkActionsProps = useBulkActions.defaultgetHvBulkActionsProps;
+exports.useHvBulkActions = useBulkActions.default;
+exports.CellWithExpandButton = useRowExpand.CellWithExpandButton;
+exports.useHvRowExpand = useRowExpand.default;
+exports.useHvHeaderGroups = useHeaderGroups.default;
+exports.useHvResizeColumns = useResizeColumns.default;
+exports.useHvGlobalFilter = useGlobalFilter.default;
+exports.useHvFilters = useFilters.default;
+exports.useHvRowState = useRowState.default;
 exports.typographyVariants = utils.typographyVariants;
 exports.typographyClasses = Typography_styles.staticClasses;
 exports.HvTypography = Typography.HvTypography;
 exports.HvBox = Box.HvBox;
+exports.buttonBaseClasses = ButtonBase_styles.staticClasses;
+exports.HvButtonBase = ButtonBase.HvButtonBase;
 exports.focusClasses = Focus_styles.staticClasses;
 exports.HvFocus = Focus.HvFocus;
 exports.listContainerClasses = ListContainer_styles.staticClasses;
@@ -627,31 +656,6 @@ exports.tableRowClasses = TableRow_styles.staticClasses;
 exports.HvTableRow = TableRow.HvTableRow;
 exports.tableCellClasses = TableCell_styles.staticClasses;
 exports.HvTableCell = TableCell.HvTableCell;
-exports.getHeaderFooterPropsHook = useTableStyles.getHeaderFooterPropsHook;
-exports.useHvTableStyles = useTableStyles.default;
-exports.useHvSortBy = useSortBy.default;
-exports.getHeaderGroupPropsHook = useSticky.getHeaderGroupPropsHook;
-exports.getTableHeadPropsHook = useSticky.getTableHeadPropsHook;
-exports.useHvTableSticky = useSticky.default;
-exports.defaultGetHvPaginationProps = usePagination.defaultGetHvPaginationProps;
-exports.useHvPagination = usePagination.default;
-exports.CellWithCheckBox = useRowSelection.CellWithCheckBox;
-exports.defaultGetToggleAllPageRowsSelectedProps = useRowSelection.defaultGetToggleAllPageRowsSelectedProps;
-exports.defaultGetToggleAllRowsSelectedProps = useRowSelection.defaultGetToggleAllRowsSelectedProps;
-exports.defaultGetToggleRowSelectedProps = useRowSelection.defaultGetToggleRowSelectedProps;
-exports.prepareRow = useRowSelection.prepareRow;
-exports.reducer = useRowSelection.reducer;
-exports.useHvRowSelection = useRowSelection.default;
-exports.useInstance = useRowSelection.useInstance;
-exports.defaultgetHvBulkActionsProps = useBulkActions.defaultgetHvBulkActionsProps;
-exports.useHvBulkActions = useBulkActions.default;
-exports.CellWithExpandButton = useRowExpand.CellWithExpandButton;
-exports.useHvRowExpand = useRowExpand.default;
-exports.useHvHeaderGroups = useHeaderGroups.default;
-exports.useHvResizeColumns = useResizeColumns.default;
-exports.useHvGlobalFilter = useGlobalFilter.default;
-exports.useHvFilters = useFilters.default;
-exports.useHvRowState = useRowState.default;
 exports.hvDateColumn = renderers.hvDateColumn;
 exports.hvDropdownColumn = renderers.hvDropdownColumn;
 exports.hvExpandColumn = renderers.hvExpandColumn;

package/dist/esm/Accordion/Accordion.js

@@ -1,12 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useControlled } from "../hooks/useControlled.js";
-import { useUniqueId } from "../hooks/useUniqueId.js";
-import { setId } from "../utils/setId.js";
+import { useExpandable } from "../hooks/useExpandable.js";
 import { useClasses } from "./Accordion.styles.js";
 import { staticClasses } from "./Accordion.styles.js";
+import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
 import { HvTypography } from "../Typography/Typography.js";
 const HvAccordion = (props) => {
   const {
@@ -25,72 +24,44 @@ const HvAccordion = (props) => {
     disableEventHandling,
     ...others
   } = useDefaultProps("HvAccordion", props);
-  const id = useUniqueId(idProp);
   const { classes, cx } = useClasses(classesProp);
-  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
-  const handleAction = useCallback(
+  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
+    id: idProp,
+    expanded,
+    disabled,
+    defaultExpanded
+  });
+  const handleClick = useCallback(
     (event) => {
       if (!disabled) {
         onChange?.(event, isOpen);
-        setIsOpen(!isOpen);
-        return true;
+        toggleOpen();
       }
-      return false;
-    },
-    [disabled, onChange, isOpen, setIsOpen]
-  );
-  const handleClick = useCallback(
-    (event) => {
-      handleAction(event);
       if (!disableEventHandling) {
         event.preventDefault();
         event.stopPropagation();
       }
     },
-    [disableEventHandling, handleAction]
-  );
-  const handleKeyDown = useCallback(
-    (event) => {
-      let isEventHandled = false;
-      const { key } = event;
-      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
-        return;
-      }
-      switch (key) {
-        case "Enter":
-        case " ":
-          isEventHandled = handleAction(event);
-          break;
-        default:
-          return;
-      }
-      if (isEventHandled && !disableEventHandling) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [disableEventHandling, handleAction]
+    [disableEventHandling, disabled, isOpen, onChange, toggleOpen]
   );
-  const accordionHeaderId = setId(id, "button");
-  const accordionContainer = setId(id, "container");
   const accordionHeader = useMemo(() => {
-    const color = disabled ? "secondary_60" : void 0;
     const accordionButton = /* @__PURE__ */ jsxs(
       HvTypography,
       {
-        id: accordionHeaderId,
-        component: "div",
-        role: "button",
+        ...buttonProps,
+        component: HvButtonBase,
         className: cx(classes.label, { [classes.disabled]: disabled }),
         disabled,
-        tabIndex: 0,
-        onKeyDown: handleKeyDown,
         onClick: handleClick,
         variant: labelVariant,
-        "aria-expanded": isOpen,
-        "aria-disabled": disabled,
         children: [
-          isOpen ? /* @__PURE__ */ jsx(DropUpXS, { color }) : /* @__PURE__ */ jsx(DropDownXS, { color }),
+          /* @__PURE__ */ jsx(
+            DropUpXS,
+            {
+              color: "inherit",
+              style: { rotate: isOpen ? void 0 : "180deg" }
+            }
+          ),
           label
         ]
       }
@@ -100,24 +71,21 @@ const HvAccordion = (props) => {
     cx,
     classes,
     handleClick,
-    handleKeyDown,
     label,
-    accordionHeaderId,
+    buttonProps,
     disabled,
     headingLevel,
     isOpen,
     labelVariant
   ]);
-  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxs("div", { id: idProp, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
     /* @__PURE__ */ jsx(
       "div",
       {
-        id: accordionContainer,
-        role: "region",
-        "aria-labelledby": accordionHeaderId,
         className: cx(classes.container, { [classes.hidden]: !isOpen }),
         hidden: !isOpen,
+        ...regionProps,
         ...containerProps,
         children
       }