@dxc-technology/halstack-react 0.0.0-83f5e92 → 0.0.0-848db6e

package/number-input/NumberInput.js

@@ -7,32 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
 var _NumberInputContext = _interopRequireDefault(require("./NumberInputContext"));
 
-var _variables = require("../common/variables.js");
-
 var _templateObject;
 
 var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
       _ref$disabled = _ref.disabled,
@@ -45,11 +37,11 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
       suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
       min = _ref.min,
       max = _ref.max,
-      step = _ref.step,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,
@@ -85,44 +77,7 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
   })));
 });
 
-var sizes = {
-  small: "240px",
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%"
-};
-
 var NumberInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  // Chrome, Safari, Edge, Opera\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  // Firefox\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n"])));
 
-DxcNumberInput.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  helperText: _propTypes["default"].string,
-  placeholder: _propTypes["default"].string,
-  error: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  optional: _propTypes["default"].bool,
-  prefix: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({
-    type: _propTypes["default"].oneOf(["svg"])
-  })]),
-  suffix: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({
-    type: _propTypes["default"].oneOf(["svg"])
-  })]),
-  min: _propTypes["default"].number,
-  max: _propTypes["default"].number,
-  step: _propTypes["default"].number,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  autocomplete: _propTypes["default"].string,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  tabIndex: _propTypes["default"].number
-};
 var _default = DxcNumberInput;
 exports["default"] = _default;

package/number-input/NumberInputContext.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import NumberInputContextPropsType from "./numberInputContextTypes";
+declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
+export default NumberInputContext;

package/number-input/NumberInputContext.js

@@ -9,8 +9,11 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-/* eslint-disable prefer-template */
-var NumberInputContext = /*#__PURE__*/_react["default"].createContext();
+var defaultState = {
+  stepNumber: 1
+};
+
+var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
 
 var _default = NumberInputContext;
 exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -0,0 +1,19 @@
+declare type Props = {
+    /**
+     * Type of the input.
+     */
+    typeNumber?: string;
+    /**
+     * Minimum value allowed by the number input.
+     */
+    minNumber?: number;
+    /**
+     * Maximum value allowed by the number input.
+     */
+    maxNumber?: number;
+    /**
+     * The step interval to use when using the up and down arrows to adjust the value.
+     */
+    stepNumber?: number;
+};
+export default Props;

package/number-input/numberInputContextTypes.js

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

package/number-input/types.d.ts

@@ -0,0 +1,117 @@
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Props = {
+    /**
+     * Text to be placed above the number.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * Helper text to be placed above the number.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the number.
+     */
+    placeholder?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the number will be optional, showing '(Optional)'
+     * next to the label. Otherwise, the field will be considered required
+     * and an error will be passed as a parameter to the OnBlur and onChange
+     * functions when it has not been filled.
+     */
+    optional?: boolean;
+    /**
+     * Prefix to be placed before the number value.
+     */
+    prefix?: string;
+    /**
+     * Suffix to be placed after the number value.
+     */
+    suffix?: string;
+    /**
+     * Minimum value allowed by the number input. If the typed value by the user is
+     * lower than min, the onBlur and onChange functions will be called with
+     * the current value and an internal error informing that the current
+     * value is not correct. If a valid state is reached, the error parameter
+     * will be null in both events.
+     */
+    min?: number;
+    /**
+     * Maximum value allowed by the number input. If the typed value by the user
+     * surpasses max, the onBlur and onChange functions will be called with
+     * the current value and an internal error informing that the current
+     * value is not correct. If a valid state is reached, the error parameter
+     * will be null in both events.
+     */
+    max?: number;
+    /**
+     * The step interval to use when using the up and down arrows to adjust the value.
+     */
+    step?: number;
+    /**
+     * This function will be called when the user types within the input
+     * element of the component. An object including the current value and
+     * the error (if the value entered is not valid) will be passed to this
+     * function. If there is no error, error will be null.
+     */
+    onChange?: (val: {
+        value: string;
+        error: string | null;
+    }) => void;
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the input value and the error (if the value
+     * entered is not valid) will be passed to this function. If there is no error,
+     * error will be null.
+     */
+    onBlur?: (val: {
+        value: string;
+        error: string | null;
+    }) => void;
+    /**
+     * If it is defined, the component will change its appearance, showing
+     * the error below the input component. If it is not defined, the error
+     * messages will be managed internally, but never displayed on its own.
+     */
+    error?: string;
+    /**
+     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
+     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
+     */
+    autocomplete?: string;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
+export default Props;

package/number-input/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-83f5e92",
+  "version": "0.0.0-848db6e",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",

package/paginator/Paginator.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
@@ -23,7 +23,7 @@ var _Select = _interopRequireDefault(require("../select/Select"));
 
 var _Icons = require("./Icons");
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
@@ -67,9 +67,6 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: itemsPerPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
   }))), /*#__PURE__*/_react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",
