@dxc-technology/halstack-react 15.1.1 → 15.1.3

package/dist/index.d.mts

@@ -5256,6 +5256,10 @@ declare const defaultTranslatedComponentLabels: {
         minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
         goToPageText: string;
         pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
+        firstResultsTitle: string;
+        previousResultsTitle: string;
+        nextResultsTitle: string;
+        lastResultsTitle: string;
     };
     passwordInput: {
         inputShowPasswordTitle: string;
@@ -6628,6 +6632,10 @@ declare const HalstackLanguageContext: react.Context<{
         minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
         goToPageText: string;
         pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
+        firstResultsTitle: string;
+        previousResultsTitle: string;
+        nextResultsTitle: string;
+        lastResultsTitle: string;
     };
     passwordInput: {
         inputShowPasswordTitle: string;

package/dist/index.d.ts

@@ -5256,6 +5256,10 @@ declare const defaultTranslatedComponentLabels: {
         minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
         goToPageText: string;
         pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
+        firstResultsTitle: string;
+        previousResultsTitle: string;
+        nextResultsTitle: string;
+        lastResultsTitle: string;
     };
     passwordInput: {
         inputShowPasswordTitle: string;
@@ -6628,6 +6632,10 @@ declare const HalstackLanguageContext: react.Context<{
         minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
         goToPageText: string;
         pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
+        firstResultsTitle: string;
+        previousResultsTitle: string;
+        nextResultsTitle: string;
+        lastResultsTitle: string;
     };
     passwordInput: {
         inputShowPasswordTitle: string;

package/dist/index.js

@@ -819,13 +819,13 @@ var componentTokens = {
     logoHeight: "40px",
     logoWidth: "auto",
     menuBackgroundColor: coreTokens_default.color_white,
-    menuZindex: "2000",
+    menuZindex: "210",
     menuTabletWidth: "60vw",
     menuMobileWidth: "100vw",
     minHeight: "64px",
     overlayColor: coreTokens_default.color_grey_800_a,
     overlayOpacity: "0.7",
-    overlayZindex: "1600",
+    overlayZindex: "200",
     paddingTop: coreTokens_default.spacing_0,
     paddingBottom: coreTokens_default.spacing_0,
     paddingRight: coreTokens_default.spacing_24,
@@ -1645,7 +1645,11 @@ var defaultTranslatedComponentLabels = {
     itemsPerPageText: "Items per page: ",
     minToMaxOfText: (minNumberOfItems, maxNumberOfItems, totalItems) => `${minNumberOfItems} to ${maxNumberOfItems} of ${totalItems}`,
     goToPageText: "Go to page:",
-    pageOfText: (pageNumber, totalPagesNumber) => `Page: ${pageNumber} of ${totalPagesNumber}`
+    pageOfText: (pageNumber, totalPagesNumber) => `Page: ${pageNumber} of ${totalPagesNumber}`,
+    firstResultsTitle: "First results",
+    previousResultsTitle: "Previous results",
+    nextResultsTitle: "Next results",
+    lastResultsTitle: "Last results"
   },
   passwordInput: {
     inputShowPasswordTitle: "Show password",
@@ -2457,7 +2461,7 @@ var TooltipTriggerContainer = import_styled_components6.default.div`
   display: inline-flex;
 `;
 var StyledTooltipContent = (0, import_styled_components6.default)(import_react_tooltip.Content)`
-  z-index: 2147483647;
+  z-index: 600;
 
   animation-duration: 0.2s;
   animation-timing-function: ease-out;
@@ -3188,7 +3192,7 @@ var Modal = import_styled_components10.default.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: 430;
 `;
 var Overlay = import_styled_components10.default.div`
   position: fixed;
@@ -3201,7 +3205,6 @@ var ModalAlertContainer = import_styled_components10.default.div`
   box-sizing: border-box;
   max-width: 80%;
   min-width: 696px;
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;
@@ -4140,7 +4143,7 @@ var DxcDropdown = ({
             visualFocusIndex,
             menuItemOnClick: handleMenuItemOnClick,
             onKeyDown: handleMenuOnKeyDown,
-            styles: { width, zIndex: "2147483647" },
+            styles: { width, zIndex: "310" },
             ref: menuRef
           }
         ) }) })
@@ -4885,7 +4888,7 @@ var HeaderContainer2 = import_styled_components19.default.div`
   top: 0;
   left: 0;
   right: 0;
-  z-index: 3;
+  z-index: 100;
 `;
 var VisibilityToggle = import_styled_components19.default.div`
   position: fixed;
@@ -4899,7 +4902,7 @@ var VisibilityToggle = import_styled_components19.default.div`
   width: 100%;
   background-color: #f2f2f2;
   user-select: none;
-  z-index: 2;
+  z-index: 1;
 `;
 var HamburgerTrigger2 = import_styled_components19.default.button`
   display: flex;
@@ -4940,7 +4943,7 @@ var SidenavContainer2 = import_styled_components19.default.div`
   top: 64px;
   display: flex;
   height: calc(100vh - 64px);
-  z-index: 1;
+  z-index: 110;
 
   @media (max-width: ${responsiveSizes.large}rem) {
     position: absolute;
@@ -7137,7 +7140,7 @@ var DxcSelect = (0, import_react39.forwardRef)(
           Popover2.Content,
           {
             sideOffset: 4,
-            style: { zIndex: "2147483647" },
+            style: { zIndex: "310" },
             onOpenAutoFocus: (event) => {
               event.preventDefault();
             },
@@ -7418,7 +7421,7 @@ var DxcPaginator = ({
         onClick: () => {
           onPageChange(1);
         },
-        title: "First results"
+        title: translatedLabels.paginator.firstResultsTitle
       }
     ),
     onPageChange && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -7431,7 +7434,7 @@ var DxcPaginator = ({
         onClick: () => {
           onPageChange(currentPage - 1);
         },
-        title: "Previous results"
+        title: translatedLabels.paginator.previousResultsTitle
       }
     ),
     showGoToPage ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(PageToSelectContainer, { children: [
@@ -9227,7 +9230,7 @@ var DxcTextInput = (0, import_react49.forwardRef)(
               Popover3.Content,
               {
                 sideOffset: 5,
-                style: { zIndex: "2147483647" },
+                style: { zIndex: "320" },
                 onOpenAutoFocus: (event) => {
                   event.preventDefault();
                 },
@@ -9630,7 +9633,7 @@ var HelperText3 = import_styled_components44.default.span`
   margin-bottom: 0.25rem;
 `;
 var StyledPopoverContent = (0, import_styled_components44.default)(Popover4.Content)`
-  z-index: 2147483647;
+  z-index: 300;
   &:focus-visible {
     outline: none;
   }
@@ -9654,7 +9657,7 @@ var DialogContainer = import_styled_components45.default.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: 420;
 `;
 var Overlay3 = import_styled_components45.default.div`
   position: fixed;
@@ -9671,7 +9674,6 @@ var Dialog = import_styled_components45.default.div`
   background-color: ${(props) => props.theme.backgroundColor};
   ${(props) => props.closable && "min-height: 72px;"}
   box-shadow: ${(props) => `${props.theme.boxShadowOffsetX} ${props.theme.boxShadowOffsetY} ${props.theme.boxShadowBlur} ${props.theme.boxShadowColor}`};
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;
@@ -10925,7 +10927,7 @@ var Overlay4 = import_styled_components58.default.div`
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 1300;` : `background-color: transparent;`}
+      z-index: 410;` : `background-color: transparent;`}
   display: flex;
   flex-wrap: wrap;
   min-width: 100px;
@@ -10941,7 +10943,7 @@ var MainContainer4 = import_styled_components58.default.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  z-index: ${(props) => props.overlay ? "100" : "0"};
+  z-index: ${(props) => props.overlay ? "1" : "0"};
 `;
 var ProgressBarLabel = import_styled_components58.default.div`
   font-family: ${(props) => props.theme.labelFontFamily};
@@ -11620,7 +11622,7 @@ var DxcResultsetTable = ({
               mode,
               "aria-label": column.isSortable ? "Sort column" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: column.displayValue }),
+                column.displayValue,
                 column.isSortable && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SortIcon, { children: sortColumnIndex === index ? sortOrder === "ascending" ? Icons_default2.arrowUp : Icons_default2.arrowDown : Icons_default2.bothArrows })
               ]
             }
