npm - @hitachivantara/uikit-react-core - Versions diffs - 5.32.0 → 5.33.0 - Mend

@hitachivantara/uikit-react-core 5.32.0 → 5.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (724) hide show

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

@@ -1,5 +1,5 @@
 const isItemSelected = (item, newItem) => {
-  const selectionKey = (item == null ? void 0 : item.id) ? "id" : "label";
+  const selectionKey = item?.id ? "id" : "label";
   const selectionElement = item && item[selectionKey];
   return newItem[selectionKey] === selectionElement;
 };
@@ -17,20 +17,20 @@ const parseList = (item, props, selectAll, list = []) => {
     if (!multiSelect) {
       newItem.selected = false;
     }
-    const selectItem = item ? isItemSelected(item, newItem) : elem == null ? void 0 : elem.selected;
+    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;
     if (selectItem && selectable) {
       let selectionState;
       if (multiSelect) {
-        selectionState = item ? !(elem == null ? void 0 : elem.selected) : true;
+        selectionState = item ? !elem?.selected : true;
       } else {
-        selectionState = !anySelected && (item && singleSelectionToggle ? !(elem == null ? void 0 : elem.selected) : true);
+        selectionState = !anySelected && (item && singleSelectionToggle ? !elem?.selected : true);
       }
       newItem.selected = selectionState;
       anySelected = true;
     }
-    if (typeof selectAll === "boolean" && !(elem == null ? void 0 : elem.disabled))
+    if (typeof selectAll === "boolean" && !elem?.disabled)
       newItem.selected = selectAll;
-    if (!(newItem == null ? void 0 : newItem.selected))
+    if (!newItem?.selected)
       newItem.selected = false;
     return newItem;
   });

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

	@@ -1 +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,~~gBAAeF~~,~~6BAAMG~~,~~MAAK~~,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,~~6BAAMC~~;AAEhE,QAAIC,cAAcP,YAAY;AACxBQ,UAAAA;AAEJ,UAAIT,aAAa;AACET,yBAAAA,OAAO,~~EAACe~~,~~6BAAMC~~,~~YAAW~~;AAAA,MAAA,OACrC;AACLE,yBACE,CAACN,gBACAZ,QAAQW,wBAAwB,~~EAACI~~,~~6BAAMC~~,~~YAAW~~;AAAA,MACvD;AAEAf,cAAQe,WAAWE;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAOX,cAAc,aAAa,~~EAACQ~~,~~6BAAMI~~;AAC3ClB,cAAQe,WAAWT;AAGrB,QAAI,~~EAACN~~,~~mCAASe~~;AAAUf,cAAQe,WAAW;AAEpCf,WAAAA;AAAAA,EAAAA,CACR;AAEMY,SAAAA;AACT;"}
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;"}

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

@@ -11,7 +11,7 @@ const applyClassNameAndStateToElement = (element, selected, disabled, onClick, c
       className,
       checked: !!selected,
       disabled,
-      onChange: (evt) => onClick == null ? void 0 : onClick(evt)
+      onChange: (evt) => onClick?.(evt)
     });
   }
   return null;