@@ -109,9 +106,6 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: currentPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
   }))) || /*#__PURE__*/_react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",

package/password-input/PasswordInput.js

@@ -26,21 +26,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$clearable = _ref.clearable,
       clearable = _ref$clearable === void 0 ? false : _ref$clearable,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       pattern = _ref.pattern,
-      length = _ref.length,
+      minLength = _ref.minLength,
+      maxLength = _ref.maxLength,
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,
@@ -59,25 +57,27 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   var setInputType = function setInputType(type) {
     var _inputRef$current, _inputRef$current$chi;
 
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[2]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[label && helperText ? 2 : label || helperText ? 1 : 0]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
   };
 
   var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel) {
+    var inputIndex = label && helperText ? 2 : label || helperText ? 1 : 0;
+
     if (error && clearable && value) {
       var _inputRef$current2, _inputRef$current2$ch, _inputRef$current2$ch2, _inputRef$current3, _inputRef$current3$ch, _inputRef$current3$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[2]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[2]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[inputIndex]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[inputIndex]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
     } else if (error || clearable && !value) {
       var _inputRef$current4, _inputRef$current4$ch, _inputRef$current4$ch2, _inputRef$current5, _inputRef$current5$ch, _inputRef$current5$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[2]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[2]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[inputIndex]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[inputIndex]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
     } else {
       var _inputRef$current6, _inputRef$current6$ch, _inputRef$current6$ch2, _inputRef$current7, _inputRef$current7$ch, _inputRef$current7$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[2]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[2]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[inputIndex]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[inputIndex]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
     }
   };
 
@@ -86,14 +86,14 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   };
 
   (0, _react.useEffect)(function () {
-    setAriaAttributes(false, "Show");
+    setAriaAttributes(false, "Show password");
 
     if (isPasswordVisible) {
       setInputType("text");
-      setAriaAttributes(true, "Hide");
+      setAriaAttributes(true, "Hide password");
     } else {
       setInputType("password");
-      setAriaAttributes(false, "Show");
+      setAriaAttributes(false, "Show password");
     }
   }, [isPasswordVisible]);
 
@@ -150,7 +150,8 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     margin: margin,
     size: size,
     pattern: pattern,
-    length: length,
+    minLength: minLength,
+    maxLength: maxLength,
     autocomplete: autocomplete,
     tabIndex: tabIndex
   }));

package/password-input/types.d.ts

