@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs

@@ -4,10 +4,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../../../utils/focusUtils.cjs");
 const classes = require("../../../../utils/classes.cjs");
 const name = "HvVerticalScrollListItem";
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses(name, {
+const { staticClasses, useClasses } = classes.createClasses(name, {
   root: {
     padding: "0",
     height: "32px",

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.styles.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"0\",\n    height: \"32px\",\n    width: \"32px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  notSelected: {\n    height: \"4px\",\n    width: \"4px\",\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.colors.secondary_60,\n  },\n  text: {\n    height: \"16px\",\n    width: \"16px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"16px\",\n    width: \"16px\",\n    borderRadius: \"50%\",\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n\n      \"& $notSelected\": {\n        height: \"6px\",\n        width: \"6px\",\n        backgroundColor: theme.colors.secondary,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","height","width","display","justifyContent","alignItems","notSelected","borderRadius","backgroundColor","theme","colors","secondary_60","text","button","cursor","containerBackgroundHover","secondary","outline","outlineStyles"],"mappings":";;;;;AAMA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdJ,SAAS;AAAA,IACTK,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,EAChC;AAAA,EACAC,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAQ,QAAQ;AAAA,IACNV,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdO,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBC,YAAAA,MAAMC,OAAOK;AAAAA,MAE9B,kBAAkB;AAAA,QAChBd,QAAQ;AAAA,QACRC,OAAO;AAAA,QACPM,iBAAiBC,YAAAA,MAAMC,OAAOM;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"VerticalScrollListItem.styles.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"0\",\n    height: \"32px\",\n    width: \"32px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  notSelected: {\n    height: \"4px\",\n    width: \"4px\",\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.colors.secondary_60,\n  },\n  text: {\n    height: \"16px\",\n    width: \"16px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"16px\",\n    width: \"16px\",\n    borderRadius: \"50%\",\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n\n      \"& $notSelected\": {\n        height: \"6px\",\n        width: \"6px\",\n        backgroundColor: theme.colors.secondary,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAMA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA,IACT,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAE9B,kBAAkB;AAAA,QAChB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAA;AAAA,IACL;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/ScrollTo/useScrollTo.cjs

@@ -16,33 +16,40 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
     scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
     lastContainerScrollTop.current = utils.verticalScrollOffset(scrollEle.current);
   }, [scrollElementId]);
-  const checkScroll = React.useCallback((event) => {
-    if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) {
-      requestedAnimationFrame.current = window.requestAnimationFrame(() => {
-        requestedAnimationFrame.current = 0;
-        const firstVisibleElementIndex = utils.findFirstVisibleElement(scrollEle.current, options, offset);
-        let newSelectedIndex = firstVisibleElementIndex;
-        if (firstVisibleElementIndex < 0) {
-          newSelectedIndex = 0;
-        }
-        if (newSelectedIndex < options.length - 1 && utils.isScrolledToTheBottom(scrollEle.current)) {
-          newSelectedIndex += 1;
-        }
-        const containerScrollTop = utils.getScrollTop(scrollEle.current);
-        const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
-        lastContainerScrollTop.current = containerScrollTop;
-        if (isScrollingDown) {
-          if (newSelectedIndex < selectedIndexRef.current) {
+  const checkScroll = React.useCallback(
+    (event) => {
+      if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) {
+        requestedAnimationFrame.current = window.requestAnimationFrame(() => {
+          requestedAnimationFrame.current = 0;
+          const firstVisibleElementIndex = utils.findFirstVisibleElement(
+            scrollEle.current,
+            options,
+            offset
+          );
+          let newSelectedIndex = firstVisibleElementIndex;
+          if (firstVisibleElementIndex < 0) {
+            newSelectedIndex = 0;
+          }
+          if (newSelectedIndex < options.length - 1 && utils.isScrolledToTheBottom(scrollEle.current)) {
+            newSelectedIndex += 1;
+          }
+          const containerScrollTop = utils.getScrollTop(scrollEle.current);
+          const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
+          lastContainerScrollTop.current = containerScrollTop;
+          if (isScrollingDown) {
+            if (newSelectedIndex < selectedIndexRef.current) {
+              newSelectedIndex = selectedIndexRef.current;
+            }
+          } else if (newSelectedIndex > selectedIndexRef.current) {
             newSelectedIndex = selectedIndexRef.current;
           }
-        } else if (newSelectedIndex > selectedIndexRef.current) {
-          newSelectedIndex = selectedIndexRef.current;
-        }
-        setSelectedIndex(newSelectedIndex);
-        onChange?.(event, newSelectedIndex);
-      });
-    }
-  }, [offset, options, onChange]);
+          setSelectedIndex(newSelectedIndex);
+          onChange?.(event, newSelectedIndex);
+        });
+      }
+    },
+    [offset, options, onChange]
+  );
   React.useEffect(() => {
     if (scrollEle.current) {
       scrollEle.current.addEventListener("scroll", checkScroll, false);
@@ -87,7 +94,12 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
     if (option) {
       const ele = document.getElementById(id);
       if (ele) {
-        utils.scrollElement(ele, scrollEle.current, option.offset || offset, direction);
+        utils.scrollElement(
+          ele,
+          scrollEle.current,
+          option.offset || offset,
+          direction
+        );
       }
       if (href) {
         window.history.pushState({}, "", `#${options[index].value}`);

package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.cjs","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n  selectedIndexProp: number = 0,\n  scrollElementId: string | undefined = undefined,\n  href: boolean = false,\n  offset: number = 0,\n  options: HvScrollToVerticalOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement>\n          | React.KeyboardEvent<HTMLDivElement>,\n        index: number\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\"\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => void\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    scrollEle.current =\n      (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange]\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval;\n\n    if (href) {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const setScrollTo = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => {\n    const option = options.find((o) => o.value === id);\n\n    if (option) {\n      const ele = document.getElementById(id);\n      if (ele) {\n        scrollElement(\n          ele,\n          scrollEle.current,\n          option.offset || offset,\n          direction\n        );\n      }\n\n      if (href) {\n        window.history.pushState({}, \"\", `#${options[index].value}`);\n      }\n\n      setSelectedIndex(index);\n      wrappedOnChange?.(index);\n\n      // Safari scrolls immediately (no smooth scroll support),\n      // so this ref value must be updated asap\n      selectedIndexRef.current = index;\n    }\n  };\n\n  return [selectedIndex, setScrollTo];\n};\n"],"names":["useScrollTo","selectedIndexProp","scrollElementId","undefined","href","offset","options","onChange","direction","RETRY_MAX","selectedIndex","setSelectedIndex","useState","scrollEle","useRef","window","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","useEffect","current","document","getElementById","verticalScrollOffset","checkScroll","useCallback","event","requestAnimationFrame","firstVisibleElementIndex","findFirstVisibleElement","newSelectedIndex","length","isScrolledToTheBottom","containerScrollTop","getScrollTop","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","value","retry","setInterval","ele","scrollElement","clearInterval","setScrollTo","id","index","wrappedOnChange","history","pushState"],"mappings":"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"}
+{"version":3,"file":"useScrollTo.cjs","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n  selectedIndexProp: number = 0,\n  scrollElementId: string | undefined = undefined,\n  href: boolean = false,\n  offset: number = 0,\n  options: HvScrollToVerticalOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement>\n          | React.KeyboardEvent<HTMLDivElement>,\n        index: number\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\"\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => void\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    scrollEle.current =\n      (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange]\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval;\n\n    if (href) {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const setScrollTo = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => {\n    const option = options.find((o) => o.value === id);\n\n    if (option) {\n      const ele = document.getElementById(id);\n      if (ele) {\n        scrollElement(\n          ele,\n          scrollEle.current,\n          option.offset || offset,\n          direction\n        );\n      }\n\n      if (href) {\n        window.history.pushState({}, \"\", `#${options[index].value}`);\n      }\n\n      setSelectedIndex(index);\n      wrappedOnChange?.(index);\n\n      // Safari scrolls immediately (no smooth scroll support),\n      // so this ref value must be updated asap\n      selectedIndexRef.current = index;\n    }\n  };\n\n  return [selectedIndex, setScrollTo];\n};\n"],"names":["useState","useRef","useEffect","verticalScrollOffset","useCallback","findFirstVisibleElement","isScrolledToTheBottom","getScrollTop","scrollElement"],"mappings":"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"}

package/dist/cjs/components/ScrollTo/utils.cjs

@@ -38,9 +38,7 @@ const scrollElement = (element, container, offset = 0, direction) => {
       behavior: "smooth"
     });
   }
-  element.focus({
-    preventScroll: true
-  });
+  element.focus({ preventScroll: true });
 };
 const isScrolledToTheBottom = (container) => {
   const containerScrollTop = getScrollTop(container);

package/dist/cjs/components/ScrollTo/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/components/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      window.scrollY ||\n      window.pageYOffset ||\n      (document.documentElement && document.documentElement.scrollTop) ||\n      document.body.scrollTop\n    );\n  }\n\n  return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n  t: HTMLElement | (Window & typeof globalThis),\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n      (window.scrollY || window.pageYOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return (t as ExtendedWindow).offsetTop;\n  }\n\n  return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n  t: HTMLElement,\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      (t?.getBoundingClientRect?.().left || 0) +\n      (window.scrollX || window.pageXOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return t.offsetLeft;\n  }\n\n  return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n  element: HTMLElement,\n  container: HTMLElement | (Window & typeof globalThis),\n  offset: number = 0,\n  direction?: \"row\" | \"column\"\n) => {\n  if (direction === \"row\") {\n    const elemLeft = horizontalScrollOffset(element, container);\n    container?.scrollTo?.({\n      left: elemLeft - offset,\n      behavior: \"smooth\",\n    });\n  } else {\n    const elemTop = verticalScrollOffset(element, container);\n    container?.scrollTo?.({\n      top: elemTop - offset,\n      behavior: \"smooth\",\n    });\n  }\n  element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n  container: HTMLElement | (Window & typeof globalThis)\n) => {\n  const containerScrollTop = getScrollTop(container);\n\n  if (container === window) {\n    // Accounting for cases where html/body are set to height:100%\n    const scrollHeight =\n      (document.documentElement && document.documentElement.scrollHeight) ||\n      document.body.scrollHeight;\n\n    return containerScrollTop + window.innerHeight >= scrollHeight;\n  }\n\n  return (\n    containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n    (container as ExtendedWindow).scrollHeight\n  );\n};\n\nexport const findFirstVisibleElement = (\n  container: HTMLElement | (Window & typeof globalThis),\n  options: HvScrollToVerticalOption[],\n  offset: number\n) => {\n  const boundsTop = verticalScrollOffset(container);\n\n  let i = 0;\n\n  // Find index of first element whose top is still visible inside the container\n  for (; i < options.length; i += 1) {\n    const ele = document.getElementById(options[i].value);\n\n    if (ele) {\n      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n      if (elemTop > boundsTop) {\n        break;\n      }\n    }\n  }\n\n  // Return the previous index, the element that last scrolled past the top\n  return i - 1;\n};\n"],"names":["getScrollTop","c","window","scrollY","pageYOffset","document","documentElement","scrollTop","body","verticalScrollOffset","t","getBoundingClientRect","top","getComputedStyle","position","offsetTop","horizontalScrollOffset","left","scrollX","pageXOffset","offsetLeft","scrollElement","element","container","offset","direction","elemLeft","scrollTo","behavior","elemTop","focus","preventScroll","isScrolledToTheBottom","containerScrollTop","scrollHeight","innerHeight","offsetHeight","findFirstVisibleElement","options","boundsTop","i","length","ele","getElementById","value"],"mappings":";;AAIaA,MAAAA,eAAeA,CAC1BC,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAEdA,WAAAA,OAAOC,WACPD,OAAOE,eACNC,SAASC,mBAAmBD,SAASC,gBAAgBC,aACtDF,SAASG,KAAKD;AAAAA,EAElB;AAEA,SAAQN,EAAqBM;AAC/B;AAEO,MAAME,uBAAuBA,CAClCC,GACAT,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAChB,YACIQ,GAAsBC,wBAAwB,EAAEC,OAAO,MACxDV,OAAOC,WAAWD,OAAOE;AAAAA,EAE9B;AACA,MAAIS,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAQJ,EAAqBK;AAAAA,EAC/B;AAEQL,SAAAA,EAAqBK,YAAad,EAAqBc;AACjE;AAEO,MAAMC,yBAAyBA,CACpCN,GACAT,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAChB,YACGQ,GAAGC,wBAAwB,EAAEM,QAAQ,MACrCf,OAAOgB,WAAWhB,OAAOiB;AAAAA,EAE9B;AACA,MAAIN,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAOJ,EAAEU;AAAAA,EACX;AAEOV,SAAAA,EAAEU,aAAcnB,EAAqBmB;AAC9C;AAEO,MAAMC,gBAAgBA,CAC3BC,SACAC,WACAC,SAAiB,GACjBC,cACG;AACH,MAAIA,cAAc,OAAO;AACjBC,UAAAA,WAAWV,uBAAuBM,SAASC,SAAS;AAC1DA,eAAWI,WAAW;AAAA,MACpBV,MAAMS,WAAWF;AAAAA,MACjBI,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACCC,UAAAA,UAAUpB,qBAAqBa,SAASC,SAAS;AACvDA,eAAWI,WAAW;AAAA,MACpBf,KAAKiB,UAAUL;AAAAA,MACfI,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACAN,UAAQQ,MAAM;AAAA,IAAEC,eAAe;AAAA,EAAA,CAAM;AACvC;AAEaC,MAAAA,wBAAwBA,CACnCT,cACG;AACGU,QAAAA,qBAAqBjC,aAAauB,SAAS;AAEjD,MAAIA,cAAcrB,QAAQ;AAExB,UAAMgC,eACH7B,SAASC,mBAAmBD,SAASC,gBAAgB4B,gBACtD7B,SAASG,KAAK0B;AAETD,WAAAA,qBAAqB/B,OAAOiC,eAAeD;AAAAA,EACpD;AAGED,SAAAA,qBAAsBV,UAA6Ba,gBAClDb,UAA6BW;AAElC;AAEO,MAAMG,0BAA0BA,CACrCd,WACAe,SACAd,WACG;AACGe,QAAAA,YAAY9B,qBAAqBc,SAAS;AAEhD,MAAIiB,IAAI;AAGR,SAAOA,IAAIF,QAAQG,QAAQD,KAAK,GAAG;AACjC,UAAME,MAAMrC,SAASsC,eAAeL,QAAQE,CAAC,EAAEI,KAAK;AAEpD,QAAIF,KAAK;AACP,YAAMb,UAAUpB,qBAAqBiC,GAAG,KAAKJ,QAAQE,CAAC,EAAEhB,UAAUA;AAElE,UAAIK,UAAUU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAOC,IAAI;AACb;;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../../src/components/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      window.scrollY ||\n      window.pageYOffset ||\n      (document.documentElement && document.documentElement.scrollTop) ||\n      document.body.scrollTop\n    );\n  }\n\n  return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n  t: HTMLElement | (Window & typeof globalThis),\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n      (window.scrollY || window.pageYOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return (t as ExtendedWindow).offsetTop;\n  }\n\n  return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n  t: HTMLElement,\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      (t?.getBoundingClientRect?.().left || 0) +\n      (window.scrollX || window.pageXOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return t.offsetLeft;\n  }\n\n  return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n  element: HTMLElement,\n  container: HTMLElement | (Window & typeof globalThis),\n  offset: number = 0,\n  direction?: \"row\" | \"column\"\n) => {\n  if (direction === \"row\") {\n    const elemLeft = horizontalScrollOffset(element, container);\n    container?.scrollTo?.({\n      left: elemLeft - offset,\n      behavior: \"smooth\",\n    });\n  } else {\n    const elemTop = verticalScrollOffset(element, container);\n    container?.scrollTo?.({\n      top: elemTop - offset,\n      behavior: \"smooth\",\n    });\n  }\n  element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n  container: HTMLElement | (Window & typeof globalThis)\n) => {\n  const containerScrollTop = getScrollTop(container);\n\n  if (container === window) {\n    // Accounting for cases where html/body are set to height:100%\n    const scrollHeight =\n      (document.documentElement && document.documentElement.scrollHeight) ||\n      document.body.scrollHeight;\n\n    return containerScrollTop + window.innerHeight >= scrollHeight;\n  }\n\n  return (\n    containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n    (container as ExtendedWindow).scrollHeight\n  );\n};\n\nexport const findFirstVisibleElement = (\n  container: HTMLElement | (Window & typeof globalThis),\n  options: HvScrollToVerticalOption[],\n  offset: number\n) => {\n  const boundsTop = verticalScrollOffset(container);\n\n  let i = 0;\n\n  // Find index of first element whose top is still visible inside the container\n  for (; i < options.length; i += 1) {\n    const ele = document.getElementById(options[i].value);\n\n    if (ele) {\n      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n      if (elemTop > boundsTop) {\n        break;\n      }\n    }\n  }\n\n  // Return the previous index, the element that last scrolled past the top\n  return i - 1;\n};\n"],"names":[],"mappings":";;AAIa,MAAA,eAAe,CAC1B,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAEd,WAAA,OAAO,WACP,OAAO,eACN,SAAS,mBAAmB,SAAS,gBAAgB,aACtD,SAAS,KAAK;AAAA,EAElB;AAEA,SAAQ,EAAqB;AAC/B;AAEO,MAAM,uBAAuB,CAClC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACI,GAAsB,wBAAwB,EAAE,OAAO,MACxD,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAQ,EAAqB;AAAA,EAC/B;AAEQ,SAAA,EAAqB,YAAa,EAAqB;AACjE;AAEO,MAAM,yBAAyB,CACpC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACG,GAAG,wBAAwB,EAAE,QAAQ,MACrC,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAO,EAAE;AAAA,EACX;AAEO,SAAA,EAAE,aAAc,EAAqB;AAC9C;AAEO,MAAM,gBAAgB,CAC3B,SACA,WACA,SAAiB,GACjB,cACG;AACH,MAAI,cAAc,OAAO;AACjB,UAAA,WAAW,uBAAuB,SAAS,SAAS;AAC1D,eAAW,WAAW;AAAA,MACpB,MAAM,WAAW;AAAA,MACjB,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACC,UAAA,UAAU,qBAAqB,SAAS,SAAS;AACvD,eAAW,WAAW;AAAA,MACpB,KAAK,UAAU;AAAA,MACf,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACA,UAAQ,MAAM,EAAE,eAAe,KAAM,CAAA;AACvC;AAEa,MAAA,wBAAwB,CACnC,cACG;AACG,QAAA,qBAAqB,aAAa,SAAS;AAEjD,MAAI,cAAc,QAAQ;AAExB,UAAM,eACH,SAAS,mBAAmB,SAAS,gBAAgB,gBACtD,SAAS,KAAK;AAET,WAAA,qBAAqB,OAAO,eAAe;AAAA,EACpD;AAGE,SAAA,qBAAsB,UAA6B,gBAClD,UAA6B;AAElC;AAEO,MAAM,0BAA0B,CACrC,WACA,SACA,WACG;AACG,QAAA,YAAY,qBAAqB,SAAS;AAEhD,MAAI,IAAI;AAGR,SAAO,IAAI,QAAQ,QAAQ,KAAK,GAAG;AACjC,UAAM,MAAM,SAAS,eAAe,QAAQ,CAAC,EAAE,KAAK;AAEpD,QAAI,KAAK;AACP,YAAM,UAAU,qBAAqB,GAAG,KAAK,QAAQ,CAAC,EAAE,UAAU;AAElE,UAAI,UAAU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAO,IAAI;AACb;;;;;;;"}