@@ -58,15 +58,15 @@ const HvListItem = (props) => {
   const interactive = interactiveProp != null ? interactiveProp : interactiveContext;
   const handleOnClick = useCallback((evt) => {
     if (!disabled) {
-      onClick == null ? void 0 : onClick(evt);
+      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 == null ? void 0 : classes.startAdornment, classes == null ? void 0 : classes.disabled, disabled, handleOnClick, selected, startAdornment]);
+  }, 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 == null ? void 0 : classes.endAdornment, classes == null ? void 0 : classes.disabled, disabled, endAdornment]);
+  }, 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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { 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 /*\n Overrides the implicit list item role.\n /\n role?: string;\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 = (props: HvListItemProps) => {\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 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","props","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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"}
1	+ {"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { 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 /*\n Overrides the implicit list item role.\n /\n role?: string;\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 = (props: HvListItemProps) => {\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 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","props","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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"}

package/dist/esm/components/Login/Login.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { createClasses } from "../../utils/classes.js";
 import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
 const {
   staticClasses,
   useClasses

package/dist/esm/components/Login/Login.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Login.styles.js","sources":["../../../../src/components/Login/Login.styles.tsx"],"sourcesContent":["import { ~~createClasses~~ } from \"@~~core~~/~~utils/classes~~\";\n\nimport { ~~theme~~ } from \"@~~hitachivantara~~/~~uikit-styles~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n root: {\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"bottom\",\n backgroundSize: \"cover\",\n width: \"100%\",\n height: \"100%\",\n padding: 0,\n margin: \"-1px 0 0 0\",\n },\n formContainer: {\n background: theme.colors.atmo2,\n marginLeft: \"auto\",\n maxWidth: 500,\n height: \"100%\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundRepeat","backgroundPosition","backgroundSize","width","height","padding","margin","formContainer","background","theme","colors","atmo2","marginLeft","maxWidth"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,kBAAkB;AAAA,IAClBC,oBAAoB;AAAA,IACpBC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,EACV;AAAA,EACAC,eAAe;AAAA,IACbC,YAAYC,MAAMC,OAAOC;AAAAA,IACzBC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVT,QAAQ;AAAA,EACV;AACF,CAAC;"}
1	+ {"version":3,"file":"Login.styles.js","sources":["../../../../src/components/Login/Login.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n root: {\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"bottom\",\n backgroundSize: \"cover\",\n width: \"100%\",\n height: \"100%\",\n padding: 0,\n margin: \"-1px 0 0 0\",\n },\n formContainer: {\n background: theme.colors.atmo2,\n marginLeft: \"auto\",\n maxWidth: 500,\n height: \"100%\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundRepeat","backgroundPosition","backgroundSize","width","height","padding","margin","formContainer","background","theme","colors","atmo2","marginLeft","maxWidth"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,kBAAkB;AAAA,IAClBC,oBAAoB;AAAA,IACpBC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,EACV;AAAA,EACAC,eAAe;AAAA,IACbC,YAAYC,MAAMC,OAAOC;AAAAA,IACzBC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVT,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/esm/components/MultiButton/MultiButton.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import React__default, { cloneElement } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./MultiButton.styles.js";
 import { staticClasses } from "./MultiButton.styles.js";
 const HvMultiButton = (props) => {

package/dist/esm/components/MultiButton/MultiButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiButton.js","sources":["../../../../src/components/MultiButton/MultiButton.tsx"],"sourcesContent":["import { ~~useDefaultProps~~ } from \"~~@core/hooks/useDefaultProps~~\";\nimport ~~React,~~ { ~~cloneElement~~ } from \"~~react~~\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n /** If all the buttons are disabled. /\n disabled?: boolean;\n /* If the MultiButton is to be displayed vertically. /\n vertical?: boolean;\n /* Category of button to use /\n variant?: HvButtonVariant;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvMultiButtonClasses;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n const {\n className,\n children,\n classes: classesProp,\n disabled = false,\n vertical = false,\n variant = \"secondarySubtle\",\n ...others\n } = useDefaultProps(\"HvMultiButton\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.vertical]: vertical,\n },\n className\n )}\n {...others}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n const childIsSelected = !!child.props.selected;\n\n return cloneElement(child as React.ReactElement, {\n variant,\n disabled: disabled \|\| child.props.disabled,\n className: cx(child.props.className, classes.button, {\n [classes.selected]: childIsSelected,\n }),\n \"aria-pressed\": childIsSelected,\n });\n }\n })}\n </div>\n );\n};\n"],"names":["HvMultiButton","props","className","children","classes","classesProp","disabled","vertical","variant","others","useDefaultProps","cx","useClasses","root","React","Children","map","child","isValidElement","childIsSelected","selected","cloneElement","button"],"mappings":";;;;;~~AAqBaA~~,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAE9C,SACG,oBAAA,OAAA,EACC,WAAWM,GACTP,QAAQS,MACR;AAAA,IACE,CAACT,QAAQG,QAAQ,GAAGA;AAAAA,EAAAA,GAEtBL,SACF,GACA,GAAIO,QAEHK,UAAMC,eAAAA,SAASC,IAAIb,UAAWc,CAAU,UAAA;AACnCH,QAAAA,eAAMI,eAAeD,KAAK,GAAG;AAC/B,YAAME,kBAAkB,CAAC,CAACF,MAAMhB,MAAMmB;AAEtC,aAAOC,aAAaJ,OAA6B;AAAA,QAC/CT;AAAAA,QACAF,UAAUA,YAAYW,MAAMhB,MAAMK;AAAAA,QAClCJ,WAAWS,GAAGM,MAAMhB,MAAMC,WAAWE,QAAQkB,QAAQ;AAAA,UACnD,CAAClB,QAAQgB,QAAQ,GAAGD;AAAAA,QAAAA,CACrB;AAAA,QACD,gBAAgBA;AAAAA,MAAAA,CACjB;AAAA,IACH;AAAA,EACD,CAAA,EACH,CAAA;AAEJ;"}
1	+ {"version":3,"file":"MultiButton.js","sources":["../../../../src/components/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n /** If all the buttons are disabled. /\n disabled?: boolean;\n /* If the MultiButton is to be displayed vertically. /\n vertical?: boolean;\n /* Category of button to use /\n variant?: HvButtonVariant;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvMultiButtonClasses;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n const {\n className,\n children,\n classes: classesProp,\n disabled = false,\n vertical = false,\n variant = \"secondarySubtle\",\n ...others\n } = useDefaultProps(\"HvMultiButton\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.vertical]: vertical,\n },\n className\n )}\n {...others}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n const childIsSelected = !!child.props.selected;\n\n return cloneElement(child as React.ReactElement, {\n variant,\n disabled: disabled \|\| child.props.disabled,\n className: cx(child.props.className, classes.button, {\n [classes.selected]: childIsSelected,\n }),\n \"aria-pressed\": childIsSelected,\n });\n }\n })}\n </div>\n );\n};\n"],"names":["HvMultiButton","props","className","children","classes","classesProp","disabled","vertical","variant","others","useDefaultProps","cx","useClasses","root","React","Children","map","child","isValidElement","childIsSelected","selected","cloneElement","button"],"mappings":";;;;;AAuBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAE9C,SACG,oBAAA,OAAA,EACC,WAAWM,GACTP,QAAQS,MACR;AAAA,IACE,CAACT,QAAQG,QAAQ,GAAGA;AAAAA,EAAAA,GAEtBL,SACF,GACA,GAAIO,QAEHK,UAAMC,eAAAA,SAASC,IAAIb,UAAWc,CAAU,UAAA;AACnCH,QAAAA,eAAMI,eAAeD,KAAK,GAAG;AAC/B,YAAME,kBAAkB,CAAC,CAACF,MAAMhB,MAAMmB;AAEtC,aAAOC,aAAaJ,OAA6B;AAAA,QAC/CT;AAAAA,QACAF,UAAUA,YAAYW,MAAMhB,MAAMK;AAAAA,QAClCJ,WAAWS,GAAGM,MAAMhB,MAAMC,WAAWE,QAAQkB,QAAQ;AAAA,UACnD,CAAClB,QAAQgB,QAAQ,GAAGD;AAAAA,QAAAA,CACrB;AAAA,QACD,gBAAgBA;AAAAA,MAAAA,CACjB;AAAA,IACH;AAAA,EACD,CAAA,EACH,CAAA;AAEJ;"}

package/dist/esm/components/MultiButton/MultiButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiButton.styles.js","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n root: {\n display: \"flex\",\n height: 32,\n alignItems: \"center\",\n transition: \"none\",\n background: theme.colors.atmo2,\n position: \"relative\",\n zIndex: 0,\n\n // prevent the focus ring to be hidden by sibling hover background\n \"&>.HvIsFocusVisible\": {\n zIndex: 5,\n },\n\n \"& button$button\": {\n height: 32,\n width: \"100%\",\n minWidth: 32,\n maxWidth: 200,\n padding: 0,\n transition: \"none\",\n flex: \"1 0 0px\",\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n borderRadius: 0,\n ...theme.typography.body,\n \"&:active\": {\n backgroundColor: `${theme.colors.atmo3}`,\n },\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n \"&:hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: theme.radii.base,\n borderBottomLeftRadius: theme.radii.base,\n },\n \"&:last-of-type\": {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTopRightRadius: theme.radii.base,\n borderBottomRightRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: \"-1px\",\n },\n \"&$selected\": {\n \"&:hover\": {\n \"&:not(:disabled)\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n \"&:disabled\": {\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n },\n \"& button$button$selected\": {\n background: theme.colors.atmo1,\n height: 34,\n ...theme.typography.label,\n borderRadius: theme.radii.base,\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover\": {\n background: theme.colors.atmo3,\n },\n \"&:first-of-type, &:last-of-type\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n\n // prevent the focus ring to be hidden by sibling hover background\n // even when selected\n \"&.HvIsFocusVisible\": {\n zIndex: 5,\n },\n },\n },\n button: {},\n selected: {},\n // vertical button display Styling\n vertical: {\n flexDirection: \"column\",\n height: \"auto\",\n btnSecondary: {\n flex: \"1 1 20px\",\n },\n \"& button$button\": {\n width: \"100%\",\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:hover\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: theme.radii.base,\n borderTopRightRadius: theme.radii.base,\n },\n \"&:last-of-type\": {\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderBottomLeftRadius: theme.radii.base,\n borderBottomRightRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: 0,\n marginTop: -1,\n },\n \"&$selected\": {\n height: 32,\n width: `calc(100% + 2px) !important`,\n background: theme.colors.atmo1,\n ...theme.typography.label,\n borderRadius: theme.radii.base,\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover, &:focus\": {\n background: theme.colors.atmo3,\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":";;~~AAGa~~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"}
1	+ {"version":3,"file":"MultiButton.styles.js","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n root: {\n display: \"flex\",\n height: 32,\n alignItems: \"center\",\n transition: \"none\",\n background: theme.colors.atmo2,\n position: \"relative\",\n zIndex: 0,\n\n // prevent the focus ring to be hidden by sibling hover background\n \"&>.HvIsFocusVisible\": {\n zIndex: 5,\n },\n\n \"& button$button\": {\n height: 32,\n width: \"100%\",\n minWidth: 32,\n maxWidth: 200,\n padding: 0,\n transition: \"none\",\n flex: \"1 0 0px\",\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n borderRadius: 0,\n ...theme.typography.body,\n \"&:active\": {\n backgroundColor: `${theme.colors.atmo3}`,\n },\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n \"&:hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: theme.radii.base,\n borderBottomLeftRadius: theme.radii.base,\n },\n \"&:last-of-type\": {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTopRightRadius: theme.radii.base,\n borderBottomRightRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: \"-1px\",\n },\n \"&$selected\": {\n \"&:hover\": {\n \"&:not(:disabled)\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n \"&:disabled\": {\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n },\n \"& button$button$selected\": {\n background: theme.colors.atmo1,\n height: 34,\n ...theme.typography.label,\n borderRadius: theme.radii.base,\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover\": {\n background: theme.colors.atmo3,\n },\n \"&:first-of-type, &:last-of-type\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n\n // prevent the focus ring to be hidden by sibling hover background\n // even when selected\n \"&.HvIsFocusVisible\": {\n zIndex: 5,\n },\n },\n },\n button: {},\n selected: {},\n // vertical button display Styling\n vertical: {\n flexDirection: \"column\",\n height: \"auto\",\n btnSecondary: {\n flex: \"1 1 20px\",\n },\n \"& button$button\": {\n width: \"100%\",\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:hover\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: theme.radii.base,\n borderTopRightRadius: theme.radii.base,\n },\n \"&:last-of-type\": {\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderBottomLeftRadius: theme.radii.base,\n borderBottomRightRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: 0,\n marginTop: -1,\n },\n \"&$selected\": {\n height: 32,\n width: `calc(100% + 2px) !important`,\n background: theme.colors.atmo1,\n ...theme.typography.label,\n borderRadius: theme.radii.base,\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover, &:focus\": {\n background: theme.colors.atmo3,\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":"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"}

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js CHANGED Viewed

@@ -1,14 +1,13 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useMemo } from "react";
 import { useResizeDetector } from "react-resize-detector";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./OverflowTooltip.styles.js";
 import { staticClasses } from "./OverflowTooltip.styles.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
 import { HvTypography } from "../Typography/Typography.js";
 const isParagraph = (children = "") => /\s/.test(children);
 const HvOverflowTooltip = (props) => {
-  var _a;
   const {
     id,
     classes: classesProp,
@@ -33,9 +32,9 @@ const HvOverflowTooltip = (props) => {
     },
     handleHeight: false
   });
-  const scrollWidth = ((_a = ref.current) == null ? void 0 : _a.scrollWidth) || 0;
+  const scrollWidth = ref.current?.scrollWidth || 0;
   const isOverflowing = scrollWidth - width >= 1;
-  const isParag = useMemo(() => paragraphOverflow && isParagraph(data == null ? void 0 : data.toString()), [data, paragraphOverflow]);
+  const isParag = useMemo(() => paragraphOverflow && isParagraph(data?.toString()), [data, paragraphOverflow]);
   const content = useMemo(() => /* @__PURE__ */ jsx("div", { ref, className: cx({
     [classes.tooltipAnchor]: !isParag,
     [classes.tooltipAnchorParagraph]: isParag

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowTooltip.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { ~~useDefaultProps~~ } from \"~~@core/hooks/useDefaultProps~~\";\nimport { ~~useMemo~~ } from \"react\";\nimport { ~~useResizeDetector~~ } from \"~~react-resize-detector~~\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n /** The node that will be rendered inside the tooltip. /\n data: React.ReactNode;\n /* If true, the tooltip is shown. /\n open?: boolean;\n /* If `true` the overflow tooltip will always use the paragraph overflow style. /\n paragraphOverflow?: boolean;\n /* Tooltip placement. /\n placement?:\n \| \"bottom-end\"\n \| \"bottom-start\"\n \| \"bottom\"\n \| \"left-end\"\n \| \"left-start\"\n \| \"left\"\n \| \"right-end\"\n \| \"right-start\"\n \| \"right\"\n \| \"top-end\"\n \| \"top-start\"\n \| \"top\";\n /* Extra properties to add to the tooltip. /\n tooltipsProps?: Partial<HvTooltipProps>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/\n This component generates a tooltip whenever the text is overflowed.\n /\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n const {\n id,\n classes: classesProp,\n className,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n } = useDefaultProps(\"HvOverflowTooltip\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { width = 0, ref } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n const scrollWidth = ref.current?.scrollWidth \|\| 0;\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = scrollWidth - width >= 1;\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data?.toString()),\n [data, paragraphOverflow]\n );\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={cx(\n {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n },\n className\n )}\n >\n {data}\n </div>\n ),\n [\n className,\n classes.tooltipAnchor,\n classes.tooltipAnchorParagraph,\n cx,\n data,\n isParag,\n ref,\n ]\n );\n\n return (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"body\">\n {data}\n </HvTypography>\n }\n // unset since `content` is* the label\n aria-label={null as any}\n aria-labelledby={null as any}\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","tooltipAnchor","tooltipAnchorParagraph","tooltipData"],"mappings":";;;;;;;;~~AAuCA~~,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,kBAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,~~gBAAcN~~,~~SAAIO~~,~~YAAJP~~,~~mBAAaM,gBAAe~~;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,QACd,MAAMjB,qBAAqBX,YAAYS,~~6BAAMoB~~,~~UAAU~~,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,QACd,0BACG,OACC,EAAA,KACA,WAAWb,GACT;AAAA,IACE,CAACT,QAAQyB,aAAa,GAAG,CAACJ;AAAAA,IAC1B,CAACrB,QAAQ0B,sBAAsB,GAAGL;AAAAA,EAAAA,GAEpCnB,SACF,GAECC,UAAAA,KAAAA,CACH,GAEF,CACED,WACAF,QAAQyB,eACRzB,QAAQ0B,wBACRjB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAACQ;AAAAA,MACvB;AAAA,MACA;AAAA,MACA,2BACG,cAAa,EAAA,WAAWpB,QAAQ2B,aAAa,SAAQ,QACnDxB,UACH,KAAA,CAAA;AAAA,MAGF,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,GAAII;AAAAA,MAEHiB,UAAAA;AAAAA,IAAAA;AAAAA,EAAAA;AAGP;"}
1	+ {"version":3,"file":"OverflowTooltip.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n /** The node that will be rendered inside the tooltip. /\n data: React.ReactNode;\n /* If true, the tooltip is shown. /\n open?: boolean;\n /* If `true` the overflow tooltip will always use the paragraph overflow style. /\n paragraphOverflow?: boolean;\n /* Tooltip placement. /\n placement?:\n \| \"bottom-end\"\n \| \"bottom-start\"\n \| \"bottom\"\n \| \"left-end\"\n \| \"left-start\"\n \| \"left\"\n \| \"right-end\"\n \| \"right-start\"\n \| \"right\"\n \| \"top-end\"\n \| \"top-start\"\n \| \"top\";\n /* Extra properties to add to the tooltip. /\n tooltipsProps?: Partial<HvTooltipProps>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/\n This component generates a tooltip whenever the text is overflowed.\n /\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n const {\n id,\n classes: classesProp,\n className,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n } = useDefaultProps(\"HvOverflowTooltip\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { width = 0, ref } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n const scrollWidth = ref.current?.scrollWidth \|\| 0;\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = scrollWidth - width >= 1;\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data?.toString()),\n [data, paragraphOverflow]\n );\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={cx(\n {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n },\n className\n )}\n >\n {data}\n </div>\n ),\n [\n className,\n classes.tooltipAnchor,\n classes.tooltipAnchorParagraph,\n cx,\n data,\n isParag,\n ref,\n ]\n );\n\n return (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"body\">\n {data}\n </HvTypography>\n }\n // unset since `content` is* the label\n aria-label={null as any}\n aria-labelledby={null as any}\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","tooltipAnchor","tooltipAnchorParagraph","tooltipData"],"mappings":";;;;;;;;AAyCA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,kBAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,cAAcN,IAAIO,SAASD,eAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,QACd,MAAMjB,qBAAqBX,YAAYS,MAAMoB,SAAS,CAAC,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,QACd,0BACG,OACC,EAAA,KACA,WAAWb,GACT;AAAA,IACE,CAACT,QAAQyB,aAAa,GAAG,CAACJ;AAAAA,IAC1B,CAACrB,QAAQ0B,sBAAsB,GAAGL;AAAAA,EAAAA,GAEpCnB,SACF,GAECC,UAAAA,KAAAA,CACH,GAEF,CACED,WACAF,QAAQyB,eACRzB,QAAQ0B,wBACRjB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAACQ;AAAAA,MACvB;AAAA,MACA;AAAA,MACA,2BACG,cAAa,EAAA,WAAWpB,QAAQ2B,aAAa,SAAQ,QACnDxB,UACH,KAAA,CAAA;AAAA,MAGF,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,GAAII;AAAAA,MAEHiB,UAAAA;AAAAA,IAAAA;AAAAA,EAAAA;AAGP;"}

package/dist/esm/components/Pagination/Pagination.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { useCallback, useEffect } from "react";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { Hidden } from "@mui/material";
 import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { setId } from "../../utils/setId.js";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { useLabels } from "../../hooks/useLabels.js";
@@ -58,7 +58,7 @@ const HvPagination = (props) => {
   } = useClasses(classesProp);
   const changePage = useCallback((newPage) => {
     const safePage = getSafePage(newPage, page, pages);
-    onPageChange == null ? void 0 : onPageChange(safePage);
+    onPageChange?.(safePage);
     handleInputChange(null, safePage + 1);
   }, [page, pages, onPageChange, handleInputChange]);
   useEffect(() => {
@@ -72,30 +72,32 @@ const HvPagination = (props) => {
     }
   }, [handleInputChange, page]);
   const renderPageJump = () => /* @__PURE__ */ jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsx(HvInput, { id: setId(id, "currentPage"), labels, inputProps: {
-    "aria-label": labels == null ? void 0 : labels.paginationInputLabel,
+    "aria-label": labels?.paginationInputLabel,
     // We really want the native number input
     type: "number"
   }, classes: {
-    root: classes == null ? void 0 : classes.pageSizeInputContainer,
-    input: classes == null ? void 0 : classes.pageSizeInput,
-    inputRoot: classes == null ? void 0 : classes.pageSizeInputRoot
+    root: classes?.pageSizeInputContainer,
+    input: classes?.pageSizeInput,
+    inputRoot: classes?.pageSizeInputRoot
   }, onChange: (event, value) => handleInputChange(event, Number(value)), value: String(pageInput), onBlur: (evt, value) => changePage(Number(value) - 1), onKeyDown: (evt, value) => isKey(evt, "Enter") && changePage(Number(value) - 1), disabled: pageSize === 0, disableClear: true, ...currentPageInputProps }) });
   return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(HvTypography, { component: "span", className: classes == null ? void 0 : classes.pageSizeTextContainer, children: labels == null ? void 0 : labels.pageSizePrev }) }),
