@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/hooks/useIsMounted.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useIsMounted = () => {
+  const isMounted = React.useRef(false);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+};
+exports.useIsMounted = useIsMounted;

package/dist/cjs/hooks/useLabels.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const deepMerge = require("../utils/deepMerge.cjs");
+function useLabels(defaultLabels, labels) {
+  return React.useMemo(() => {
+    return deepMerge.deepMerge(defaultLabels, labels);
+  }, [defaultLabels, labels]);
+}
+exports.useLabels = useLabels;

package/dist/cjs/hooks/useScrollTo.cjs

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const scroll = require("../utils/scroll.cjs");
+const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigationMode = "push", relativeLinks = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
+  const RETRY_MAX = 5;
+  const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp);
+  const scrollEle = React.useRef(
+    typeof window !== "undefined" ? window : null
+  );
+  const requestedAnimationFrame = React.useRef(0);
+  const lastContainerScrollTop = React.useRef(0);
+  const selectedIndexRef = React.useRef(selectedIndex);
+  React.useEffect(() => {
+    selectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]);
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
+      lastContainerScrollTop.current = scroll.verticalScrollOffset(scrollEle.current);
+    }
+  }, [scrollElementId]);
+  const checkScroll = React.useCallback(
+    (event) => {
+      if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) {
+        requestedAnimationFrame.current = window.requestAnimationFrame(() => {
+          requestedAnimationFrame.current = 0;
+          const firstVisibleElementIndex = scroll.findFirstVisibleElement(
+            scrollEle.current,
+            options,
+            offset
+          );
+          let newSelectedIndex = firstVisibleElementIndex;
+          if (firstVisibleElementIndex < 0) {
+            newSelectedIndex = 0;
+          }
+          if (newSelectedIndex < options.length - 1 && scroll.isScrolledToTheBottom(scrollEle.current)) {
+            newSelectedIndex += 1;
+          }
+          const containerScrollTop = scroll.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;
+          }
+          setSelectedIndex(newSelectedIndex);
+          onChange?.(event, newSelectedIndex);
+        });
+      }
+    },
+    [offset, options, onChange]
+  );
+  React.useEffect(() => {
+    if (scrollEle.current) {
+      scrollEle.current.addEventListener("scroll", checkScroll, false);
+    }
+    return () => {
+      if (scrollEle.current) {
+        scrollEle.current.removeEventListener("scroll", checkScroll);
+      }
+      if (requestedAnimationFrame.current !== 0) {
+        window.cancelAnimationFrame(requestedAnimationFrame.current);
+        requestedAnimationFrame.current = 0;
+      }
+    };
+  }, [checkScroll]);
+  React.useEffect(() => {
+    let checkRenderedInterval;
+    if (navigationMode !== "none") {
+      const hashValue = document.location.hash.split("#")[1] || "";
+      const option = options.find((o) => o.value === hashValue);
+      if (option) {
+        let retry = 0;
+        checkRenderedInterval = setInterval(() => {
+          const ele = document.getElementById(option.value);
+          if (ele) {
+            scroll.scrollElement(ele, scrollEle.current, option.offset || offset);
+            clearInterval(checkRenderedInterval);
+          } else {
+            retry += 1;
+            if (retry === RETRY_MAX) {
+              clearInterval(checkRenderedInterval);
+            }
+          }
+        }, 1e3);
+      }
+    }
+    return () => {
+      clearInterval(checkRenderedInterval);
+    };
+  }, []);
+  const baseUrl = relativeLinks || typeof window === "undefined" || window == null ? "" : window.location.href.split("#")[0];
+  const elements = React.useMemo(
+    () => options.map((o) => ({
+      ...o,
+      href: `${baseUrl}#${o.value}`
+    })),
+    [options, baseUrl]
+  );
+  const setScrollTo = React.useCallback(
+    (event, id, index, wrappedOnChange) => {
+      const option = elements.find((o) => o.value === id);
+      if (option) {
+        const ele = document.getElementById(id);
+        if (ele) {
+          scroll.scrollElement(
+            ele,
+            scrollEle.current,
+            option.offset || offset,
+            direction
+          );
+        }
+        if (navigationMode === "push") {
+          window.history.pushState({}, "", option.href);
+        } else if (navigationMode === "replace") {
+          window.history.replaceState({}, "", option.href);
+        }
+        setSelectedIndex(index);
+        wrappedOnChange?.(index);
+        selectedIndexRef.current = index;
+      }
+    },
+    [elements, navigationMode, direction, offset]
+  );
+  return [selectedIndex, setScrollTo, elements];
+};
+exports.useScrollTo = useScrollTo;