package/dist/cjs/components/ScrollTo/withTooltip.cjs

@@ -4,7 +4,9 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const withTooltip$1 = require("../../hocs/withTooltip.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const hideTooltip = (event) => {
-  const isOverFlow = event.target.children.length > 1 ? Array.from(event.currentTarget.children).some((child) => child.scrollWidth > child.clientWidth) : event.target.scrollWidth > event.target.clientWidth;
+  const isOverFlow = event.target.children.length > 1 ? Array.from(event.currentTarget.children).some(
+    (child) => child.scrollWidth > child.clientWidth
+  ) : event.target.scrollWidth > event.target.clientWidth;
   return !isOverFlow;
 };
 const withTooltip = (label, componentType, tooltipPosition = "top", hideOnOverflow = true) => {

package/dist/cjs/components/ScrollTo/withTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withTooltip.cjs","sources":["../../../../src/components/ScrollTo/withTooltip.tsx"],"sourcesContent":["import { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { withTooltip as withTooltipUtil } from \"@core/hocs/withTooltip\";\n\nimport { HvScrollToTooltipPositions } from \"./types\";\n\nconst hideTooltip = (event: React.MouseEvent<HTMLDivElement>) => {\n  const isOverFlow =\n    (event.target as HTMLDivElement).children.length > 1\n      ? Array.from(event.currentTarget.children).some(\n          (child) => child.scrollWidth > child.clientWidth\n        )\n      : (event.target as HTMLDivElement).scrollWidth >\n        (event.target as HTMLDivElement).clientWidth;\n  return !isOverFlow;\n};\n\nexport const withTooltip = (\n  label: string,\n  componentType: React.ElementType,\n  tooltipPosition: HvScrollToTooltipPositions = \"top\",\n  hideOnOverflow: boolean = true\n) => {\n  const component = (props: HvTypographyProps) => (\n    <HvTypography component={componentType} {...props}>\n      {props.children}\n    </HvTypography>\n  );\n\n  const hideTooltipFunc = hideOnOverflow ? hideTooltip : undefined;\n\n  return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);\n};\n"],"names":["hideTooltip","event","isOverFlow","target","children","length","Array","from","currentTarget","some","child","scrollWidth","clientWidth","withTooltip","label","componentType","tooltipPosition","hideOnOverflow","component","props","jsx","HvTypography","hideTooltipFunc","undefined","withTooltipUtil"],"mappings":";;;;;AAKA,MAAMA,cAAcA,CAACC,UAA4C;AACzDC,QAAAA,aACHD,MAAME,OAA0BC,SAASC,SAAS,IAC/CC,MAAMC,KAAKN,MAAMO,cAAcJ,QAAQ,EAAEK,KACtCC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WACvC,IACCX,MAAME,OAA0BQ,cAChCV,MAAME,OAA0BS;AACvC,SAAO,CAACV;AACV;AAEO,MAAMW,cAAcA,CACzBC,OACAC,eACAC,kBAA8C,OAC9CC,iBAA0B,SACvB;AACGC,QAAAA,YAAYA,CAACC,UAChBC,2BAAA,IAAAC,WAAA,cAAA,EAAa,WAAWN,eAAe,GAAII,OACzCA,UAAAA,MAAMf,SACT,CAAA;AAGIkB,QAAAA,kBAAkBL,iBAAiBjB,cAAcuB;AAEvD,SAAOC,cAAgBN,YAAAA,WAAWJ,OAAOE,iBAAiBM,eAAe;AAC3E;;"}
+{"version":3,"file":"withTooltip.cjs","sources":["../../../../src/components/ScrollTo/withTooltip.tsx"],"sourcesContent":["import { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { withTooltip as withTooltipUtil } from \"@core/hocs/withTooltip\";\n\nimport { HvScrollToTooltipPositions } from \"./types\";\n\nconst hideTooltip = (event: React.MouseEvent<HTMLDivElement>) => {\n  const isOverFlow =\n    (event.target as HTMLDivElement).children.length > 1\n      ? Array.from(event.currentTarget.children).some(\n          (child) => child.scrollWidth > child.clientWidth\n        )\n      : (event.target as HTMLDivElement).scrollWidth >\n        (event.target as HTMLDivElement).clientWidth;\n  return !isOverFlow;\n};\n\nexport const withTooltip = (\n  label: string,\n  componentType: React.ElementType,\n  tooltipPosition: HvScrollToTooltipPositions = \"top\",\n  hideOnOverflow: boolean = true\n) => {\n  const component = (props: HvTypographyProps) => (\n    <HvTypography component={componentType} {...props}>\n      {props.children}\n    </HvTypography>\n  );\n\n  const hideTooltipFunc = hideOnOverflow ? hideTooltip : undefined;\n\n  return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);\n};\n"],"names":["jsx","HvTypography","withTooltipUtil"],"mappings":";;;;;AAKA,MAAM,cAAc,CAAC,UAA4C;AACzD,QAAA,aACH,MAAM,OAA0B,SAAS,SAAS,IAC/C,MAAM,KAAK,MAAM,cAAc,QAAQ,EAAE;AAAA,IACvC,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA,EAAA,IAEtC,MAAM,OAA0B,cAChC,MAAM,OAA0B;AACvC,SAAO,CAAC;AACV;AAEO,MAAM,cAAc,CACzB,OACA,eACA,kBAA8C,OAC9C,iBAA0B,SACvB;AACG,QAAA,YAAY,CAAC,UAChBA,2BAAA,IAAAC,WAAA,cAAA,EAAa,WAAW,eAAgB,GAAG,OACzC,UAAA,MAAM,SACT,CAAA;AAGI,QAAA,kBAAkB,iBAAiB,cAAc;AAEvD,SAAOC,cAAgB,YAAA,WAAW,OAAO,iBAAiB,eAAe;AAC3E;;"}