-      /* @__PURE__ */ jsx(HvSelect, { id: setId(id, "pageSize"), disabled: pageSize === 0, className: classes.pageSizeOptionsSelect, "aria-label": labels == null ? void 0 : labels.pageSizeSelectorDescription, onChange: (_, val) => onPageSizeChange == null ? void 0 : onPageSizeChange(val), value: pageSize, children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option)) }),
-      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(HvTypography, { component: "span", className: classes.pageSizeTextContainer, children: labels == null ? void 0 : labels.pageSizeEntryName }) })
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(HvTypography, { component: "span", className: classes?.pageSizeTextContainer, children: labels?.pageSizePrev }) }),
+      /* @__PURE__ */ jsx(HvSelect, { id: setId(id, "pageSize"), disabled: pageSize === 0, className: classes.pageSizeOptionsSelect, "aria-label": labels?.pageSizeSelectorDescription, onChange: (_, val) => onPageSizeChange?.(val), value: pageSize, classes: {
+        header: classes.pageSizeHeader
+      }, children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option)) }),
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(HvTypography, { component: "span", className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName }) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "firstPage-button"), "aria-label": labels == null ? void 0 : labels.firstPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(0), tooltip: labels == null ? void 0 : labels.paginationFirstPageTitle, children: /* @__PURE__ */ jsx(Start, { className: classes.icon, color: setColor(!canPrevious) }) }),
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "previousPage-button"), "aria-label": labels == null ? void 0 : labels.previousPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(page - 1), tooltip: labels == null ? void 0 : labels.paginationPreviousPageTitle, children: /* @__PURE__ */ jsx(Backwards, { className: classes.icon, color: setColor(!canPrevious) }) }),
+      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "firstPage-button"), "aria-label": labels?.firstPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(0), tooltip: labels?.paginationFirstPageTitle, children: /* @__PURE__ */ jsx(Start, { className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "previousPage-button"), "aria-label": labels?.previousPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(page - 1), tooltip: labels?.paginationPreviousPageTitle, children: /* @__PURE__ */ jsx(Backwards, { className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
       /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
-        showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${page + 1}` }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels == null ? void 0 : labels.pagesSeparator} ` }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "span", id: setId(id, "totalPages"), children: pages })
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
+        /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
+        /* @__PURE__ */ jsx(HvTypography, { component: "span", id: setId(id, "totalPages"), className: classes.totalPagesTextContainer, children: pages })
       ] }),
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "nextPage-button"), "aria-label": labels == null ? void 0 : labels.nextPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(page + 1), tooltip: labels == null ? void 0 : labels.paginationNextPageTitle, children: /* @__PURE__ */ jsx(Forwards, { className: classes.icon, color: setColor(!canNext) }) }),
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "lastPage-button"), "aria-label": labels == null ? void 0 : labels.lastPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(pages - 1), tooltip: labels == null ? void 0 : labels.paginationLastPageTitle, children: /* @__PURE__ */ jsx(End, { className: classes.icon, color: setColor(!canNext) }) })
+      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "nextPage-button"), "aria-label": labels?.nextPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(page + 1), tooltip: labels?.paginationNextPageTitle, children: /* @__PURE__ */ jsx(Forwards, { className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "lastPage-button"), "aria-label": labels?.lastPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(pages - 1), tooltip: labels?.paginationLastPageTitle, children: /* @__PURE__ */ jsx(End, { className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) })
     ] })
   ] });
 };

