@hitachivantara/uikit-react-core 5.66.14 → 5.67.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.66.14",
+  "version": "5.67.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -31,12 +31,10 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
-    "@emotion/css": "^11.11.2",
     "@emotion/serialize": "^1.1.2",
-    "@emotion/utils": "^1.2.1",
-    "@hitachivantara/uikit-react-icons": "^5.10.5",
-    "@hitachivantara/uikit-react-shared": "^5.1.45",
-    "@hitachivantara/uikit-styles": "^5.31.0",
+    "@hitachivantara/uikit-react-icons": "^5.10.7",
+    "@hitachivantara/uikit-react-shared": "^5.2.0",
+    "@hitachivantara/uikit-styles": "^5.31.1",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.40",
     "@popperjs/core": "^2.11.8",
@@ -63,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "143286b6fdeed50a3265683bebb09dba16ab0395",
+  "gitHead": "657262fc6de23b28f76b1b017a4c49ce78c78ab3",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",

package/dist/cjs/hooks/useCss.cjs

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const serialize = require("@emotion/serialize");
-const utils = require("@emotion/utils");
-const clsx = require("clsx");
-const useEmotionCache = require("./useEmotionCache.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const clsx__default = /* @__PURE__ */ _interopDefault(clsx);
-function getRef(args) {
-  if (args.length !== 1) {
-    return { args, ref: void 0 };
-  }
-  const [arg] = args;
-  if (!(arg instanceof Object)) {
-    return { args, ref: void 0 };
-  }
-  if (!("ref" in arg)) {
-    return { args, ref: void 0 };
-  }
-  const { ref, ...argCopy } = arg;
-  return { args: [argCopy], ref };
-}
-const cssFactory = /* @__PURE__ */ (() => {
-  function merge(registered, css, className) {
-    const registeredStyles = [];
-    const rawClassName = utils.getRegisteredStyles(
-      registered,
-      registeredStyles,
-      className
-    );
-    if (registeredStyles.length < 2) {
-      return className;
-    }
-    return rawClassName + css(registeredStyles);
-  }
-  function innerCssFactory(cache) {
-    const css = (...styles) => {
-      const { ref, args } = getRef(styles);
-      const serialized = serialize.serializeStyles(args, cache.registered);
-      utils.insertStyles(cache, serialized, false);
-      return `${cache.key}-${serialized.name}${ref === void 0 ? "" : ` ${ref}`}`;
-    };
-    const cx = (...args) => merge(cache.registered, css, clsx__default.default(args));
-    return { css, cx };
-  }
-  return innerCssFactory;
-})();
-function useCss() {
-  const cache = useEmotionCache.useEmotionCache();
-  return React.useMemo(() => cssFactory(cache), [cache]);
-}
-exports.useCss = useCss;

package/dist/cjs/hooks/useEmotionCache.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-require("react/jsx-runtime");
-require("@mui/material/styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-require("@hitachivantara/uikit-styles");
-function useEmotionCache() {
-  return React.useContext(uikitReactShared.EmotionContext).cache;
-}
-exports.useEmotionCache = useEmotionCache;

package/dist/cjs/hooks/useTheme.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-require("react/jsx-runtime");
-require("@mui/material/styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-require("@hitachivantara/uikit-styles");
-const useTheme = () => {
-  const context = React.useContext(uikitReactShared.HvThemeContext);
-  return React.useMemo(() => {
-    const { activeTheme, selectedMode } = context;
-    return { ...context, colors: activeTheme?.colors.modes?.[selectedMode] };
-  }, [context]);
-};
-exports.useTheme = useTheme;

package/dist/cjs/utils/classes.cjs

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const useCss = require("../hooks/useCss.cjs");
-const getClasses = (keys, name) => {
-  const classesObj = {};
-  keys.forEach((key) => {
-    classesObj[key] = `${name}-${key}`;
-  });
-  return classesObj;
-};
-const deepRenameKeys = (obj, mapFn) => {
-  const result = {};
-  for (const key in obj) {
-    if (Object.hasOwn(obj, key)) {
-      const newKey = mapFn(key);
-      const value = obj[key];
-      result[newKey] = typeof value === "object" ? deepRenameKeys(value, mapFn) : value;
-    }
-  }
-  return result;
-};
-const replace$ = (stylesObj, name) => {
-  return deepRenameKeys(stylesObj, (key) => {
-    const matches = key.match(/\$\w+/g);
-    if (!matches?.length) return key;
-    const newKey = matches.reduce(
-      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),
-      key
-    );
-    return newKey ?? key;
-  });
-};
-function createClasses(name, stylesObject) {
-  const styles = replace$(stylesObject, name);
-  const staticClasses = getClasses(Object.keys(styles), name);
-  function useClasses(classesProp = {}, addStatic = true) {
-    const { cx, css } = useCss.useCss();
-    const mergeClasses = (key) => cx(
-      addStatic && `${name}-${key}`,
-      css(styles[key]),
-      classesProp?.[key]
-    );
-    const classes = Object.fromEntries(
-      Object.keys(styles).map((key) => [key, mergeClasses(key)])
-    );
-    return { classes, css, cx };
-  }
-  return { useClasses, staticClasses };
-}
-exports.createClasses = createClasses;
-exports.getClasses = getClasses;
-exports.replace$ = replace$;

package/dist/esm/hooks/useCss.js

@@ -1,51 +0,0 @@
-import { useMemo } from "react";
-import { serializeStyles } from "@emotion/serialize";
-import { insertStyles, getRegisteredStyles } from "@emotion/utils";
-import clsx from "clsx";
-import { useEmotionCache } from "./useEmotionCache.js";
-function getRef(args) {
-  if (args.length !== 1) {
-    return { args, ref: void 0 };
-  }
-  const [arg] = args;
-  if (!(arg instanceof Object)) {
-    return { args, ref: void 0 };
-  }
-  if (!("ref" in arg)) {
-    return { args, ref: void 0 };
-  }
-  const { ref, ...argCopy } = arg;
-  return { args: [argCopy], ref };
-}
-const cssFactory = /* @__PURE__ */ (() => {
-  function merge(registered, css, className) {
-    const registeredStyles = [];
-    const rawClassName = getRegisteredStyles(
-      registered,
-      registeredStyles,
-      className
-    );
-    if (registeredStyles.length < 2) {
-      return className;
-    }
-    return rawClassName + css(registeredStyles);
-  }
-  function innerCssFactory(cache) {
-    const css = (...styles) => {
-      const { ref, args } = getRef(styles);
-      const serialized = serializeStyles(args, cache.registered);
-      insertStyles(cache, serialized, false);
-      return `${cache.key}-${serialized.name}${ref === void 0 ? "" : ` ${ref}`}`;
-    };
-    const cx = (...args) => merge(cache.registered, css, clsx(args));
-    return { css, cx };
-  }
-  return innerCssFactory;
-})();
-function useCss() {
-  const cache = useEmotionCache();
-  return useMemo(() => cssFactory(cache), [cache]);
-}
-export {
-  useCss
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"useCss.js","sources":["../../../src/hooks/useCss.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { EmotionCache } from \"@emotion/cache\";\nimport { css as emotionCss } from \"@emotion/css\";\nimport { RegisteredCache, serializeStyles } from \"@emotion/serialize\";\nimport { getRegisteredStyles, insertStyles } from \"@emotion/utils\";\nimport clsx from \"clsx\";\n\nimport { useEmotionCache } from \"./useEmotionCache\";\n\ntype CSS = typeof emotionCss;\n\nfunction getRef(args: any[]) {\n  if (args.length !== 1) {\n    return { args, ref: undefined };\n  }\n\n  const [arg] = args;\n\n  if (!(arg instanceof Object)) {\n    return { args, ref: undefined };\n  }\n\n  if (!(\"ref\" in arg)) {\n    return { args, ref: undefined };\n  }\n\n  const { ref, ...argCopy } = arg;\n  return { args: [argCopy], ref };\n}\n\nconst cssFactory = (() => {\n  function merge(registered: RegisteredCache, css: CSS, className: string) {\n    const registeredStyles: string[] = [];\n\n    const rawClassName = getRegisteredStyles(\n      registered,\n      registeredStyles,\n      className,\n    );\n\n    if (registeredStyles.length < 2) {\n      return className;\n    }\n\n    return rawClassName + css(registeredStyles);\n  }\n\n  function innerCssFactory(cache: EmotionCache) {\n    const css: CSS = (...styles: any) => {\n      const { ref, args } = getRef(styles);\n      const serialized = serializeStyles(args, cache.registered);\n      insertStyles(cache, serialized, false);\n      return `${cache.key}-${serialized.name}${\n        ref === undefined ? \"\" : ` ${ref}`\n      }`;\n    };\n\n    const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n    return { css, cx };\n  }\n\n  return innerCssFactory;\n})();\n\nexport function useCss() {\n  const cache = useEmotionCache();\n  return useMemo(() => cssFactory(cache), [cache]);\n}\n"],"names":[],"mappings":";;;;;AAWA,SAAS,OAAO,MAAa;AACvB,MAAA,KAAK,WAAW,GAAG;AACd,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEM,QAAA,CAAC,GAAG,IAAI;AAEV,MAAA,EAAE,eAAe,SAAS;AACrB,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEI,MAAA,EAAE,SAAS,MAAM;AACZ,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEA,QAAM,EAAE,KAAK,GAAG,QAAA,IAAY;AAC5B,SAAO,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI;AAChC;AAEA,MAAM,aAAoB,uBAAA;AACf,WAAA,MAAM,YAA6B,KAAU,WAAmB;AACvE,UAAM,mBAA6B,CAAA;AAEnC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGE,QAAA,iBAAiB,SAAS,GAAG;AACxB,aAAA;AAAA,IACT;AAEO,WAAA,eAAe,IAAI,gBAAgB;AAAA,EAC5C;AAEA,WAAS,gBAAgB,OAAqB;AACtC,UAAA,MAAW,IAAI,WAAgB;AACnC,YAAM,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM;AACnC,YAAM,aAAa,gBAAgB,MAAM,MAAM,UAAU;AAC5C,mBAAA,OAAO,YAAY,KAAK;AACrC,aAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI,GACpC,QAAQ,SAAY,KAAK,IAAI,GAAG,EAClC;AAAA,IAAA;AAGI,UAAA,KAAK,IAAI,SAAc,MAAM,MAAM,YAAY,KAAK,KAAK,IAAI,CAAC;AAE7D,WAAA,EAAE,KAAK;EAChB;AAEO,SAAA;AACT;AAEO,SAAS,SAAS;AACvB,QAAM,QAAQ;AACd,SAAO,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AACjD;"}

package/dist/esm/hooks/useEmotionCache.js

@@ -1,11 +0,0 @@
-import { useContext } from "react";
-import "react/jsx-runtime";
-import "@mui/material/styles";
-import { EmotionContext } from "@hitachivantara/uikit-react-shared";
-import "@hitachivantara/uikit-styles";
-function useEmotionCache() {
-  return useContext(EmotionContext).cache;
-}
-export {
-  useEmotionCache
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"useEmotionCache.js","sources":["../../../src/hooks/useEmotionCache.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { EmotionContext } from \"../providers/ThemeProvider\";\n\nexport function useEmotionCache() {\n  return useContext(EmotionContext).cache;\n}\n"],"names":[],"mappings":";;;;;AAIO,SAAS,kBAAkB;AACzB,SAAA,WAAW,cAAc,EAAE;AACpC;"}

package/dist/esm/hooks/useTheme.js

@@ -1,15 +0,0 @@
-import { useContext, useMemo } from "react";
-import "react/jsx-runtime";
-import "@mui/material/styles";
-import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
-import "@hitachivantara/uikit-styles";
-const useTheme = () => {
-  const context = useContext(HvThemeContext);
-  return useMemo(() => {
-    const { activeTheme, selectedMode } = context;
-    return { ...context, colors: activeTheme?.colors.modes?.[selectedMode] };
-  }, [context]);
-};
-export {
-  useTheme
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"useTheme.js","sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from \"react\";\nimport { HvTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport {\n  HvThemeContext,\n  HvThemeContextValue,\n} from \"../providers/ThemeProvider\";\n\nexport const useTheme = (): HvThemeContextValue & {\n  /** Colors of the currently active theme and mode */\n  colors?: HvTheme[\"colors\"][\"modes\"][\"mode\"];\n} => {\n  const context = useContext(HvThemeContext);\n\n  return useMemo(() => {\n    const { activeTheme, selectedMode } = context;\n    return { ...context, colors: activeTheme?.colors.modes?.[selectedMode] };\n  }, [context]);\n};\n"],"names":[],"mappings":";;;;;AAQO,MAAM,WAAW,MAGnB;AACG,QAAA,UAAU,WAAW,cAAc;AAEzC,SAAO,QAAQ,MAAM;AACb,UAAA,EAAE,aAAa,aAAiB,IAAA;AAC/B,WAAA,EAAE,GAAG,SAAS,QAAQ,aAAa,OAAO,QAAQ,YAAY;EAAE,GACtE,CAAC,OAAO,CAAC;AACd;"}

package/dist/esm/utils/classes.js

@@ -1,52 +0,0 @@
-import { useCss } from "../hooks/useCss.js";
-const getClasses = (keys, name) => {
-  const classesObj = {};
-  keys.forEach((key) => {
-    classesObj[key] = `${name}-${key}`;
-  });
-  return classesObj;
-};
-const deepRenameKeys = (obj, mapFn) => {
-  const result = {};
-  for (const key in obj) {
-    if (Object.hasOwn(obj, key)) {
-      const newKey = mapFn(key);
-      const value = obj[key];
-      result[newKey] = typeof value === "object" ? deepRenameKeys(value, mapFn) : value;
-    }
-  }
-  return result;
-};
-const replace$ = (stylesObj, name) => {
-  return deepRenameKeys(stylesObj, (key) => {
-    const matches = key.match(/\$\w+/g);
-    if (!matches?.length) return key;
-    const newKey = matches.reduce(
-      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),
-      key
-    );
-    return newKey ?? key;
-  });
-};
-function createClasses(name, stylesObject) {
-  const styles = replace$(stylesObject, name);
-  const staticClasses = getClasses(Object.keys(styles), name);
-  function useClasses(classesProp = {}, addStatic = true) {
-    const { cx, css } = useCss();
-    const mergeClasses = (key) => cx(
-      addStatic && `${name}-${key}`,
-      css(styles[key]),
-      classesProp?.[key]
-    );
-    const classes = Object.fromEntries(
-      Object.keys(styles).map((key) => [key, mergeClasses(key)])
-    );
-    return { classes, css, cx };
-  }
-  return { useClasses, staticClasses };
-}
-export {
-  createClasses,
-  getClasses,
-  replace$
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { useCss } from \"../hooks/useCss\";\n\nexport type ExtractNames<\n  T extends (...args: any) => { classes: Record<string, any>; cx: any },\n> = Partial<ReturnType<T>[\"classes\"]>;\n\nexport const getClasses = <T extends string, N extends string>(\n  keys: T[],\n  name: N,\n) => {\n  const classesObj: Record<string, string> = {};\n  keys.forEach((key: string) => {\n    classesObj[key] = `${name}-${key}`;\n  });\n  return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n  obj: T,\n  mapFn: (key: string) => string,\n): T => {\n  const result: any = {};\n  for (const key in obj) {\n    if (Object.hasOwn(obj, key)) {\n      const newKey = mapFn(key);\n      const value = obj[key];\n      result[newKey] =\n        typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n    }\n  }\n  return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n  return deepRenameKeys(stylesObj, (key) => {\n    const matches = key.match(/\\$\\w+/g);\n    if (!matches?.length) return key;\n    const newKey = matches.reduce(\n      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n      key,\n    );\n    return newKey ?? key;\n  });\n};\n\n/** Utility function to create classes for a component. */\nexport function createClasses<Name extends string, ClassName extends string>(\n  /** Component name in PascalCase (ie. `HvTableCell`). */\n  name: Name,\n  stylesObject: Record<ClassName, CSSInterpolation>,\n) {\n  const styles = replace$(stylesObject, name);\n\n  const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n  /**\n   * Hook that takes in a component's `classesProp` overrides, and returns the\n   * concatenated static/internal/override `classes`, and the cached `cx` and `css` utilities.\n   */\n  function useClasses(\n    classesProp: Partial<Record<ClassName, string>> = {},\n    /** Whether to add the static classes. Disable when included by `classesProp` */\n    addStatic = true,\n  ) {\n    const { cx, css } = useCss();\n\n    const mergeClasses = (key: string) =>\n      cx(\n        addStatic && `${name}-${key}`,\n        css(styles[key as keyof typeof styles]),\n        classesProp?.[key as keyof typeof classesProp],\n      );\n\n    const classes = Object.fromEntries(\n      Object.keys(styles).map((key) => [key, mergeClasses(key)]),\n    ) as { [P in ClassName]: string };\n\n    return { classes, css, cx };\n  }\n\n  return { useClasses, staticClasses };\n}\n"],"names":[],"mappings":";AAQa,MAAA,aAAa,CACxB,MACA,SACG;AACH,QAAM,aAAqC,CAAA;AACtC,OAAA,QAAQ,CAAC,QAAgB;AAC5B,eAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EAAA,CACjC;AACM,SAAA;AACT;AAEA,MAAM,iBAAiB,CACrB,KACA,UACM;AACN,QAAM,SAAc,CAAA;AACpB,aAAW,OAAO,KAAK;AACrB,QAAI,OAAO,OAAO,KAAK,GAAG,GAAG;AACrB,YAAA,SAAS,MAAM,GAAG;AAClB,YAAA,QAAQ,IAAI,GAAG;AACd,aAAA,MAAM,IACX,OAAO,UAAU,WAAW,eAAe,OAAc,KAAK,IAAI;AAAA,IACtE;AAAA,EACF;AACO,SAAA;AACT;AAGa,MAAA,WAAW,CAAmB,WAAc,SAAoB;AACpE,SAAA,eAAe,WAAW,CAAC,QAAQ;AAClC,UAAA,UAAU,IAAI,MAAM,QAAQ;AAC9B,QAAA,CAAC,SAAS,OAAe,QAAA;AAC7B,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,KAAK,UAAU,IAAI,QAAQ,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC/D;AAAA,IAAA;AAEF,WAAO,UAAU;AAAA,EAAA,CAClB;AACH;AAGgB,SAAA,cAEd,MACA,cACA;AACM,QAAA,SAAS,SAAS,cAAc,IAAI;AAE1C,QAAM,gBAAgB,WAAW,OAAO,KAAK,MAAM,GAAkB,IAAI;AAMzE,WAAS,WACP,cAAkD,IAElD,YAAY,MACZ;AACA,UAAM,EAAE,IAAI,IAAI,IAAI,OAAO;AAErB,UAAA,eAAe,CAAC,QACpB;AAAA,MACE,aAAa,GAAG,IAAI,IAAI,GAAG;AAAA,MAC3B,IAAI,OAAO,GAA0B,CAAC;AAAA,MACtC,cAAc,GAA+B;AAAA,IAAA;AAGjD,UAAM,UAAU,OAAO;AAAA,MACrB,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA,IAAA;AAGpD,WAAA,EAAE,SAAS,KAAK;EACzB;AAEO,SAAA,EAAE,YAAY;AACvB;"}