@@ -11659,7 +11661,7 @@ var HeaderContainer3 = import_styled_components62.default.span`
   align-items: center;
   justify-content: ${(props) => props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start"};
   gap: ${coreTokens_default.spacing_8};
-  width: fit-content;
+  width: auto;
   border: 1px solid transparent;
   border-radius: 2px;
   cursor: ${(props) => props.isSortable ? "pointer" : "default"};
@@ -12035,7 +12037,7 @@ var DXCSpinner = import_styled_components64.default.div`
   left: ${(props) => props.mode === "overlay" ? 0 : ""};
   justify-content: ${(props) => props.mode === "overlay" ? "center" : ""};
   align-items: ${(props) => props.mode === "overlay" ? "center" : ""};
-  z-index: ${(props) => props.mode === "overlay" ? 1300 : ""};
+  z-index: ${(props) => props.mode === "overlay" ? 400 : ""};
 
   margin: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px" : ""};
   margin-top: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : "" : ""};
@@ -14084,7 +14086,7 @@ var ToastsQueue = import_styled_components74.default.section`
   position: fixed;
   bottom: 0;
   right: 0;
-  z-index: 2147483647;
+  z-index: 500;
   display: flex;
   flex-direction: column;
   align-items: flex-end;

package/dist/index.mjs

@@ -731,13 +731,13 @@ var componentTokens = {
     logoHeight: "40px",
     logoWidth: "auto",
     menuBackgroundColor: coreTokens_default.color_white,
-    menuZindex: "2000",
+    menuZindex: "210",
     menuTabletWidth: "60vw",
     menuMobileWidth: "100vw",
     minHeight: "64px",
     overlayColor: coreTokens_default.color_grey_800_a,
     overlayOpacity: "0.7",
-    overlayZindex: "1600",
+    overlayZindex: "200",
     paddingTop: coreTokens_default.spacing_0,
     paddingBottom: coreTokens_default.spacing_0,
     paddingRight: coreTokens_default.spacing_24,
@@ -1557,7 +1557,11 @@ var defaultTranslatedComponentLabels = {
     itemsPerPageText: "Items per page: ",
     minToMaxOfText: (minNumberOfItems, maxNumberOfItems, totalItems) => `${minNumberOfItems} to ${maxNumberOfItems} of ${totalItems}`,
     goToPageText: "Go to page:",
-    pageOfText: (pageNumber, totalPagesNumber) => `Page: ${pageNumber} of ${totalPagesNumber}`
+    pageOfText: (pageNumber, totalPagesNumber) => `Page: ${pageNumber} of ${totalPagesNumber}`,
+    firstResultsTitle: "First results",
+    previousResultsTitle: "Previous results",
+    nextResultsTitle: "Next results",
+    lastResultsTitle: "Last results"
   },
   passwordInput: {
     inputShowPasswordTitle: "Show password",
@@ -2369,7 +2373,7 @@ var TooltipTriggerContainer = styled6.div`
   display: inline-flex;
 `;
 var StyledTooltipContent = styled6(Content)`