package/dist/cjs/hooks/useUniqueId.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useEnhancedEffect = require("./useEnhancedEffect.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const useReactId = React__namespace["useId".toString()] || (() => void 0);
+let count = 0;
+const useUniqueId = (deterministicId, idPrefix) => {
+  const [id, setId] = React__namespace.useState(useReactId());
+  useEnhancedEffect.useEnhancedEffect(() => {
+    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
+  }, [deterministicId, idPrefix]);
+  return deterministicId || (idPrefix ? idPrefix + id : id ?? "");
+};
+exports.useUniqueId = useUniqueId;

package/dist/cjs/icons.cjs

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styled = require("@emotion/styled");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const svgSizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 32,
+  lg: 96,
+  xl: 112
+};
+const SvgBase = styled__default.default("svg")({
+  display: "inline-block",
+  fill: "currentcolor",
+  width: "1em",
+  height: "1em",
+  fontSize: 16,
+  flexShrink: 0,
+  transition: "rotate 0.2s ease"
+});
+const Svg = styled__default.default(SvgBase)(({ size, color, compact, rotation }) => ({
+  rotate: rotation ? "180deg" : void 0,
+  margin: compact ? 0 : size === "xs" ? 10 : 8,
+  color: uikitStyles.getColor(color) ?? "inherit",
+  fontSize: svgSizeMap[size] ?? size ?? svgSizeMap.sm
+}));
+const defaultIconPathMap = {
+  // Semantic icons
+  Success: "M6.39 12 4 9.61l.7-.7 1.62 1.6 4.65-5.57.77.64zM8 15a7 7 0 0 1-4.94-2.06A7.02 7.02 0 1 1 8 15m8-7a8 8 0 1 0-8 8 8 8 0 0 0 8-8",
+  Caution: "M7.5 6h1v4h-1zm0 7h1v-1h-1zm8.5 2H0L8 1zM1.72 14h12.56L8 3.02z",
+  Fail: "M7.5 4h1v6h-1zm0 8h1v-1h-1zM16 8a8 8 0 1 0-8 8 8 8 0 0 0 8-8m-1 0a7 7 0 1 1-7-7 7 7 0 0 1 7 7",
+  Info: "M8 16a8 8 0 1 1 8-8 8 8 0 0 1-8 8M8 1a6.96 6.96 0 0 0-7 6.91V8a6.96 6.96 0 0 0 6.91 7H8a6.96 6.96 0 0 0 7-6.91V8a6.96 6.96 0 0 0-6.91-7zm-.5 11h1V6h-1zm0-7h1V4h-1z",
+  // Arrows/Navigation
+  CaretDown: "m8 11.53-6.13-6.13.93-.93L8 9.67l5.2-5.2.93.93z",
+  CaretRight: "m5.4 14.13-.93-.93L9.67 8l-5.2-5.2.93-.93L11.53 8z",
+  DotsHorizontal: "M9.1 7v2h-2V7zM2 7v2h2V7zm10 0v2h2V7z",
+  DotsVertical: "M7 6.9h2v2H7zM7 4h2V2H7zm0 10h2v-2H7z",
+  Start: "M2.99 16.05H2v-16h.99zm2.97-8 7.34 7.41.7-.7-6.64-6.71L14 1.33l-.7-.7z",
+  Backwards: "M11.3 15.5 4 8 11.3.5l.7.8L5.38 8 12 14.8z",
+  Forwards: "M4.79 15.5 4 14.8 10.62 8 4 1.3l.79-.8L12 8z",
+  End: "M13 0h1v16h-1zM2.58.58l-.7.7L8.57 8l-6.7 6.71.7.71L10 8z",
+  // Others
+  Add: "M16 8.5H8.5V16h-1V8.5H0v-1h7.5V0h1v7.5H16z",
+  Close: "m8.7 8 5.3 5.3-.7.7L8 8.7 2.7 14l-.7-.7L7.3 8 2 2.7l.7-.7L8 7.3 13.3 2l.7.7z",
+  Search: "M15.07 14.52 10.5 9.95a5.96 5.96 0 1 0-.72.7l4.58 4.58zM5.9 11A4.95 4.95 0 0 1 1 6v-.1A4.95 4.95 0 0 1 6 1h.1A4.95 4.95 0 0 1 11 6v.1A4.95 4.95 0 0 1 6 11z",
+  SortAsc: "M.08 6.07 6.5.01l6.42 6.06Zm0 0",
+  SortDesc: "M12.92 8.93 6.5 14.99.08 8.93Zm0 0",
+  Sort: "M10.24 7 6 11.24 1.76 7zM1.76 5 6 .76 10.24 5z",
+  // single-use icons in Widgets
+  Calendar: "M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z",
+  ColorPicker: "M15.41.57a2.05 2.05 0 0 0-2.82 0l-2.12 2.12-1.42-1.42-.7.71L14 7.64l.7-.7-1.4-1.42 2.1-2.12a2 2 0 0 0 0-2.83zm-.69 2.11L12.59 4.8l-1.42-1.42 2.12-2.12a1 1 0 0 1 1.42 1.42zM0 13v3h3l9-9-3-3zm2.59 2H1v-1.58l8-8L10.59 7z",
+  CurrentStep: "M16 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8",
+  Delete: "M12 1H4V0h8zm4 1v1h-2.1L13 16H3L2.1 3H0V2zm-3 1H3.1L4 15h8.1z",
+  Doc: "M9 0H2v16h12V5zm3.6 5H9V1.4zm.4 10H3V1h5v5h5z",
+  Edit: "M13.17 7.07 8.93 2.83 11.76 0 16 4.24zm-2.83-4.24 2.83 2.83 1.42-1.42-2.83-2.83zm-2.7 2.7L1 12.16V15h2.83l6.65-6.65-2.83-2.83m-.01-1.4 4.24 4.24L4.24 16H0v-4.24z",
+  Filters: "M1 2v1.6l6 6.1V14h2V9.7l6-6.1V2zM0 1h16v3l-6 6v5H6v-4.9L0 4z",
+  Fullscreen: "M16 0v4.5h-1V1.7l-4.65 4.65-.7-.7L14.29 1H11.5V0zM4.5 1V0H0v4.5h1V1.7l4.65 4.65.7-.7L1.71 1zM15 14.3l-4.65-4.65-.7.7L14.29 15H11.5v1H16v-4.5h-1zM5.65 9.64 1 14.29V11.5H0V16h4.5v-1H1.7l4.65-4.65z",
+  Menu: "M1 2v1.6l6 6.1V14h2V9.7l6-6.1V2zM0 1h16v3l-6 6v5H6v-4.9L0 4z",
+  OtherStep: "M12 8a4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4 4 4 0 0 1 4 4",
+  Time: "M8 15a7.02 7.02 0 1 0-4.94-2.06A7 7 0 0 0 8 15m0 1a8 8 0 1 1 8-8 8 8 0 0 1-8 8m2.65-4.65L7.5 8.21V3h1v4.8l2.85 2.85z",
+  User: "M9.6 8.7A4.5 4.5 0 0 0 8.04 0H8a4.5 4.5 0 0 0-4.5 4.46v.04a4.6 4.6 0 0 0 2.9 4.2A7.7 7.7 0 0 0 .5 16h1a6.5 6.5 0 0 1 6.47-6.5H8a6.5 6.5 0 0 1 6.5 6.47V16h1a7.5 7.5 0 0 0-5.9-7.3M4.5 4.5A3.54 3.54 0 0 1 8 1a3.54 3.54 0 0 1 3.5 3.5A3.54 3.54 0 0 1 8 8a3.54 3.54 0 0 1-3.5-3.5",
+  Remove: "M0 7.5h16v1H0z"
+};
+function HvIconInternal(props, ref) {
+  const { name, title, "aria-label": ariaLabel, rotate, ...others } = props;
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const iconsPathMap = React.useMemo(
+    () => ({ ...defaultIconPathMap, ...activeTheme?.icons }),
+    [activeTheme?.icons]
+  );
+  const isDefaultIcon = iconsPathMap[name] === defaultIconPathMap[name];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Svg,
+    {
+      ref,
+      "data-name": name,
+      rotation: rotate,
+      viewBox: !isDefaultIcon && activeTheme?.icons?.viewBox || "0 0 16 16",
+      focusable: false,
+      "aria-label": ariaLabel,
+      role: title || ariaLabel ? "img" : "none",
+      ...others,
+      children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: iconsPathMap[name] })
+      ]
+    }
+  );
+}
+const HvIcon = React.memo(React.forwardRef(HvIconInternal));
+exports.HvIcon = HvIcon;
+exports.SvgBase = SvgBase;