@@ -37,10 +37,10 @@ declare type Props = {
         error: string | null;
     }) => void;
     /**
-    * This function will be called when the input element loses the focus.
-    * An object including the input value and the error (if the value entered is
-    * not valid) will be passed to this function. If there is no error, error will be null.
-    */
+     * This function will be called when the input element loses the focus.
+     * An object including the input value and the error (if the value entered is
+     * not valid) will be passed to this function. If there is no error, error will be null.
+     */
     onBlur?: (val: {
         value: string;
         error: string | null;
@@ -62,18 +62,25 @@ declare type Props = {
      */
     pattern?: string;
     /**
-     * Specifies the minimun and maximum length allowed by the password input.
+     * Specifies the minimun length allowed by the password input.
+     * This will be checked both when the input element loses the
+     * focus and while typing within it. If the string entered does not
+     * comply the minimum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will be null.
+     */
+    minLength?: number;
+    /**
+     * Specifies the maximum length allowed by the password input.
      * This will be checked both when the input element loses the
      * focus and while typing within it. If the string entered does not
-     * comply the length, the onBlur and onChange functions will be called
+     * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
      * reached, the error parameter of both events will be null.
      */
-    length?: {
-        min?: number;
-        max?: number;
-    };
+    maxLength?: number;
     /**
      * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
      * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...

package/progress-bar/ProgressBar.js

@@ -21,9 +21,9 @@ var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearPr
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 

package/radio/Radio.js

@@ -27,9 +27,9 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2;
 

package/radio/types.d.ts

@@ -42,8 +42,8 @@ declare type Props = {
      */
     onClick?: (val: boolean) => void;
     /**
-     * Size of the margin to be applied to the component. You can pass an object with 'top',
-     * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
     margin?: Space | Margin;
     /**

package/resultsetTable/ResultsetTable.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import ResultsetTablePropsType from "./types";
+declare const DxcResultsetTable: ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
+export default DxcResultsetTable;

package/resultsetTable/ResultsetTable.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -21,15 +19,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
 var _Table = _interopRequireDefault(require("../table/Table"));
 
 var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
@@ -117,6 +113,8 @@ var BothArrows = function BothArrows() {
 var DxcResultsetTable = function DxcResultsetTable(_ref) {
   var columns = _ref.columns,
       rows = _ref.rows,
+      _ref$showGoToPage = _ref.showGoToPage,
+      showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
       _ref$itemsPerPage = _ref.itemsPerPage,
       itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
       itemsPerPageOptions = _ref.itemsPerPageOptions,
@@ -205,7 +203,7 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
     itemsPerPageOptions: itemsPerPageOptions,
     itemsPerPageFunction: itemsPerPageFunction,
     currentPage: page,
-    showGoToPage: true,
+    showGoToPage: showGoToPage,
     onPageChange: goToPage,
     tabIndex: tabIndex
   }))));
@@ -249,26 +247,5 @@ var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObjec
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-DxcResultsetTable.propTypes = {
-  rows: _propTypes["default"].array,
-  columns: _propTypes["default"].array,
-  itemsPerPage: _propTypes["default"].number,
-  itemsPerPageOptions: _propTypes["default"].arrayOf(_propTypes["default"].number),
-  itemsPerPageFunction: _propTypes["default"].func,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  tabIndex: _propTypes["default"].number
-};
-DxcResultsetTable.defaultProps = {
-  rows: [],
-  columns: [],
-  itemsPerPage: 5,
-  itemsPerPageOptions: null,
-  itemsPerPageFunction: null
-};
 var _default = DxcResultsetTable;
 exports["default"] = _default;

package/resultsetTable/types.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Column = {
+    /**
+     * Column display value.
+     */
+    displayValue: React.ReactNode;
+    /**
+     * Boolean value to indicate whether the column is sortable or not.
+     */
+    isSortable?: boolean;
+};
+declare type Row = {
+    /**
+     * Value to be displayed in the cell.
+     */
+    displayValue: React.ReactNode;
+    /**
+     * Value to be used when sorting the table by that
+     * column. If not indicated displayValue will be used for sorting.
+     */
+    sortValue?: string;
+};
+declare type Props = {
+    /**
+     * An array of objects representing the columns of the table.
+     */
+    columns: Column[];
+    /**
+     * An array of objects representing the rows of the table, you will have
+     * as many objects as columns in the table.
+     */
+    rows: Row[];
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: boolean;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: (newValue: number) => void;
+    /**
+     * Size of the margin to be applied to the component. You can pass an object with 'top',
+     * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex attribute given to the sortable icon.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/resultsetTable/types.js

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