@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/utils/theme.mjs

@@ -1,104 +0,0 @@
-import { theme, themes } from "@hitachivantara/uikit-styles";
-import { getElementById } from "./document.mjs";
-const setElementStyle = (element, style) => {
-  Object.entries(style).forEach(([property, value]) => {
-    element.style[property] = value;
-  });
-};
-const setElementAttrs = (themeName, modeName, colorScheme, themeRootId) => {
-  const element = themeRootId ? document.getElementById(themeRootId) : document.body;
-  if (element) {
-    element.setAttribute(`data-theme`, themeName);
-    element.setAttribute(`data-color-mode`, modeName);
-    setElementStyle(element, {
-      colorScheme,
-      backgroundColor: theme.colors.backgroundColor,
-      accentColor: theme.colors.secondary,
-      color: theme.colors.secondary,
-      fontSize: theme.typography.body.fontSize,
-      fontWeight: theme.typography.body.fontWeight,
-      lineHeight: theme.typography.body.lineHeight,
-      letterSpacing: theme.typography.body.letterSpacing,
-      fontFamily: theme.fontFamily.body
-    });
-  }
-};
-const applyThemeCustomizations = (obj, customizations) => {
-  const isObject = (val) => val && typeof val === "object" && !Array.isArray(val);
-  const customizedTheme = { ...obj };
-  Object.keys(customizations).forEach((key) => {
-    if (customizedTheme[key]) {
-      if (isObject(customizedTheme[key]) && isObject(customizations[key])) {
-        customizedTheme[key] = applyThemeCustomizations(
-          customizedTheme[key],
-          customizations[key]
-        );
-      } else if (typeof customizedTheme[key] === typeof customizations[key]) {
-        customizedTheme[key] = customizations[key];
-      }
-    } else {
-      customizedTheme[key] = customizations[key];
-    }
-  });
-  return customizedTheme;
-};
-const createTheme = (props) => {
-  const {
-    name,
-    base = "ds5",
-    inheritColorModes = true,
-    ...customizations
-  } = props;
-  const customizedTheme = customizations ? applyThemeCustomizations(themes[base], customizations) : { ...themes[base] };
-  customizedTheme.name = name.trim();
-  customizedTheme.base = base;
-  if (customizations) {
-    Object.keys(customizedTheme.colors.modes).forEach((mode) => {
-      if (!themes[base].colors.modes[mode]) {
-        customizedTheme.colors.modes[mode] = {
-          ...themes[base].colors.modes.dawn,
-          ...customizedTheme.colors.modes[mode]
-        };
-      }
-    });
-  }
-  if (!inheritColorModes && customizations.colors?.modes) {
-    Object.keys(customizedTheme.colors.modes).forEach((mode) => {
-      if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {
-        delete customizedTheme.colors.modes[mode];
-      }
-    });
-  }
-  return customizedTheme;
-};
-const processThemes = (themesList) => {
-  if (themesList && Array.isArray(themesList) && themesList.length > 0) {
-    const list = [];
-    themesList.forEach((thm) => {
-      const i = list.findIndex(
-        (t) => t.name.trim() === thm.name.trim()
-      );
-      if (i !== -1) {
-        list.splice(i, 1);
-        list.push(thm);
-      } else {
-        list.push(thm);
-      }
-    });
-    return list;
-  }
-  return [themes.ds5];
-};
-const getVarValue = (cssVar, rootElementId) => {
-  const root = getElementById(rootElementId || "hv-root");
-  if (!root)
-    return void 0;
-  return getComputedStyle(root).getPropertyValue(cssVar.replace("var(", "").replace(")", "")).trim();
-};
-export {
-  createTheme,
-  getVarValue,
-  processThemes,
-  setElementAttrs
-};
-//# sourceMappingURL=theme.mjs.map

