@hitachivantara/uikit-react-core 5.87.3 → 5.89.0

package/dist/esm/hooks/useFocus.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { getDocument } from "../utils/document.js";
+const getActiveEl = () => getDocument()?.activeElement || null;
+function makeFocusUtils(containerRef) {
+  function focus(el, checkFocus = true) {
+    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {
+      el?.focus();
+    }
+  }
+  return {
+    focusPrevious() {
+      focus(getActiveEl()?.previousElementSibling);
+    },
+    focusNext() {
+      focus(getActiveEl()?.nextElementSibling);
+    },
+    focusFirst() {
+      focus(getActiveEl()?.parentElement?.firstElementChild);
+    },
+    focusLast() {
+      focus(getActiveEl()?.parentElement?.lastElementChild);
+    },
+    focusChild(index) {
+      focus(containerRef.current?.children[index], false);
+    },
+    focusSibling(index) {
+      focus(getActiveEl()?.parentElement?.children[index]);
+    }
+  };
+}
+function useFocus({
+  containerRef
+}) {
+  return useMemo(() => makeFocusUtils(containerRef), [containerRef]);
+}
+export {
+  useFocus
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.js","sources":["../../../src/hooks/useFocus.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getDocument } from \"../utils/document\";\n\n/** server-side safe `document.activeElement` wrapper */\nconst getActiveEl = () => getDocument()?.activeElement || null;\n\nfunction makeFocusUtils(containerRef: React.RefObject<HTMLElement>) {\n  function focus(el?: Element | null, checkFocus = true) {\n    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {\n      (el as HTMLElement)?.focus();\n    }\n  }\n\n  return {\n    focusPrevious() {\n      focus(getActiveEl()?.previousElementSibling);\n    },\n    focusNext() {\n      focus(getActiveEl()?.nextElementSibling);\n    },\n    focusFirst() {\n      focus(getActiveEl()?.parentElement?.firstElementChild);\n    },\n    focusLast() {\n      focus(getActiveEl()?.parentElement?.lastElementChild);\n    },\n    focusChild(index: number) {\n      focus(containerRef.current?.children[index], false);\n    },\n    focusSibling(index: number) {\n      focus(getActiveEl()?.parentElement?.children[index]);\n    },\n  };\n}\n\nexport function useFocus({\n  containerRef,\n}: {\n  containerRef: React.RefObject<HTMLElement>;\n}) {\n  return useMemo(() => makeFocusUtils(containerRef), [containerRef]);\n}\n"],"names":[],"mappings":";;AAKA,MAAM,cAAc,MAAM,eAAe,iBAAiB;AAE1D,SAAS,eAAe,cAA4C;AACzD,WAAA,MAAM,IAAqB,aAAa,MAAM;AACrD,QAAI,CAAC,cAAc,aAAa,SAAS,SAAS,YAAA,CAAa,GAAG;AAC/D,UAAoB,MAAM;AAAA,IAAA;AAAA,EAC7B;AAGK,SAAA;AAAA,IACL,gBAAgB;AACR,YAAA,eAAe,sBAAsB;AAAA,IAC7C;AAAA,IACA,YAAY;AACJ,YAAA,eAAe,kBAAkB;AAAA,IACzC;AAAA,IACA,aAAa;AACL,YAAA,YAAA,GAAe,eAAe,iBAAiB;AAAA,IACvD;AAAA,IACA,YAAY;AACJ,YAAA,YAAA,GAAe,eAAe,gBAAgB;AAAA,IACtD;AAAA,IACA,WAAW,OAAe;AACxB,YAAM,aAAa,SAAS,SAAS,KAAK,GAAG,KAAK;AAAA,IACpD;AAAA,IACA,aAAa,OAAe;AAC1B,YAAM,YAAY,GAAG,eAAe,SAAS,KAAK,CAAC;AAAA,IAAA;AAAA,EAEvD;AACF;AAEO,SAAS,SAAS;AAAA,EACvB;AACF,GAEG;AACD,SAAO,QAAQ,MAAM,eAAe,YAAY,GAAG,CAAC,YAAY,CAAC;AACnE;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.js","sources":["../../../src/hooks/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { HvScrollToOption } from \"../types/scroll\";\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"../utils/scroll\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks = false,\n  offset = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number,\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\",\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void,\n  ) => void,\n  HvScrollToOptionWithLink[],\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis) | null>(\n    typeof window !== \"undefined\" ? window : null,\n  );\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    if (typeof window !== \"undefined\") {\n      scrollEle.current =\n        (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n      lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n    }\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: any;\n\n    if (navigationMode !== \"none\") {\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 baseUrl =\n    relativeLinks || typeof window === \"undefined\" || window == null\n      ? \"\"\n      : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl],\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void,\n    ) => {\n      const option = elements.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 (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\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    [elements, navigationMode, direction, offset],\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useScrollTo.js","sources":["../../../src/hooks/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { HvScrollToOption } from \"../types/scroll\";\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"../utils/scroll\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks = false,\n  offset = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number,\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\",\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void,\n  ) => void,\n  HvScrollToOptionWithLink[],\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis) | null>(\n    typeof window !== \"undefined\" ? window : null,\n  );\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    if (typeof window !== \"undefined\") {\n      scrollEle.current =\n        (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n      lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n    }\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: any;\n\n    if (navigationMode !== \"none\") {\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 baseUrl =\n    relativeLinks || typeof window === \"undefined\" || window == null\n      ? \"\"\n      : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl],\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void,\n    ) => {\n      const option = elements.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 (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\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    [elements, navigationMode, direction, offset],\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":";;AAeO,MAAM,cAAc,CACzB,oBAAoB,GACpB,kBAAsC,QACtC,iBAA8C,QAC9C,gBAAgB,OAChB,SAAS,GACT,UAA8B,CAAA,GAC9B,WAQgB,QAChB,YAA8B,aAY3B;AACH,QAAM,YAAoB;AAC1B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAiB,iBAAiB;AAE5E,QAAM,YAAY;AAAA,IAChB,OAAO,WAAW,cAAc,SAAS;AAAA,EAC3C;AACM,QAAA,0BAA0B,OAAO,CAAC;AAClC,QAAA,yBAAyB,OAAe,CAAC;AAIzC,QAAA,mBAAmB,OAAO,aAAa;AAE7C,YAAU,MAAM;AACd,qBAAiB,UAAU;AAAA,EAAA,GAC1B,CAAC,aAAa,CAAC;AAElB,YAAU,MAAM;AACV,QAAA,OAAO,WAAW,aAAa;AACjC,gBAAU,UACP,mBAAmB,SAAS,eAAe,eAAe,KAAM;AAE5C,6BAAA,UAAU,qBAAqB,UAAU,OAAO;AAAA,IAAA;AAAA,EACzE,GACC,CAAC,eAAe,CAAC;AAEpB,QAAM,cAAc;AAAA,IAClB,CACE,UAIG;AACH,UACE,wBAAwB,YAAY,KACpC,QAAQ,uBACR;AACwB,gCAAA,UAAU,OAAO,sBAAsB,MAAM;AACnE,kCAAwB,UAAU;AAElC,gBAAM,2BAA2B;AAAA,YAC/B,UAAU;AAAA,YACV;AAAA,YACA;AAAA,UACF;AAEA,cAAI,mBAAmB;AAGvB,cAAI,2BAA2B,GAAG;AACb,+BAAA;AAAA,UAAA;AAMrB,cACE,mBAAmB,QAAQ,SAAS,KACpC,sBAAsB,UAAU,OAAO,GACvC;AACoB,gCAAA;AAAA,UAAA;AAGhB,gBAAA,qBAAqB,aAAa,UAAU,OAAO;AACnD,gBAAA,kBACJ,qBAAqB,uBAAuB;AAC9C,iCAAuB,UAAU;AAGjC,cAAI,iBAAiB;AACf,gBAAA,mBAAmB,iBAAiB,SAAS;AAC/C,iCAAmB,iBAAiB;AAAA,YAAA;AAAA,UACtC,WACS,mBAAmB,iBAAiB,SAAS;AACtD,+BAAmB,iBAAiB;AAAA,UAAA;AAGtC,2BAAiB,gBAAgB;AACjC,qBAAW,OAAO,gBAAgB;AAAA,QAAA,CACnC;AAAA,MAAA;AAAA,IAEL;AAAA,IACA,CAAC,QAAQ,SAAS,QAAQ;AAAA,EAC5B;AAGA,YAAU,MAAM;AACd,QAAI,UAAU,SAAS;AACrB,gBAAU,QAAQ,iBAAiB,UAAU,aAAa,KAAK;AAAA,IAAA;AAGjE,WAAO,MAAM;AACX,UAAI,UAAU,SAAS;AACX,kBAAA,QAAQ,oBAAoB,UAAU,WAAW;AAAA,MAAA;AAGzD,UAAA,wBAAwB,YAAY,GAAG;AAClC,eAAA,qBAAqB,wBAAwB,OAAO;AAC3D,gCAAwB,UAAU;AAAA,MAAA;AAAA,IAEtC;AAAA,EAAA,GACC,CAAC,WAAW,CAAC;AAGhB,YAAU,MAAM;AACV,QAAA;AAEJ,QAAI,mBAAmB,QAAQ;AACvB,YAAA,YAAY,SAAS,SAAS,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK;AAE1D,YAAM,SAAS,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,SAAS;AAExD,UAAI,QAAQ;AACV,YAAI,QAAQ;AACZ,gCAAwB,YAAY,MAAM;AACxC,gBAAM,MAAM,SAAS,eAAe,OAAO,KAAK;AAEhD,cAAI,KAAK;AACP,0BAAc,KAAK,UAAU,SAAS,OAAO,UAAU,MAAM;AAC7D,0BAAc,qBAAqB;AAAA,UAAA,OAC9B;AACI,qBAAA;AACT,gBAAI,UAAU,WAAW;AACvB,4BAAc,qBAAqB;AAAA,YAAA;AAAA,UACrC;AAAA,WAED,GAAI;AAAA,MAAA;AAAA,IACT;AAGF,WAAO,MAAM;AACX,oBAAc,qBAAqB;AAAA,IACrC;AAAA,EAKF,GAAG,EAAE;AAEL,QAAM,UACJ,iBAAiB,OAAO,WAAW,eAAe,UAAU,OACxD,KACA,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,CAAC;AAEvC,QAAM,WAAW;AAAA,IACf,MACE,QAAQ,IAAI,CAAC,OAAO;AAAA,MAClB,GAAG;AAAA,MACH,MAAM,GAAG,OAAO,IAAI,EAAE,KAAK;AAAA,IAAA,EAC3B;AAAA,IACJ,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,QAAM,cAAc;AAAA,IAClB,CACE,OAGA,IACA,OACA,oBACG;AACH,YAAM,SAAS,SAAS,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE;AAElD,UAAI,QAAQ;AACJ,cAAA,MAAM,SAAS,eAAe,EAAE;AACtC,YAAI,KAAK;AACP;AAAA,YACE;AAAA,YACA,UAAU;AAAA,YACV,OAAO,UAAU;AAAA,YACjB;AAAA,UACF;AAAA,QAAA;AAGF,YAAI,mBAAmB,QAAQ;AAC7B,iBAAO,QAAQ,UAAU,CAAI,GAAA,IAAI,OAAO,IAAI;AAAA,QAAA,WACnC,mBAAmB,WAAW;AACvC,iBAAO,QAAQ,aAAa,CAAI,GAAA,IAAI,OAAO,IAAI;AAAA,QAAA;AAGjD,yBAAiB,KAAK;AACtB,0BAAkB,KAAK;AAIvB,yBAAiB,UAAU;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,CAAC,UAAU,gBAAgB,WAAW,MAAM;AAAA,EAC9C;AAEO,SAAA,CAAC,eAAe,aAAa,QAAQ;AAC9C;"}

package/dist/esm/index.js

@@ -234,15 +234,17 @@ import { staticClasses as staticClasses96 } from "./Table/Table.styles.js";
 import { HvTable } from "./Table/Table.js";
 import { staticClasses as staticClasses97 } from "./Table/TableContainer/TableContainer.styles.js";
 import { HvTableContainer } from "./Table/TableContainer/TableContainer.js";
-import { staticClasses as staticClasses98 } from "./Table/TableBody/TableBody.styles.js";
+import { staticClasses as staticClasses98 } from "./Table/TableSection/TableSection.styles.js";
+import { HvTableSection } from "./Table/TableSection/TableSection.js";
+import { staticClasses as staticClasses99 } from "./Table/TableBody/TableBody.styles.js";
 import { HvTableBody } from "./Table/TableBody/TableBody.js";
-import { staticClasses as staticClasses99 } from "./Table/TableHead/TableHead.styles.js";
+import { staticClasses as staticClasses100 } from "./Table/TableHead/TableHead.styles.js";
 import { HvTableHead } from "./Table/TableHead/TableHead.js";
-import { staticClasses as staticClasses100 } from "./Table/TableHeader/TableHeader.styles.js";
+import { staticClasses as staticClasses101 } from "./Table/TableHeader/TableHeader.styles.js";
 import { HvTableHeader } from "./Table/TableHeader/TableHeader.js";
-import { staticClasses as staticClasses101 } from "./Table/TableRow/TableRow.styles.js";
+import { staticClasses as staticClasses102 } from "./Table/TableRow/TableRow.styles.js";
 import { HvTableRow } from "./Table/TableRow/TableRow.js";
-import { staticClasses as staticClasses102 } from "./Table/TableCell/TableCell.styles.js";
+import { staticClasses as staticClasses103 } from "./Table/TableCell/TableCell.styles.js";
 import { HvTableCell } from "./Table/TableCell/TableCell.js";
 import { useHvTableStyles } from "./Table/hooks/useHvTableStyles.js";
 import { useHvSortBy } from "./Table/hooks/useHvSortBy.js";
@@ -261,49 +263,48 @@ import { HvDateColumnCell } from "./Table/renderers/DateColumnCell.js";
 import { HvDropdownColumnCell } from "./Table/renderers/DropdownColumnCell.js";
 import { HvProgressColumnCell, normalizeProgressBar } from "./Table/renderers/ProgressColumnCell.js";
 import { HvSwitchColumnCell } from "./Table/renderers/SwitchColumnCell.js";
-import { staticClasses as staticClasses103 } from "./Tabs/Tabs.styles.js";
+import { staticClasses as staticClasses104 } from "./Tabs/Tabs.styles.js";
 import { HvTabs } from "./Tabs/Tabs.js";
-import { staticClasses as staticClasses104 } from "./Tabs/Tab/Tab.styles.js";
+import { staticClasses as staticClasses105 } from "./Tabs/Tab/Tab.styles.js";
 import { HvTab } from "./Tabs/Tab/Tab.js";
-import { staticClasses as staticClasses105 } from "./Tag/Tag.styles.js";
+import { staticClasses as staticClasses106 } from "./Tag/Tag.styles.js";
 import { HvTag } from "./Tag/Tag.js";
-import { staticClasses as staticClasses106 } from "./TagsInput/TagsInput.styles.js";
+import { staticClasses as staticClasses107 } from "./TagsInput/TagsInput.styles.js";
 import { HvTagsInput } from "./TagsInput/TagsInput.js";
-import { staticClasses as staticClasses107 } from "./TextArea/TextArea.styles.js";
+import { staticClasses as staticClasses108 } from "./TextArea/TextArea.styles.js";
 import { HvTextArea } from "./TextArea/TextArea.js";
-import { staticClasses as staticClasses108 } from "./TimeAgo/TimeAgo.styles.js";
+import { staticClasses as staticClasses109 } from "./TimeAgo/TimeAgo.styles.js";
 import { HvTimeAgo } from "./TimeAgo/TimeAgo.js";
-import { staticClasses as staticClasses109 } from "./TimePicker/TimePicker.styles.js";
+import { staticClasses as staticClasses110 } from "./TimePicker/TimePicker.styles.js";
 import { HvTimePicker } from "./TimePicker/TimePicker.js";
 import { HvToggleButton } from "./ToggleButton/ToggleButton.js";
-import { staticClasses as staticClasses110 } from "./Tooltip/Tooltip.styles.js";
+import { staticClasses as staticClasses111 } from "./Tooltip/Tooltip.styles.js";
 import { HvTooltip } from "./Tooltip/Tooltip.js";
-import { staticClasses as staticClasses111 } from "./TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses112 } from "./TreeView/TreeView.styles.js";
 import { HvTreeView } from "./TreeView/TreeView.js";
-import { staticClasses as staticClasses112 } from "./TreeView/TreeItem/TreeItem.styles.js";
+import { staticClasses as staticClasses113 } from "./TreeView/TreeItem/TreeItem.styles.js";
 import { HvTreeItem } from "./TreeView/TreeItem/TreeItem.js";
 import { useHvTreeItem } from "./TreeView/TreeItem/useHvTreeItem.js";
-import { staticClasses as staticClasses113 } from "./VerticalNavigation/VerticalNavigation.styles.js";
+import { staticClasses as staticClasses114 } from "./VerticalNavigation/VerticalNavigation.styles.js";
 import { HvVerticalNavigation } from "./VerticalNavigation/VerticalNavigation.js";
-import { staticClasses as staticClasses114 } from "./VerticalNavigation/Header/Header.styles.js";
+import { staticClasses as staticClasses115 } from "./VerticalNavigation/Header/Header.styles.js";
 import { HvVerticalNavigationHeader } from "./VerticalNavigation/Header/Header.js";
-import { staticClasses as staticClasses115 } from "./VerticalNavigation/Actions/Actions.styles.js";
+import { staticClasses as staticClasses116 } from "./VerticalNavigation/Actions/Actions.styles.js";
 import { HvVerticalNavigationActions } from "./VerticalNavigation/Actions/Actions.js";
-import { staticClasses as staticClasses116 } from "./VerticalNavigation/Actions/Action.styles.js";
+import { staticClasses as staticClasses117 } from "./VerticalNavigation/Actions/Action.styles.js";
 import { HvVerticalNavigationAction } from "./VerticalNavigation/Actions/Action.js";
-import { staticClasses as staticClasses117 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
+import { staticClasses as staticClasses118 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
 import { HvVerticalNavigationTree } from "./VerticalNavigation/Navigation/Navigation.js";
-import { staticClasses as staticClasses118 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
+import { staticClasses as staticClasses119 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
 import { HvVerticalNavigationSlider } from "./VerticalNavigation/NavigationSlider/NavigationSlider.js";
-import { staticClasses as staticClasses119 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses120 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
 import { HvVerticalNavigationTreeView } from "./VerticalNavigation/TreeView/TreeView.js";
-import { staticClasses as staticClasses120 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
+import { staticClasses as staticClasses121 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
 import { HvVerticalNavigationTreeViewItem } from "./VerticalNavigation/TreeView/TreeViewItem.js";
 import { VerticalNavigationContext } from "./VerticalNavigation/VerticalNavigationContext.js";
-import { staticClasses as staticClasses121 } from "./TableSection/TableSection.styles.js";
-import { HvTableSection } from "./TableSection/TableSection.js";
 import { HvIconButton } from "./IconButton/IconButton.js";
-import { staticClasses as staticClasses122 } from "./Skeleton/Skeleton.styles.js";
+import { HvIconContainer, staticClasses as staticClasses122, staticClasses as staticClasses123, useClasses } from "./IconContainer/IconContainer.js";
+import { staticClasses as staticClasses124 } from "./Skeleton/Skeleton.styles.js";
 import { HvSkeleton } from "./Skeleton/Skeleton.js";
 import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 export {
@@ -374,6 +375,7 @@ export {
   HvHeaderMenuItem,
   HvHeaderNavigation,
   HvIconButton,
+  HvIconContainer,
   HvInfoMessage,
   HvInlineEditor,
   HvInput,
@@ -450,8 +452,8 @@ export {
   VerticalNavigationContext,
   staticClasses17 as accordionClasses,
   staticClasses18 as actionBarClasses,
-  staticClasses116 as actionClasses,
-  staticClasses115 as actionsClasses,
+  staticClasses117 as actionClasses,
+  staticClasses116 as actionsClasses,
   staticClasses19 as actionsGenericClasses,
   staticClasses7 as adornmentClasses,
   staticClasses21 as appSwitcherActionClasses,
@@ -541,6 +543,7 @@ export {
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn,
+  staticClasses122 as iconContainerClasses,
   iconVariant,
   increaseSize,
   staticClasses10 as infoMessageClasses,
@@ -585,39 +588,41 @@ export {
   setId,
   setUid,
   staticClasses89 as simpleGridClasses,
-  staticClasses122 as skeletonClasses,
+  staticClasses124 as skeletonClasses,
   staticClasses90 as sliderClasses,
   staticClasses91 as snackbarClasses,
   staticClasses92 as snackbarContentClasses,
   staticClasses93 as snackbarProviderClasses,
   staticClasses94 as stackClasses,
+  staticClasses123 as staticClasses,
   staticClasses14 as suggestionsClasses,
   staticClasses95 as switchClasses,
-  staticClasses104 as tabClasses,
-  staticClasses98 as tableBodyClasses,
-  staticClasses102 as tableCellClasses,
+  staticClasses105 as tabClasses,
+  staticClasses99 as tableBodyClasses,
+  staticClasses103 as tableCellClasses,
   staticClasses96 as tableClasses,
   staticClasses97 as tableContainerClasses,
-  staticClasses99 as tableHeadClasses,
-  staticClasses100 as tableHeaderClasses,
-  staticClasses101 as tableRowClasses,
-  staticClasses121 as tableSectionClasses,
-  staticClasses103 as tabsClasses,
-  staticClasses105 as tagClasses,
-  staticClasses106 as tagsInputClasses,
-  staticClasses107 as textAreaClasses,
+  staticClasses100 as tableHeadClasses,
+  staticClasses101 as tableHeaderClasses,
+  staticClasses102 as tableRowClasses,
+  staticClasses98 as tableSectionClasses,
+  staticClasses104 as tabsClasses,
+  staticClasses106 as tagClasses,
+  staticClasses107 as tagsInputClasses,
+  staticClasses108 as textAreaClasses,
   theme,
   themes,
-  staticClasses108 as timeAgoClasses,
-  staticClasses109 as timePickerClasses,
-  staticClasses110 as tooltipClasses,
-  staticClasses112 as treeItemClasses,
-  staticClasses111 as treeView2Classes,
-  staticClasses119 as treeViewClasses,
-  staticClasses120 as treeViewItemClasses,
+  staticClasses109 as timeAgoClasses,
+  staticClasses110 as timePickerClasses,
+  staticClasses111 as tooltipClasses,
+  staticClasses113 as treeItemClasses,
+  staticClasses112 as treeView2Classes,
+  staticClasses120 as treeViewClasses,
+  staticClasses121 as treeViewItemClasses,
   staticClasses as typographyClasses,
   typographyVariants,
   uniqueId,
+  useClasses,
   useClickOutside,
   useComputation,
   useControlled,
@@ -650,10 +655,10 @@ export {
   useTheme,
   useUniqueId,
   useWidth,
-  staticClasses113 as verticalNavigationClasses,
-  staticClasses114 as verticalNavigationHeaderClasses,
-  staticClasses118 as verticalNavigationSliderClasses,
-  staticClasses117 as verticalNavigationTreeClasses,
+  staticClasses114 as verticalNavigationClasses,
+  staticClasses115 as verticalNavigationHeaderClasses,
+  staticClasses119 as verticalNavigationSliderClasses,
+  staticClasses118 as verticalNavigationTreeClasses,
   staticClasses86 as verticalScrollListItemClasses,
   staticClasses11 as warningTextClasses,
   withTooltip,

package/dist/esm/index.js.map

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

package/dist/esm/utils/Callout.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import SnackbarContent from "@mui/material/SnackbarContent";
+import { Close } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps, createClasses, useTheme } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { iconVariant } from "./iconVariant.js";
+import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
+import { HvButton } from "../Button/Button.js";
+const { useClasses, staticClasses } = createClasses("HvCallout", {
+  root: {
+    position: "relative",
+    boxShadow: "none",
+    flexWrap: "nowrap",
+    padding: 0
+  },
+  success: {
+    backgroundColor: theme.colors.positive_20
+  },
+  warning: {
+    backgroundColor: theme.colors.warning_20
+  },
+  error: {
+    backgroundColor: theme.colors.negative_20
+  },
+  default: {
+    backgroundColor: theme.colors.neutral_20
+  },
+  message: {
+    display: "flex",
+    alignItems: "center",
+    padding: 0,
+    color: theme.colors.base_dark
+  },
+  messageContent: {
+    textWrap: "balance",
+    overflow: "hidden",
+    wordBreak: "break-word"
+  },
+  messageIcon: {
+    "& svg .color0": {
+      fill: "inherit"
+    }
+  },
+  action: {
+    marginRight: 0
+  },
+  actionContent: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "space-between",
+    gap: theme.space.xs
+  },
+  actionCustom: {
+    flex: "0 0 auto"
+  },
+  actionClose: {
+    alignSelf: "flex-end"
+  }
+});
+const HvCallout = forwardRef(function HvCallout2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    showClose,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    onAction,
+    actionsPosition: actionsPositionProp = "auto",
+    children,
+    actionProps,
+    ...others
+  } = useDefaultProps("HvCallout", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const { activeTheme } = useTheme();
+  const icon = customIcon || showIcon && iconVariant(variant, "inherit");
+  const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
+  const actionsContent = /* @__PURE__ */ jsx(
+    HvActionsGeneric,
+    {
+      id,
+      className: classes.actionCustom,
+      variant: showClose ? "semantic" : activeTheme?.snackbar.actionButtonVariant,
+      actions,
+      onAction
+    }
+  );
+  const showCustomActions = actions && actionsPosition === "bottom-right";
+  return /* @__PURE__ */ jsx(
+    SnackbarContent,
+    {
+      ref,
+      id,
+      classes: {
+        root: cx(classes.root, classes[variant], className),
+        message: classes.message,
+        action: classes.action
+      },
+      message: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("div", { className: classes.messageIcon, children: icon }),
+        /* @__PURE__ */ jsx("div", { className: classes.messageContent, children }),
+        actions && actionsPosition === "inline" && actionsContent
+      ] }),
+      action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", { className: classes.actionContent, children: [
+        showClose && /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            icon: true,
+            className: classes.actionClose,
+            variant: "semantic",
+            "aria-label": "Close",
+            onClick: (evt) => onClose?.(evt, "clickaway"),
+            ...actionProps,
+            children: /* @__PURE__ */ jsx(Close, { size: "XS" })
+          }
+        ),
+        showCustomActions && actionsContent
+      ] }),
+      ...others
+    }
+  );
+});
+export {
+  HvCallout,
+  staticClasses,
+  useClasses
+};

package/dist/esm/utils/Callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.js","sources":["../../../src/utils/Callout.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { SnackbarProps as MuiSnackbarProps } from \"@mui/material/Snackbar\";\nimport SnackbarContent, {\n  type SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  createClasses,\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { iconVariant } from \"./iconVariant\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvCallout\", {\n  root: {\n    position: \"relative\",\n    boxShadow: \"none\",\n    flexWrap: \"nowrap\",\n    padding: 0,\n  },\n  success: {\n    backgroundColor: theme.colors.positive_20,\n  },\n  warning: {\n    backgroundColor: theme.colors.warning_20,\n  },\n  error: {\n    backgroundColor: theme.colors.negative_20,\n  },\n  default: {\n    backgroundColor: theme.colors.neutral_20,\n  },\n  message: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 0,\n    color: theme.colors.base_dark,\n  },\n  messageContent: {\n    textWrap: \"balance\",\n    overflow: \"hidden\",\n    wordBreak: \"break-word\",\n  },\n  messageIcon: {\n    \"& svg .color0\": {\n      fill: \"inherit\",\n    },\n  },\n  action: {\n    marginRight: 0,\n  },\n  actionContent: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"100%\",\n    justifyContent: \"space-between\",\n    gap: theme.space.xs,\n  },\n  actionCustom: {\n    flex: \"0 0 auto\",\n  },\n  actionClose: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nexport type HvCalloutVariant = \"success\" | \"warning\" | \"error\" | \"default\";\n\nexport type HvCalloutActionPosition = \"auto\" | \"inline\" | \"bottom-right\";\n\nexport type HvCalloutClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalloutProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. */\n  children?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvCalloutVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Controls whether to show the close icon */\n  showClose?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** @inheritdoc */\n  onClose?: MuiSnackbarProps[\"onClose\"];\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvCalloutActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: Partial<HvButtonProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCalloutClasses;\n}\n\n/**\n * `HvCallout` is the internal content handler for the snackbars and banners. Might be promoted to a component.\n * @private @internal\n */\nexport const HvCallout = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvCalloutProps\n>(function HvCallout(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    showClose,\n    showIcon,\n    customIcon,\n    variant = \"default\",\n    onClose,\n    actions,\n    onAction,\n    actionsPosition: actionsPositionProp = \"auto\",\n    children,\n    actionProps,\n    ...others\n  } = useDefaultProps(\"HvCallout\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n  const { activeTheme } = useTheme();\n  const icon = customIcon || (showIcon && iconVariant(variant, \"inherit\"));\n\n  // TODO: consider making this flex-flow only, so it adapts according to the\n  // content length, available space, number of actions, etc.\n  const actionsPosition =\n    actionsPositionProp === \"auto\" ? \"inline\" : actionsPositionProp;\n\n  const actionsContent = (\n    <HvActionsGeneric\n      id={id}\n      className={classes.actionCustom}\n      variant={\n        showClose\n          ? \"semantic\"\n          : (activeTheme?.snackbar.actionButtonVariant as any)\n      }\n      actions={actions}\n      onAction={onAction}\n    />\n  );\n\n  const showCustomActions = actions && actionsPosition === \"bottom-right\";\n\n  return (\n    <SnackbarContent\n      ref={ref}\n      id={id}\n      classes={{\n        root: cx(classes.root, classes[variant], className),\n        message: classes.message,\n        action: classes.action,\n      }}\n      message={\n        <>\n          {icon && <div className={classes.messageIcon}>{icon}</div>}\n          <div className={classes.messageContent}>{children}</div>\n          {actions && actionsPosition === \"inline\" && actionsContent}\n        </>\n      }\n      action={\n        (showClose || showCustomActions) && (\n          <div className={classes.actionContent}>\n            {showClose && (\n              <HvButton\n                icon\n                className={classes.actionClose}\n                variant=\"semantic\"\n                aria-label=\"Close\"\n                onClick={(evt) => onClose?.(evt, \"clickaway\")}\n                {...actionProps}\n              >\n                <Close size=\"XS\" />\n              </HvButton>\n            )}\n            {showCustomActions && actionsContent}\n          </div>\n        )\n      }\n      {...others}\n    />\n  );\n});\n"],"names":["HvCallout"],"mappings":"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"}

package/dist/esm/utils/document.js.map

@@ -1 +1 @@
-{"version":3,"file":"document.js","sources":["../../../src/utils/document.ts"],"sourcesContent":["export function getDocument() {\n  return typeof window !== \"undefined\" ? document : undefined;\n}\n\n/** Wrapper around `document.getElementById` */\nexport function getElementById(elementId?: string) {\n  return (elementId && getDocument()?.getElementById(elementId)) || undefined;\n}\n\n/** Get a container element by id, falling back to document-body */\nexport function getContainerElement(elementId?: string) {\n  return getElementById(elementId) || getDocument()?.body;\n}\n"],"names":[],"mappings":"AAAO,SAAS,cAAc;AACrB,SAAA,OAAO,WAAW,cAAc,WAAW;AACpD;AAGO,SAAS,eAAe,WAAoB;AACjD,SAAQ,aAAa,YAAe,GAAA,eAAe,SAAS,KAAM;AACpE;AAGO,SAAS,oBAAoB,WAAoB;AACtD,SAAO,eAAe,SAAS,KAAK,YAAe,GAAA;AACrD;"}
+{"version":3,"file":"document.js","sources":["../../../src/utils/document.ts"],"sourcesContent":["export function getDocument() {\n  return typeof window !== \"undefined\" ? document : undefined;\n}\n\n/** Wrapper around `document.getElementById` */\nexport function getElementById(elementId?: string) {\n  return (elementId && getDocument()?.getElementById(elementId)) || undefined;\n}\n\n/** Get a container element by id, falling back to document-body */\nexport function getContainerElement(elementId?: string) {\n  return getElementById(elementId) || getDocument()?.body;\n}\n"],"names":[],"mappings":"AAAO,SAAS,cAAc;AACrB,SAAA,OAAO,WAAW,cAAc,WAAW;AACpD;AAGO,SAAS,eAAe,WAAoB;AACjD,SAAQ,aAAa,YAAA,GAAe,eAAe,SAAS,KAAM;AACpE;AAGO,SAAS,oBAAoB,WAAoB;AACtD,SAAO,eAAe,SAAS,KAAK,YAAe,GAAA;AACrD;"}

package/dist/esm/utils/focusUtils.js

@@ -1,8 +1,4 @@
 const outlineStyles = {
-  outlineColor: "#52A8EC",
-  outlineStyle: "solid",
-  outlineWidth: "0px",
-  outlineOffset: "-1px",
   boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
 export {

package/dist/esm/utils/focusUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusUtils.js","sources":["../../../src/utils/focusUtils.ts"],"sourcesContent":["export const outlineStyles = {\n  outlineColor: \"#52A8EC\",\n  outlineStyle: \"solid\",\n  outlineWidth: \"0px\",\n  outlineOffset: \"-1px\",\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;AAAA,EAC3B,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,WAAW;AACb;"}
+{"version":3,"file":"focusUtils.js","sources":["../../../src/utils/focusUtils.ts"],"sourcesContent":["export const outlineStyles = {\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AACb;"}