package/dist/cjs/components/Section/Section.cjs

@@ -9,43 +9,71 @@ const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const setId = require("../../utils/setId.cjs");
 const Section_styles = require("./Section.styles.cjs");
 const Button = require("../Button/Button.cjs");
-const HvSection = React.forwardRef((props, ref) => {
-  const {
-    id,
-    classes: classesProp,
-    className,
-    title,
-    expandable,
-    expanded,
-    defaultExpanded = true,
-    actions,
-    onToggle,
-    expandButtonProps,
-    children,
-    ...others
-  } = useDefaultProps.useDefaultProps("HvSection", props);
-  const {
-    classes,
-    cx
-  } = Section_styles.useClasses(classesProp);
-  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const elementId = useUniqueId.useUniqueId(id, "hvSection");
-  const contentId = setId.setId(elementId, "content");
-  const showContent = expandable ? !!isOpen : true;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id: elementId, 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, {}) }),
+const HvSection = React.forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      classes: classesProp,
+      className,
       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
-    }), children })
-  ] });
-});
+      expandable,
+      expanded,
+      defaultExpanded = true,
+      actions,
+      onToggle,
+      expandButtonProps,
+      children,
+      ...others
+    } = useDefaultProps.useDefaultProps("HvSection", props);
+    const { classes, cx } = Section_styles.useClasses(classesProp);
+    const [isOpen, setIsOpen] = useControlled.useControlled(
+      expanded,
+      Boolean(defaultExpanded)
+    );
+    const elementId = useUniqueId.useUniqueId(id, "hvSection");
+    const contentId = setId.setId(elementId, "content");
+    const showContent = expandable ? !!isOpen : true;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        id: elementId,
+        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 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: contentId,
+              hidden: !isOpen,
+              className: cx(classes.content, { [classes.hidden]: !showContent }),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 exports.sectionClasses = Section_styles.staticClasses;
 exports.HvSection = HvSection;
 //# sourceMappingURL=Section.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Section.cjs","sources":["../../../../src/components/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { setId } from \"@core/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":["HvSection","forwardRef","props","ref","id","classes","classesProp","className","title","expandable","expanded","defaultExpanded","actions","onToggle","expandButtonProps","children","others","useDefaultProps","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","elementId","useUniqueId","contentId","setId","showContent","jsxs","root","header","jsx","HvButton","event","o","Up","Down","content","hidden"],"mappings":";;;;;;;;;;;AA2CO,MAAMA,YAAYC,MAAAA,WACvB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAaf,KAAK;AAEhC,QAAA;AAAA,IAAEG;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,eAAAA,WAAWb,WAAW;AAExC,QAAA,CAACc,QAAQC,SAAS,IAAIC,cAAAA,cAC1BZ,UACAa,QAAQZ,eAAe,CACzB;AAEMa,QAAAA,YAAYC,YAAAA,YAAYrB,IAAI,WAAW;AACvCsB,QAAAA,YAAYC,MAAAA,MAAMH,WAAW,SAAS;AAE5C,QAAMI,cAAcnB,aAAa,CAAC,CAACW,SAAS;AAE5C,SACGS,2BAAA,KAAA,OAAA,EACC,KACA,IAAIL,WACJ,WAAWN,GAAGb,QAAQyB,MAAMvB,SAAS,GACrC,GAAIS,QAEJ,UAAA;AAAA,IAACa,2BAAA,KAAA,OAAA,EAAI,WAAWxB,QAAQ0B,QACrBtB,UAAAA;AAAAA,MAAAA,cACEuB,2BAAA,IAAAC,iBAAA,EACC,MAAI,MACJ,SAAUC,CAAU,UAAA;AACPC,kBAAAA,CAAAA,MAAM,CAACA,CAAC;AACRD,mBAAAA,OAAO,CAACd,MAAM;AAAA,MAAA,GAE3B,iBAAeA,QACf,iBAAeM,WACf,cAAYN,SAAS,aAAa,UAC9BN,GAAAA,mBAEHM,UAAS,SAAAY,2BAAA,IAACI,sBAAK,IAAGJ,+BAACK,gBAAAA,OAAO,CAAA,GAC7B;AAAA,MAED7B;AAAAA,MACAwB,2BAAA,IAAA,OAAA,EAAI,WAAW3B,QAAQO,SAAUA,UAAQ,SAAA;AAAA,IAAA,GAC5C;AAAA,IACAoB,2BAAAA,IAAC,OACC,EAAA,IAAIN,WACJ,QAAQ,CAACN,QACT,WAAWF,GAAGb,QAAQiC,SAAS;AAAA,MAAE,CAACjC,QAAQkC,MAAM,GAAG,CAACX;AAAAA,IAAAA,CAAa,GAEhEb,SACH,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ,CACF;;;"}