package/dist/cjs/providers/Provider.cjs

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const createCache = require("@emotion/cache");
+const react = require("@emotion/react");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const document = require("../utils/document.cjs");
+const theme = require("../utils/theme.cjs");
+const ThemeProvider = require("./ThemeProvider.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const createCache__default = /* @__PURE__ */ _interopDefault(createCache);
+const HvProvider = ({
+  children,
+  rootElementId,
+  cssBaseline = "global",
+  cssTheme = "global",
+  themes,
+  theme: theme$1,
+  colorMode,
+  emotionCache: emotionCacheProp,
+  classNameKey = uikitReactShared.defaultCacheKey
+}) => {
+  const scopedRootId = React.useId();
+  const themesList = theme.processThemes(themes);
+  const emotionCache = React.useMemo(() => {
+    if (emotionCacheProp) return emotionCacheProp;
+    if (classNameKey === uikitReactShared.defaultCacheKey) return uikitReactShared.defaultEmotionCache;
+    return createCache__default.default({ key: classNameKey, prepend: true });
+  }, [classNameKey, emotionCacheProp]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.CacheProvider, { value: emotionCache, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.Global,
+      {
+        styles: react.css`
+          ${cssBaseline === "global" && {
+          [`@layer hv-uikit-baseline`]: {
+            ...uikitStyles.CssBaseline
+          }
+        }}
+          ${uikitStyles.getThemesVars(themesList)}
+        `
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ThemeProvider.HvThemeProvider,
+      {
+        themes: themesList,
+        theme: theme$1 || themesList[0].name,
+        emotionCache,
+        colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0],
+        themeRootId: cssTheme === "scoped" ? rootElementId || scopedRootId : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, { children: ({ css }) => {
+          if (cssBaseline === "scoped") {
+            const rootElement = document.getElementById(rootElementId);
+            if (rootElement) {
+              rootElement.classList.add(
+                css({
+                  [`@layer ${rootElementId}-baseline`]: {
+                    ...uikitStyles.CssScopedBaseline
+                  }
+                })
+              );
+            }
+          }
+          return (cssTheme === "scoped" || cssBaseline === "scoped") && !rootElementId ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: scopedRootId,
+              className: cssBaseline === "scoped" ? css({
+                [`@layer ${rootElementId}-baseline`]: {
+                  ...uikitStyles.CssScopedBaseline
+                }
+              }) : void 0,
+              children
+            }
+          ) : children;
+        } })
+      }
+    )
+  ] });
+};
+exports.HvProvider = HvProvider;