-  z-index: 2147483647;
+  z-index: 600;
 
   animation-duration: 0.2s;
   animation-timing-function: ease-out;
@@ -3100,7 +3104,7 @@ var Modal = styled10.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: 430;
 `;
 var Overlay = styled10.div`
   position: fixed;
@@ -3113,7 +3117,6 @@ var ModalAlertContainer = styled10.div`
   box-sizing: border-box;
   max-width: 80%;
   min-width: 696px;
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;
@@ -4052,7 +4055,7 @@ var DxcDropdown = ({
             visualFocusIndex,
             menuItemOnClick: handleMenuItemOnClick,
             onKeyDown: handleMenuOnKeyDown,
-            styles: { width, zIndex: "2147483647" },
+            styles: { width, zIndex: "310" },
             ref: menuRef
           }
         ) }) })
@@ -4797,7 +4800,7 @@ var HeaderContainer2 = styled19.div`
   top: 0;
   left: 0;
   right: 0;
-  z-index: 3;
+  z-index: 100;
 `;
 var VisibilityToggle = styled19.div`
   position: fixed;
@@ -4811,7 +4814,7 @@ var VisibilityToggle = styled19.div`
   width: 100%;
   background-color: #f2f2f2;
   user-select: none;
-  z-index: 2;
+  z-index: 1;
 `;
 var HamburgerTrigger2 = styled19.button`
   display: flex;
@@ -4852,7 +4855,7 @@ var SidenavContainer2 = styled19.div`
   top: 64px;
   display: flex;
   height: calc(100vh - 64px);