package/dist/esm/components/Pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Hidden } from \"@mui/material\";\n\nimport {\n Start,\n End,\n Backwards,\n Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport ButtonIconTooltip from \"./ButtonIconTooltip\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n /** The show label. /\n pageSizePrev?: string;\n /* Indicate the units of the page size selection. /\n pageSizeEntryName?: string;\n /* Used for the aria-label of the selection of number of unit.s /\n pageSizeSelectorDescription?: string;\n /* Separator of current page and total pages. /\n pagesSeparator?: string;\n /* Title of button `firstPage`. /\n paginationFirstPageTitle?: string;\n /* Title of button `previousPage`. /\n paginationPreviousPageTitle?: string;\n /* Title of button `nextPage`. /\n paginationNextPageTitle?: string;\n /* Title of button `lastPage`. /\n paginationLastPageTitle?: string;\n /* Aria-label passed to the page input. /\n paginationInputLabel?: string;\n /* Aria-label of the first page button /\n firstPage?: string;\n /* Aria-label of the previous page button /\n previousPage?: string;\n /* Aria-label of the next page button /\n nextPage?: string;\n /* Aria-label of the last page button /\n lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n /* The number of pages the component has. /\n pages?: number;\n /* The currently selected page (0-indexed). /\n page?: number;\n /* Controls whether the left page size mechanism should be visible. /\n showPageSizeOptions?: boolean;\n /* The array of possible page sizes for the dropdown. /\n pageSizeOptions?: number[];\n /* The currently selected page size. /\n pageSize?: number;\n /* Controls whether the central page changing mechanism should be visible. /\n showPageJump?: boolean;\n /* Controls whether the previous/first page buttons are enabled. /\n canPrevious?: boolean;\n /* Controls whether the next/last page buttons are enabled. /\n canNext?: boolean;\n /* Function called when the page changes. /\n onPageChange?: (page: number) => void;\n /* Function called when the page size changes. /\n onPageSizeChange?: (pageSize: number) => void;\n /* An object containing all the labels for the component. /\n labels?: HvPaginationLabels;\n /* Other props to show page component. /\n showPageProps?: HTMLAttributes<HTMLDivElement>;\n /* Other props to pagination component. /\n navigationProps?: HTMLAttributes<HTMLDivElement>;\n /* Extra properties passed to the input component representing the current pages. /\n currentPageInputProps?: HvInputProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS = {\n pageSizePrev: \"Show\",\n pageSizeEntryName: \"rows\",\n pageSizeSelectorDescription: \"Select how many to display\",\n pagesSeparator: \"/\",\n paginationFirstPageTitle: \"First page\",\n paginationPreviousPageTitle: \"Previous page\",\n paginationNextPageTitle: \"Next page\",\n paginationLastPageTitle: \"Last page\",\n paginationInputLabel: \"Current page\",\n firstPage: \"First Page\",\n previousPage: \"Previous Page\",\n nextPage: \"Next Page\",\n lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/\n Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n const {\n classes: classesProp,\n className,\n id,\n pages = 1,\n page = 0,\n showPageSizeOptions = true,\n pageSizeOptions = defaultPageSizeOptions,\n pageSize = defaultPageSizeOptions[1],\n showPageJump = true,\n canPrevious = false,\n canNext = false,\n onPageChange,\n onPageSizeChange,\n labels: labelsProp,\n showPageProps,\n navigationProps,\n currentPageInputProps,\n ...others\n } = useDefaultProps(\"HvPagination\", props);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const [pageInput, handleInputChange] = usePageInput(page);\n const { classes, cx } = useClasses(classesProp);\n\n const changePage = useCallback(\n (newPage: number) => {\n const safePage: number = getSafePage(newPage, page, pages);\n\n onPageChange?.(safePage);\n handleInputChange(null, safePage + 1);\n },\n [page, pages, onPageChange, handleInputChange]\n );\n\n useEffect(() => {\n if (page >= pages && pages > 0) {\n changePage(page);\n }\n }, [changePage, page, pages]);\n\n useEffect(() => {\n if (pageInput !== page + 1) {\n handleInputChange(null, page + 1);\n }\n\n // we only want to \"fix\" the input's display value when `page` property changed\n // (either externally or when internally committed - onBlur or Enter),\n // not while editing the input.\n // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n // a bug preventing properly controlling of the `page` property.\n // fixing it some other way would potentially introduce a breaking change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleInputChange, page]);\n\n const renderPageJump = () => (\n <div className={classes.pageJump}>\n <HvInput\n id={setId(id, \"currentPage\")}\n labels={labels}\n inputProps={{\n \"aria-label\": labels?.paginationInputLabel,\n // We really want the native number input\n type: \"number\",\n }}\n classes={{\n root: classes?.pageSizeInputContainer,\n input: classes?.pageSizeInput,\n inputRoot: classes?.pageSizeInputRoot,\n }}\n onChange={(event, value) => handleInputChange(event, Number(value))}\n value={String(pageInput)}\n onBlur={(evt, value) => changePage(Number(value) - 1)}\n onKeyDown={(evt, value) =>\n isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n }\n disabled={pageSize === 0}\n disableClear\n {...currentPageInputProps}\n />\n </div>\n );\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n <div className={classes.pageSizeOptions} {...showPageProps}>\n {showPageSizeOptions && (\n <>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes?.pageSizeTextContainer}\n >\n {labels?.pageSizePrev}\n </HvTypography>\n </Hidden>\n <HvSelect\n id={setId(id, \"pageSize\")}\n disabled={pageSize === 0}\n className={classes.pageSizeOptionsSelect}\n aria-label={labels?.pageSizeSelectorDescription}\n onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n value={pageSize}\n >\n {pageSizeOptions.map((option) => (\n <Option key={option} value={option}>\n {option}\n </Option>\n ))}\n </HvSelect>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes.pageSizeTextContainer}\n >\n {labels?.pageSizeEntryName}\n </HvTypography>\n </Hidden>\n </>\n )}\n </div>\n <div className={classes.pageNavigator} {...navigationProps}>\n <ButtonIconTooltip\n id={setId(id, \"firstPage-button\")}\n aria-label={labels?.firstPage}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(0)}\n tooltip={labels?.paginationFirstPageTitle}\n >\n <Start className={classes.icon} color={setColor(!canPrevious)} />\n </ButtonIconTooltip>\n <ButtonIconTooltip\n id={setId(id, \"previousPage-button\")}\n aria-label={labels?.previousPage}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(page - 1)}\n tooltip={labels?.paginationPreviousPageTitle}\n >\n <Backwards className={classes.icon} color={setColor(!canPrevious)} />\n </ButtonIconTooltip>\n <div className={classes.pageInfo}>\n {showPageJump ? (\n renderPageJump()\n ) : (\n <HvTypography component=\"span\">{`${page + 1}`}</HvTypography>\n )}\n <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n <HvTypography component=\"span\" id={setId(id, \"totalPages\")}>\n {pages}\n </HvTypography>\n </div>\n <ButtonIconTooltip\n id={setId(id, \"nextPage-button\")}\n aria-label={labels?.nextPage}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(page + 1)}\n tooltip={labels?.paginationNextPageTitle}\n >\n <Forwards className={classes.icon} color={setColor(!canNext)} />\n </ButtonIconTooltip>\n <ButtonIconTooltip\n id={setId(id, \"lastPage-button\")}\n aria-label={labels?.lastPage}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(pages - 1)}\n tooltip={labels?.paginationLastPageTitle}\n >\n <End className={classes.icon} color={setColor(!canNext)} />\n </ButtonIconTooltip>\n </div>\n </div>\n );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","defaultPageSizeOptions","HvPagination","props","classes","classesProp","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useDefaultProps","useLabels","pageInput","handleInputChange","usePageInput","cx","useClasses","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","pageJump","setId","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","event","value","Number","String","evt","isKey","pageSizeTextContainer","pageSizeOptionsSelect","_","val","map","option","pageNavigator","iconContainer","icon","setColor","pageInfo"],"mappings":"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"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\n\nimport { Hidden } from \"@mui/material\";\n\nimport {\n Start,\n End,\n Backwards,\n Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport ButtonIconTooltip from \"./ButtonIconTooltip\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n /** The show label. /\n pageSizePrev?: string;\n /* Indicate the units of the page size selection. /\n pageSizeEntryName?: string;\n /* Used for the aria-label of the selection of number of unit.s /\n pageSizeSelectorDescription?: string;\n /* Separator of current page and total pages. /\n pagesSeparator?: string;\n /* Title of button `firstPage`. /\n paginationFirstPageTitle?: string;\n /* Title of button `previousPage`. /\n paginationPreviousPageTitle?: string;\n /* Title of button `nextPage`. /\n paginationNextPageTitle?: string;\n /* Title of button `lastPage`. /\n paginationLastPageTitle?: string;\n /* Aria-label passed to the page input. /\n paginationInputLabel?: string;\n /* Aria-label of the first page button /\n firstPage?: string;\n /* Aria-label of the previous page button /\n previousPage?: string;\n /* Aria-label of the next page button /\n nextPage?: string;\n /* Aria-label of the last page button /\n lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n /* The number of pages the component has. /\n pages?: number;\n /* The currently selected page (0-indexed). /\n page?: number;\n /* Controls whether the left page size mechanism should be visible. /\n showPageSizeOptions?: boolean;\n /* The array of possible page sizes for the dropdown. /\n pageSizeOptions?: number[];\n /* The currently selected page size. /\n pageSize?: number;\n /* Controls whether the central page changing mechanism should be visible. /\n showPageJump?: boolean;\n /* Controls whether the previous/first page buttons are enabled. /\n canPrevious?: boolean;\n /* Controls whether the next/last page buttons are enabled. /\n canNext?: boolean;\n /* Function called when the page changes. /\n onPageChange?: (page: number) => void;\n /* Function called when the page size changes. /\n onPageSizeChange?: (pageSize: number) => void;\n /* An object containing all the labels for the component. /\n labels?: HvPaginationLabels;\n /* Other props to show page component. /\n showPageProps?: HTMLAttributes<HTMLDivElement>;\n /* Other props to pagination component. /\n navigationProps?: HTMLAttributes<HTMLDivElement>;\n /* Extra properties passed to the input component representing the current pages. /\n currentPageInputProps?: HvInputProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS = {\n pageSizePrev: \"Show\",\n pageSizeEntryName: \"rows\",\n pageSizeSelectorDescription: \"Select how many to display\",\n pagesSeparator: \"/\",\n paginationFirstPageTitle: \"First page\",\n paginationPreviousPageTitle: \"Previous page\",\n paginationNextPageTitle: \"Next page\",\n paginationLastPageTitle: \"Last page\",\n paginationInputLabel: \"Current page\",\n firstPage: \"First Page\",\n previousPage: \"Previous Page\",\n nextPage: \"Next Page\",\n lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/\n Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n const {\n classes: classesProp,\n className,\n id,\n pages = 1,\n page = 0,\n showPageSizeOptions = true,\n pageSizeOptions = defaultPageSizeOptions,\n pageSize = defaultPageSizeOptions[1],\n showPageJump = true,\n canPrevious = false,\n canNext = false,\n onPageChange,\n onPageSizeChange,\n labels: labelsProp,\n showPageProps,\n navigationProps,\n currentPageInputProps,\n ...others\n } = useDefaultProps(\"HvPagination\", props);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const [pageInput, handleInputChange] = usePageInput(page);\n const { classes, cx } = useClasses(classesProp);\n\n const changePage = useCallback(\n (newPage: number) => {\n const safePage: number = getSafePage(newPage, page, pages);\n\n onPageChange?.(safePage);\n handleInputChange(null, safePage + 1);\n },\n [page, pages, onPageChange, handleInputChange]\n );\n\n useEffect(() => {\n if (page >= pages && pages > 0) {\n changePage(page);\n }\n }, [changePage, page, pages]);\n\n useEffect(() => {\n if (pageInput !== page + 1) {\n handleInputChange(null, page + 1);\n }\n\n // we only want to \"fix\" the input's display value when `page` property changed\n // (either externally or when internally committed - onBlur or Enter),\n // not while editing the input.\n // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n // a bug preventing properly controlling of the `page` property.\n // fixing it some other way would potentially introduce a breaking change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleInputChange, page]);\n\n const renderPageJump = () => (\n <div className={classes.pageJump}>\n <HvInput\n id={setId(id, \"currentPage\")}\n labels={labels}\n inputProps={{\n \"aria-label\": labels?.paginationInputLabel,\n // We really want the native number input\n type: \"number\",\n }}\n classes={{\n root: classes?.pageSizeInputContainer,\n input: classes?.pageSizeInput,\n inputRoot: classes?.pageSizeInputRoot,\n }}\n onChange={(event, value) => handleInputChange(event, Number(value))}\n value={String(pageInput)}\n onBlur={(evt, value) => changePage(Number(value) - 1)}\n onKeyDown={(evt, value) =>\n isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n }\n disabled={pageSize === 0}\n disableClear\n {...currentPageInputProps}\n />\n </div>\n );\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n <div className={classes.pageSizeOptions} {...showPageProps}>\n {showPageSizeOptions && (\n <>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes?.pageSizeTextContainer}\n >\n {labels?.pageSizePrev}\n </HvTypography>\n </Hidden>\n <HvSelect\n id={setId(id, \"pageSize\")}\n disabled={pageSize === 0}\n className={classes.pageSizeOptionsSelect}\n aria-label={labels?.pageSizeSelectorDescription}\n onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n value={pageSize}\n classes={{ header: classes.pageSizeHeader }}\n >\n {pageSizeOptions.map((option) => (\n <Option key={option} value={option}>\n {option}\n </Option>\n ))}\n </HvSelect>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes.pageSizeTextContainer}\n >\n {labels?.pageSizeEntryName}\n </HvTypography>\n </Hidden>\n </>\n )}\n </div>\n <div className={classes.pageNavigator} {...navigationProps}>\n <ButtonIconTooltip\n id={setId(id, \"firstPage-button\")}\n aria-label={labels?.firstPage}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(0)}\n tooltip={labels?.paginationFirstPageTitle}\n >\n <Start\n className={classes.icon}\n color={setColor(!canPrevious)}\n iconSize=\"XS\"\n />\n </ButtonIconTooltip>\n <ButtonIconTooltip\n id={setId(id, \"previousPage-button\")}\n aria-label={labels?.previousPage}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(page - 1)}\n tooltip={labels?.paginationPreviousPageTitle}\n >\n <Backwards\n className={classes.icon}\n color={setColor(!canPrevious)}\n iconSize=\"XS\"\n />\n </ButtonIconTooltip>\n <div className={classes.pageInfo}>\n {showPageJump ? (\n renderPageJump()\n ) : (\n <HvTypography variant=\"caption2\" component=\"span\">{`${\n page + 1\n }`}</HvTypography>\n )}\n <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n <HvTypography\n component=\"span\"\n id={setId(id, \"totalPages\")}\n className={classes.totalPagesTextContainer}\n >\n {pages}\n </HvTypography>\n </div>\n <ButtonIconTooltip\n id={setId(id, \"nextPage-button\")}\n aria-label={labels?.nextPage}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(page + 1)}\n tooltip={labels?.paginationNextPageTitle}\n >\n <Forwards\n className={classes.icon}\n color={setColor(!canNext)}\n iconSize=\"XS\"\n />\n </ButtonIconTooltip>\n <ButtonIconTooltip\n id={setId(id, \"lastPage-button\")}\n aria-label={labels?.lastPage}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(pages - 1)}\n tooltip={labels?.paginationLastPageTitle}\n >\n <End\n className={classes.icon}\n color={setColor(!canNext)}\n iconSize=\"XS\"\n />\n </ButtonIconTooltip>\n </div>\n </div>\n );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","defaultPageSizeOptions","HvPagination","props","classes","classesProp","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useDefaultProps","useLabels","pageInput","handleInputChange","usePageInput","cx","useClasses","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","pageJump","setId","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","event","value","Number","String","evt","isKey","pageSizeTextContainer","pageSizeOptionsSelect","_","val","header","pageSizeHeader","map","option","pageNavigator","iconContainer","icon","setColor","pageInfo","totalPagesTextContainer"],"mappings":"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"}

