@hitachivantara/uikit-react-core 5.3.0 → 5.5.0

package/dist/esm/index.js

@@ -231,8 +231,19 @@ import { HvSlider } from "./components/Slider/Slider.js";
 import { default as default120 } from "./components/FilterGroup/filterGroupClasses.js";
 import { HvFilterGroup } from "./components/FilterGroup/FilterGroup.js";
 import { HvDatePicker } from "./components/DatePicker/DatePicker.js";
-import { default as default121 } from "./hooks/useUniqueId.js";
-import { default as default122 } from "./hooks/useIsMounted.js";
+import { default as default121 } from "./components/ScrollTo/Vertical/scrollToVerticalClasses.js";
+import { default as default122 } from "./components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js";
+import { HvScrollToVertical } from "./components/ScrollTo/Vertical/ScrollToVertical.js";
+import { default as default123 } from "./components/ScrollTo/Horizontal/scrollToHorizontalClasses.js";
+import { default as default124 } from "./components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js";
+import { HvScrollToHorizontal } from "./components/ScrollTo/Horizontal/ScrollToHorizontal.js";
+import { useScrollTo } from "./components/ScrollTo/useScrollTo.js";
+import { default as default125 } from "./components/InlineEditor/inlineEditorClasses.js";
+import { HvInlineEditor } from "./components/InlineEditor/InlineEditor.js";
+import { default as default126 } from "./components/TimeAgo/timeAgoClasses.js";
+import { HvTimeAgo } from "./components/TimeAgo/TimeAgo.js";
+import { default as default127 } from "./hooks/useUniqueId.js";
+import { default as default128 } from "./hooks/useIsMounted.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useControlled } from "./hooks/useControlled.js";
 import { useImageLoaded } from "./hooks/useImageLoaded.js";
@@ -244,23 +255,23 @@ import { useEnhancedEffect } from "./hooks/useEnhancedEffect.js";
 import { HvProvider } from "./providers/Provider.js";
 import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
 import { HvThemeProvider } from "./providers/ThemeProvider.js";
-import { default as default123 } from "./utils/iconVariant.js";
-import { default as default124 } from "./utils/hexToRgbA.js";
-import { default as default125 } from "./utils/browser.js";
-import { default as default126 } from "./utils/multiSelectionEventHandler.js";
-import { default as default127 } from "./utils/getComponentName.js";
+import { default as default129 } from "./utils/iconVariant.js";
+import { default as default130 } from "./utils/hexToRgbA.js";
+import { default as default131 } from "./utils/browser.js";
+import { default as default132 } from "./utils/multiSelectionEventHandler.js";
+import { default as default133 } from "./utils/getComponentName.js";
 import { outlineStyles } from "./utils/focusUtils.js";
 import { keyboardCodes } from "./utils/keyboardUtils/keyboardCodes.js";
 import { getKeyCodeFromEvent, isKeycode, isKeypress } from "./utils/keyboardUtils/keyCheck.js";
 import { decreaseSize, increaseSize } from "./utils/sizes.js";
-import { createTheme, processThemes, setElementAttrs } from "./utils/theme.js";
+import { createTheme, getVarValue, processThemes, setElementAttrs } from "./utils/theme.js";
 import { setId, setUid } from "./utils/setId.js";
 import { getClasses } from "./utils/classes.js";
 import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
 import { wrapperTooltip } from "./utils/wrapperTooltip.js";
 import { useSavedState } from "./utils/useSavedState.js";
