@dxc-technology/halstack-react 0.0.0-7c194f8 → 0.0.0-7c2b794

package/header/types.d.ts

@@ -6,13 +6,13 @@ type Props = {
      */
     underlined?: boolean;
     /**
-     * Content showed in the header. Take into account that the component applies styles
+     * Content shown in the header. Take into account that the component applies styles
      * for the first child in the content, so we recommend the use of React.Fragment
      * to be applied correctly. Otherwise, the styles can be modified.
      */
     content?: React.ReactNode;
     /**
-     * Content showed in responsive version. It receives the close menu handler that can
+     * Content shown in responsive version. It receives the close menu handler that can
      * be used to add that functionality when a element is clicked.
      */
     responsiveContent?: (closeHandler: () => void) => React.ReactNode;

package/icon/Icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconPropsType from "./types";
+declare const DxcIcon: ({ icon }: IconPropsType) => JSX.Element;
+export default DxcIcon;

package/icon/Icon.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var DxcIcon = function DxcIcon(_ref) {
+  var icon = _ref.icon;
+  var filled = false;
+  var iconName = icon;
+  if (icon.startsWith("filled_")) {
+    filled = true;
+    iconName = icon.replace(/filled_/g, "");
+  }
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    role: "img",
+    "aria-label": icon,
+    filled: filled,
+    icon: iconName,
+    "aria-hidden": "true"
+  });
+};
+var IconContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Material Symbols Outlined\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: \"liga\";\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  -moz-osx-font-smoothing: grayscale;\n  font-variation-settings: ", ";\n  ::before {\n    content: \"", "\";\n  }\n"])), function (props) {
+  return props.filled ? "'FILL' 1" : "'FILL' 0";
+}, function (props) {
+  return props.icon;
+});
+var _default = exports["default"] = DxcIcon;

package/icon/Icon.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import DxcIcon from "./Icon";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { DxcTypography } from "../main";
+
+export default {
+  title: "Icon",
+  component: DxcIcon,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Icon component" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcIcon icon="home" />
+      <DxcIcon icon="filled_home" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <DxcTypography as="p" color="#b182e3">
+        <DxcIcon icon="home" />
+        <DxcIcon icon="filled_home" />
+      </DxcTypography>
+    </ExampleContainer>
+  </>
+);

package/icon/types.d.ts

@@ -0,0 +1,4 @@
+type Props = {
+    icon: string;
+};
+export default Props;

package/icon/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/image/Image.stories.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import DxcImage from "./Image";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { DxcFlex, DxcInset, DxcParagraph } from "../main";
+import DxcFlex from "../flex/Flex";
+import DxcInset from "../inset/Inset";
+import DxcParagraph from "../paragraph/Paragraph";
 
 export default {
   title: "Image",

package/layout/ApplicationLayout.d.ts

@@ -7,7 +7,7 @@ declare const DxcApplicationLayout: {
         Dropdown: (props: import("../dropdown/types").default) => React.JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
+    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: import("../footer/types").default) => JSX.Element;
     SideNav: {
         ({ title, children }: import("../sidenav/types").default): JSX.Element;
         Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;

package/layout/ApplicationLayout.js

@@ -15,7 +15,7 @@ var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _variables = require("../common/variables");
 var _Icons = _interopRequireDefault(require("./Icons"));
-var _SidenavContext = require("./SidenavContext");
+var _SidenavContext = require("../sidenav/SidenavContext");
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

package/main.d.ts

@@ -22,7 +22,6 @@ import DxcChip from "./chip/Chip";
 import DxcApplicationLayout from "./layout/ApplicationLayout";
 import DxcToggleGroup from "./toggle-group/ToggleGroup";
 import DxcAccordionGroup from "./accordion-group/AccordionGroup";
-import DxcBadge from "./badge/Badge";
 import DxcTextInput from "./text-input/TextInput";
 import DxcPasswordInput from "./password-input/PasswordInput";
 import DxcDateInput from "./date-input/DateInput";
@@ -42,5 +41,9 @@ import DxcBulletedList from "./bulleted-list/BulletedList";
 import DxcGrid from "./grid/Grid";
 import DxcImage from "./image/Image";
 import DxcContainer from "./container/Container";
+import DxcBadge from "./badge/Badge";
+import DxcStatusLight from "./status-light/StatusLight";
+import DxcContextualMenu from "./contextual-menu/ContextualMenu";
+import DxcDivider from "./divider/Divider";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
-export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, };
+export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, DxcBadge, DxcStatusLight, DxcContextualMenu, DxcDivider, };