package/dist/esm/components/Pagination/Pagination.styles.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
+import { staticClasses as staticClasses$1 } from "../BaseDropdown/BaseDropdown.styles.js";
+import "../BaseDropdown/BaseDropdown.js";
+import { staticClasses as staticClasses$2 } from "../Input/Input.styles.js";
 import "../Input/Input.js";
 const hoverColor = theme.colors.atmo3;
 const {
@@ -17,15 +19,19 @@ const {
     flexWrap: "wrap",
     marginTop: theme.space.sm,
     [`& $pageSizeInput`]: {
-      ...theme.typography.label
+      ...theme.typography.caption2,
+      "&:focus": {
+        padding: 0
+      }
     },
     [`& $pageSizeInputContainer`]: {
-      width: 40,
-      minWidth: 40,
+      width: 24,
+      minWidth: 24,
       maxWidth: theme.spacing(8)
     },
     [`&& $pageSizeInputRoot`]: {
       backgroundColor: "transparent",
+      height: "24px",
       "&:focus, &:focus-within, &:hover": {
         backgroundColor: hoverColor
       }
@@ -35,29 +41,42 @@ const {
   pageSizeOptions: {
     display: "flex",
     position: "absolute",
-    height: 32,
+    height: 24,
     top: "50%",
     transform: "translateY(-50%)",
     left: "0"
   },
+  pageSizeHeader: {
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    [`& .${staticClasses$1.arrowContainer}`]: {
+      marginTop: -2
+    }
+  },
   /** Styles applied to the element that holds the labels for the page size selector */
   pageSizeTextContainer: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    height: "32px",
-    padding: "8px 0"
+    height: "24px",
+    padding: "8px 0",
+    ...theme.typography.caption2
+  },
+  totalPagesTextContainer: {
+    ...theme.typography.caption2
   },
   /** Styles applied to the page size selector dropdown element. */
   pageSizeOptionsSelect: {
     display: "inline-block",
     margin: `0px ${theme.space.xs}`,
-    width: "auto"
+    width: "auto",
+    ...theme.typography.caption2
   },
   /** Styles applied to the page navigation container. */
   pageNavigator: {
     display: "flex",
-    alignItems: "stretch",
+    alignItems: "center",
     height: "32px",
     gap: 8
   },
@@ -78,7 +97,7 @@ const {
   pageJump: {
     display: "inline-block",
     marginRight: `4px`,
-    [`& .${staticClasses$1.inputRoot}`]: {
+    [`& .${staticClasses$2.inputRoot}`]: {
       [`& $pageSizeInput`]: {
         paddingLeft: `4px`,
         paddingRight: `4px`,

package/dist/esm/components/Pagination/Pagination.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.styles.js","sources":["../../../../src/components/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { inputClasses } from \"@core/components/Input\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hoverColor = theme.colors.atmo3;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n /** Styles applied to the component root class. /\n root: {\n position: \"relative\",\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"stretch\",\n flexWrap: \"wrap\",\n marginTop: theme.space.sm,\n [`& $pageSizeInput`]: {\n ...(theme.typography.~~label~~ as CSSProperties),\n },\n [`& $pageSizeInputContainer`]: {\n width: 40,\n minWidth: 40,\n maxWidth: theme.spacing(8),\n },\n [`&& $pageSizeInputRoot`]: {\n backgroundColor: \"transparent\",\n \"&:focus, &:focus-within, &:hover\": {\n backgroundColor: hoverColor,\n },\n },\n },\n /* Styles applied to the page size selector container. /\n pageSizeOptions: {\n display: \"flex\",\n position: \"absolute\",\n height: 32,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n left: \"0\",\n },\n /* Styles applied to the element that holds the labels for the page size selector /\n pageSizeTextContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: \"~~32px~~\",\n padding: \"8px 0\",\n },\n /* Styles applied to the page size selector dropdown element. /\n pageSizeOptionsSelect: {\n display: \"inline-block\",\n margin: `0px ${theme.space.xs}`,\n width: \"auto\",\n },\n /* Styles applied to the page navigation container. /\n pageNavigator: {\n display: \"flex\",\n alignItems: \"~~stretch~~\",\n height: \"32px\",\n gap: 8,\n },\n /* Styles applied to each navigation `HvButton` icon container. /\n iconContainer: {\n padding: 0,\n },\n /* Styles applied to each navigation icon. /\n icon: {},\n /* Styles applied to the central page information container. /\n pageInfo: {\n display: \"inline-block\",\n whiteSpace: \"nowrap\",\n height: \"32px\",\n lineHeight: \"32px\",\n },\n /* Styles applied to the page selector input container. /\n pageJump: {\n display: \"inline-block\",\n marginRight: `4px`,\n [`& .${inputClasses.inputRoot}`]: {\n [`& $pageSizeInput`]: {\n paddingLeft: `4px`,\n paddingRight: `4px`,\n margin: 0,\n textAlign: \"center\",\n borderRadius: theme.radii.base,\n MozAppearance: \"textfield\",\n \"&:focus\": {\n backgroundColor: hoverColor,\n },\n \"&:hover\": {\n cursor: \"pointer\",\n },\n },\n },\n },\n /* Styles passed down to the page selector Input component as `input`. /\n pageSizeInput: {},\n /* Styles passed down to the page selector Input root. /\n pageSizeInputRoot: {},\n /* Styles passed down to the page selector Input component as `container`. */\n pageSizeInputContainer: {},\n});\n"],"names":["hoverColor","theme","colors","atmo3","staticClasses","useClasses","createClasses","root","position","zIndex","display","justifyContent","alignItems","flexWrap","marginTop","space","sm","typography","~~label~~","width","minWidth","maxWidth","spacing","backgroundColor","~~pageSizeOptions~~","~~height~~","top","transform","left","pageSizeTextContainer","~~padding~~","pageSizeOptionsSelect","margin","xs","pageNavigator","gap","iconContainer","icon","pageInfo","whiteSpace","lineHeight","pageJump","marginRight","inputClasses","inputRoot","paddingLeft","paddingRight","textAlign","borderRadius","radii","base","MozAppearance","cursor","pageSizeInput","pageSizeInputRoot","pageSizeInputContainer"],"mappings":"~~;;;;AAOA~~,MAAMA,aAAaC,MAAMC,OAAOC;AAEnB,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA;AAAA,EAEzEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,WAAWb,MAAMc,MAAMC;AAAAA,IACvB,CAAE,kBAAiB,GAAG;AAAA,MACpB,GAAIf,MAAMgB,WAAWC;AAAAA,~~IACvB~~;AAAA,IACA,CAAE,2BAA0B,GAAG;AAAA,MAC7BC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,~~UAAUpB~~,~~MAAMqB~~,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAE,uBAAsB,GAAG;AAAA,MACzBC,iBAAiB;AAAA,~~MACjB~~,oCAAoC;AAAA,~~QAClCA~~,~~iBAAiBvB~~;AAAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA;AAAA,~~EAEAwB~~,iBAAiB;AAAA,~~IACfd~~,SAAS;AAAA,IACTF,UAAU;AAAA,IACViB,QAAQ;AAAA,~~IACRC~~,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,MAAM;AAAA,EACR;AAAA;AAAA,~~EAEAC~~,uBAAuB;AAAA,~~IACrBnB~~,SAAS;AAAA,IACTE,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBc,QAAQ;AAAA,~~IACRK~~,SAAS;AAAA,~~EACX~~;AAAA;AAAA,~~EAEAC~~,uBAAuB;AAAA,~~IACrBrB~~,SAAS;AAAA,~~IACTsB~~,QAAS,~~OAAM/B~~,MAAMc,~~MAAMkB~~,EAAG;AAAA,~~IAC9Bd~~,OAAO;AAAA,~~EACT~~;AAAA;AAAA,~~EAEAe~~,eAAe;AAAA,~~IACbxB~~,SAAS;AAAA,IACTE,YAAY;AAAA,IACZa,QAAQ;AAAA,~~IACRU~~,KAAK;AAAA,EACP;AAAA;AAAA,EAEAC,eAAe;AAAA,~~IACbN~~,SAAS;AAAA,EACX;AAAA;AAAA,~~EAEAO~~,MAAM,CAAC;AAAA;AAAA,EAEPC,UAAU;AAAA,~~IACR5B~~,SAAS;AAAA,~~IACT6B~~,YAAY;AAAA,~~IACZd~~,QAAQ;AAAA,~~IACRe~~,YAAY;AAAA,EACd;AAAA;AAAA,EAEAC,UAAU;AAAA,~~IACR/B~~,SAAS;AAAA,~~IACTgC~~,aAAc;AAAA,IACd,CAAE,MAAKC,gBAAaC,SAAU,EAAC,GAAG;AAAA,MAChC,CAAE,kBAAiB,GAAG;AAAA,QACpBC,aAAc;AAAA,QACdC,cAAe;AAAA,QACfd,QAAQ;AAAA,QACRe,WAAW;AAAA,QACXC,~~cAAc/C~~,~~MAAMgD~~,MAAMC;AAAAA,QAC1BC,eAAe;AAAA,QACf,WAAW;AAAA,~~UACT5B~~,~~iBAAiBvB~~;AAAAA,QACnB;AAAA,QACA,WAAW;AAAA,~~UACToD~~,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,wBAAwB,CAAC;AAC3B,CAAC;"}
1	+ {"version":3,"file":"Pagination.styles.js","sources":["../../../../src/components/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { inputClasses } from \"@core/components/Input\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { baseDropdownClasses } from \"@core/components/BaseDropdown\";\n\nconst hoverColor = theme.colors.atmo3;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n /** Styles applied to the component root class. /\n root: {\n position: \"relative\",\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"stretch\",\n flexWrap: \"wrap\",\n marginTop: theme.space.sm,\n [`& $pageSizeInput`]: {\n ...(theme.typography.caption2 as CSSProperties),\n \"&:focus\": {\n padding: 0,\n },\n },\n [`& $pageSizeInputContainer`]: {\n width: 24,\n minWidth: 24,\n maxWidth: theme.spacing(8),\n },\n [`&& $pageSizeInputRoot`]: {\n backgroundColor: \"transparent\",\n height: \"24px\",\n \"&:focus, &:focus-within, &:hover\": {\n backgroundColor: hoverColor,\n },\n },\n },\n /* Styles applied to the page size selector container. /\n pageSizeOptions: {\n display: \"flex\",\n position: \"absolute\",\n height: 24,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n left: \"0\",\n },\n pageSizeHeader: {\n height: 24,\n display: \"flex\",\n alignItems: \"center\",\n [`& .${baseDropdownClasses.arrowContainer}`]: {\n marginTop: -2,\n },\n },\n /* Styles applied to the element that holds the labels for the page size selector /\n pageSizeTextContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: \"24px\",\n padding: \"8px 0\",\n ...(theme.typography.caption2 as CSSProperties),\n },\n totalPagesTextContainer: {\n ...(theme.typography.caption2 as CSSProperties),\n },\n /* Styles applied to the page size selector dropdown element. /\n pageSizeOptionsSelect: {\n display: \"inline-block\",\n margin: `0px ${theme.space.xs}`,\n width: \"auto\",\n\n ...(theme.typography.caption2 as CSSProperties),\n },\n /* Styles applied to the page navigation container. /\n pageNavigator: {\n display: \"flex\",\n alignItems: \"center\",\n height: \"32px\",\n gap: 8,\n },\n /* Styles applied to each navigation `HvButton` icon container. /\n iconContainer: {\n padding: 0,\n },\n /* Styles applied to each navigation icon. /\n icon: {},\n /* Styles applied to the central page information container. /\n pageInfo: {\n display: \"inline-block\",\n whiteSpace: \"nowrap\",\n height: \"32px\",\n lineHeight: \"32px\",\n },\n /* Styles applied to the page selector input container. /\n pageJump: {\n display: \"inline-block\",\n marginRight: `4px`,\n [`& .${inputClasses.inputRoot}`]: {\n [`& $pageSizeInput`]: {\n paddingLeft: `4px`,\n paddingRight: `4px`,\n margin: 0,\n textAlign: \"center\",\n borderRadius: theme.radii.base,\n MozAppearance: \"textfield\",\n \"&:focus\": {\n backgroundColor: hoverColor,\n },\n \"&:hover\": {\n cursor: \"pointer\",\n },\n },\n },\n },\n /* Styles passed down to the page selector Input component as `input`. /\n pageSizeInput: {},\n /* Styles passed down to the page selector Input root. /\n pageSizeInputRoot: {},\n /* Styles passed down to the page selector Input component as `container`. */\n pageSizeInputContainer: {},\n});\n"],"names":["hoverColor","theme","colors","atmo3","staticClasses","useClasses","createClasses","root","position","zIndex","display","justifyContent","alignItems","flexWrap","marginTop","space","sm","typography","caption2","padding","width","minWidth","maxWidth","spacing","backgroundColor","height","pageSizeOptions","top","transform","left","pageSizeHeader","baseDropdownClasses","arrowContainer","pageSizeTextContainer","totalPagesTextContainer","pageSizeOptionsSelect","margin","xs","pageNavigator","gap","iconContainer","icon","pageInfo","whiteSpace","lineHeight","pageJump","marginRight","inputClasses","inputRoot","paddingLeft","paddingRight","textAlign","borderRadius","radii","base","MozAppearance","cursor","pageSizeInput","pageSizeInputRoot","pageSizeInputContainer"],"mappings":";;;;;;AAQA,MAAMA,aAAaC,MAAMC,OAAOC;AAEnB,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA;AAAA,EAEzEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,WAAWb,MAAMc,MAAMC;AAAAA,IACvB,CAAE,kBAAiB,GAAG;AAAA,MACpB,GAAIf,MAAMgB,WAAWC;AAAAA,MACrB,WAAW;AAAA,QACTC,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAE,2BAA0B,GAAG;AAAA,MAC7BC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,UAAUrB,MAAMsB,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAE,uBAAsB,GAAG;AAAA,MACzBC,iBAAiB;AAAA,MACjBC,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClCD,iBAAiBxB;AAAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA0B,iBAAiB;AAAA,IACfhB,SAAS;AAAA,IACTF,UAAU;AAAA,IACViB,QAAQ;AAAA,IACRE,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,MAAM;AAAA,EACR;AAAA,EACAC,gBAAgB;AAAA,IACdL,QAAQ;AAAA,IACRf,SAAS;AAAA,IACTE,YAAY;AAAA,IACZ,CAAE,MAAKmB,gBAAoBC,cAAe,EAAC,GAAG;AAAA,MAC5ClB,WAAW;AAAA,IACb;AAAA,EACF;AAAA;AAAA,EAEAmB,uBAAuB;AAAA,IACrBvB,SAAS;AAAA,IACTE,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBc,QAAQ;AAAA,IACRN,SAAS;AAAA,IACT,GAAIlB,MAAMgB,WAAWC;AAAAA,EACvB;AAAA,EACAgB,yBAAyB;AAAA,IACvB,GAAIjC,MAAMgB,WAAWC;AAAAA,EACvB;AAAA;AAAA,EAEAiB,uBAAuB;AAAA,IACrBzB,SAAS;AAAA,IACT0B,QAAS,OAAMnC,MAAMc,MAAMsB,EAAG;AAAA,IAC9BjB,OAAO;AAAA,IAEP,GAAInB,MAAMgB,WAAWC;AAAAA,EACvB;AAAA;AAAA,EAEAoB,eAAe;AAAA,IACb5B,SAAS;AAAA,IACTE,YAAY;AAAA,IACZa,QAAQ;AAAA,IACRc,KAAK;AAAA,EACP;AAAA;AAAA,EAEAC,eAAe;AAAA,IACbrB,SAAS;AAAA,EACX;AAAA;AAAA,EAEAsB,MAAM,CAAC;AAAA;AAAA,EAEPC,UAAU;AAAA,IACRhC,SAAS;AAAA,IACTiC,YAAY;AAAA,IACZlB,QAAQ;AAAA,IACRmB,YAAY;AAAA,EACd;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRnC,SAAS;AAAA,IACToC,aAAc;AAAA,IACd,CAAE,MAAKC,gBAAaC,SAAU,EAAC,GAAG;AAAA,MAChC,CAAE,kBAAiB,GAAG;AAAA,QACpBC,aAAc;AAAA,QACdC,cAAe;AAAA,QACfd,QAAQ;AAAA,QACRe,WAAW;AAAA,QACXC,cAAcnD,MAAMoD,MAAMC;AAAAA,QAC1BC,eAAe;AAAA,QACf,WAAW;AAAA,UACT/B,iBAAiBxB;AAAAA,QACnB;AAAA,QACA,WAAW;AAAA,UACTwD,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,wBAAwB,CAAC;AAC3B,CAAC;"}

package/dist/esm/components/Pagination/Select.js CHANGED Viewed

@@ -24,7 +24,7 @@ const HvSelect = (props) => {
   } = useClasses(classesProp);
   const [open, setOpen] = useState(false);
   const handleSelect = (evt, val) => {
-    onChange == null ? void 0 : onChange(evt, val);
+    onChange?.(evt, val);
     setOpen(false);
   };
   const handleToggle = (_evt, s) => {