package/dist/cjs/providers/ThemeProvider.cjs

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("@mui/material/styles");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const theme = require("../utils/theme.cjs");
+const HvThemeProvider = ({
+  children,
+  themes: themesList,
+  theme: themeProp,
+  emotionCache,
+  colorMode: colorModeProp,
+  themeRootId: rootId
+}) => {
+  const [theme$1, setTheme] = React.useState(themeProp);
+  const [colorMode, setColorMode] = React.useState(colorModeProp);
+  const {
+    theme: activeTheme,
+    selectedTheme,
+    selectedMode,
+    colorModes,
+    colorScheme
+  } = uikitStyles.parseTheme(themesList, theme$1, colorMode);
+  const themes = themesList.map((t) => t.name);
+  React.useEffect(() => {
+    setTheme(themeProp);
+    setColorMode(colorModeProp);
+  }, [colorModeProp, themeProp]);
+  React.useEffect(() => {
+    theme.setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);
+  }, [colorScheme, rootId, selectedMode, selectedTheme]);
+  const changeTheme = React.useCallback(
+    (newTheme = selectedTheme, newMode = selectedMode) => {
+      setTheme(newTheme);
+      setColorMode(newMode);
+    },
+    [selectedMode, selectedTheme]
+  );
+  const value = React.useMemo(
+    () => ({
+      themes,
+      colorModes,
+      activeTheme,
+      selectedTheme,
+      selectedMode,
+      changeTheme,
+      rootId
+    }),
+    [
+      themes,
+      colorModes,
+      activeTheme,
+      selectedTheme,
+      selectedMode,
+      changeTheme,
+      rootId
+    ]
+  );
+  const muiTheme = React.useMemo(() => {
+    const colors = activeTheme.colors.modes[colorMode];
+    return styles.createTheme({
+      spacing: activeTheme.space.base,
+      typography: {
+        fontFamily: activeTheme.fontFamily.body
+      },
+      palette: {
+        primary: { main: colors.primary },
+        success: { main: colors.positive },
+        warning: { main: colors.warning },
+        error: { main: colors.negative },
+        info: { main: colors.info },
+        text: {
+          primary: colors.text,
+          secondary: colors.textSubtle,
+          disabled: colors.textDisabled
+        },
+        background: {
+          default: colors.bgPage,
+          paper: colors.bgContainer
+        },
+        divider: colors.border,
+        action: {
+          active: colors.primary,
+          hover: colors.primaryStrong,
+          selected: colors.primaryStrong,
+          disabled: colors.textDisabled,
+          disabledBackground: colors.bgDisabled
+        }
+      },
+      components: {
+        MuiButtonBase: {
+          defaultProps: {
+            disableRipple: true,
+            disableTouchRipple: true
+          }
+        }
+      },
+      breakpoints: activeTheme.breakpoints
+    });
+  }, [activeTheme, colorMode]);
+  const emotionCacheValue = React.useMemo(
+    () => ({ cache: emotionCache }),
+    [emotionCache]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.HvThemeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.EmotionContext.Provider, { value: emotionCacheValue, children }) }) });
+};
+Object.defineProperty(exports, "EmotionContext", {
+  enumerable: true,
+  get: () => uikitReactShared.EmotionContext
+});
+Object.defineProperty(exports, "HvThemeContext", {
+  enumerable: true,
+  get: () => uikitReactShared.HvThemeContext
+});
+Object.defineProperty(exports, "defaultCacheKey", {
+  enumerable: true,
+  get: () => uikitReactShared.defaultCacheKey
+});
+Object.defineProperty(exports, "defaultEmotionCache", {
+  enumerable: true,
+  get: () => uikitReactShared.defaultEmotionCache
+});
+exports.HvThemeProvider = HvThemeProvider;

