@hitachivantara/uikit-react-core 5.24.0 → 5.24.2

package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"descendants.cjs","sources":["../../../../../src/components/VerticalNavigation/TreeView/descendants.tsx"],"sourcesContent":["/**\n * Copied from https://github.com/mui-org/material-ui/blob/8763de1633d80295e7b83d8c21040dad333e6699/packages/material-ui-lab/src/TreeView/descendants.js\n * Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md\n *\n * - Added level (depth) property.\n * - Use local copy of useEnhancedEffect.\n */\n\nimport { useEnhancedEffect } from \"@core/hooks\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\ntype Item = {\n  element?;\n  index?;\n  [key: string]: unknown;\n};\n\n// To replace with .findIndex() once we stop IE11 support.\nfunction findIndex(array, comp) {\n  for (let i = 0; i < array.length; i += 1) {\n    if (comp(array[i])) {\n      return i;\n    }\n  }\n\n  return -1;\n}\n\nfunction binaryFindElement(array, element) {\n  let start = 0;\n  let end = array.length - 1;\n\n  while (start <= end) {\n    const middle = Math.floor((start + end) / 2);\n\n    if (array[middle].element === element) {\n      return middle;\n    }\n\n    if (\n      array[middle].element.compareDocumentPosition(element) &&\n      Node.DOCUMENT_POSITION_PRECEDING\n    ) {\n      end = middle - 1;\n    } else {\n      start = middle + 1;\n    }\n  }\n\n  return start;\n}\n\nconst DescendantContext = createContext<DescendantContextValue>({\n  level: 0,\n  descendants: [],\n});\n\ninterface DescendantContextValue {\n  level?: number;\n  registerDescendant?;\n  unregisterDescendant?;\n  descendants: Item[];\n  parentId?;\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  DescendantContext.displayName = \"DescendantContext\";\n}\n\nfunction usePrevious(value) {\n  const ref = useRef(null);\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\nconst noop = () => {};\n\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node\n *\n * Our main goals with this are:\n *   1) maximum composability,\n *   2) minimal API friction\n *   3) SSR compatibility*\n *   4) concurrent safe\n *   5) index always up-to-date with the tree despite changes\n *   6) works with memoization of any component in the tree (hopefully)\n *\n * * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation.\n */\nexport function useDescendant(descendant) {\n  const [, forceUpdate] = useState<{} | null>();\n  const {\n    registerDescendant = noop,\n    unregisterDescendant = noop,\n    descendants = [],\n    parentId = null,\n    level = 0,\n  } = useContext(DescendantContext);\n\n  // This will initially return -1 because we haven't registered the descendant\n  // on the first render. After we register, this will then return the correct\n  // index on the following render and we will re-register descendants\n  // so that everything is up-to-date before the user interacts with a\n  // collection.\n  const index = findIndex(\n    descendants,\n    (item) => item.element === descendant.element\n  );\n\n  const previousDescendants: Item[] | null = usePrevious(descendants);\n\n  // We also need to re-register descendants any time ANY of the other\n  // descendants have changed. My brain was melting when I wrote this and it\n  // feels a little off, but checking in render and using the result in the\n  // effect's dependency array works well enough.\n  const someDescendantsHaveChanged = descendants.some(\n    (newDescendant, position) => {\n      return (\n        previousDescendants && previousDescendants[position]\n        // previousDescendants[position].element !== newDescendant.element\n        // was not able to type check this, did not any difference\n      );\n    }\n  );\n\n  // Prevent any flashing\n  useEnhancedEffect(() => {\n    if (descendant.element) {\n      registerDescendant({\n        ...descendant,\n        index,\n      });\n      return () => {\n        unregisterDescendant(descendant.element);\n      };\n    }\n    forceUpdate({});\n\n    return undefined;\n  }, [\n    registerDescendant,\n    unregisterDescendant,\n    index,\n    someDescendantsHaveChanged,\n    descendant,\n  ]);\n\n  return { parentId, index, level };\n}\n\nexport const DescendantProvider = (props: DescendantProviderProps) => {\n  const { children, id, level } = props;\n\n  const [items, set] = useState<Item[]>([]);\n\n  const registerDescendant = useCallback(({ element, ...other }) => {\n    set((oldItems) => {\n      let newItems;\n      if (oldItems.length === 0) {\n        // If there are no items, register at index 0 and bail.\n        return [\n          {\n            ...other,\n            element,\n            index: 0,\n          },\n        ];\n      }\n\n      const index = binaryFindElement(oldItems, element);\n\n      if (oldItems[index] && oldItems[index].element === element) {\n        // If the element is already registered, just use the same array\n        newItems = oldItems;\n      } else {\n        // When registering a descendant, we need to make sure we insert in\n        // into the array in the same order that it appears in the DOM. So as\n        // new descendants are added or maybe some are removed, we always know\n        // that the array is up-to-date and correct.\n        //\n        // So here we look at our registered descendants and see if the new\n        // element we are adding appears earlier than an existing descendant's\n        // DOM node via `node.compareDocumentPosition`. If it does, we insert\n        // the new element at this index. Because `registerDescendant` will be\n        // called in an effect every time the descendants state value changes,\n        // we should be sure that this index is accurate when descendent\n        // elements come or go from our component.\n\n        const newItem = {\n          ...other,\n          element,\n          index,\n        };\n\n        // If an index is not found we will push the element to the end.\n        newItems = oldItems.slice();\n        newItems.splice(index, 0, newItem);\n      }\n      newItems.forEach((item, position) => {\n        item.index = position;\n      });\n      return newItems;\n    });\n  }, []);\n\n  const unregisterDescendant = useCallback((element: Item) => {\n    set((oldItems) =>\n      oldItems.filter((item: Item) => element !== item.element)\n    );\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      descendants: items,\n      registerDescendant,\n      unregisterDescendant,\n      parentId: id,\n      level,\n    }),\n    [items, registerDescendant, unregisterDescendant, id, level]\n  );\n\n  return (\n    <DescendantContext.Provider value={value}>\n      {children}\n    </DescendantContext.Provider>\n  );\n};\n\nexport type DescendantProviderProps = {\n  children?: React.ReactNode;\n  id?: string;\n  level?: number;\n};\n"],"names":["findIndex","array","comp","i","length","binaryFindElement","element","start","end","middle","Math","floor","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","DescendantContext","createContext","level","descendants","process","env","NODE_ENV","displayName","usePrevious","value","ref","useRef","useEffect","current","noop","useDescendant","descendant","forceUpdate","useState","registerDescendant","unregisterDescendant","parentId","useContext","index","item","previousDescendants","someDescendantsHaveChanged","some","newDescendant","position","useEnhancedEffect","undefined","DescendantProvider","props","children","id","items","set","useCallback","other","oldItems","newItems","newItem","slice","splice","forEach","filter","useMemo","_jsx","Provider"],"mappings":"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"}
+{"version":3,"file":"descendants.cjs","sources":["../../../../../src/components/VerticalNavigation/TreeView/descendants.tsx"],"sourcesContent":["/**\n * Copied from https://github.com/mui-org/material-ui/blob/8763de1633d80295e7b83d8c21040dad333e6699/packages/material-ui-lab/src/TreeView/descendants.js\n * Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md\n *\n * - Added level (depth) property.\n * - Use local copy of useEnhancedEffect.\n */\n\nimport { useEnhancedEffect } from \"@core/hooks\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\ntype Item = {\n  element?;\n  index?;\n  [key: string]: unknown;\n};\n\nfunction binaryFindElement(array, element) {\n  let start = 0;\n  let end = array.length - 1;\n\n  while (start <= end) {\n    const middle = Math.floor((start + end) / 2);\n\n    if (array[middle].element === element) {\n      return middle;\n    }\n\n    if (\n      array[middle].element.compareDocumentPosition(element) &&\n      Node.DOCUMENT_POSITION_PRECEDING\n    ) {\n      end = middle - 1;\n    } else {\n      start = middle + 1;\n    }\n  }\n\n  return start;\n}\n\nconst DescendantContext = createContext<DescendantContextValue>({\n  level: 0,\n  descendants: [],\n});\n\ninterface DescendantContextValue {\n  level?: number;\n  registerDescendant?;\n  unregisterDescendant?;\n  descendants: Item[];\n  parentId?;\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  DescendantContext.displayName = \"DescendantContext\";\n}\n\nfunction usePrevious(value) {\n  const ref = useRef(null);\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\nconst noop = () => {};\n\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node\n *\n * Our main goals with this are:\n *   1) maximum composability,\n *   2) minimal API friction\n *   3) SSR compatibility*\n *   4) concurrent safe\n *   5) index always up-to-date with the tree despite changes\n *   6) works with memoization of any component in the tree (hopefully)\n *\n * * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation.\n */\nexport function useDescendant(descendant) {\n  const [, forceUpdate] = useState<{} | null>();\n  const {\n    registerDescendant = noop,\n    unregisterDescendant = noop,\n    descendants = [],\n    parentId = null,\n    level = 0,\n  } = useContext(DescendantContext);\n\n  // This will initially return -1 because we haven't registered the descendant\n  // on the first render. After we register, this will then return the correct\n  // index on the following render and we will re-register descendants\n  // so that everything is up-to-date before the user interacts with a\n  // collection.\n  const index = descendants.findIndex(\n    (item) => item.element === descendant.element\n  );\n\n  const previousDescendants: Item[] | null = usePrevious(descendants);\n\n  // We also need to re-register descendants any time ANY of the other\n  // descendants have changed. My brain was melting when I wrote this and it\n  // feels a little off, but checking in render and using the result in the\n  // effect's dependency array works well enough.\n  const someDescendantsHaveChanged = descendants.some(\n    (newDescendant, position) => {\n      return (\n        previousDescendants && previousDescendants[position]\n        // previousDescendants[position].element !== newDescendant.element\n        // was not able to type check this, did not any difference\n      );\n    }\n  );\n\n  // Prevent any flashing\n  useEnhancedEffect(() => {\n    if (descendant.element) {\n      registerDescendant({\n        ...descendant,\n        index,\n      });\n      return () => {\n        unregisterDescendant(descendant.element);\n      };\n    }\n    forceUpdate({});\n\n    return undefined;\n  }, [\n    registerDescendant,\n    unregisterDescendant,\n    index,\n    someDescendantsHaveChanged,\n    descendant,\n  ]);\n\n  return { parentId, index, level };\n}\n\nexport const DescendantProvider = (props: DescendantProviderProps) => {\n  const { children, id, level } = props;\n\n  const [items, set] = useState<Item[]>([]);\n\n  const registerDescendant = useCallback(({ element, ...other }) => {\n    set((oldItems) => {\n      let newItems;\n      if (oldItems.length === 0) {\n        // If there are no items, register at index 0 and bail.\n        return [\n          {\n            ...other,\n            element,\n            index: 0,\n          },\n        ];\n      }\n\n      const index = binaryFindElement(oldItems, element);\n\n      if (oldItems[index] && oldItems[index].element === element) {\n        // If the element is already registered, just use the same array\n        newItems = oldItems;\n      } else {\n        // When registering a descendant, we need to make sure we insert in\n        // into the array in the same order that it appears in the DOM. So as\n        // new descendants are added or maybe some are removed, we always know\n        // that the array is up-to-date and correct.\n        //\n        // So here we look at our registered descendants and see if the new\n        // element we are adding appears earlier than an existing descendant's\n        // DOM node via `node.compareDocumentPosition`. If it does, we insert\n        // the new element at this index. Because `registerDescendant` will be\n        // called in an effect every time the descendants state value changes,\n        // we should be sure that this index is accurate when descendent\n        // elements come or go from our component.\n\n        const newItem = {\n          ...other,\n          element,\n          index,\n        };\n\n        // If an index is not found we will push the element to the end.\n        newItems = oldItems.slice();\n        newItems.splice(index, 0, newItem);\n      }\n      newItems.forEach((item, position) => {\n        item.index = position;\n      });\n      return newItems;\n    });\n  }, []);\n\n  const unregisterDescendant = useCallback((element: Item) => {\n    set((oldItems) =>\n      oldItems.filter((item: Item) => element !== item.element)\n    );\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      descendants: items,\n      registerDescendant,\n      unregisterDescendant,\n      parentId: id,\n      level,\n    }),\n    [items, registerDescendant, unregisterDescendant, id, level]\n  );\n\n  return (\n    <DescendantContext.Provider value={value}>\n      {children}\n    </DescendantContext.Provider>\n  );\n};\n\nexport type DescendantProviderProps = {\n  children?: React.ReactNode;\n  id?: string;\n  level?: number;\n};\n"],"names":["binaryFindElement","array","element","start","end","length","middle","Math","floor","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","DescendantContext","createContext","level","descendants","process","env","NODE_ENV","displayName","usePrevious","value","ref","useRef","useEffect","current","noop","useDescendant","descendant","forceUpdate","useState","registerDescendant","unregisterDescendant","parentId","useContext","index","findIndex","item","previousDescendants","someDescendantsHaveChanged","some","newDescendant","position","useEnhancedEffect","undefined","DescendantProvider","props","children","id","items","set","useCallback","other","oldItems","newItems","newItem","slice","splice","forEach","filter","useMemo","_jsx","Provider"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -14,26 +14,26 @@ const listContainerClasses = require("./components/ListContainer/listContainerCl
 const ListContainer = require("./components/ListContainer/ListContainer.cjs");
 const listItemClasses = require("./components/ListContainer/ListItem/listItemClasses.cjs");
 const ListItem = require("./components/ListContainer/ListItem/ListItem.cjs");
-const charCounterClasses = require("./components/Forms/CharCounter/charCounterClasses.cjs");
+const CharCounter_styles = require("./components/Forms/CharCounter/CharCounter.styles.cjs");
 const CharCounter = require("./components/Forms/CharCounter/CharCounter.cjs");
-const adornmentClasses = require("./components/Forms/Adornment/adornmentClasses.cjs");
+const Adornment_styles = require("./components/Forms/Adornment/Adornment.styles.cjs");
 const Adornment = require("./components/Forms/Adornment/Adornment.cjs");
-const formElementClasses = require("./components/Forms/FormElement/formElementClasses.cjs");
+const FormElement_styles = require("./components/Forms/FormElement/FormElement.styles.cjs");
 const FormElement = require("./components/Forms/FormElement/FormElement.cjs");
 const FormElementContext = require("./components/Forms/FormElement/context/FormElementContext.cjs");
 const FormElementValueContext = require("./components/Forms/FormElement/context/FormElementValueContext.cjs");
 const FormElementDescriptorsContext = require("./components/Forms/FormElement/context/FormElementDescriptorsContext.cjs");
 const FormUtils = require("./components/Forms/FormElement/utils/FormUtils.cjs");
 const validationStates = require("./components/Forms/FormElement/validationStates.cjs");
-const labelClasses = require("./components/Forms/Label/labelClasses.cjs");
+const Label_styles = require("./components/Forms/Label/Label.styles.cjs");
 const Label = require("./components/Forms/Label/Label.cjs");
-const infoMessageClasses = require("./components/Forms/InfoMessage/infoMessageClasses.cjs");
+const InfoMessage_styles = require("./components/Forms/InfoMessage/InfoMessage.styles.cjs");
 const InfoMessage = require("./components/Forms/InfoMessage/InfoMessage.cjs");
-const warningTextClasses = require("./components/Forms/WarningText/warningTextClasses.cjs");
+const WarningText_styles = require("./components/Forms/WarningText/WarningText.styles.cjs");
 const WarningText = require("./components/Forms/WarningText/WarningText.cjs");
-const selectionListClasses = require("./components/SelectionList/selectionListClasses.cjs");
+const SelectionList_styles = require("./components/SelectionList/SelectionList.styles.cjs");
 const SelectionList = require("./components/SelectionList/SelectionList.cjs");
-const suggestionsClasses = require("./components/Forms/Suggestions/suggestionsClasses.cjs");
+const Suggestions_styles = require("./components/Forms/Suggestions/Suggestions.styles.cjs");
 const Suggestions = require("./components/Forms/Suggestions/Suggestions.cjs");
 const BaseInput_styles = require("./components/BaseInput/BaseInput.styles.cjs");
 const BaseInput = require("./components/BaseInput/BaseInput.cjs");
@@ -72,39 +72,39 @@ const Drawer_styles = require("./components/Drawer/Drawer.styles.cjs");
 const Drawer = require("./components/Drawer/Drawer.cjs");
 const EmptyState_styles = require("./components/EmptyState/EmptyState.styles.cjs");
 const EmptyState = require("./components/EmptyState/EmptyState.cjs");
-const footerClasses = require("./components/Footer/footerClasses.cjs");
+const Footer_styles = require("./components/Footer/Footer.styles.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
 const gridClasses = require("./components/Grid/gridClasses.cjs");
 const Grid = require("./components/Grid/Grid.cjs");
-const headerClasses = require("./components/Header/headerClasses.cjs");
+const Header_styles$1 = require("./components/Header/Header.styles.cjs");
 const Header$1 = require("./components/Header/Header.cjs");
-const actionsClasses = require("./components/Header/Actions/actionsClasses.cjs");
+const Actions_styles$1 = require("./components/Header/Actions/Actions.styles.cjs");
 const Actions$1 = require("./components/Header/Actions/Actions.cjs");
-const brandClasses = require("./components/Header/Brand/brandClasses.cjs");
+const Brand_styles = require("./components/Header/Brand/Brand.styles.cjs");
 const Brand = require("./components/Header/Brand/Brand.cjs");
-const navigationClasses = require("./components/Header/Navigation/navigationClasses.cjs");
 const MenuBar = require("./components/Header/Navigation/MenuBar/MenuBar.cjs");
 const MenuItem = require("./components/Header/Navigation/MenuItem/MenuItem.cjs");
+const Navigation_styles = require("./components/Header/Navigation/Navigation.styles.cjs");
 const Navigation = require("./components/Header/Navigation/Navigation.cjs");
 const useSelectionPath = require("./components/Header/Navigation/useSelectionPath.cjs");
 const kpiClasses = require("./components/Kpi/kpiClasses.cjs");
 const Kpi = require("./components/Kpi/Kpi.cjs");
 const linkClasses = require("./components/Link/linkClasses.cjs");
 const Link = require("./components/Link/Link.cjs");
-const loadingClasses = require("./components/Loading/loadingClasses.cjs");
+const Loading_styles = require("./components/Loading/Loading.styles.cjs");
 const Loading = require("./components/Loading/Loading.cjs");
 const multiButtonClasses = require("./components/MultiButton/multiButtonClasses.cjs");
 const MultiButton = require("./components/MultiButton/MultiButton.cjs");
-const panelClasses = require("./components/Panel/panelClasses.cjs");
+const Panel_styles = require("./components/Panel/Panel.styles.cjs");
 const Panel = require("./components/Panel/Panel.cjs");
-const progressBarClasses = require("./components/ProgressBar/progressBarClasses.cjs");
+const ProgressBar_styles = require("./components/ProgressBar/ProgressBar.styles.cjs");
 const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
 const SimpleGrid = require("./components/SimpleGrid/SimpleGrid.cjs");
-const stackClasses = require("./components/Stack/stackClasses.cjs");
+const Stack_styles = require("./components/Stack/Stack.styles.cjs");
 const Stack = require("./components/Stack/Stack.cjs");
 const tabClasses = require("./components/Tab/tabClasses.cjs");
 const Tab = require("./components/Tab/Tab.cjs");
-const tabsClasses = require("./components/Tabs/tabsClasses.cjs");
+const Tabs_styles = require("./components/Tabs/Tabs.styles.cjs");
 const Tabs = require("./components/Tabs/Tabs.cjs");
 const tagClasses = require("./components/Tag/tagClasses.cjs");
 const Tag = require("./components/Tag/Tag.cjs");
@@ -131,7 +131,7 @@ const Switch_styles = require("./components/Switch/Switch.styles.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
 const Radio_styles = require("./components/Radio/Radio.styles.cjs");
 const Radio = require("./components/Radio/Radio.cjs");
-const textAreaClasses = require("./components/TextArea/textAreaClasses.cjs");
+const TextArea_styles = require("./components/TextArea/TextArea.styles.cjs");
 const TextArea = require("./components/TextArea/TextArea.cjs");
 const tagsInputClasses = require("./components/TagsInput/tagsInputClasses.cjs");
 const TagsInput = require("./components/TagsInput/TagsInput.cjs");
@@ -168,19 +168,19 @@ const SnackbarContent_styles = require("./components/Snackbar/SnackbarContent/Sn
 const SnackbarContent = require("./components/Snackbar/SnackbarContent/SnackbarContent.cjs");
 const BulkActions_styles = require("./components/BulkActions/BulkActions.styles.cjs");
 const BulkActions = require("./components/BulkActions/BulkActions.cjs");
-const globalActionsClasses = require("./components/GlobalActions/globalActionsClasses.cjs");
+const GlobalActions_styles = require("./components/GlobalActions/GlobalActions.styles.cjs");
 const GlobalActions = require("./components/GlobalActions/GlobalActions.cjs");
-const dropdownClasses = require("./components/Dropdown/dropdownClasses.cjs");
+const Dropdown_styles = require("./components/Dropdown/Dropdown.styles.cjs");
 const Dropdown = require("./components/Dropdown/Dropdown.cjs");
-const tableClasses = require("./components/Table/tableClasses.cjs");
+const Table_styles = require("./components/Table/Table.styles.cjs");
 const Table = require("./components/Table/Table.cjs");
-const tableContainerClasses = require("./components/Table/TableContainer/tableContainerClasses.cjs");
+const TableContainer_styles = require("./components/Table/TableContainer/TableContainer.styles.cjs");
 const TableContainer = require("./components/Table/TableContainer/TableContainer.cjs");
-const tableBodyClasses = require("./components/Table/TableBody/tableBodyClasses.cjs");
+const TableBody_styles = require("./components/Table/TableBody/TableBody.styles.cjs");
 const TableBody = require("./components/Table/TableBody/TableBody.cjs");
-const tableHeadClasses = require("./components/Table/TableHead/tableHeadClasses.cjs");
+const TableHead_styles = require("./components/Table/TableHead/TableHead.styles.cjs");
 const TableHead = require("./components/Table/TableHead/TableHead.cjs");
-const tableHeaderClasses = require("./components/Table/TableHeader/tableHeaderClasses.cjs");
+const TableHeader_styles = require("./components/Table/TableHeader/TableHeader.styles.cjs");
 const TableHeader = require("./components/Table/TableHeader/TableHeader.cjs");
 const TableRow_styles = require("./components/Table/TableRow/TableRow.styles.cjs");
 const TableRow = require("./components/Table/TableRow/TableRow.cjs");
@@ -203,7 +203,7 @@ const ProgressColumnCell = require("./components/Table/renderers/ProgressColumnC
 const SwitchColumnCell = require("./components/Table/renderers/SwitchColumnCell/SwitchColumnCell.cjs");
 const fallbacks = require("./components/Table/utils/fallbacks.cjs");
 const utils$1 = require("./components/Table/utils/utils.cjs");
-const loginClasses = require("./components/Login/loginClasses.cjs");
+const Login_styles = require("./components/Login/Login.styles.cjs");
 const Login = require("./components/Login/Login.cjs");
 const Controls_styles = require("./components/Controls/Controls.styles.cjs");
 const Controls = require("./components/Controls/Controls.cjs");
@@ -217,13 +217,13 @@ const calendarHeaderClasses = require("./components/Calendar/CalendarHeader/cale
 const CalendarHeader = require("./components/Calendar/CalendarHeader/CalendarHeader.cjs");
 const verticalNavigationClasses = require("./components/VerticalNavigation/verticalNavigationClasses.cjs");
 const VerticalNavigation = require("./components/VerticalNavigation/VerticalNavigation.cjs");
-const headerClasses$1 = require("./components/VerticalNavigation/Header/headerClasses.cjs");
+const headerClasses = require("./components/VerticalNavigation/Header/headerClasses.cjs");
 const Header$2 = require("./components/VerticalNavigation/Header/Header.cjs");
 const actionClasses = require("./components/VerticalNavigation/Actions/actionClasses.cjs");
-const actionsClasses$1 = require("./components/VerticalNavigation/Actions/actionsClasses.cjs");
+const actionsClasses = require("./components/VerticalNavigation/Actions/actionsClasses.cjs");
 const Actions$2 = require("./components/VerticalNavigation/Actions/Actions.cjs");
 const Action$1 = require("./components/VerticalNavigation/Actions/Action.cjs");
-const navigationClasses$1 = require("./components/VerticalNavigation/Navigation/navigationClasses.cjs");
+const navigationClasses = require("./components/VerticalNavigation/Navigation/navigationClasses.cjs");
 const Navigation$1 = require("./components/VerticalNavigation/Navigation/Navigation.cjs");
 const navigationSliderClasses = require("./components/VerticalNavigation/NavigationSlider/navigationSliderClasses.cjs");
 const NavigationSlider = require("./components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs");
@@ -321,11 +321,11 @@ exports.listContainerClasses = listContainerClasses.default;
 exports.HvListContainer = ListContainer.HvListContainer;
 exports.listItemClasses = listItemClasses.default;
 exports.HvListItem = ListItem.HvListItem;
-exports.charCounterClasses = charCounterClasses.default;
+exports.charCounterClasses = CharCounter_styles.staticClasses;
 exports.HvCharCounter = CharCounter.HvCharCounter;
-exports.adornmentClasses = adornmentClasses.default;
+exports.adornmentClasses = Adornment_styles.staticClasses;
 exports.HvAdornment = Adornment.HvAdornment;
-exports.formElementClasses = formElementClasses.default;
+exports.formElementClasses = FormElement_styles.staticClasses;
 exports.HvFormElement = FormElement.HvFormElement;
 exports.HvFormElementContext = FormElementContext.HvFormElementContext;
 exports.HvFormElementContextConsumer = FormElementContext.HvFormElementContextConsumer;
@@ -343,15 +343,15 @@ exports.getIdReferenceFor = FormUtils.getIdReferenceFor;
 exports.getIdReferenceListFor = FormUtils.getIdReferenceListFor;
 exports.isInvalid = validationStates.isInvalid;
 exports.isValid = validationStates.isValid;
-exports.labelClasses = labelClasses.default;
+exports.labelClasses = Label_styles.staticClasses;
 exports.HvLabel = Label.HvLabel;
-exports.infoMessageClasses = infoMessageClasses.default;
+exports.infoMessageClasses = InfoMessage_styles.staticClasses;
 exports.HvInfoMessage = InfoMessage.HvInfoMessage;
-exports.warningTextClasses = warningTextClasses.default;
+exports.warningTextClasses = WarningText_styles.staticClasses;
 exports.HvWarningText = WarningText.HvWarningText;
-exports.selectionListClasses = selectionListClasses.default;
+exports.selectionListClasses = SelectionList_styles.staticClasses;
 exports.HvSelectionList = SelectionList.HvSelectionList;
-exports.suggestionsClasses = suggestionsClasses.default;
+exports.suggestionsClasses = Suggestions_styles.staticClasses;
 exports.HvSuggestions = Suggestions.HvSuggestions;
 exports.baseInputClasses = BaseInput_styles.staticClasses;
 exports.HvBaseInput = BaseInput.HvBaseInput;
@@ -392,39 +392,39 @@ exports.drawerClasses = Drawer_styles.staticClasses;
 exports.HvDrawer = Drawer.HvDrawer;
 exports.emptyStateClasses = EmptyState_styles.staticClasses;
 exports.HvEmptyState = EmptyState.HvEmptyState;
-exports.footerClasses = footerClasses.default;
+exports.footerClasses = Footer_styles.staticClasses;
 exports.HvFooter = Footer.HvFooter;
 exports.gridClasses = gridClasses.default;
 exports.HvGrid = Grid.HvGrid;
-exports.headerClasses = headerClasses.default;
+exports.headerClasses = Header_styles$1.staticClasses;
 exports.HvHeader = Header$1.HvHeader;
-exports.headerActionsClasses = actionsClasses.default;
+exports.headerActionsClasses = Actions_styles$1.staticClasses;
 exports.HvHeaderActions = Actions$1.HvHeaderActions;
-exports.headerBrandClasses = brandClasses.default;
+exports.headerBrandClasses = Brand_styles.staticClasses;
 exports.HvHeaderBrand = Brand.HvHeaderBrand;
-exports.headerNavigationClasses = navigationClasses.default;
 exports.HvHeaderMenuBar = MenuBar.HvHeaderMenuBar;
 exports.HvHeaderMenuItem = MenuItem.HvHeaderMenuItem;
+exports.headerNavigationClasses = Navigation_styles.staticClasses;
 exports.HvHeaderNavigation = Navigation.HvHeaderNavigation;
 exports.useSelectionPath = useSelectionPath.useSelectionPath;
 exports.kpiClasses = kpiClasses.default;
 exports.HvKpi = Kpi.HvKpi;
 exports.linkClasses = linkClasses.default;
 exports.HvLink = Link.HvLink;
-exports.loadingClasses = loadingClasses.default;
+exports.loadingClasses = Loading_styles.staticClasses;
 exports.HvLoading = Loading.HvLoading;
 exports.multiButtonClasses = multiButtonClasses.default;
 exports.HvMultiButton = MultiButton.HvMultiButton;
-exports.panelClasses = panelClasses.default;
+exports.panelClasses = Panel_styles.staticClasses;
 exports.HvPanel = Panel.HvPanel;
-exports.progressBarClasses = progressBarClasses.default;
+exports.progressBarClasses = ProgressBar_styles.staticClasses;
 exports.HvProgressBar = ProgressBar.HvProgressBar;
 exports.HvSimpleGrid = SimpleGrid.HvSimpleGrid;
-exports.stackClasses = stackClasses.default;
+exports.stackClasses = Stack_styles.staticClasses;
 exports.HvStack = Stack.HvStack;
 exports.tabClasses = tabClasses.default;
 exports.HvTab = Tab.HvTab;
-exports.tabsClasses = tabsClasses.default;
+exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = Tabs.HvTabs;
 exports.tagClasses = tagClasses.default;
 exports.HvTag = Tag.HvTag;
@@ -452,7 +452,7 @@ exports.switchClasses = Switch_styles.staticClasses;
 exports.HvSwitch = Switch.HvSwitch;
 exports.radioClasses = Radio_styles.staticClasses;
 exports.HvRadio = Radio.HvRadio;
-exports.textAreaClasses = textAreaClasses.default;
+exports.textAreaClasses = TextArea_styles.staticClasses;
 exports.HvTextArea = TextArea.HvTextArea;
 exports.tagsInputClasses = tagsInputClasses.default;
 exports.HvTagsInput = TagsInput.HvTagsInput;
@@ -490,19 +490,19 @@ exports.snackbarContentClasses = SnackbarContent_styles.staticClasses;
 exports.HvSnackbarContent = SnackbarContent.HvSnackbarContent;
 exports.bulkActionsClasses = BulkActions_styles.staticClasses;
 exports.HvBulkActions = BulkActions.HvBulkActions;
-exports.globalActionsClasses = globalActionsClasses.default;
+exports.globalActionsClasses = GlobalActions_styles.staticClasses;
 exports.HvGlobalActions = GlobalActions.HvGlobalActions;
-exports.dropdownClasses = dropdownClasses.default;
+exports.dropdownClasses = Dropdown_styles.staticClasses;
 exports.HvDropdown = Dropdown.HvDropdown;
-exports.tableClasses = tableClasses.default;
+exports.tableClasses = Table_styles.staticClasses;
 exports.HvTable = Table.HvTable;
-exports.tableContainerClasses = tableContainerClasses.default;
+exports.tableContainerClasses = TableContainer_styles.staticClasses;
 exports.HvTableContainer = TableContainer.HvTableContainer;
-exports.tableBodyClasses = tableBodyClasses.default;
+exports.tableBodyClasses = TableBody_styles.staticClasses;
 exports.HvTableBody = TableBody.HvTableBody;
-exports.tableHeadClasses = tableHeadClasses.default;
+exports.tableHeadClasses = TableHead_styles.staticClasses;
 exports.HvTableHead = TableHead.HvTableHead;
-exports.tableHeaderClasses = tableHeaderClasses.default;
+exports.tableHeaderClasses = TableHeader_styles.staticClasses;
 exports.HvTableHeader = TableHeader.HvTableHeader;
 exports.tableRowClasses = TableRow_styles.staticClasses;
 exports.HvTableRow = TableRow.HvTableRow;
@@ -559,7 +559,7 @@ exports.hvNodeFallback = fallbacks.hvNodeFallback;
 exports.hvNumberFallback = fallbacks.hvNumberFallback;
 exports.hvStringFallback = fallbacks.hvStringFallback;
 exports.getBorderStyles = utils$1.getBorderStyles;
-exports.loginClasses = loginClasses.default;
+exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = Login.HvLogin;
 exports.controlsClasses = Controls_styles.staticClasses;
 exports.HvControls = Controls.HvControls;
@@ -573,13 +573,13 @@ exports.calendarHeaderClasses = calendarHeaderClasses.default;
 exports.HvCalendarHeader = CalendarHeader.HvCalendarHeader;
 exports.verticalNavigationClasses = verticalNavigationClasses.default;
 exports.HvVerticalNavigation = VerticalNavigation.HvVerticalNavigation;
-exports.verticalNavigationHeaderClasses = headerClasses$1.default;
+exports.verticalNavigationHeaderClasses = headerClasses.default;
 exports.HvVerticalNavigationHeader = Header$2.HvVerticalNavigationHeader;
 exports.actionClasses = actionClasses.default;
-exports.actionsClasses = actionsClasses$1.default;
+exports.actionsClasses = actionsClasses.default;
 exports.HvVerticalNavigationActions = Actions$2.HvVerticalNavigationActions;
 exports.HvVerticalNavigationAction = Action$1.HvVerticalNavigationAction;
-exports.verticalNavigationTreeClasses = navigationClasses$1.default;
+exports.verticalNavigationTreeClasses = navigationClasses.default;
 exports.HvVerticalNavigationTree = Navigation$1.HvVerticalNavigationTree;
 exports.verticalNavigationSliderClasses = navigationSliderClasses.default;
 exports.HvVerticalNavigationSlider = NavigationSlider.HvVerticalNavigationSlider;

package/dist/esm/components/AppSwitcher/Action/Action.js

@@ -1,14 +1,14 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { Info } from "@hitachivantara/uikit-react-icons";
 import { useUniqueId } from "../../../hooks/useUniqueId.js";
 import TitleWithTooltip from "../TitleWithTooltip.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { HvAvatar } from "../../Avatar/Avatar.js";
-import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvTooltip } from "../../Tooltip/Tooltip.js";
 const getColor = (color, defaultColor) => theme.colors[color] || color || defaultColor;
 const HvAppSwitcherAction = ({
@@ -60,7 +60,7 @@ const HvAppSwitcherAction = ({
     });
   };
   const isSelected = isSelectedCallback(application);
-  const handleOnClick = (event) => {
+  const handleOnClick = useCallback((event) => {
     if (disabled) {
       event.preventDefault();
       return;
@@ -69,9 +69,36 @@ const HvAppSwitcherAction = ({
       ...application,
       isSelected
     });
-  };
+  }, [application, disabled, isSelected, onClickCallback]);
   const isLink = url != null;
   const descriptionElementId = useUniqueId(id, "hvAction-description");
+  const renderApplication = useCallback((children) => {
+    const typographyProps = {
+      className: classes.typography,
+      onClick: handleOnClick,
+      style: {
+        borderColor: color
+      },
+      "aria-label": name,
+      ...description && {
+        "aria-describedby": descriptionElementId
+      }
+    };
+    if (isLink) {
+      return /* @__PURE__ */ jsx(HvTypography, {
+        component: "a",
+        href: url,
+        target: target || "_top",
+        ...typographyProps,
+        children
+      });
+    }
+    return /* @__PURE__ */ jsx(HvTypography, {
+      component: "button",
+      ...typographyProps,
+      children
+    });
+  }, [classes.typography, color, description, descriptionElementId, handleOnClick, isLink, name, target, url]);
   return /* @__PURE__ */ jsx(HvListItem, {
     id,
     interactive: true,
@@ -82,19 +109,7 @@ const HvAppSwitcherAction = ({
       [classes.disabled]: disabled,
       [classes.selected]: isSelected
     }, className),
-    children: /* @__PURE__ */ jsxs(HvTypography, {
-      component: isLink ? "a" : "button",
-      href: isLink ? url : void 0,
-      target: isLink ? target || "_top" : void 0,
-      className: classes.typography,
-      onClick: handleOnClick,
-      style: {
-        borderColor: color
-      },
-      "aria-label": name,
-      ...description && {
-        "aria-describedby": descriptionElementId
-      },
+    children: renderApplication(/* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
         className: classes.icon,
         children: renderApplicationIcon()
@@ -116,7 +131,7 @@ const HvAppSwitcherAction = ({
           })
         })
       })]
-    })
+    }))
   });
 };
 export {

package/dist/esm/components/AppSwitcher/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: string;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nconst getColor = (color: any, defaultColor: string) =>\n  theme.colors[color] || color || defaultColor;\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = (event: React.MouseEvent) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClickCallback?.(event, { ...application, isSelected });\n  };\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      <HvTypography\n        component={isLink ? \"a\" : \"button\"}\n        href={isLink ? url : undefined}\n        target={isLink ? target || \"_top\" : undefined}\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <TitleWithTooltip title={name} className={classes.title} />\n\n        {description && (\n          <HvTooltip\n            disableFocusListener\n            disableTouchListener\n            title={<HvTypography>{description}</HvTypography>}\n          >\n            <div>\n              <Info\n                className={classes.iconInfo}\n                role=\"img\"\n                aria-label={description}\n                id={descriptionElementId}\n              />\n            </div>\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","event","preventDefault","isLink","descriptionElementId","useUniqueId","HvListItem","interactive","tabIndex","selected","root","HvTypography","component","href","undefined","typography","onClick","style","borderColor","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}
+{"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: string;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nconst getColor = (color: any, defaultColor: string) =>\n  theme.colors[color] || color || defaultColor;\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback]\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ]\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <TitleWithTooltip title={name} className={classes.title} />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={<HvTypography>{description}</HvTypography>}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>\n      )}\n    </HvListItem>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","typographyProps","typography","onClick","style","borderColor","HvTypography","component","href","HvListItem","interactive","tabIndex","selected","root","_jsxs","_Fragment","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}

package/dist/esm/components/BulkActions/BulkActions.js

@@ -3,8 +3,7 @@ import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { setId } from "../../utils/setId.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { hexToRgbA } from "../../utils/hexToRgbA.js";
-import { useClasses } from "./BulkActions.styles.js";
-import { staticClasses } from "./BulkActions.styles.js";
+import { useClasses, staticClasses } from "./BulkActions.styles.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -65,7 +64,7 @@ const HvBulkActions = (props) => {
     className: cx(classes.root, {
       [classes.semantic]: isSemantic
     }, isSemantic && css({
-      "& $selectAll div": {
+      [`& .${staticClasses.selectAll} div`]: {
         color: theme.colors.base_dark,
         "&:hover:not(:disabled)": {
           backgroundColor: hexToRgbA(baseColor, 0.3)
@@ -75,11 +74,7 @@ const HvBulkActions = (props) => {
           backgroundColor: "transparent"
         }
       },
-      "& $selectAll:focus-within div": {
-        backgroundColor: hexToRgbA(baseColor, 0.3)
-      },
-      // IE fallback code (using focus-within-polyfill)
-      "& $selectAll.focus-within div": {
+      [`& .${staticClasses.selectAll}:focus-within div`]: {
         backgroundColor: hexToRgbA(baseColor, 0.3)
       }
     }), className),

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

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const baseColor =\n    activeTheme?.colors?.modes[selectedMode].base_light ||\n    theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            \"& $selectAll div\": {\n              color: theme.colors.base_dark,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.colors.base_dark,\n                backgroundColor: \"transparent\",\n              },\n            },\n\n            \"& $selectAll:focus-within div\": {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n\n            // IE fallback code (using focus-within-polyfill)\n            \"& $selectAll.focus-within div\": {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ??\n                `Select all ${numTotal} items across all pages`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","baseColor","colors","modes","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","color","base_dark","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","selectAll","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","onClick","HvActionsGeneric","category"],"mappings":"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"}
+{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const baseColor =\n    activeTheme?.colors?.modes[selectedMode].base_light ||\n    theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            [`& .${staticClasses.selectAll} div`]: {\n              color: theme.colors.base_dark,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.colors.base_dark,\n                backgroundColor: \"transparent\",\n              },\n            },\n\n            [`& .${staticClasses.selectAll}:focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ??\n                `Select all ${numTotal} items across all pages`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","baseColor","colors","modes","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","staticClasses","selectAll","color","base_dark","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","onClick","HvActionsGeneric","category"],"mappings":"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"}

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

@@ -10,7 +10,7 @@ const {
     position: "relative",
     outline: theme.card.outline,
     borderRadius: theme.card.borderRadius,
-    "&.focus-visible": {
+    "&:focus-visible": {
       ...outlineStyles
     },
     "&:focus": {