package/dist/esm/utils/theme.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.mjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme, HvCreateThemeProps } from \"../types/theme\";\n\nimport { getElementById } from \"./document\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n  Object.entries(style).forEach(([property, value]) => {\n    element.style[property] = value;\n  });\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n  themeName: string,\n  modeName: string,\n  colorScheme: string,\n  themeRootId?: string\n) => {\n  const element = themeRootId\n    ? document.getElementById(themeRootId)\n    : document.body;\n\n  if (element) {\n    element.setAttribute(`data-theme`, themeName);\n    element.setAttribute(`data-color-mode`, modeName);\n\n    // Set default properties for all components to inherit\n    setElementStyle(element, {\n      colorScheme,\n      backgroundColor: theme.colors.backgroundColor,\n      accentColor: theme.colors.secondary,\n      color: theme.colors.secondary,\n      fontSize: theme.typography.body.fontSize,\n      fontWeight: theme.typography.body.fontWeight,\n      lineHeight: theme.typography.body.lineHeight,\n      letterSpacing: theme.typography.body.letterSpacing,\n      fontFamily: theme.fontFamily.body,\n    });\n  }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: any, customizations: any) => {\n  const isObject = (val: any) =>\n    val && typeof val === \"object\" && !Array.isArray(val);\n\n  // Customized theme\n  const customizedTheme = { ...obj };\n\n  // Add new values to the theme or replace values\n  Object.keys(customizations).forEach((key) => {\n    if (customizedTheme[key]) {\n      if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n        customizedTheme[key] = applyThemeCustomizations(\n          customizedTheme[key],\n          customizations[key]\n        );\n      } else if (typeof customizedTheme[key] === typeof customizations[key]) {\n        customizedTheme[key] = customizations[key];\n      }\n    } else {\n      customizedTheme[key] = customizations[key];\n    }\n  });\n\n  return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n  props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n  const {\n    name,\n    base = \"ds5\",\n    inheritColorModes = true,\n    ...customizations\n  } = props;\n\n  // Apply customizations to the base theme\n  const customizedTheme: HvTheme | HvThemeStructure = customizations\n    ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n    : { ...themes[base] };\n\n  // Set theme name\n  customizedTheme.name = name.trim();\n  // Set theme base\n  customizedTheme.base = base;\n\n  // Fill new color modes with missing colors\n  if (customizations) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!themes[base].colors.modes[mode]) {\n        customizedTheme.colors.modes[mode] = {\n          ...themes[base].colors.modes.dawn,\n          ...(customizedTheme.colors.modes[mode] as Partial<\n            HvThemeColorModeStructure & { [key: string]: string }\n          >),\n        };\n      }\n    });\n  }\n\n  // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n  // we're removing any color modes that might have been inherited\n  if (!inheritColorModes && customizations.colors?.modes) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n        delete customizedTheme.colors.modes[mode];\n      }\n    });\n  }\n\n  // Created theme\n  return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n *  - Cleans themes with the same name\n *  - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n  themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n  if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n    const list: (HvTheme | HvThemeStructure)[] = [];\n\n    themesList.forEach((thm) => {\n      const i: number = list.findIndex(\n        (t) => t.name.trim() === thm.name.trim()\n      );\n\n      if (i !== -1) {\n        list.splice(i, 1);\n        list.push(thm);\n      } else {\n        list.push(thm);\n      }\n    });\n\n    // Cleaned themes\n    return list;\n  }\n  // DS5\n  return [themes.ds5];\n};\n\nexport const getVarValue = (cssVar: string, rootElementId?: string) => {\n  const root = getElementById(rootElementId || \"hv-root\");\n  if (!root) return undefined;\n\n  return getComputedStyle(root)\n    .getPropertyValue(cssVar.replace(\"var(\", \"\").replace(\")\", \"\"))\n    .trim();\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/utils/useSavedState.mjs