package/main.js

@@ -83,6 +83,12 @@ Object.defineProperty(exports, "DxcContainer", {
     return _Container["default"];
   }
 });
+Object.defineProperty(exports, "DxcContextualMenu", {
+  enumerable: true,
+  get: function get() {
+    return _ContextualMenu["default"];
+  }
+});
 Object.defineProperty(exports, "DxcDateInput", {
   enumerable: true,
   get: function get() {
@@ -95,6 +101,12 @@ Object.defineProperty(exports, "DxcDialog", {
     return _Dialog["default"];
   }
 });
+Object.defineProperty(exports, "DxcDivider", {
+  enumerable: true,
+  get: function get() {
+    return _Divider["default"];
+  }
+});
 Object.defineProperty(exports, "DxcDropdown", {
   enumerable: true,
   get: function get() {
@@ -215,6 +227,12 @@ Object.defineProperty(exports, "DxcSpinner", {
     return _Spinner["default"];
   }
 });
+Object.defineProperty(exports, "DxcStatusLight", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLight["default"];
+  }
+});
 Object.defineProperty(exports, "DxcSwitch", {
   enumerable: true,
   get: function get() {
@@ -311,7 +329,6 @@ var _Chip = _interopRequireDefault(require("./chip/Chip"));
 var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
 var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
 var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
-var _Badge = _interopRequireDefault(require("./badge/Badge"));
 var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
 var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
 var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
@@ -331,6 +348,10 @@ var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList
 var _Grid = _interopRequireDefault(require("./grid/Grid"));
 var _Image = _interopRequireDefault(require("./image/Image"));
 var _Container = _interopRequireDefault(require("./container/Container"));
+var _Badge = _interopRequireDefault(require("./badge/Badge"));
+var _StatusLight = _interopRequireDefault(require("./status-light/StatusLight"));
+var _ContextualMenu = _interopRequireDefault(require("./contextual-menu/ContextualMenu"));
+var _Divider = _interopRequireDefault(require("./divider/Divider"));
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/nav-tabs/NavTabs.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import NavTabsPropsType, { NavTabsContextProps } from "./types";
-export declare const NavTabsContext: React.Context<NavTabsContextProps>;
+import NavTabsPropsType from "./types";
 declare const DxcNavTabs: {
     ({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;

package/nav-tabs/NavTabs.js

@@ -5,17 +5,17 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NavTabsContext = void 0;
+exports["default"] = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Tab = _interopRequireDefault(require("./Tab"));
-var _templateObject;
+var _NavTabsContext = require("./NavTabsContext");
+var _templateObject, _templateObject2;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var NavTabsContext = exports.NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
 var getPropInChild = function getPropInChild(child, propName) {
   return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
 };
@@ -81,10 +81,13 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     onKeyDown: handleOnKeyDown,
     role: "tablist",
     "aria-label": "Navigation tabs"
-  }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
+  }, /*#__PURE__*/_react["default"].createElement(_NavTabsContext.NavTabsContext.Provider, {
     value: contextValue
-  }, children)));
+  }, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
 };
+var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background-color: ", ";\n"])), function (props) {
+  return props.theme.dividerColor;
+});
 DxcNavTabs.Tab = _Tab["default"];
-var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
+var NavTabsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n"])));
 var _default = exports["default"] = DxcNavTabs;

package/nav-tabs/NavTabs.stories.tsx

@@ -91,7 +91,9 @@ export const Chromatic = () => (
         <DxcNavTabs.Tab href="#" notificationNumber={120}>
           Tab 3
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        <DxcNavTabs.Tab href="#" notificationNumber={12}>
+          Tab 4
+        </DxcNavTabs.Tab>
       </DxcNavTabs>
     </ExampleContainer>
     <ExampleContainer>
@@ -140,7 +142,7 @@ export const Chromatic = () => (
         <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={120}>
           Tab 3
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={largeIcon}>
+        <DxcNavTabs.Tab href="#" icon={largeIcon} notificationNumber={12}>
           Tab 4
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -157,7 +159,7 @@ export const Chromatic = () => (
         <DxcNavTabs.Tab href="#" icon={largeIcon} notificationNumber={120}>
           Tab 3
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG}>
+        <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={12}>
           Tab 4
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -264,7 +266,7 @@ export const Chromatic = () => (
           <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={120}>
             Tab 3
           </DxcNavTabs.Tab>
-          <DxcNavTabs.Tab href="#" icon={iconSVG}>
+          <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={12}>
             Tab 4
           </DxcNavTabs.Tab>
         </DxcNavTabs>

package/nav-tabs/NavTabs.test.js

@@ -49,9 +49,10 @@ describe("Tabs component tests", function () {
         icon: "/testIcon.png"
       }, "Tab 3"))),
       getByText = _render2.getByText,
-      getByRole = _render2.getByRole;
+      getByRole = _render2.getByRole,
+      queryByText = _render2.queryByText;
     expect(getByText("10")).toBeTruthy();
-    expect(getByText("20")).toBeTruthy();
+    expect(queryByText("20")).toBeFalsy();
     expect(getByText("+99")).toBeTruthy();
     expect(getByRole("img")).toBeTruthy();
   });

package/nav-tabs/NavTabsContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NavTabsContextProps } from "./types";
+export declare const NavTabsContext: import("react").Context<NavTabsContextProps>;

package/nav-tabs/NavTabsContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavTabsContext = void 0;
+var _react = require("react");
+var NavTabsContext = exports.NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);

package/nav-tabs/Tab.js

@@ -13,9 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Badge = _interopRequireDefault(require("../badge/Badge"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
-var _NavTabs = require("./NavTabs");
 var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _NavTabsContext = require("./NavTabsContext");
 var _templateObject, _templateObject2, _templateObject3;
 var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -33,7 +33,7 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var tabRef = (0, _react.useRef)();
   var colorsTheme = (0, _useTheme["default"])();
-  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
+  var _useContext = (0, _react.useContext)(_NavTabsContext.NavTabsContext),
     iconPosition = _useContext.iconPosition,
     tabIndex = _useContext.tabIndex,
     focusedLabel = _useContext.focusedLabel;
@@ -86,13 +86,14 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     textAlign: "center",
     letterSpacing: "0.025em",
     lineHeight: "1.715em"
-  }, children), notificationNumber && /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
-    notificationText: typeof notificationNumber === "number" && notificationNumber > 99 ? "+99" : notificationNumber,
-    disabled: disabled
+  }, children), notificationNumber && !disabled && /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    mode: "notification",
+    size: "small",
+    label: typeof notificationNumber === "number" && notificationNumber
   }))));
 });