-import { default as default128 } from "./hocs/withTooltip.js";
-import { default as default129 } from "./hocs/withId.js";
+import { default as default134 } from "./hocs/withTooltip.js";
+import { default as default135 } from "./hocs/withId.js";
 export {
   CellWithCheckBox,
   CellWithExpandButton,
@@ -330,6 +341,7 @@ export {
   HvMenuItem as HvHeaderMenuItem,
   HvHeaderNavigation,
   HvInfoMessage,
+  HvInlineEditor,
   HvInput,
   HvKpi,
   HvLabel,
@@ -350,6 +362,8 @@ export {
   HvRadio,
   HvRadioGroup,
   HvRightControl,
+  HvScrollToHorizontal,
+  HvScrollToVertical,
   HvSelectionList,
   HvSimpleGrid,
   HvSlider,
@@ -375,6 +389,7 @@ export {
   HvTextArea,
   HvThemeContext,
   HvThemeProvider,
+  HvTimeAgo,
   HvToggleButton,
   HvTooltip,
   HvTypography,
@@ -447,7 +462,7 @@ export {
   default36 as footerClasses,
   default13 as formElementClasses,
   getClasses,
-  default127 as getComponentName,
+  default133 as getComponentName,
   getFirstAndLastFocus,
   getFocusableList,
   getHeaderFooterPropsHook,
@@ -458,13 +473,15 @@ export {
   getPrevNextFocus,
   getSelectorIcons,
   getTableHeadPropsHook,
+  getVarValue,
   default83 as globalActionsClasses,
   default37 as gridClasses,
   default39 as headerActionsClasses,
   default40 as headerBrandClasses,
   default38 as headerClasses,
   default41 as headerNavigationClasses,
-  default124 as hexToRgbA,
+  default130 as hexToRgbA,
+  default124 as horizontalScrollListItemClasses,
   hvDateColumn,
   hvDropdownColumn,
   hvExpandColumn,
@@ -476,11 +493,12 @@ export {
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn,
-  default123 as iconVariant,
+  default129 as iconVariant,
   increaseSize,
   default15 as infoMessageClasses,
+  default125 as inlineEditorClasses,
   default60 as inputClasses,
-  default125 as isBrowser,
+  default131 as isBrowser,
   isInvalid,
   isKeycode,
   isKeypress,
@@ -496,7 +514,7 @@ export {
   default44 as loadingClasses,
   default105 as loginClasses,
   default45 as multiButtonClasses,
-  default126 as multiSelectionEventHandler,
+  default132 as multiSelectionEventHandler,
   normalizeProgressBar,
   outlineStyles,
   default53 as overflowTooltipClasses,
@@ -509,6 +527,8 @@ export {
   default67 as radioGroupClasses,
   reducer,
   default108 as rightControlClasses,
+  default123 as scrollToHorizontalClasses,
+  default121 as scrollToVerticalClasses,
   default17 as selectionListClasses,
   setElementAttrs,
   setId,
@@ -533,6 +553,7 @@ export {
   default63 as textAreaClasses,
   theme,
   themes,
+  default126 as timeAgoClasses,
   default52 as tooltipClasses,
   default117 as treeViewClasses,
   default118 as treeViewItemClasses,
@@ -558,20 +579,22 @@ export {
   default92 as useHvTableStyles,
   useImageLoaded,
   useInstance,
-  default122 as useIsMounted,
+  default128 as useIsMounted,
   useLabels,
   useSavedState,
+  useScrollTo,
   useSelectionPath,
   useTheme,
-  default121 as useUniqueId,
+  default127 as useUniqueId,
   useWidth,
   default111 as verticalNavigationClasses,
   default112 as verticalNavigationHeaderClasses,
   default116 as verticalNavigationSliderClasses,
   default115 as verticalNavigationTreeClasses,
+  default122 as verticalScrollListItemClasses,
   default16 as warningTextClasses,
-  default129 as withId,
-  default128 as withTooltip,
+  default135 as withId,
+  default134 as withTooltip,
   wrapperTooltip
 };
 //# sourceMappingURL=index.js.map

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/theme.js

@@ -89,8 +89,17 @@ const processThemes = (themesList) => {
     return [themes.ds5];
   }
 };
+const getVarValue = (cssVar) => {
+  const tempEl = document.createElement("div");
+  tempEl.style.setProperty("--temp", cssVar);
+  document.body.appendChild(tempEl);
+  const computedValue = getComputedStyle(tempEl).getPropertyValue("--temp").trim();
+  document.body.removeChild(tempEl);
+  return computedValue;
+};
 export {
   createTheme,
+  getVarValue,
   processThemes,
   setElementAttrs
 };

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

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport { CSSProperties } from \"react\";\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n  for (const property in style) {\n    element.style[property] = style[property];\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: 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: object, customizations: object) => {\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\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.map((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  } else {\n    // DS5\n    return [themes.ds5];\n  }\n};\n"],"names":["setElementStyle","element","style","property","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","map","thm","i","findIndex","t","splice","push","ds5"],"mappings":"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"}
+{"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport { CSSProperties } from \"react\";\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n  for (const property in style) {\n    element.style[property] = style[property];\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: 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: object, customizations: object) => {\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\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.map((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  } else {\n    // DS5\n    return [themes.ds5];\n  }\n};\n\n/**\n * Returns the computed value of a theme CSS var\n */\nexport const getVarValue = (cssVar: string): string => {\n  const tempEl = document.createElement(\"div\");\n  tempEl.style.setProperty(\"--temp\", cssVar);\n  document.body.appendChild(tempEl);\n  const computedValue = getComputedStyle(tempEl)\n    .getPropertyValue(\"--temp\")\n    .trim();\n  document.body.removeChild(tempEl);\n  return computedValue;\n};\n"],"names":["setElementStyle","element","style","property","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","map","thm","i","findIndex","t","splice","push","ds5","getVarValue","cssVar","tempEl","createElement","setProperty","appendChild","computedValue","getComputedStyle","getPropertyValue","removeChild"],"mappings":"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"}

package/dist/esm/utils/wrapperTooltip.js

@@ -1,11 +1,11 @@
-import withTooltip from "../hocs/withTooltip.js";
+import withTooltipUtil from "../hocs/withTooltip.js";
 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;
+  return hasTooltips ? withTooltipUtil(ComponentFunction, label, "top", hideTooltip) : ComponentFunction;
 };
 export {
   wrapperTooltip

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

@@ -1 +1 @@
-{"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\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 = (hasTooltips, Component, label) => {\n  const ComponentFunction = () => Component;\n  return hasTooltips\n    ? withTooltip(ComponentFunction, label, \"top\", hideTooltip, {}, {})\n    : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAElDV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AACzBD,SAAAA,cACHI,YAAYD,mBAAmBD,OAAO,OAAOf,aAAa,CAAC,GAAG,EAAE,IAChEgB;AACN;"}
+{"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\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 = (hasTooltips, Component, label) => {\n  const ComponentFunction = () => Component;\n  return hasTooltips\n    ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n    : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAElDV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AAChC,SAAOD,cACHI,gBAAYD,mBAAmBD,OAAO,OAAOf,WAAW,IACxDgB;AACN;"}

package/dist/types/index.d.ts

@@ -394,6 +394,11 @@ export declare const getTableHeadPropsHook: (props: any, { instance }: {
     instance: any;
 }) => any[];
 
+/**
+ * Returns the computed value of a theme CSS var
+ */
+export declare const getVarValue: (cssVar: string) => string;
+
 export declare const globalActionsClasses: HvGlobalActionsClasses;
 
 export declare const gridClasses: HvGridClasses;
@@ -408,6 +413,8 @@ export declare const headerNavigationClasses: HvHeaderNavigationClasses;
 
 export declare const hexToRgbA: (hex: any, factor?: number) => string;
 
+export declare const horizontalScrollListItemClasses: HvHorizontalScrollListItemClasses;
+
 export declare type HvAccentColorKeys = "primary" | "primary_80" | "primary_20" | "brand" | "secondary" | "secondary_60" | "secondary_80";
 
 export declare type HvAccentColors = Record<HvAccentColorKeys, string>;
@@ -3672,6 +3679,13 @@ export declare interface HvHooks<D extends object = Record<string, unknown>, H e
     useFinalInstance: Array<(instance: HvTableInstance<D, H>) => void>;
 }
 
+export declare interface HvHorizontalScrollListItemClasses {
+    root?: string;
+    selected?: string;
+    button?: string;
+    text?: string;
+}
+
 /**
  * Provides the user with additional descriptive text for the form element.
  */
@@ -3692,6 +3706,46 @@ export declare interface HvInfoMessageProps extends HvBaseProps {
     classes?: HvInfoMessageClasses;
 }
 
+/**
+ * An Inline Editor allows the user to edit a record without making a major switch
+ * between viewing and editing, making it an efficient method of updating a record.
+ */
+export declare const HvInlineEditor: ({ className, classes, value: valueProp, defaultValue, showIcon, component: InputComponent, variant, placeholder, onBlur, onChange, onKeyDown, buttonProps, typographyProps, ...others }: HvInlineEditorProps) => JSX_2.Element;
+
+export declare interface HvInlineEditorClasses {
+    root?: string;
+    button?: string;
+    largeText?: string;
+    text?: string;
+    textEmpty?: string;
+    icon?: string;
+    iconVisible?: string;
+    inputRoot?: string;
+    input?: string;
+    inputBorderContainer?: string;
+}
+
+export declare interface HvInlineEditorProps extends Omit<HvBaseProps<HTMLDivElement>, "onBlur" | "onChange"> {
+    /** The value of the form element. */
+    value?: string;
+    /** Whether the Edit icon should always be visible */
+    showIcon?: boolean;
+    /** Component to use as the input. The component "inherit" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */
+    component?: React_2.ElementType;
+    /** Variant of the HvTypography to display */
+    variant?: HvTypographyVariants;
+    /** Called when the input is blurred. */
+    onBlur?: (event: React_2.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
+    /** Called when the input value changes. */
+    onChange?: (event: React_2.SyntheticEvent, value: string) => void;
+    /** Props passed to the HvButton component */
+    buttonProps?: HvButtonProps;
+    /** Props passed to the HvTypography text component */
+    typographyProps?: HvTypographyProps;
+    /** A Jss Object used to override or extend the styles applied to the empty state component. */
+    classes?: HvInlineEditorClasses;
+}
+
 /**
  * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.
  */
@@ -4857,6 +4911,127 @@ declare type HvRowPropGetter<D extends object = Record<string, unknown>, H exten
     row: HvRowInstance<D, H>;
 }>;
 
+/**
+ * The horizontal scroll to element can be used to quickly navigate in a page.
+ */
+export declare const HvScrollToHorizontal: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes, options, offset, position, tooltipPosition, ...others }: HvScrollToHorizontalProps) => JSX_2.Element;
+
+export declare interface HvScrollToHorizontalClasses {
+    root?: string;
+    positionSticky?: string;
+    positionFixed?: string;
+    notSelectedRoot?: string;
+    notSelected?: string;
+    selected?: string;
+}
+
+export declare interface HvScrollToHorizontalOption {
+    key?: string;
+    label: string;
+    value: string;
+    offset?: number;
+}
+
+export declare type HvScrollToHorizontalPositions = "sticky" | "fixed" | "relative";
+
+export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOListElement, {
+    onChange: any;
+    onClick: any;
+}> {
+    /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
+    options: HvScrollToHorizontalOption[];
+    /** True if the href location link should be applied. It will create an a element around every list item */
+    href?: boolean;
+    /** Default selected index passed from the parent. */
+    defaultSelectedIndex?: number;
+    /**
+     * The Id of the scrollable container containing displayed elements.
+     *
+     * Defaults to `window` if unspecified.
+     */
+    scrollElementId?: string;
+    /**
+     * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+     * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+     * or to put more breathing room between the targeted element and the edges of the container.
+     *
+     * Each element can also have a specific offset via the options property.
+     */
+    offset?: number;
+    /** Position of the Horizontal scroll to. */
+    position?: HvScrollToHorizontalPositions;
+    /** Position of tooltip identifying the current item. */
+    tooltipPosition?: HvScrollToTooltipPositions;
+    /** A function called each time the selected index changes. */
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user clicks on a tab element. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user press enter on a tab element. */
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvScrollToHorizontalClasses;
+}
+
+export declare type HvScrollToTooltipPositions = "left" | "right" | "top" | "bottom";
+
+/**
+ * The vertical scroll to element can be used to quickly navigate in a page.
+ */
+export declare const HvScrollToVertical: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes, options, offset, position, tooltipPosition, ...others }: HvScrollToVerticalProps) => JSX_2.Element;
+
+export declare interface HvScrollToVerticalClasses {
+    root?: string;
+    positionAbsolute?: string;
+    positionFixed?: string;
+}
+
+export declare interface HvScrollToVerticalOption {
+    key?: string;
+    label: string;
+    value: string;
+    offset?: number;
+}
+
+export declare type HvScrollToVerticalPositions = "absolute" | "fixed" | "relative";
+
+export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListElement, {
+    onChange: any;
+    onClick: any;
+}> {
+    /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
+    options: HvScrollToVerticalOption[];
+    /** True if the href location link should be applied. It will create an a element around every list item */
+    href?: boolean;
+    /** Default selected index passed from the parent. */
+    defaultSelectedIndex?: number;
+    /**
+     * The Id of the scrollable container containing displayed elements.
+     *
+     * Defaults to `window` if unspecified.
+     */
+    scrollElementId?: string;
+    /**
+     * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+     * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+     * or to put more breathing room between the targeted element and the edges of the container.
+     *
+     * Each element can also have a specific offset via the options property.
+     */
+    offset?: number;
+    /** Position of the Vertical scroll to. */
+    position?: HvScrollToVerticalPositions;
+    /** Position of tooltip identifying the current item. */
+    tooltipPosition?: HvScrollToTooltipPositions;
+    /** A function called each time the selected index changes. */
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user clicks on a tab element. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user press enter on a tab element. */
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvScrollToVerticalClasses;
+}
+
 /**
  * Allows the user to select one or more items from a list of choices.
  *
@@ -6324,6 +6499,55 @@ declare interface HvThemeProviderProps {
     themeRootId?: string;
 }
 
+/**
+ * The HvTimeAgo component implements the Design System relative time format guidelines.
+ */
+export declare const HvTimeAgo: ({ classes, timestamp, locale: localeProp, component: Component, emptyElement, disableRefresh, showSeconds, justText, ...others }: HvTimeAgoProps) => JSX_2.Element;
+
+export declare interface HvTimeAgoClasses {
+    root?: string;
+}
+
+export declare interface HvTimeAgoProps extends HvBaseProps<HTMLElement, {
+    children: any;
+}> {
+    /**
+     * The timestamp to format, in seconds or milliseconds.
+     * Defaults to `emptyElement` if value is null or 0
+     */
+    timestamp?: number;
+    /**
+     * The locale to be used. Should be on of the dayjs supported locales and explicitly imported
+     * @see https://day.js.org/docs/en/i18n/i18n
+     */
+    locale?: string;
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component.
+     * Defaults to `HvTypography`.
+     */
+    component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * The element to render when the timestamp is null or 0
+     * Defaults to `—` (Em Dash)
+     */
+    emptyElement?: React.ReactNode;
+    /**
+     * Disables periodic date refreshes
+     */
+    disableRefresh?: boolean;
+    /**
+     * Whether to show seconds in the rendered time
+     */
+    showSeconds?: boolean;
+    /**
+     * Whether the component should render just the string
+     * Consider using `useTimeAgo` instead
+     */
+    justText?: boolean;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvTimeAgoClasses;
+}
+
 export declare const HvToggleButton: ForwardRefExoticComponent<HvToggleButtonProps & RefAttributes<HTMLButtonElement>>;
 
 export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonElement, {
@@ -7008,6 +7232,13 @@ export declare interface HvVerticalNavigationTreeViewProps {
     children?: React.ReactNode;
 }
 
+export declare interface HvVerticalScrollListItemClasses {
+    root?: string;
+    notSelected?: string;
+    button?: string;
+    text?: string;
+}
+
 /**
  * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
  */
@@ -7050,6 +7281,8 @@ export declare const increaseSize: (size: string) => "S" | "M" | "L" | "XL";
 
 export declare const infoMessageClasses: HvInfoMessageClasses;
 
+export declare const inlineEditorClasses: HvInlineEditorClasses;
+
 export declare const inputClasses: HvInputClasses;
 
 export declare const isBrowser: (browsers: any) => boolean | null;
@@ -7304,6 +7537,10 @@ export declare function reducer(state: any, action: any, previousState: any, ins
 
 export declare const rightControlClasses: HvRightControlClasses;
 
+export declare const scrollToHorizontalClasses: HvScrollToHorizontalClasses;
+
+export declare const scrollToVerticalClasses: HvScrollToVerticalClasses;
+
 export declare const selectionListClasses: HvSelectionListClasses;
 
 /**
@@ -7361,6 +7598,8 @@ export { theme }
 
 export { themes }
 
+export declare const timeAgoClasses: HvTimeAgoClasses;
+
 export declare const tooltipClasses: HvTooltipClasses;
 
 export declare const treeViewClasses: HvVerticalNavigationTreeViewClasses;
@@ -7668,6 +7907,8 @@ export declare type UseRowSelectionProps = (<D extends object = Record<string, u
 
 export declare function useSavedState<T>(defaultState: T): [T | undefined, (v?: T, s?: boolean) => void, () => void, T | undefined, T];
 
+export declare const useScrollTo: (selectedIndexProp?: number, scrollElementId?: string | undefined, href?: boolean, offset?: number, options?: HvScrollToVerticalOption[], onChange?: ((event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void) | undefined, direction?: "column" | "row") => [number, (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, id: string, index: number, wrappedOnChange?: ((index: number) => void) | undefined) => void];
+
 export declare const useSelectionPath: (data: any, selectedId: any) => string[];
 
 export declare type UseTableStylesProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
@@ -7709,6 +7950,8 @@ export declare const verticalNavigationSliderClasses: HvVerticalNavigationSlider
 
 export declare const verticalNavigationTreeClasses: HvVerticalNavigationTreeClasses;
 
+export declare const verticalScrollListItemClasses: HvVerticalScrollListItemClasses;
+
 export declare type VisibilitySelectorActions = "previous_month" | "next_month" | "previous_year" | "next_year" | "month" | "month_year";
 
 export declare const warningTextClasses: HvWarningTextClasses;
@@ -7722,7 +7965,7 @@ declare interface WithIdProps extends HvExtraProps {
     id?: string;
 }
 
-export declare const withTooltip: (Component: any, label: string | undefined, placement: any, hideTooltip: any, tooltipProps: any, tooltipContainerProps: any) => (props: any) => JSX_2.Element;
+export declare const withTooltip: (Component: React.FunctionComponent, label: string | undefined, placement: HvTooltipPlacementType, hideTooltip?: ((event: React.MouseEvent<HTMLDivElement>) => boolean) | undefined, tooltipProps?: HvTooltipProps, tooltipContainerProps?: HvBaseProps) => (props: any) => JSX_2.Element;
 
 export declare const wrapperTooltip: (hasTooltips: any, Component: any, label: any) => ((props: any) => JSX_2.Element) | (() => any);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -24,15 +24,15 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.11.0",
+    "@mui/material": "^5.12.2",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "^5.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.0.6",
-    "@hitachivantara/uikit-styles": "^5.3.0",
+    "@hitachivantara/uikit-react-icons": "^5.1.3",
+    "@hitachivantara/uikit-react-shared": "^5.0.7",
+    "@hitachivantara/uikit-styles": "^5.4.0",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
@@ -56,7 +56,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "316624f40b96d6dcc8b40ed71b50cbc3c4371335",
+  "gitHead": "844a033f2b8388c2ae25bfcc0be710db5ed24b27",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {