@dxc-technology/halstack-react 0.0.0-2c3a5e1 → 0.0.0-2d5bb6f

package/number-input/NumberInput.test.js

@@ -0,0 +1,406 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
+describe("Number input component tests", function () {
+  test("Number input renders with label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label"
+      })),
+      getByText = _render.getByText;
+    expect(getByText("Number input label")).toBeTruthy();
+  });
+  test("Number input renders with helper text", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        helperText: "Helper text"
+      })),
+      getByText = _render2.getByText;
+    expect(getByText("Helper text")).toBeTruthy();
+  });
+  test("Number input renders with placeholder", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number label",
+        placeholder: "Placeholder"
+      })),
+      getByLabelText = _render3.getByLabelText;
+    var number = getByLabelText("Number label");
+    expect(number.getAttribute("placeholder")).toBe("Placeholder");
+  });
+  test("Number input renders increment and decrement buttons", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number label"
+      })),
+      queryAllByRole = _render4.queryAllByRole;
+    expect(queryAllByRole("button").length).toBe(2);
+  });
+  test("Number input buttons' tooltip is correct", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number label"
+      })),
+      getByTitle = _render5.getByTitle;
+    expect(getByTitle("Decrement value")).toBeTruthy();
+    expect(getByTitle("Increment value")).toBeTruthy();
+  });
+  test("Number input is disabled", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number label",
+        disabled: true
+      })),
+      getByLabelText = _render6.getByLabelText;
+    var number = getByLabelText("Number label");
+    expect(number.disabled).toBeTruthy();
+  });
+  test("Number input is optional", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number label",
+        optional: true
+      })),
+      getByText = _render7.getByText;
+    expect(getByText("(Optional)")).toBeTruthy();
+  });
+  test("Number input is not optional: required field, displays error if not filled in", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        onBlur: onBlur,
+        onChange: onChange
+      })),
+      getByRole = _render8.getByRole;
+    var input = getByRole("spinbutton");
+    _userEvent["default"].type(input, "1");
+    _userEvent["default"].clear(input);
+    _react2.fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+  });
+  test("Suffix and prefix must be shown)", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        prefix: "+34",
+        suffix: "USD"
+      })),
+      getByText = _render9.getByText;
+    expect(getByText("+34")).toBeTruthy();
+    expect(getByText("USD")).toBeTruthy();
+  });
+  test("Invalid number input renders error", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        error: "Error message."
+      })),
+      getByText = _render10.getByText;
+    expect(getByText("Error message.")).toBeTruthy();
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        onChange: onChange
+      })),
+      getByLabelText = _render11.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "t");
+    expect(onChange).not.toHaveBeenCalledWith({
+      value: "t"
+    });
+    expect(number.value).toBe("");
+    _userEvent["default"].type(number, "1");
+    expect(onChange).toHaveBeenCalledWith({
+      value: "1"
+    });
+    expect(number.value).toBe("1");
+  });
+  test("Error message is shown if the value is less than the min value", function () {
+    var onChange = jest.fn(function (_ref) {
+      var value = _ref.value,
+        error = _ref.error;
+      expect(value).toBe("1");
+      expect(error).toBe("Value must be greater than or equal to 5.");
+    });
+    var onBlur = jest.fn(function (_ref2) {
+      var value = _ref2.value,
+        error = _ref2.error;
+      expect(value).toBe("1");
+      expect(error).toBe("Value must be greater than or equal to 5.");
+    });
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5,
+        onBlur: onBlur,
+        onChange: onChange
+      })),
+      getByLabelText = _render12.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.blur(number);
+  });
+  test("Cannot decrement the value if it is less than the min value", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5
+      })),
+      getByLabelText = _render13.getByLabelText,
+      getAllByRole = _render13.getAllByRole;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.blur(number);
+    expect(number.value).toBe("1");
+    var decrement = getAllByRole("button")[0];
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("1");
+  });
+  test("Increment the value when it is less than the min value", function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5
+      })),
+      getByLabelText = _render14.getByLabelText,
+      getAllByRole = _render14.getAllByRole;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.blur(number);
+    expect(number.value).toBe("1");
+    var increment = getAllByRole("button")[1];
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("5");
+  });
+  test("Error message is shown if the value is greater than the max value", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        max: 10,
+        onBlur: onBlur,
+        onChange: onChange
+      })),
+      getByLabelText = _render15.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "12");
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "12",
+      error: "Value must be less than or equal to 10."
+    });
+    _react2.fireEvent.blur(number);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "12",
+      error: "Value must be less than or equal to 10."
+    });
+  });
+  test("Cannot increment the value if it is greater than the max value", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        max: 10
+      })),
+      getByLabelText = _render16.getByLabelText,
+      getAllByRole = _render16.getAllByRole;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "12");
+    _react2.fireEvent.blur(number);
+    expect(number.value).toBe("12");
+    var decrement = getAllByRole("button")[1];
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("12");
+  });
+  test("Decrement the value when it is greater than the max value", function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        max: 10
+      })),
+      getByLabelText = _render17.getByLabelText,
+      getAllByRole = _render17.getAllByRole;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "12");
+    _react2.fireEvent.blur(number);
+    expect(number.value).toBe("12");
+    var decrement = getAllByRole("button")[0];
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with min and max values", function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5,
+        max: 10
+      })),
+      getByLabelText = _render18.getByLabelText,
+      getAllByRole = _render18.getAllByRole;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.blur(number);
+    expect(number.value).toBe("1");
+    var decrement = getAllByRole("button")[0];
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("1");
+    var increment = getAllByRole("button")[1];
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("5");
+    _userEvent["default"].click(increment);
+    _userEvent["default"].click(increment);
+    _userEvent["default"].click(increment);
+    _userEvent["default"].click(increment);
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("10");
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with step", function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        step: 5
+      })),
+      getByLabelText = _render19.getByLabelText,
+      getAllByRole = _render19.getAllByRole;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "10");
+    _react2.fireEvent.blur(number);
+    expect(number.value).toBe("10");
+    var increment = getAllByRole("button")[1];
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("15");
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("20");
+    var decrement = getAllByRole("button")[0];
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("15");
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with min, max and step", function () {
+    var onBlur = jest.fn();
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 8,
+        onBlur: onBlur
+      })),
+      getByLabelText = _render20.getByLabelText,
+      getAllByRole = _render20.getAllByRole;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.blur(number);
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "1",
+      error: "Value must be greater than or equal to 5."
+    });
+    var increment = getAllByRole("button")[1];
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("5");
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("13");
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("20");
+    _userEvent["default"].click(increment);
+    expect(number.value).toBe("20");
+    var decrement = getAllByRole("button")[0];
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("12");
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("5");
+    _userEvent["default"].click(decrement);
+    expect(number.value).toBe("5");
+  });
+  test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5
+      })),
+      getByLabelText = _render21.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("5");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("15");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("20");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("20");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("15");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("5");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("5");
+  });
+  test("Number has correct accesibility attributes", function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label"
+      })),
+      getByLabelText = _render22.getByLabelText,
+      getAllByRole = _render22.getAllByRole;
+    var number = getByLabelText("Number input label");
+    expect(number.getAttribute("aria-autocomplete")).toBeNull();
+    expect(number.getAttribute("aria-controls")).toBeNull();
+    expect(number.getAttribute("aria-expanded")).toBeNull();
+    var decrement = getAllByRole("button")[0];
+    expect(decrement.getAttribute("aria-label")).toBe("Decrement value");
+    var increment = getAllByRole("button")[1];
+    expect(increment.getAttribute("aria-label")).toBe("Increment value");
+  });
+  test("Number input submits correct values in a form", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({
+        data: "0"
+      });
+    });
+    var _render23 = (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 = _render23.getByText,
+      getAllByRole = _render23.getAllByRole;
+    var less = getAllByRole("button")[0];
+    var more = getAllByRole("button")[1];
+    var submit = getByText("Submit");
+    _userEvent["default"].click(more);
+    expect(handlerOnSubmit).not.toHaveBeenCalled();
+    _userEvent["default"].click(less);
+    expect(handlerOnSubmit).not.toHaveBeenCalled();
+    _userEvent["default"].click(submit);
+    expect(handlerOnSubmit).toHaveBeenCalled();
+  });
+});

package/number-input/NumberInputContext.js

@@ -1,19 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var defaultState = {
   stepNumber: 1
 };
-
 var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
-
 var _default = NumberInputContext;
 exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -1,4 +1,4 @@
-declare type Props = {
+type Props = {
     /**
      * Type of the input.
      */

package/number-input/types.d.ts

@@ -1,11 +1,11 @@
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Props = {
+type Props = {
     /**
      * Text to be placed above the number.
      */
@@ -14,6 +14,10 @@ declare type Props = {
      * Name attribute of the input element.
      */
     name?: string;
+    /**
+     * Initial value of the input element, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */
@@ -50,7 +54,7 @@ declare type Props = {
      * 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.
+     * will not be defined in both events.
      */
     min?: number;
     /**
@@ -58,7 +62,7 @@ declare type Props = {
      * 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.
+     * will not be defined in both events.
      */
     max?: number;
     /**
@@ -69,26 +73,29 @@ declare type Props = {
      * 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.
+     * function. If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => 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.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => 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.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the input component. If
+     * the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -102,7 +109,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**
@@ -113,5 +120,5 @@ declare type Props = {
 /**
  * Reference to the component.
  */
-export declare type RefType = HTMLDivElement;
+export type RefType = HTMLDivElement;
 export default Props;

package/package.json

@@ -1,43 +1,37 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-2c3a5e1",
+  "version": "0.0.0-2d5bb6f",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
-  "homepage": "http://developer.dxc.com/tools/react",
+  "homepage": "https://developer.dxc.com/halstack",
   "license": "Apache-2.0",
   "author": {
     "name": "DXC Technology",
     "email": "DigitalInsurance@dxc.com",
-    "url": "https://dxc.com"
+    "url": "https://developer.dxc.com"
   },
-  "main": "./main.js",
-  "types": "./main.d.ts",
+  "main": "./src/main.ts",
+  "types": "./src/main.ts",
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.x",
+    "react-dom": "^18.x",
     "styled-components": "^5.0.1"
   },
   "dependencies": {
-    "@date-io/date-fns": "^1.3.9",
-    "@material-ui/core": "4.11.1",
-    "@material-ui/icons": "4.4.3",
-    "@material-ui/lab": "4.0.0-alpha.17",
-    "@material-ui/pickers": "3.2.2",
-    "@material-ui/styles": "4.0.2",
+    "@radix-ui/react-popover": "0.1.6",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "color": "^3.1.3",
-    "date-fns": "^2.0.0-beta.4",
-    "moment": "2.24.0",
-    "prop-types": "^15.7.2",
+    "dayjs": "^1.11.1",
     "rgb-hex": "^3.0.0",
+    "slugify": "^1.6.5",
     "uuid": "^8.3.2"
   },
   "scripts": {
-    "test": "jest",
+    "test": "jest --env=jsdom",
     "test:watch": "npm test -- --watch --coverage",
-    "build": "babel src --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose && node ../scripts/build/copy-package.js && tsc ",
-    "build:watch": "babel src --watch --out-dir ../dist --copy-files --verbose",
+    "build": "babel src --extensions .js,.jsx,.ts,.tsx --out-dir ../../dist --copy-files --verbose && node ../../scripts/build/copy-package.js && tsc ",
+    "build:watch": "babel src --watch --extensions .js,.jsx,.ts,.tsx --out-dir ./dist --copy-files --verbose",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -55,8 +49,9 @@
     "@storybook/addon-links": "^6.4.9",
     "@storybook/react": "^6.4.9",
     "@storybook/testing-library": "0.0.7",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.6.3",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.0.0",
+    "@types/react": "18.0.28",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "chromatic": "^6.3.3",
@@ -70,9 +65,10 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-storybook": "^0.5.5",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.5.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
+    "react": "^18.x",
+    "react-dom": "^18.x",
     "react-test-renderer": "^16.8.6",
     "storybook-addon-pseudo-states": "^1.0.0",
     "styled-components": "^5.0.1",
@@ -82,7 +78,8 @@
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "identity-obj-proxy",
       "\\.(svg)$": "<rootDir>/test/mocks/svgMock.js",
-      "\\.(png)$": "<rootDir>/test/mocks/pngMock.js"
+      "\\.(png)$": "<rootDir>/test/mocks/pngMock.js",
+      "^uuid$": "uuid"
     }
   }
 }

package/paginator/Icons.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const firstIcon: JSX.Element;
+export declare const previousIcon: JSX.Element;
+export declare const nextIcon: JSX.Element;
+export declare const lastIcon: JSX.Element;