@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

package/dist/esm/components/List/List.styles.js

@@ -1,17 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvList", {
+const { staticClasses, useClasses } = createClasses("HvList", {
   root: {},
-  virtualizedRoot: {
-    marginBottom: 5
-  },
-  selectorRoot: {
-    width: "100%",
-    zIndex: 0
-  },
+  virtualizedRoot: { marginBottom: 5 },
+  selectorRoot: { width: "100%", zIndex: 0 },
   selectorContainer: {
     "&:hover": {
       backgroundColor: "transparent"
@@ -22,11 +14,7 @@ const {
       boxShadow: "none"
     }
   },
-  box: {
-    width: "32px",
-    height: "32px",
-    marginLeft: "auto"
-  },
+  box: { width: "32px", height: "32px", marginLeft: "auto" },
   truncate: {
     display: "inline-block",
     overflow: "hidden",

package/dist/esm/components/List/List.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../../src/components/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","virtualizedRoot","marginBottom","selectorRoot","width","zIndex","selectorContainer","backgroundColor","outline","boxShadow","box","height","marginLeft","truncate","display","overflow","textOverflow","whiteSpace","item","itemSelector","theme","colors","primary_20","link","typography","body","textDecoration","selectAllSelector","margin","position"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,iBAAiB;AAAA,IAAEC,cAAc;AAAA,EAAE;AAAA,EACnCC,cAAc;AAAA,IAAEC,OAAO;AAAA,IAAQC,QAAQ;AAAA,EAAE;AAAA,EACzCC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTC,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChBA,iBAAiB;AAAA,MACjBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,KAAK;AAAA,IAAEN,OAAO;AAAA,IAAQO,QAAQ;AAAA,IAAQC,YAAY;AAAA,EAAO;AAAA,EACzDC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpDZ,iBAAiBa,MAAMC,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJ,GAAGH,MAAMI,WAAWC;AAAAA,IACpBC,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACTjB,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAkB,mBAAmB;AAAA,IACjBvB,OAAO;AAAA,IACPwB,QAAQ;AAAA,IAERC,UAAU;AAAA,IACVxB,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"List.styles.js","sources":["../../../../src/components/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/List/useSelectableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectableList.js","sources":["../../../../src/components/List/useSelectableList.ts"],"sourcesContent":["import { useState, useMemo } from \"react\";\n\nimport { HvListValue } from \"./types\";\n\nexport const useSelectableList = (defaultList: HvListValue[] = []) => {\n  const [list, setList] = useState(defaultList);\n\n  const selection = useMemo(() => list.filter((elem) => elem.selected), [list]);\n\n  return [list, setList, selection] as const;\n};\n"],"names":["useSelectableList","defaultList","list","setList","useState","selection","useMemo","filter","elem","selected"],"mappings":";AAIO,MAAMA,oBAAoBA,CAACC,cAA6B,OAAO;AACpE,QAAM,CAACC,MAAMC,OAAO,IAAIC,SAASH,WAAW;AAEtCI,QAAAA,YAAYC,QAAQ,MAAMJ,KAAKK,OAAQC,CAASA,SAAAA,KAAKC,QAAQ,GAAG,CAACP,IAAI,CAAC;AAErE,SAAA,CAACA,MAAMC,SAASE,SAAS;AAClC;"}
+{"version":3,"file":"useSelectableList.js","sources":["../../../../src/components/List/useSelectableList.ts"],"sourcesContent":["import { useState, useMemo } from \"react\";\n\nimport { HvListValue } from \"./types\";\n\nexport const useSelectableList = (defaultList: HvListValue[] = []) => {\n  const [list, setList] = useState(defaultList);\n\n  const selection = useMemo(() => list.filter((elem) => elem.selected), [list]);\n\n  return [list, setList, selection] as const;\n};\n"],"names":[],"mappings":";AAIO,MAAM,oBAAoB,CAAC,cAA6B,OAAO;AACpE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAE5C,QAAM,YAAY,QAAQ,MAAM,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC,IAAI,CAAC;AAErE,SAAA,CAAC,MAAM,SAAS,SAAS;AAClC;"}

package/dist/esm/components/List/utils.js

@@ -4,16 +4,10 @@ const isItemSelected = (item, newItem) => {
   return newItem[selectionKey] === selectionElement;
 };
 const parseList = (item, props, selectAll, list = []) => {
-  const {
-    multiSelect,
-    selectable,
-    singleSelectionToggle
-  } = props || {};
+  const { multiSelect, selectable, singleSelectionToggle } = props || {};
   let anySelected = false;
   const newList = list.map((elem) => {
-    const newItem = {
-      ...elem
-    };
+    const newItem = { ...elem };
     if (!multiSelect) {
       newItem.selected = false;
     }

package/dist/esm/components/List/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n  const selectionKey = item?.id ? \"id\" : \"label\";\n  const selectionElement = item && item[selectionKey];\n  return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n  const hasLeftIcons = checkIcons(list);\n  const selection = list.filter((elem: any) => elem?.selected);\n  const anySelected = !!selection.length;\n  const allSelected = selection.length === list.length;\n  const anySelectableSelected = list.some(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n  const allSelectableSelected = list.every(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n\n  return {\n    list,\n    hasLeftIcons,\n    anySelected,\n    allSelected,\n    anySelectableSelected,\n    allSelectableSelected,\n    selection,\n  };\n};\n\nconst parseList = (\n  item: HvListValue | undefined,\n  props: {\n    multiSelect?: boolean;\n    selectable?: boolean;\n    singleSelectionToggle?: boolean;\n  },\n  selectAll: boolean | undefined,\n  list: HvListValue[] = []\n): HvListValue[] => {\n  const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n  let anySelected = false;\n  const newList = list.map((elem: any) => {\n    const newItem = { ...elem };\n\n    // reset elem item\n    if (!multiSelect) {\n      newItem.selected = false;\n    }\n\n    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n    if (selectItem && selectable) {\n      let selectionState;\n\n      if (multiSelect) {\n        selectionState = item ? !elem?.selected : true;\n      } else {\n        selectionState =\n          !anySelected &&\n          (item && singleSelectionToggle ? !elem?.selected : true);\n      }\n\n      newItem.selected = selectionState;\n      anySelected = true;\n    }\n\n    if (typeof selectAll === \"boolean\" && !elem?.disabled)\n      newItem.selected = selectAll;\n\n    // normalize item selected prop if not provided\n    if (!newItem?.selected) newItem.selected = false;\n\n    return newItem;\n  });\n\n  return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":["isItemSelected","item","newItem","selectionKey","id","selectionElement","parseList","props","selectAll","list","multiSelect","selectable","singleSelectionToggle","anySelected","newList","map","elem","selected","selectItem","selectionState","disabled"],"mappings":"AAEMA,MAAAA,iBAAiBA,CAACC,MAAmBC,YAAyB;AAC5DC,QAAAA,eAAeF,MAAMG,KAAK,OAAO;AACjCC,QAAAA,mBAAmBJ,QAAQA,KAAKE,YAAY;AAC3CD,SAAAA,QAAQC,YAAY,MAAME;AACnC;AA2BA,MAAMC,YAAYA,CAChBL,MACAM,OAKAC,WACAC,OAAsB,CAAA,MACJ;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAYC;AAAAA,EAAAA,IAA0BL,SAAS,CAAA;AAEpE,MAAIM,cAAc;AAClB,QAAMC,UAAUL,KAAKM,IAAI,CAACC,SAAc;AACtC,UAAMd,UAAU;AAAA,MAAE,GAAGc;AAAAA,IAAAA;AAGrB,QAAI,CAACN,aAAa;AAChBR,cAAQe,WAAW;AAAA,IACrB;AAEA,UAAMC,aAAajB,OAAOD,eAAeC,MAAMC,OAAO,IAAIc,MAAMC;AAEhE,QAAIC,cAAcP,YAAY;AACxBQ,UAAAA;AAEJ,UAAIT,aAAa;AACET,yBAAAA,OAAO,CAACe,MAAMC,WAAW;AAAA,MAAA,OACrC;AACLE,yBACE,CAACN,gBACAZ,QAAQW,wBAAwB,CAACI,MAAMC,WAAW;AAAA,MACvD;AAEAf,cAAQe,WAAWE;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAOX,cAAc,aAAa,CAACQ,MAAMI;AAC3ClB,cAAQe,WAAWT;AAGrB,QAAI,CAACN,SAASe;AAAUf,cAAQe,WAAW;AAEpCf,WAAAA;AAAAA,EAAAA,CACR;AAEMY,SAAAA;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n  const selectionKey = item?.id ? \"id\" : \"label\";\n  const selectionElement = item && item[selectionKey];\n  return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n  const hasLeftIcons = checkIcons(list);\n  const selection = list.filter((elem: any) => elem?.selected);\n  const anySelected = !!selection.length;\n  const allSelected = selection.length === list.length;\n  const anySelectableSelected = list.some(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n  const allSelectableSelected = list.every(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n\n  return {\n    list,\n    hasLeftIcons,\n    anySelected,\n    allSelected,\n    anySelectableSelected,\n    allSelectableSelected,\n    selection,\n  };\n};\n\nconst parseList = (\n  item: HvListValue | undefined,\n  props: {\n    multiSelect?: boolean;\n    selectable?: boolean;\n    singleSelectionToggle?: boolean;\n  },\n  selectAll: boolean | undefined,\n  list: HvListValue[] = []\n): HvListValue[] => {\n  const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n  let anySelected = false;\n  const newList = list.map((elem: any) => {\n    const newItem = { ...elem };\n\n    // reset elem item\n    if (!multiSelect) {\n      newItem.selected = false;\n    }\n\n    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n    if (selectItem && selectable) {\n      let selectionState;\n\n      if (multiSelect) {\n        selectionState = item ? !elem?.selected : true;\n      } else {\n        selectionState =\n          !anySelected &&\n          (item && singleSelectionToggle ? !elem?.selected : true);\n      }\n\n      newItem.selected = selectionState;\n      anySelected = true;\n    }\n\n    if (typeof selectAll === \"boolean\" && !elem?.disabled)\n      newItem.selected = selectAll;\n\n    // normalize item selected prop if not provided\n    if (!newItem?.selected) newItem.selected = false;\n\n    return newItem;\n  });\n\n  return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":[],"mappings":"AAEM,MAAA,iBAAiB,CAAC,MAAmB,YAAyB;AAC5D,QAAA,eAAe,MAAM,KAAK,OAAO;AACjC,QAAA,mBAAmB,QAAQ,KAAK,YAAY;AAC3C,SAAA,QAAQ,YAAY,MAAM;AACnC;AA2BA,MAAM,YAAY,CAChB,MACA,OAKA,WACA,OAAsB,CAAA,MACJ;AAClB,QAAM,EAAE,aAAa,YAAY,sBAAsB,IAAI,SAAS,CAAA;AAEpE,MAAI,cAAc;AAClB,QAAM,UAAU,KAAK,IAAI,CAAC,SAAc;AAChC,UAAA,UAAU,EAAE,GAAG;AAGrB,QAAI,CAAC,aAAa;AAChB,cAAQ,WAAW;AAAA,IACrB;AAEA,UAAM,aAAa,OAAO,eAAe,MAAM,OAAO,IAAI,MAAM;AAEhE,QAAI,cAAc,YAAY;AACxB,UAAA;AAEJ,UAAI,aAAa;AACE,yBAAA,OAAO,CAAC,MAAM,WAAW;AAAA,MAAA,OACrC;AACL,yBACE,CAAC,gBACA,QAAQ,wBAAwB,CAAC,MAAM,WAAW;AAAA,MACvD;AAEA,cAAQ,WAAW;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAO,cAAc,aAAa,CAAC,MAAM;AAC3C,cAAQ,WAAW;AAGrB,QAAI,CAAC,SAAS;AAAU,cAAQ,WAAW;AAEpC,WAAA;AAAA,EAAA,CACR;AAEM,SAAA;AACT;"}

package/dist/esm/components/ListContainer/ListContainer.js

@@ -16,22 +16,19 @@ const HvListContainer = forwardRef((props, ref) => {
     children,
     ...others
   } = useDefaultProps("HvListContainer", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const containerRef = useRef(null);
-  const {
-    topContainerRef,
-    nesting = -1
-  } = useContext(HvListContext);
-  const listContext = useMemo(() => ({
-    topContainerRef: topContainerRef || containerRef,
-    condensed,
-    disableGutters,
-    interactive,
-    nesting: nesting + 1
-  }), [condensed, disableGutters, interactive, nesting, topContainerRef]);
+  const { topContainerRef, nesting = -1 } = useContext(HvListContext);
+  const listContext = useMemo(
+    () => ({
+      topContainerRef: topContainerRef || containerRef,
+      condensed,
+      disableGutters,
+      interactive,
+      nesting: nesting + 1
+    }),
+    [condensed, disableGutters, interactive, nesting, topContainerRef]
+  );
   const renderChildren = () => {
     if (!interactive) {
       return children;
@@ -46,7 +43,16 @@ const HvListContainer = forwardRef((props, ref) => {
     });
   };
   const handleRef = useForkRef(ref, containerRef);
-  return /* @__PURE__ */ jsx(HvListContext.Provider, { value: listContext, children: /* @__PURE__ */ jsx("ul", { ref: handleRef, id, className: cx(classes.root, className), ...others, children: renderChildren() }) });
+  return /* @__PURE__ */ jsx(HvListContext.Provider, { value: listContext, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: handleRef,
+      id,
+      className: cx(classes.root, className),
+      ...others,
+      children: renderChildren()
+    }
+  ) });
 });
 export {
   HvListContainer,

package/dist/esm/components/ListContainer/ListContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContainer.js","sources":["../../../../src/components/ListContainer/ListContainer.tsx"],"sourcesContent":["import React, { useRef, useContext, useMemo, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n  /**\n   * If the list items should be focusable and react to mouse over events.\n   * Defaults to true if the list is selectable, false otherwise.\n   */\n  interactive?: boolean;\n  /** If `true` compact the vertical spacing between list items. */\n  condensed?: boolean;\n  /** If `true`, the list items' left and right padding is removed. */\n  disableGutters?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListContainerClasses;\n}\n\n/**\n * A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n  HTMLUListElement,\n  HvListContainerProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    interactive = false,\n    condensed,\n    disableGutters,\n    children,\n    ...others\n  } = useDefaultProps(\"HvListContainer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(null);\n\n  const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n  const listContext = useMemo(\n    () => ({\n      topContainerRef: topContainerRef || containerRef,\n      condensed,\n      disableGutters,\n      interactive,\n      nesting: nesting + 1,\n    }),\n    [condensed, disableGutters, interactive, nesting, topContainerRef]\n  );\n\n  const renderChildren = () => {\n    if (!interactive) {\n      return children;\n    }\n\n    const anySelected = React.Children.toArray(children)\n      .map((child: any) => child.props.selected && !child.props.disabled)\n      .reduce((result, selected) => result || selected, false);\n\n    return React.Children.map(children, (child: any, i) => {\n      const tabIndex =\n        child.props.tabIndex ||\n        (!anySelected && i === 0) ||\n        (child.props.selected && !child.props.disabled)\n          ? 0\n          : -1;\n\n      return React.cloneElement(child, {\n        tabIndex,\n        interactive,\n      });\n    });\n  };\n\n  const handleRef = useForkRef(ref, containerRef);\n\n  return (\n    <HvListContext.Provider value={listContext}>\n      <ul\n        ref={handleRef}\n        id={id}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {renderChildren()}\n      </ul>\n    </HvListContext.Provider>\n  );\n});\n"],"names":["HvListContainer","forwardRef","props","ref","id","classes","classesProp","className","interactive","condensed","disableGutters","children","others","useDefaultProps","cx","useClasses","containerRef","useRef","topContainerRef","nesting","useContext","HvListContext","listContext","useMemo","renderChildren","anySelected","React","Children","toArray","map","child","selected","disabled","reduce","result","i","tabIndex","cloneElement","handleRef","useForkRef","root"],"mappings":";;;;;;;AAiCO,MAAMA,kBAAkBC,WAG7B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,cAAc;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBX,KAAK;AAEtC,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExCU,QAAAA,eAAeC,OAAO,IAAI;AAE1B,QAAA;AAAA,IAAEC;AAAAA,IAAiBC,UAAU;AAAA,EAAA,IAAOC,WAAWC,aAAa;AAE5DC,QAAAA,cAAcC,QAClB,OAAO;AAAA,IACLL,iBAAiBA,mBAAmBF;AAAAA,IACpCP;AAAAA,IACAC;AAAAA,IACAF;AAAAA,IACAW,SAASA,UAAU;AAAA,EAAA,IAErB,CAACV,WAAWC,gBAAgBF,aAAaW,SAASD,eAAe,CACnE;AAEA,QAAMM,iBAAiBA,MAAM;AAC3B,QAAI,CAAChB,aAAa;AACTG,aAAAA;AAAAA,IACT;AAEMc,UAAAA,cAAcC,eAAMC,SAASC,QAAQjB,QAAQ,EAChDkB,IAAI,CAACC,UAAeA,MAAM5B,MAAM6B,YAAY,CAACD,MAAM5B,MAAM8B,QAAQ,EACjEC,OAAO,CAACC,QAAQH,aAAaG,UAAUH,UAAU,KAAK;AAEzD,WAAOL,eAAMC,SAASE,IAAIlB,UAAU,CAACmB,OAAYK,MAAM;AACrD,YAAMC,WACJN,MAAM5B,MAAMkC,YACX,CAACX,eAAeU,MAAM,KACtBL,MAAM5B,MAAM6B,YAAY,CAACD,MAAM5B,MAAM8B,WAClC,IACA;AAECN,aAAAA,eAAMW,aAAaP,OAAO;AAAA,QAC/BM;AAAAA,QACA5B;AAAAA,MAAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA;AAGG8B,QAAAA,YAAYC,WAAWpC,KAAKa,YAAY;AAG5C,SAAA,oBAAC,cAAc,UAAd,EAAuB,OAAOM,aAC7B,UAAA,oBAAC,QACC,KAAKgB,WACL,IACA,WAAWxB,GAAGT,QAAQmC,MAAMjC,SAAS,GACrC,GAAIK,QAEHY,UAAe,iBAClB,CAAA,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"ListContainer.js","sources":["../../../../src/components/ListContainer/ListContainer.tsx"],"sourcesContent":["import React, { useRef, useContext, useMemo, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n  /**\n   * If the list items should be focusable and react to mouse over events.\n   * Defaults to true if the list is selectable, false otherwise.\n   */\n  interactive?: boolean;\n  /** If `true` compact the vertical spacing between list items. */\n  condensed?: boolean;\n  /** If `true`, the list items' left and right padding is removed. */\n  disableGutters?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListContainerClasses;\n}\n\n/**\n * A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n  HTMLUListElement,\n  HvListContainerProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    interactive = false,\n    condensed,\n    disableGutters,\n    children,\n    ...others\n  } = useDefaultProps(\"HvListContainer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(null);\n\n  const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n  const listContext = useMemo(\n    () => ({\n      topContainerRef: topContainerRef || containerRef,\n      condensed,\n      disableGutters,\n      interactive,\n      nesting: nesting + 1,\n    }),\n    [condensed, disableGutters, interactive, nesting, topContainerRef]\n  );\n\n  const renderChildren = () => {\n    if (!interactive) {\n      return children;\n    }\n\n    const anySelected = React.Children.toArray(children)\n      .map((child: any) => child.props.selected && !child.props.disabled)\n      .reduce((result, selected) => result || selected, false);\n\n    return React.Children.map(children, (child: any, i) => {\n      const tabIndex =\n        child.props.tabIndex ||\n        (!anySelected && i === 0) ||\n        (child.props.selected && !child.props.disabled)\n          ? 0\n          : -1;\n\n      return React.cloneElement(child, {\n        tabIndex,\n        interactive,\n      });\n    });\n  };\n\n  const handleRef = useForkRef(ref, containerRef);\n\n  return (\n    <HvListContext.Provider value={listContext}>\n      <ul\n        ref={handleRef}\n        id={id}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {renderChildren()}\n      </ul>\n    </HvListContext.Provider>\n  );\n});\n"],"names":["React"],"mappings":";;;;;;;AAiCO,MAAM,kBAAkB,WAG7B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,WAAW,aAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB,CAAC,WAAW,gBAAgB,aAAa,SAAS,eAAe;AAAA,EAAA;AAGnE,QAAM,iBAAiB,MAAM;AAC3B,QAAI,CAAC,aAAa;AACT,aAAA;AAAA,IACT;AAEM,UAAA,cAAcA,eAAM,SAAS,QAAQ,QAAQ,EAChD,IAAI,CAAC,UAAe,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,QAAQ,EACjE,OAAO,CAAC,QAAQ,aAAa,UAAU,UAAU,KAAK;AAEzD,WAAOA,eAAM,SAAS,IAAI,UAAU,CAAC,OAAY,MAAM;AACrD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEC,aAAAA,eAAM,aAAa,OAAO;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA;AAGG,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAA,cAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH,UAAe,eAAA;AAAA,IAAA;AAAA,EAEpB,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/components/ListContainer/ListContainer.styles.js

@@ -1,8 +1,5 @@
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvListContainer", {
+const { staticClasses, useClasses } = createClasses("HvListContainer", {
   root: {}
 });
 export {

package/dist/esm/components/ListContainer/ListContainer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContainer.styles.js","sources":["../../../../src/components/ListContainer/ListContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListContainer\", {\n  root: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,mBAAmB;AAAA,EAC5EC,MAAM,CAAC;AACT,CAAC;"}
+{"version":3,"file":"ListContainer.styles.js","sources":["../../../../src/components/ListContainer/ListContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListContainer\", {\n  root: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM,CAAC;AACT,CAAC;"}

package/dist/esm/components/ListContainer/ListContext/ListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContext.js","sources":["../../../../../src/components/ListContainer/ListContext/ListContext.ts"],"sourcesContent":["import React from \"react\";\n\nconst ListContext = React.createContext<{\n  interactive?: boolean;\n  nesting?: number;\n  condensed?: boolean;\n  disableGutters?: boolean;\n  topContainerRef?: React.MutableRefObject<HTMLUListElement | null>;\n}>({});\n\nListContext.displayName = \"ListContext\";\n\nexport default ListContext;\n"],"names":["ListContext","React","createContext","displayName"],"mappings":";AAEA,MAAMA,cAAcC,eAAMC,cAMvB,CAAA,CAAE;AAELF,YAAYG,cAAc;AAE1B,MAAA,gBAAeH;"}
+{"version":3,"file":"ListContext.js","sources":["../../../../../src/components/ListContainer/ListContext/ListContext.ts"],"sourcesContent":["import React from \"react\";\n\nconst ListContext = React.createContext<{\n  interactive?: boolean;\n  nesting?: number;\n  condensed?: boolean;\n  disableGutters?: boolean;\n  topContainerRef?: React.MutableRefObject<HTMLUListElement | null>;\n}>({});\n\nListContext.displayName = \"ListContext\";\n\nexport default ListContext;\n"],"names":["React"],"mappings":";AAEA,MAAM,cAAcA,eAAM,cAMvB,CAAA,CAAE;AAEL,YAAY,cAAc;AAE1B,MAAA,gBAAe;"}

package/dist/esm/components/ListContainer/ListItem/ListItem.js

@@ -43,10 +43,7 @@ const HvListItem = forwardRef((props, ref) => {
     tabIndex,
     ...others
   } = useDefaultProps("HvListItem", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const {
     topContainerRef,
     condensed: condensedContext,
@@ -56,17 +53,47 @@ const HvListItem = forwardRef((props, ref) => {
   const condensed = condensedProp != null ? condensedProp : condensedContext;
   const disableGutters = disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;
   const interactive = interactiveProp != null ? interactiveProp : interactiveContext;
-  const handleOnClick = useCallback((evt) => {
-    if (!disabled) {
-      onClick?.(evt);
-    }
-  }, [disabled, onClick]);
-  const clonedStartAdornment = useMemo(() => applyClassNameAndStateToElement(startAdornment, selected, disabled, handleOnClick, cx(classes.startAdornment, {
-    [classes.disabled]: disabled
-  }, React__default.isValidElement(startAdornment) ? startAdornment.props.className : void 0)), [cx, classes?.startAdornment, classes?.disabled, disabled, handleOnClick, selected, startAdornment]);
-  const clonedEndAdornment = useMemo(() => applyClassNameToElement(endAdornment, cx(classes.endAdornment, {
-    [classes.disabled]: disabled
-  }, React__default.isValidElement(endAdornment) ? endAdornment.props.className : void 0)), [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
+  const handleOnClick = useCallback(
+    (evt) => {
+      if (!disabled) {
+        onClick?.(evt);
+      }
+    },
+    [disabled, onClick]
+  );
+  const clonedStartAdornment = useMemo(
+    () => applyClassNameAndStateToElement(
+      startAdornment,
+      selected,
+      disabled,
+      handleOnClick,
+      cx(
+        classes.startAdornment,
+        { [classes.disabled]: disabled },
+        React__default.isValidElement(startAdornment) ? startAdornment.props.className : void 0
+      )
+    ),
+    [
+      cx,
+      classes?.startAdornment,
+      classes?.disabled,
+      disabled,
+      handleOnClick,
+      selected,
+      startAdornment
+    ]
+  );
+  const clonedEndAdornment = useMemo(
+    () => applyClassNameToElement(
+      endAdornment,
+      cx(
+        classes.endAdornment,
+        { [classes.disabled]: disabled },
+        React__default.isValidElement(endAdornment) ? endAdornment.props.className : void 0
+      )
+    ),
+    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]
+  );
   const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
     "aria-disabled": disabled || void 0,
     "aria-selected": selected
@@ -81,15 +108,19 @@ const HvListItem = forwardRef((props, ref) => {
         ref,
         role,
         value,
-        className: cx(classes.root, {
-          [classes.gutters]: !disableGutters,
-          [classes.condensed]: condensed,
-          [classes.interactive]: interactive,
-          [classes.selected]: !!selected,
-          [classes.disabled]: !!disabled,
-          [classes.withStartAdornment]: startAdornment != null,
-          [classes.withEndAdornment]: endAdornment != null
-        }, className),
+        className: cx(
+          classes.root,
+          {
+            [classes.gutters]: !disableGutters,
+            [classes.condensed]: condensed,
+            [classes.interactive]: interactive,
+            [classes.selected]: !!selected,
+            [classes.disabled]: !!disabled,
+            [classes.withStartAdornment]: startAdornment != null,
+            [classes.withEndAdornment]: endAdornment != null
+          },
+          className
+        ),
         onClick: handleOnClick,
         onKeyDown: () => {
         },
@@ -103,11 +134,20 @@ const HvListItem = forwardRef((props, ref) => {
       }
     )
   );
-  return interactive ? /* @__PURE__ */ jsx(HvFocus, { rootRef: topContainerRef, selected, disabledClass: disabled || void 0, strategy: role === "option" ? "listbox" : "menu", classes: {
-    focus: classes.focus
-  }, configuration: {
-    tabIndex
-  }, children: listItem }) : listItem;
+  return interactive ? /* @__PURE__ */ jsx(
+    HvFocus,
+    {
+      rootRef: topContainerRef,
+      selected,
+      disabledClass: disabled || void 0,
+      strategy: role === "option" ? "listbox" : "menu",
+      classes: { focus: classes.focus },
+      configuration: {
+        tabIndex
+      },
+      children: listItem
+    }
+  ) : listItem;
 });
 export {
   HvListItem,

package/dist/esm/components/ListContainer/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","forwardRef","props","ref","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["React"],"mappings":"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"}

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js

@@ -1,10 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../../utils/focusUtils.js";
 import { createClasses } from "../../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvListItem", {
+const { staticClasses, useClasses } = createClasses("HvListItem", {
   root: {
     ...theme.typography.body,
     padding: 0,
@@ -28,10 +25,7 @@ const {
       zIndex: 2
     }
   },
-  focus: {
-    backgroundColor: theme.colors.atmo3,
-    zIndex: 2
-  },
+  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },
   startAdornment: {},
   endAdornment: {},
   gutters: {
@@ -53,9 +47,7 @@ const {
       cursor: "not-allowed"
     }
   },
-  selected: {
-    backgroundColor: theme.colors.containerBackgroundHover
-  },
+  selected: { backgroundColor: theme.colors.containerBackgroundHover },
   disabled: {
     color: theme.colors.secondary_60,
     backgroundColor: theme.colors.atmo3
@@ -73,9 +65,7 @@ const {
     }
   },
   withEndAdornment: {
-    "& > div": {
-      float: "right"
-    },
+    "& > div": { float: "right" },
     "& svg": {
       boxShadow: "none !important",
       outline: "none !important"

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","outlineStyles","backgroundColor","colors","atmo3","zIndex","focus","startAdornment","endAdornment","gutters","space","xs","paddingLeft","paddingRight","condensed","interactive","cursor","containerBackgroundHover","selected","disabled","color","secondary_60","withStartAdornment","float","boxShadow","outline","fill","withEndAdornment"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,MAAMC,WAAWC;AAAAA,IACpBC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACbA,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAGC;AAAAA,MACHC,iBAAiBd,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,MAAMsB,MAAMC,EAAG;AAAA,IAE7B,wBAAwB;AAAA,MACtBC,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,aAAa;AAAA,IACXC,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvCd,iBAAiBd,MAAMe,OAAOc;AAAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZD,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAE,UAAU;AAAA,IAAEhB,iBAAiBd,MAAMe,OAAOc;AAAAA,EAAyB;AAAA,EACnEE,UAAU;AAAA,IACRC,OAAOhC,MAAMe,OAAOkB;AAAAA,IACpBnB,iBAAiBd,MAAMe,OAAOC;AAAAA,EAChC;AAAA,EACAkB,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMtC,MAAMe,OAAOkB;AAAAA,IACrB;AAAA,EACF;AAAA,EACAM,kBAAkB;AAAA,IAChB,WAAW;AAAA,MAAEJ,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMtC,MAAMe,OAAOkB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/Loading/Loading.js

@@ -15,22 +15,38 @@ const HvLoading = (props) => {
     className,
     ...others
   } = useDefaultProps("HvLoading", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const size = small ? "small" : "regular";
   const colorVariant = color ? "Color" : "";
   const variant = `${size}${colorVariant}`;
   const inline = {
     backgroundColor: getColor(color, small ? "secondary" : "brand")
   };
-  return /* @__PURE__ */ jsxs("div", { hidden: !!hidden, className: cx(classes.root, {
-    [classes.hidden]: hidden
-  }, className), ...others, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(0, 3).map((e) => /* @__PURE__ */ jsx("div", { style: inline, className: cx(classes.loadingBar, classes[variant]) }, e)) }),
-    label && /* @__PURE__ */ jsx(HvTypography, { variant: "caption1", className: classes.label, children: label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      hidden: !!hidden,
+      className: cx(
+        classes.root,
+        {
+          [classes.hidden]: hidden
+        },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(0, 3).map((e) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: inline,
+            className: cx(classes.loadingBar, classes[variant])
+          },
+          e
+        )) }),
+        label && /* @__PURE__ */ jsx(HvTypography, { variant: "caption1", className: classes.label, children: label })
+      ]
+    }
+  );
 };
 export {
   HvLoading,

package/dist/esm/components/Loading/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sources":["../../../../src/components/Loading/Loading.tsx"],"sourcesContent":["import { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\n\nimport range from \"lodash/range\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: string | React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(0, 3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvLoading","props","color","hidden","small","label","classes","classesProp","className","others","useDefaultProps","cx","useClasses","size","colorVariant","variant","inline","backgroundColor","getColor","root","barContainer","range","map","e","loadingBar"],"mappings":";;;;;;;AA+BaA,MAAAA,YAAYA,CAACC,UAA0B;AAC5C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,aAAaT,KAAK;AAEhC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAWL,WAAW;AAExCM,QAAAA,OAAOT,QAAQ,UAAU;AACzBU,QAAAA,eAAeZ,QAAQ,UAAU;AACvC,QAAMa,UAAW,GAAEF,IAAK,GAAEC,YAAa;AAEvC,QAAME,SAAS;AAAA,IACbC,iBAAiBC,SAAShB,OAAOE,QAAQ,cAAc,OAAO;AAAA,EAAA;AAG9D,SAAA,qBAAC,SACC,QAAQ,CAAC,CAACD,QACV,WAAWQ,GACTL,QAAQa,MACR;AAAA,IACE,CAACb,QAAQH,MAAM,GAAGA;AAAAA,EAEpBK,GAAAA,SACF,GACA,GAAIC,QAEJ,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAWH,QAAQc,cACrBC,UAAAA,MAAM,GAAG,CAAC,EAAEC,IAAKC,CAAAA,MACf,oBAAA,OAAA,EAEC,OAAOP,QACP,WAAWL,GAAGL,QAAQkB,YAAYlB,QAAQS,OAAO,CAAC,EAAA,GAF7CQ,EAIR,EACH,CAAA;AAAA,IACClB,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAWC,QAAQD,OACjDA,UACH,MAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Loading.js","sources":["../../../../src/components/Loading/Loading.tsx"],"sourcesContent":["import { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\n\nimport range from \"lodash/range\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: string | React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(0, 3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA+Ba,MAAA,YAAY,CAAC,UAA0B;AAC5C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,QAAQ,UAAU;AACvC,QAAM,UAAU,GAAG,IAAI,GAAG,YAAY;AAEtC,QAAM,SAAS;AAAA,IACb,iBAAiB,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,EAAA;AAG9D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,CAAC,CAAC;AAAA,MACV,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,UAAA,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,MAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,YACP,WAAW,GAAG,QAAQ,YAAY,QAAQ,OAAO,CAAC;AAAA,UAAA;AAAA,UAF7C;AAAA,QAIR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/components/Loading/Loading.styles.js

@@ -60,19 +60,14 @@ const smallColorAnimation = keyframes`
     transform: scale(1, 0.223); 
   }
 `;
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvLoading", {
+const { staticClasses, useClasses } = createClasses("HvLoading", {
   root: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center"
   },
-  barContainer: {
-    display: "flex"
-  },
+  barContainer: { display: "flex" },
   loadingBar: {
     display: "inline-block",
     "@keyframes loading-small": {
@@ -85,18 +80,11 @@ const {
       "100%": {}
     }
   },
-  label: {
-    marginTop: "15px"
-  },
+  label: { marginTop: "15px" },
   overlay: {},
   blur: {},
-  hidden: {
-    display: "none"
-  },
-  small: {
-    animation: `${smallAnimation} 1s ease-in-out infinite`,
-    ...small
-  },
+  hidden: { display: "none" },
+  small: { animation: `${smallAnimation} 1s ease-in-out infinite`, ...small },
   regular: {
     animation: `${regularAnimation} 1s ease-in-out infinite`,
     ...regular

package/dist/esm/components/Loading/Loading.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.styles.js","sources":["../../../../src/components/Loading/Loading.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst interval = 0.11;\n\nconst bars = {\n  \"&:nth-of-type(1)\": {\n    animationDelay: \"0\",\n  },\n  \"&:nth-of-type(2)\": {\n    animationDelay: `${interval * 2}s`,\n  },\n  \"&:nth-of-type(3)\": {\n    animationDelay: `${interval * 4}s`,\n  },\n};\n\nconst small = {\n  width: \"2px\",\n  height: \"18px\",\n  margin: \"0px 2px\",\n  ...bars,\n};\n\nconst regular = {\n  width: \"4px\",\n  height: \"30px\",\n  margin: \"0 3px\",\n  ...bars,\n};\n\nconst regularAnimation = keyframes`\n  0% { \n    transform: scale(1);\n    background-color: ${theme.colors.brand};\n  }\n  50% { \n    transform: scale(1, 0.6); \n    background-color: ${theme.colors.secondary};\n  }\n`;\n\nconst regularColorAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.6); \n  }\n`;\n\nconst smallAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.223); \n  }\n  100%: {},\n`;\n\nconst smallColorAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.223); \n  }\n`;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  barContainer: { display: \"flex\" },\n  loadingBar: {\n    display: \"inline-block\",\n\n    \"@keyframes loading-small\": {\n      \"0%\": {\n        transform: \"scale(1)\",\n      },\n      \"50%\": {\n        transform: \"scale(1,0.223)\",\n      },\n      \"100%\": {},\n    },\n  },\n  label: { marginTop: \"15px\" },\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: { animation: `${smallAnimation} 1s ease-in-out infinite`, ...small },\n  regular: {\n    animation: `${regularAnimation} 1s ease-in-out infinite`,\n    ...regular,\n  },\n  smallColor: {\n    animation: `${smallColorAnimation} 1s ease-in-out infinite`,\n    ...small,\n  },\n  regularColor: {\n    animation: `${regularColorAnimation} 1s ease-in-out infinite`,\n    ...regular,\n  },\n});\n"],"names":["interval","bars","animationDelay","small","width","height","margin","regular","regularAnimation","keyframes","theme","colors","brand","secondary","regularColorAnimation","smallAnimation","smallColorAnimation","staticClasses","useClasses","createClasses","root","display","flexDirection","alignItems","justifyContent","barContainer","loadingBar","transform","label","marginTop","overlay","blur","hidden","animation","smallColor","regularColor"],"mappings":";;;AAMA,MAAMA,WAAW;AAEjB,MAAMC,OAAO;AAAA,EACX,oBAAoB;AAAA,IAClBC,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClBA,gBAAiB,GAAEF,WAAW,CAAE;AAAA,EAClC;AAAA,EACA,oBAAoB;AAAA,IAClBE,gBAAiB,GAAEF,WAAW,CAAE;AAAA,EAClC;AACF;AAEA,MAAMG,QAAQ;AAAA,EACZC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACR,GAAGL;AACL;AAEA,MAAMM,UAAU;AAAA,EACdH,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACR,GAAGL;AACL;AAEA,MAAMO,mBAAmBC;AAAAA;AAAAA;AAAAA,wBAGDC,MAAMC,OAAOC,KAAM;AAAA;AAAA;AAAA;AAAA,wBAInBF,MAAMC,OAAOE,SAAU;AAAA;AAAA;AAI/C,MAAMC,wBAAwBL;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS9B,MAAMM,iBAAiBN;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAUvB,MAAMO,sBAAsBP;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AASf,MAAA;AAAA,EAAEQ;AAAAA,EAAeC;AAAW,IAAIC,cAAc,aAAa;AAAA,EACtEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AAAA,EACAC,cAAc;AAAA,IAAEJ,SAAS;AAAA,EAAO;AAAA,EAChCK,YAAY;AAAA,IACVL,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1B,MAAM;AAAA,QACJM,WAAW;AAAA,MACb;AAAA,MACA,OAAO;AAAA,QACLA,WAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC;AAAA,IACX;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEC,WAAW;AAAA,EAAO;AAAA,EAC3BC,SAAS,CAAC;AAAA,EACVC,MAAM,CAAC;AAAA,EACPC,QAAQ;AAAA,IAAEX,SAAS;AAAA,EAAO;AAAA,EAC1BlB,OAAO;AAAA,IAAE8B,WAAY,GAAElB,cAAe;AAAA,IAA2B,GAAGZ;AAAAA,EAAM;AAAA,EAC1EI,SAAS;AAAA,IACP0B,WAAY,GAAEzB,gBAAiB;AAAA,IAC/B,GAAGD;AAAAA,EACL;AAAA,EACA2B,YAAY;AAAA,IACVD,WAAY,GAAEjB,mBAAoB;AAAA,IAClC,GAAGb;AAAAA,EACL;AAAA,EACAgC,cAAc;AAAA,IACZF,WAAY,GAAEnB,qBAAsB;AAAA,IACpC,GAAGP;AAAAA,EACL;AACF,CAAC;"}
+{"version":3,"file":"Loading.styles.js","sources":["../../../../src/components/Loading/Loading.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst interval = 0.11;\n\nconst bars = {\n  \"&:nth-of-type(1)\": {\n    animationDelay: \"0\",\n  },\n  \"&:nth-of-type(2)\": {\n    animationDelay: `${interval * 2}s`,\n  },\n  \"&:nth-of-type(3)\": {\n    animationDelay: `${interval * 4}s`,\n  },\n};\n\nconst small = {\n  width: \"2px\",\n  height: \"18px\",\n  margin: \"0px 2px\",\n  ...bars,\n};\n\nconst regular = {\n  width: \"4px\",\n  height: \"30px\",\n  margin: \"0 3px\",\n  ...bars,\n};\n\nconst regularAnimation = keyframes`\n  0% { \n    transform: scale(1);\n    background-color: ${theme.colors.brand};\n  }\n  50% { \n    transform: scale(1, 0.6); \n    background-color: ${theme.colors.secondary};\n  }\n`;\n\nconst regularColorAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.6); \n  }\n`;\n\nconst smallAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.223); \n  }\n  100%: {},\n`;\n\nconst smallColorAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.223); \n  }\n`;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  barContainer: { display: \"flex\" },\n  loadingBar: {\n    display: \"inline-block\",\n\n    \"@keyframes loading-small\": {\n      \"0%\": {\n        transform: \"scale(1)\",\n      },\n      \"50%\": {\n        transform: \"scale(1,0.223)\",\n      },\n      \"100%\": {},\n    },\n  },\n  label: { marginTop: \"15px\" },\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: { animation: `${smallAnimation} 1s ease-in-out infinite`, ...small },\n  regular: {\n    animation: `${regularAnimation} 1s ease-in-out infinite`,\n    ...regular,\n  },\n  smallColor: {\n    animation: `${smallColorAnimation} 1s ease-in-out infinite`,\n    ...small,\n  },\n  regularColor: {\n    animation: `${regularColorAnimation} 1s ease-in-out infinite`,\n    ...regular,\n  },\n});\n"],"names":[],"mappings":";;;AAMA,MAAM,WAAW;AAEjB,MAAM,OAAO;AAAA,EACX,oBAAoB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,gBAAgB,GAAG,WAAW,CAAC;AAAA,EACjC;AAAA,EACA,oBAAoB;AAAA,IAClB,gBAAgB,GAAG,WAAW,CAAC;AAAA,EACjC;AACF;AAEA,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL;AAEA,MAAM,UAAU;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA,wBAGD,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,wBAIlB,MAAM,OAAO,SAAS;AAAA;AAAA;AAI9C,MAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvB,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrB,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,EAAE,SAAS,OAAO;AAAA,EAChC,YAAY;AAAA,IACV,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1B,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC;AAAA,IACX;AAAA,EACF;AAAA,EACA,OAAO,EAAE,WAAW,OAAO;AAAA,EAC3B,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO,EAAE,WAAW,GAAG,cAAc,4BAA4B,GAAG,MAAM;AAAA,EAC1E,SAAS;AAAA,IACP,WAAW,GAAG,gBAAgB;AAAA,IAC9B,GAAG;AAAA,EACL;AAAA,EACA,YAAY;AAAA,IACV,WAAW,GAAG,mBAAmB;AAAA,IACjC,GAAG;AAAA,EACL;AAAA,EACA,cAAc;AAAA,IACZ,WAAW,GAAG,qBAAqB;AAAA,IACnC,GAAG;AAAA,EACL;AACF,CAAC;"}