-var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n\n  svg {\n    color: ", ";\n  }\n  &[aria-selected=\"true\"] {\n    svg {\n      color: ", ";\n    }\n  }\n  &[aria-disabled=\"true\"] {\n    svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
-  return props.active ? props.theme.selectedUnderlineColor : props.theme.dividerColor;
+var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n  z-index: 1;\n  svg {\n    color: ", ";\n  }\n  &[aria-selected=\"true\"] {\n    svg {\n      color: ", ";\n    }\n  }\n  &[aria-disabled=\"true\"] {\n    svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.active ? props.theme.selectedUnderlineColor : 'transparent';
 }, function (props) {
   return props.theme.unselectedIconColor;
 }, function (props) {

package/number-input/NumberInput.d.ts

@@ -1,11 +1,4 @@
 import React from "react";
 import NumberInputPropsType from "./types";
-type NumberInputContextProps = {
-    typeNumber?: string;
-    minNumber?: number;
-    maxNumber?: number;
-    stepNumber?: number;
-};
-export declare const NumberInputContext: React.Context<NumberInputContextProps>;
 declare const DxcNumberInput: React.ForwardRefExoticComponent<NumberInputPropsType & React.RefAttributes<HTMLDivElement>>;
 export default DxcNumberInput;

package/number-input/NumberInput.js

@@ -1,16 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NumberInputContext = void 0;
+exports["default"] = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
+var _NumberInputContext = require("./NumberInputContext");
 var _templateObject;
-var NumberInputContext = exports.NumberInputContext = /*#__PURE__*/_react["default"].createContext(null);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
     name = _ref.name,
@@ -34,14 +37,30 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
     margin = _ref.margin,
     size = _ref.size,
     tabIndex = _ref.tabIndex;
-  return /*#__PURE__*/_react["default"].createElement(NumberInputContext.Provider, {
+  var numberInputRef = _react["default"].useRef(null);
+  (0, _react.useEffect)(function () {
+    var _numberInputRef$curre;
+    var input = (_numberInputRef$curre = numberInputRef.current) === null || _numberInputRef$curre === void 0 ? void 0 : _numberInputRef$curre.getElementsByTagName("input")[0];
+    var preventDefault = function preventDefault(event) {
+      event.preventDefault();
+    };
+    input === null || input === void 0 ? void 0 : input.addEventListener("wheel", preventDefault, {
+      passive: false
+    });
+    return function () {
+      input === null || input === void 0 ? void 0 : input.removeEventListener("wheel", preventDefault);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_NumberInputContext.NumberInputContext.Provider, {
     value: {
       typeNumber: "number",
       minNumber: min,
       maxNumber: max,
       stepNumber: step
     }
-  }, /*#__PURE__*/_react["default"].createElement(NumberInputContainer, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(NumberInputContainer, {
+    ref: numberInputRef
+  }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
     defaultValue: defaultValue,

package/number-input/NumberInput.test.js

@@ -769,12 +769,171 @@ describe("Number input component tests", function () {
     });
     expect(number.value).toBe("5");
   });
-  test("Number has correct accessibility attributes", function () {
+  test("Value is unchanged when using the scroll wheel in mouse in a disabled input", function () {
     var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        disabled: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render30.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Value is unchanged when using the arrows in keyboard in a disabled input", function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        disabled: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render31.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Value is unchanged when using the scroll wheel in mouse in a read-only input", function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        readOnly: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render32.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Value is unchanged when using the arrows in keyboard in a read-only input", function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        readOnly: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render33.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with min, max and step using the scroll wheel in mouse", function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5
+      })),
+      getByLabelText = _render34.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("5");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("15");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("20");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("20");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("15");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("5");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("5");
+  });
+  test("Number has correct accessibility attributes", function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
         label: "Number input label"
       })),
-      getByLabelText = _render30.getByLabelText,
-      getAllByRole = _render30.getAllByRole;
+      getByLabelText = _render35.getByLabelText,
+      getAllByRole = _render35.getAllByRole;
     var number = getByLabelText("Number input label");
     expect(number.getAttribute("type")).toBe("number");
     expect(number.getAttribute("aria-autocomplete")).toBeNull();
@@ -786,7 +945,7 @@ describe("Number input component tests", function () {
     expect(increment.getAttribute("aria-label")).toBe("Increment value");
   });
   test("Number input submits correct values inside a form and actions don't trigger the submit event", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
-    var handlerOnSubmit, _render31, getByText, getAllByRole, less, more, submit;
+    var handlerOnSubmit, _render36, getByText, getAllByRole, less, more, submit;
     return _regenerator["default"].wrap(function _callee18$(_context18) {
       while (1) switch (_context18.prev = _context18.next) {
         case 0:
@@ -798,14 +957,14 @@ describe("Number input component tests", function () {
               data: "0"
             });
           });
-          _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+          _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
             onSubmit: handlerOnSubmit
           }, /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
             label: "Number input label",
             name: "data"
           }), /*#__PURE__*/_react["default"].createElement("button", {
             type: "submit"
-          }, "Submit"))), getByText = _render31.getByText, getAllByRole = _render31.getAllByRole;
+          }, "Submit"))), getByText = _render36.getByText, getAllByRole = _render36.getAllByRole;
           less = getAllByRole("button")[0];
           more = getAllByRole("button")[1];
           submit = getByText("Submit");

package/number-input/NumberInputContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NumberInputContextProps } from "./types";
+export declare const NumberInputContext: import("react").Context<NumberInputContextProps>;