package/dist/cjs/types/generic.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function fixedForwardRef(render) {
+  return React.forwardRef(render);
+}
+exports.fixedForwardRef = fixedForwardRef;

package/dist/cjs/utils/Callout.cjs

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const SnackbarContent = require("@mui/material/SnackbarContent");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../icons.cjs");
+const iconVariant = require("./iconVariant.cjs");
+const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
+const Button = require("../Button/Button.cjs");
+const StatusIcon = require("../StatusIcon/StatusIcon.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
+const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
+  root: {
+    position: "relative",
+    boxShadow: "none",
+    flexWrap: "nowrap",
+    padding: 0,
+    borderRadius: uikitStyles.theme.radii.round
+  },
+  success: {
+    backgroundColor: uikitStyles.theme.colors.positiveDimmed
+  },
+  warning: {
+    backgroundColor: uikitStyles.theme.colors.warningDimmed
+  },
+  error: {
+    backgroundColor: uikitStyles.theme.colors.negativeDimmed
+  },
+  info: {
+    backgroundColor: uikitStyles.theme.colors.infoDimmed
+  },
+  accent: {
+    backgroundColor: uikitStyles.theme.colors.accentDimmed
+  },
+  default: {
+    backgroundColor: uikitStyles.theme.colors.infoDimmed
+  },
+  message: {
+    display: "flex",
+    alignItems: "center",
+    padding: 0,
+    color: uikitStyles.theme.colors.textDark
+  },
+  messageContent: {
+    textWrap: "balance",
+    overflow: "hidden",
+    wordBreak: "break-word"
+  },
+  messageIcon: {},
+  messageTitle: {
+    display: "block",
+    fontWeight: uikitStyles.theme.fontWeights.semibold
+  },
+  action: {
+    marginRight: 0
+  },
+  actionContent: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "space-between",
+    gap: uikitStyles.theme.space.xs
+  },
+  actionCustom: {
+    flex: "0 0 auto"
+  },
+  actionClose: {
+    alignSelf: "flex-end"
+  }
+});
+const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    title,
+    showClose,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    onAction,
+    actionsPosition: actionsPositionProp = "auto",
+    children,
+    actionProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvCallout", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
+  const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
+  const actionsContent = /* @__PURE__ */ jsxRuntime.jsx(
+    ActionsGeneric.HvActionsGeneric,
+    {
+      id,
+      className: classes.actionCustom,
+      variant: activeTheme?.snackbar.actionButtonVariant,
+      actions,
+      onAction
+    }
+  );
+  const showCustomActions = actions && actionsPosition === "bottom-right";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SnackbarContent__default.default,
+    {
+      ref,
+      id,
+      classes: {
+        root: cx(classes.root, classes[variant], className),
+        message: classes.message,
+        action: classes.action
+      },
+      message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          StatusIcon.HvStatusIcon,
+          {
+            className: classes.messageIcon,
+            variant: variant === "default" ? "info" : variant,
+            customIcon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContent, children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("b", { className: classes.messageTitle, children: title }),
+          children
+        ] }),
+        actions && actionsPosition === "inline" && actionsContent
+      ] }),
+      action: (showClose || showCustomActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.actionContent, children: [
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.HvButton,
+          {
+            icon: true,
+            className: classes.actionClose,
+            variant: "semantic",
+            "aria-label": "Close",
+            onClick: (evt) => onClose?.(evt, "clickaway"),
+            ...actionProps,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { size: "xs", name: "Close" })
+          }
+        ),
+        showCustomActions && actionsContent
+      ] }),
+      ...others
+    }
+  );
+});
+exports.HvCallout = HvCallout;

package/dist/cjs/utils/useSavedState.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function useSavedState(defaultState) {
+  const [initialState] = React.useState(defaultState);
+  const [state, setState] = React.useState(initialState);
+  const [submittedState, setSubmittedState] = React.useState(
+    initialState
+  );
+  const changeState = React.useCallback((value, save = false) => {
+    setState(value);
+    if (save) setSubmittedState(value);
+  }, []);
+  const rollback = () => {
+    setState(submittedState);
+  };
+  return [state, changeState, rollback, submittedState, initialState];
+}
+exports.useSavedState = useSavedState;