+{"version":3,"file":"Section.cjs","sources":["../../../../src/components/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { setId } from \"@core/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;;;"}

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

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvSection", {
+const { staticClasses, useClasses } = classes.createClasses("HvSection", {
   root: {
     width: "100%",
     display: "flex",
@@ -15,10 +12,7 @@ const {
     borderRadius: uikitStyles.theme.radii.round,
     border: `1px solid ${uikitStyles.theme.colors.atmo4}`
   },
-  hidden: {
-    height: 0,
-    display: "none"
-  },
+  hidden: { height: 0, display: "none" },
   header: {
     display: "flex",
     alignItems: "center",

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

@@ -1 +1 @@
-{"version":3,"file":"Section.styles.cjs","sources":["../../../../src/components/Section/Section.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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":["staticClasses","useClasses","createClasses","root","width","display","flexDirection","padding","theme","space","sm","backgroundColor","colors","atmo1","borderRadius","radii","round","border","atmo4","hidden","height","header","alignItems","position","minHeight","sizes","content","marginTop","actions","gap","xs","right"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,aAAa;AAAA,EACtEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,iBAAiBH,YAAAA,MAAMI,OAAOC;AAAAA,IAC9BC,cAAcN,YAAAA,MAAMO,MAAMC;AAAAA,IAC1BC,QAAS,aAAYT,YAAMI,MAAAA,OAAOM,KAAM;AAAA,EAC1C;AAAA,EACAC,QAAQ;AAAA,IAAEC,QAAQ;AAAA,IAAGf,SAAS;AAAA,EAAO;AAAA,EACrCgB,QAAQ;AAAA,IACNhB,SAAS;AAAA,IACTiB,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,WAAWhB,YAAAA,MAAMiB,MAAMf;AAAAA,EACzB;AAAA,EACAgB,SAAS;AAAA,IACPC,WAAWnB,YAAAA,MAAMC,MAAMC;AAAAA,EACzB;AAAA,EACAkB,SAAS;AAAA,IACPvB,SAAS;AAAA,IACTwB,KAAKrB,YAAAA,MAAMC,MAAMqB;AAAAA,IACjBP,UAAU;AAAA,IACVQ,OAAO;AAAA,EACT;AACF,CAAC;;;"}
+{"version":3,"file":"Section.styles.cjs","sources":["../../../../src/components/Section/Section.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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;;;"}

package/dist/cjs/components/SelectionList/SelectionList.cjs

@@ -51,17 +51,20 @@ const HvSelectionList = React.forwardRef((props, ref) => {
     singleSelectionToggle = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvSelectionList", props);
-  const {
-    classes,
-    cx
-  } = SelectionList_styles.useClasses(classesProp);
+  const { classes, cx } = SelectionList_styles.useClasses(classesProp);
   const elementId = useUniqueId.useUniqueId(id, "hvselectionlist");
-  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue !== void 0 ? defaultValue : (
-    // when uncontrolled and no default value is given,
-    // extract the initial selected values from the children own state
-    () => getValueFromSelectedChildren(children, multiple)
-  ));
-  const [validationState, setValidationState] = useControlled.useControlled(status, "standBy");
+  const [value, setValue] = useControlled.useControlled(
+    valueProp,
+    defaultValue !== void 0 ? defaultValue : (
+      // when uncontrolled and no default value is given,
+      // extract the initial selected values from the children own state
+      () => getValueFromSelectedChildren(children, multiple)
+    )
+  );
+  const [validationState, setValidationState] = useControlled.useControlled(
+    status,
+    "standBy"
+  );
   const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
   const [allValues, selectedState] = React.useMemo(() => {
     const childValues = [];
@@ -98,26 +101,48 @@ const HvSelectionList = React.forwardRef((props, ref) => {
       window.removeEventListener("keyup", handleMeta);
     };
   }, [allValues, selectedState, setValue]);
-  const onChildChangeInterceptor = React.useCallback((index, childOnClick, evt) => {
-    childOnClick?.(evt);
-    if (!readOnly && !disabled) {
-      let newValue;
-      if (multiple) {
-        newValue = multiSelectionEventHandler.multiSelectionEventHandler(evt, index, selectionAnchor, allValues, selectedState, void 0);
-      } else {
-        newValue = singleSelectionToggle && selectedState[index] ? null : allValues[index];
-      }
-      onChange?.(evt, newValue);
-      setValue(() => {
-        if (required && newValue.length === 0) {
-          setValidationState("invalid");
+  const onChildChangeInterceptor = React.useCallback(
+    (index, childOnClick, evt) => {
+      childOnClick?.(evt);
+      if (!readOnly && !disabled) {
+        let newValue;
+        if (multiple) {
+          newValue = multiSelectionEventHandler.multiSelectionEventHandler(
+            evt,
+            index,
+            selectionAnchor,
+            allValues,
+            selectedState,
+            void 0
+          );
         } else {
-          setValidationState("valid");
+          newValue = singleSelectionToggle && selectedState[index] ? null : allValues[index];
         }
-        return newValue;
-      });
-    }
-  }, [allValues, disabled, multiple, onChange, readOnly, required, selectedState, setValidationState, setValue, singleSelectionToggle, selectionAnchor]);
+        onChange?.(evt, newValue);
+        setValue(() => {
+          if (required && newValue.length === 0) {
+            setValidationState("invalid");
+          } else {
+            setValidationState("valid");
+          }
+          return newValue;
+        });
+      }
+    },
+    [
+      allValues,
+      disabled,
+      multiple,
+      onChange,
+      readOnly,
+      required,
+      selectedState,
+      setValidationState,
+      setValue,
+      singleSelectionToggle,
+      selectionAnchor
+    ]
+  );
   const modifiedChildren = React.useMemo(() => {
     return React__default.default.Children.map(children, (child, i) => {
       const childIsSelected = selectedState[i];
@@ -132,16 +157,68 @@ const HvSelectionList = React.forwardRef((props, ref) => {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   const listId = label && setId.setId(elementId, "listbox") || "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, status: validationState, disabled, required, readOnly, className: cx(classes.root, className), children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), label, className: classes.label }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), className: classes.description, children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { id: listId, interactive: true, condensed: true, role: "listbox", "aria-multiselectable": multiple || void 0, "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": validationState === "invalid" ? true : void 0, "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, className: cx(classes.listbox, {
-      [classes.vertical]: orientation === "vertical",
-      [classes.horizontal]: orientation === "horizontal",
-      [classes.invalid]: validationState === "invalid"
-    }), ref: listForkedRef, ...others, children: modifiedChildren }),
-    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormElement.HvFormElement,
+    {
+      id,
+      name,
+      status: validationState,
+      disabled,
+      required,
+      readOnly,
+      className: cx(classes.root, className),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          Label.HvLabel,
+          {
+            id: setId.setId(elementId, "label"),
+            label,
+            className: classes.label
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          InfoMessage.HvInfoMessage,
+          {
+            id: setId.setId(elementId, "description"),
+            className: classes.description,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ListContainer.HvListContainer,
+          {
+            id: listId,
+            interactive: true,
+            condensed: true,
+            role: "listbox",
+            "aria-multiselectable": multiple || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+            "aria-invalid": validationState === "invalid" ? true : void 0,
+            "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
+            "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+            className: cx(classes.listbox, {
+              [classes.vertical]: orientation === "vertical",
+              [classes.horizontal]: orientation === "horizontal",
+              [classes.invalid]: validationState === "invalid"
+            }),
+            ref: listForkedRef,
+            ...others,
+            children: modifiedChildren
+          }
+        ),
+        canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+          WarningText.HvWarningText,
+          {
+            id: setId.setId(elementId, "error"),
+            disableBorder: true,
+            className: classes.error,
+            children: validationMessage
+          }
+        )
+      ]
+    }
+  );
 });
 exports.selectionListClasses = SelectionList_styles.staticClasses;
 exports.HvSelectionList = HvSelectionList;