@@ -1,21 +0,0 @@
-import { useState, useCallback } from "react";
-function useSavedState(defaultState) {
-  const [initialState] = useState(defaultState);
-  const [state, setState] = useState(initialState);
-  const [submittedState, setSubmittedState] = useState(
-    initialState
-  );
-  const changeState = useCallback((value, save = false) => {
-    setState(value);
-    if (save)
-      setSubmittedState(value);
-  }, []);
-  const rollback = () => {
-    setState(submittedState);
-  };
-  return [state, changeState, rollback, submittedState, initialState];
-}
-export {
-  useSavedState
-};
-//# sourceMappingURL=useSavedState.mjs.map

package/dist/esm/utils/useSavedState.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSavedState.mjs","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: T) {\n  const [initialState] = useState<T>(defaultState);\n\n  const [state, setState] = useState<T | undefined>(initialState);\n  const [submittedState, setSubmittedState] = useState<T | undefined>(\n    initialState\n  );\n\n  const changeState = useCallback((value?: T, save = false) => {\n    setState(value);\n    if (save) setSubmittedState(value);\n  }, []);\n\n  const rollback = () => {\n    setState(submittedState);\n  };\n\n  return [state, changeState, rollback, submittedState, initialState] as const;\n}\n"],"names":[],"mappings":";AAEO,SAAS,cAAiB,cAAiB;AAChD,QAAM,CAAC,YAAY,IAAI,SAAY,YAAY;AAE/C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,YAAY;AACxD,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EAAA;AAGF,QAAM,cAAc,YAAY,CAAC,OAAW,OAAO,UAAU;AAC3D,aAAS,KAAK;AACV,QAAA;AAAM,wBAAkB,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAM,WAAW,MAAM;AACrB,aAAS,cAAc;AAAA,EAAA;AAGzB,SAAO,CAAC,OAAO,aAAa,UAAU,gBAAgB,YAAY;AACpE;"}

package/dist/esm/utils/wrapperTooltip.mjs

@@ -1,15 +0,0 @@
-import { withTooltip } from "../hocs/withTooltip.mjs";
-const hideTooltip = (evt) => {
-  const isOverFlow = evt.target.children.length > 1 ? Array.of(...evt.target.children).some(
-    (child) => child.scrollWidth > child.clientWidth
-  ) : evt.target.scrollWidth > evt.target.clientWidth;
-  return !isOverFlow;
-};
-const wrapperTooltip = (hasTooltips, Component, label) => {
-  const ComponentFunction = () => Component;
-  return hasTooltips ? withTooltip(ComponentFunction, label, "top", hideTooltip) : ComponentFunction;
-};
-export {
-  wrapperTooltip
-};
-//# sourceMappingURL=wrapperTooltip.mjs.map

package/dist/esm/utils/wrapperTooltip.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"wrapperTooltip.mjs","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"../hocs/withTooltip\";\n\nconst hideTooltip = (evt: any) => {\n  const isOverFlow =\n    evt.target.children.length > 1\n      ? Array.of(...evt.target.children).some(\n          (child) => child.scrollWidth > child.clientWidth\n        )\n      : evt.target.scrollWidth > evt.target.clientWidth;\n\n  return !isOverFlow;\n};\n\nexport const wrapperTooltip = (\n  hasTooltips: boolean,\n  Component: any,\n  label: any\n) => {\n  const ComponentFunction = () => Component;\n  return hasTooltips\n    ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n    : ComponentFunction;\n};\n"],"names":[],"mappings":";AAEA,MAAM,cAAc,CAAC,QAAa;AAChC,QAAM,aACJ,IAAI,OAAO,SAAS,SAAS,IACzB,MAAM,GAAG,GAAG,IAAI,OAAO,QAAQ,EAAE;AAAA,IAC/B,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA,EAAA,IAEvC,IAAI,OAAO,cAAc,IAAI,OAAO;AAE1C,SAAO,CAAC;AACV;AAEO,MAAM,iBAAiB,CAC5B,aACA,WACA,UACG;AACH,QAAM,oBAAoB,MAAM;AAChC,SAAO,cACH,YAAY,mBAAmB,OAAO,OAAO,WAAW,IACxD;AACN;"}