-  z-index: 1;
+  z-index: 110;
 
   @media (max-width: ${responsiveSizes.large}rem) {
     position: absolute;
@@ -7057,7 +7060,7 @@ var DxcSelect = forwardRef5(
           Popover2.Content,
           {
             sideOffset: 4,
-            style: { zIndex: "2147483647" },
+            style: { zIndex: "310" },
             onOpenAutoFocus: (event) => {
               event.preventDefault();
             },
@@ -7338,7 +7341,7 @@ var DxcPaginator = ({
         onClick: () => {
           onPageChange(1);
         },
-        title: "First results"
+        title: translatedLabels.paginator.firstResultsTitle
       }
     ),
     onPageChange && /* @__PURE__ */ jsx42(
@@ -7351,7 +7354,7 @@ var DxcPaginator = ({
         onClick: () => {
           onPageChange(currentPage - 1);
         },
-        title: "Previous results"
+        title: translatedLabels.paginator.previousResultsTitle
       }
     ),
     showGoToPage ? /* @__PURE__ */ jsxs28(PageToSelectContainer, { children: [
@@ -9162,7 +9165,7 @@ var DxcTextInput = forwardRef6(
               Popover3.Content,
               {
                 sideOffset: 5,
-                style: { zIndex: "2147483647" },
+                style: { zIndex: "320" },
                 onOpenAutoFocus: (event) => {
                   event.preventDefault();
                 },
@@ -9565,7 +9568,7 @@ var HelperText3 = styled44.span`
   margin-bottom: 0.25rem;
 `;
 var StyledPopoverContent = styled44(Popover4.Content)`
-  z-index: 2147483647;
+  z-index: 300;
   &:focus-visible {
     outline: none;
   }
@@ -9589,7 +9592,7 @@ var DialogContainer = styled45.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: 420;
 `;
 var Overlay3 = styled45.div`
   position: fixed;
@@ -9606,7 +9609,6 @@ var Dialog = styled45.div`
   background-color: ${(props) => props.theme.backgroundColor};
   ${(props) => props.closable && "min-height: 72px;"}
   box-shadow: ${(props) => `${props.theme.boxShadowOffsetX} ${props.theme.boxShadowOffsetY} ${props.theme.boxShadowBlur} ${props.theme.boxShadowColor}`};
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;
@@ -10860,7 +10862,7 @@ var Overlay4 = styled58.div`
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 1300;` : `background-color: transparent;`}
+      z-index: 410;` : `background-color: transparent;`}
   display: flex;
   flex-wrap: wrap;
   min-width: 100px;
@@ -10876,7 +10878,7 @@ var MainContainer4 = styled58.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  z-index: ${(props) => props.overlay ? "100" : "0"};
+  z-index: ${(props) => props.overlay ? "1" : "0"};
 `;
 var ProgressBarLabel = styled58.div`
   font-family: ${(props) => props.theme.labelFontFamily};
@@ -11555,7 +11557,7 @@ var DxcResultsetTable = ({
               mode,
               "aria-label": column.isSortable ? "Sort column" : void 0,
               children: [
-                /* @__PURE__ */ jsx70("span", { children: column.displayValue }),
+                column.displayValue,
                 column.isSortable && /* @__PURE__ */ jsx70(SortIcon, { children: sortColumnIndex === index ? sortOrder === "ascending" ? Icons_default2.arrowUp : Icons_default2.arrowDown : Icons_default2.bothArrows })
               ]
             }
@@ -11594,7 +11596,7 @@ var HeaderContainer3 = styled62.span`
   align-items: center;
   justify-content: ${(props) => props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start"};
   gap: ${coreTokens_default.spacing_8};
-  width: fit-content;
+  width: auto;
   border: 1px solid transparent;
   border-radius: 2px;
   cursor: ${(props) => props.isSortable ? "pointer" : "default"};
@@ -11970,7 +11972,7 @@ var DXCSpinner = styled64.div`
   left: ${(props) => props.mode === "overlay" ? 0 : ""};
   justify-content: ${(props) => props.mode === "overlay" ? "center" : ""};
   align-items: ${(props) => props.mode === "overlay" ? "center" : ""};
-  z-index: ${(props) => props.mode === "overlay" ? 1300 : ""};
+  z-index: ${(props) => props.mode === "overlay" ? 400 : ""};
 
   margin: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px" : ""};
   margin-top: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : "" : ""};
@@ -14028,7 +14030,7 @@ var ToastsQueue = styled74.section`
   position: fixed;
   bottom: 0;
   right: 0;
-  z-index: 2147483647;
+  z-index: 500;
   display: flex;
   flex-direction: column;
   align-items: flex-end;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "15.1.1",
+  "version": "15.1.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dxc-technology/halstack-react.git"