@elliemae/ds-page-number 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/DSPageNumber.js

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var react = require('react');
+var reactDesc = require('react-desc');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var dsForm = require('@elliemae/ds-form');
+var utils = require('./components/utils.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _ChevronSmallUp, _ChevronSmallDown;
+
+const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "currentPage", "totalPages", "separator"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'page-number-block';
+const PageNumberInputContainer = dsClassnames.aggregatedClasses(dsForm.DSInputGroup)(blockName);
+
+const DSPageNumber = _ref => {
+  let {
+    className,
+    disabled,
+    value,
+    onChange,
+    containerProps,
+    currentPage,
+    totalPages,
+    separator
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const safeTotal = utils.cleanPage(totalPages);
+  const ref = react.useRef(null);
+  const {
+    cssClassName,
+    classNameElement
+  } = dsClassnames.convertPropToCssClassName('page-number', className, {
+    disabled
+  });
+  const [page, setPage] = react.useState(utils.cleanPage(currentPage) || 1);
+  const [size, setSize] = react.useState(null);
+  react.useEffect(() => {
+    const {
+      width
+    } = ref.current.getBoundingClientRect();
+    const calculatedWidth = utils.lengthToSize(width, page);
+    setSize(calculatedWidth);
+  }, [page, safeTotal]);
+
+  function handleUpdateInput(e) {
+    const newValue = utils.cleanPage(e.target.value);
+    if (newValue > safeTotal || newValue === 0) return;
+    setPage(newValue);
+    onChange(newValue);
+  }
+
+  function handleIncrease() {
+    const newValue = page ? parseInt(page, 10) + 1 : 1;
+    if (newValue > safeTotal) return;
+    setPage(newValue);
+    onChange(newValue);
+  }
+
+  function handleDecrease() {
+    const newValue = page ? parseInt(page, 10) - 1 : 1;
+    if (newValue < 1) return;
+    setPage(newValue);
+    onChange(newValue);
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
+    "data-testid": "ds-page-number",
+    className: "".concat(cssClassName)
+  }, containerProps), otherProps), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](PageNumberInputContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(classNameElement('pages'))
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInput, {
+      className: "".concat(classNameElement('input')),
+      "data-testid": "page-number__current-page",
+      onChange: handleUpdateInput,
+      style: {
+        width: "".concat(size, "px")
+      },
+      value: page
+    }), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(classNameElement('separator'))
+    }, void 0, separator), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(classNameElement('total')),
+      "data-testid": "page-number__total-pages"
+    }, void 0, totalPages), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref,
+      className: "".concat(classNameElement('ref'))
+    })), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(classNameElement('limiter'))
+    }), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "dropdown-indicator",
+      buttonType: "text",
+      className: "dropdown-indicator",
+      "data-testid": "page-number__increase",
+      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})),
+      onClick: handleIncrease
+    }), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "dropdown-indicator",
+      buttonType: "text",
+      className: "dropdown-indicator",
+      "data-testid": "page-number__decrease",
+      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
+      onClick: handleDecrease
+    }))
+  }));
+};
+
+const pageNumberProps = {
+  className: reactDesc.PropTypes.string.description('html class attribute'),
+  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
+  disabled: reactDesc.PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.object]).description('page number value'),
+  onChange: reactDesc.PropTypes.func.description('function executed when the page number changes'),
+  currentPage: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Value of the current page'),
+  totalPages: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Amount of pages').defaultValue(1),
+  separator: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Separator between current page and total pages').defaultValue('/')
+};
+const PageNumberWithSchema = reactDesc.describe(DSPageNumber);
+PageNumberWithSchema.propTypes = pageNumberProps;
+DSPageNumber.defaultProps = {
+  className: '',
+  disabled: false,
+  onChange: () => null,
+  containerProps: {},
+  value: undefined,
+  currentPage: undefined,
+  totalPages: 1,
+  separator: '/'
+};
+
+exports.DSPageNumber = DSPageNumber;
+exports.PageNumberWithSchema = PageNumberWithSchema;
+exports["default"] = DSPageNumber;

package/cjs/DSPageNumber.test.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+require('@testing-library/jest-dom/extend-expect');
+var react = require('@testing-library/react');
+var DSPageNumber = require('./DSPageNumber.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _PageNumber, _PageNumber2, _PageNumber3;
+test('Increases page number ', async () => {
+  const {
+    queryByTestId
+  } = react.render(_PageNumber || (_PageNumber = /*#__PURE__*/_jsx__default["default"](DSPageNumber.DSPageNumber, {
+    totalPages: 3
+  })));
+  const increaseButton = queryByTestId('page-number__increase');
+  const currentPage = queryByTestId('page-number__current-page');
+  react.fireEvent.click(increaseButton);
+  expect(currentPage).toHaveValue('2');
+});
+test('Decreases page number ', async () => {
+  const {
+    queryByTestId
+  } = react.render(_PageNumber2 || (_PageNumber2 = /*#__PURE__*/_jsx__default["default"](DSPageNumber.DSPageNumber, {
+    currentPage: 2,
+    totalPages: 3
+  })));
+  const decreaseButton = queryByTestId('page-number__decrease');
+  const currentPage = queryByTestId('page-number__current-page');
+  react.fireEvent.click(decreaseButton);
+  expect(currentPage).toHaveValue('1');
+});
+test('Increases page number until last page number', async () => {
+  const {
+    queryByTestId
+  } = react.render(_PageNumber3 || (_PageNumber3 = /*#__PURE__*/_jsx__default["default"](DSPageNumber.DSPageNumber, {
+    currentPage: 2,
+    totalPages: 3
+  })));
+  const increaseButton = queryByTestId('page-number__increase');
+  const currentPage = queryByTestId('page-number__current-page');
+  react.fireEvent.click(increaseButton);
+  expect(currentPage).toHaveValue('3');
+});

package/cjs/components/utils.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/es.string.replace.js');
+
+const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
+const cleanPage = value => {
+  if (!value || value === '' || isNaN(parseInt(value))) return '';
+  return parseInt(String(value || 1).replace(/\D/g, ''), 10);
+};
+
+exports.cleanPage = cleanPage;
+exports.lengthToSize = lengthToSize;

package/cjs/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSPageNumber = require('./DSPageNumber.js');
+
+
+
+exports.DSPageNumber = DSPageNumber.DSPageNumber;
+exports.PageNumberWithSchema = DSPageNumber.PageNumberWithSchema;
+exports["default"] = DSPageNumber.DSPageNumber;

package/esm/DSPageNumber.js

@@ -0,0 +1,146 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useRef, useState, useEffect } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { DSInputGroup, DSInput } from '@elliemae/ds-form';
+import { cleanPage, lengthToSize } from './components/utils.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _ChevronSmallUp, _ChevronSmallDown;
+
+const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "currentPage", "totalPages", "separator"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'page-number-block';
+const PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);
+
+const DSPageNumber = _ref => {
+  let {
+    className,
+    disabled,
+    value,
+    onChange,
+    containerProps,
+    currentPage,
+    totalPages,
+    separator
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const safeTotal = cleanPage(totalPages);
+  const ref = useRef(null);
+  const {
+    cssClassName,
+    classNameElement
+  } = convertPropToCssClassName('page-number', className, {
+    disabled
+  });
+  const [page, setPage] = useState(cleanPage(currentPage) || 1);
+  const [size, setSize] = useState(null);
+  useEffect(() => {
+    const {
+      width
+    } = ref.current.getBoundingClientRect();
+    const calculatedWidth = lengthToSize(width, page);
+    setSize(calculatedWidth);
+  }, [page, safeTotal]);
+
+  function handleUpdateInput(e) {
+    const newValue = cleanPage(e.target.value);
+    if (newValue > safeTotal || newValue === 0) return;
+    setPage(newValue);
+    onChange(newValue);
+  }
+
+  function handleIncrease() {
+    const newValue = page ? parseInt(page, 10) + 1 : 1;
+    if (newValue > safeTotal) return;
+    setPage(newValue);
+    onChange(newValue);
+  }
+
+  function handleDecrease() {
+    const newValue = page ? parseInt(page, 10) - 1 : 1;
+    if (newValue < 1) return;
+    setPage(newValue);
+    onChange(newValue);
+  }
+
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+    "data-testid": "ds-page-number",
+    className: "".concat(cssClassName)
+  }, containerProps), otherProps), {}, {
+    children: /*#__PURE__*/_jsx(PageNumberInputContainer, {}, void 0, /*#__PURE__*/_jsx("div", {
+      className: "".concat(classNameElement('pages'))
+    }, void 0, /*#__PURE__*/_jsx(DSInput, {
+      className: "".concat(classNameElement('input')),
+      "data-testid": "page-number__current-page",
+      onChange: handleUpdateInput,
+      style: {
+        width: "".concat(size, "px")
+      },
+      value: page
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(classNameElement('separator'))
+    }, void 0, separator), /*#__PURE__*/_jsx("div", {
+      className: "".concat(classNameElement('total')),
+      "data-testid": "page-number__total-pages"
+    }, void 0, totalPages), /*#__PURE__*/jsx("div", {
+      ref: ref,
+      className: "".concat(classNameElement('ref'))
+    })), /*#__PURE__*/_jsx("div", {
+      className: "".concat(classNameElement('limiter'))
+    }), /*#__PURE__*/_jsx(DSButton, {
+      "aria-label": "dropdown-indicator",
+      buttonType: "text",
+      className: "dropdown-indicator",
+      "data-testid": "page-number__increase",
+      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+      onClick: handleIncrease
+    }), /*#__PURE__*/_jsx(DSButton, {
+      "aria-label": "dropdown-indicator",
+      buttonType: "text",
+      className: "dropdown-indicator",
+      "data-testid": "page-number__decrease",
+      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+      onClick: handleDecrease
+    }))
+  }));
+};
+
+const pageNumberProps = {
+  className: PropTypes.string.description('html class attribute'),
+  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
+  disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),
+  onChange: PropTypes.func.description('function executed when the page number changes'),
+  currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),
+  totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),
+  separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Separator between current page and total pages').defaultValue('/')
+};
+const PageNumberWithSchema = describe(DSPageNumber);
+PageNumberWithSchema.propTypes = pageNumberProps;
+DSPageNumber.defaultProps = {
+  className: '',
+  disabled: false,
+  onChange: () => null,
+  containerProps: {},
+  value: undefined,
+  currentPage: undefined,
+  totalPages: 1,
+  separator: '/'
+};
+
+export { DSPageNumber, PageNumberWithSchema, DSPageNumber as default };

package/esm/DSPageNumber.test.js

@@ -0,0 +1,42 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent } from '@testing-library/react';
+import { DSPageNumber } from './DSPageNumber.js';
+
+var _PageNumber, _PageNumber2, _PageNumber3;
+test('Increases page number ', async () => {
+  const {
+    queryByTestId
+  } = render(_PageNumber || (_PageNumber = /*#__PURE__*/_jsx(DSPageNumber, {
+    totalPages: 3
+  })));
+  const increaseButton = queryByTestId('page-number__increase');
+  const currentPage = queryByTestId('page-number__current-page');
+  fireEvent.click(increaseButton);
+  expect(currentPage).toHaveValue('2');
+});
+test('Decreases page number ', async () => {
+  const {
+    queryByTestId
+  } = render(_PageNumber2 || (_PageNumber2 = /*#__PURE__*/_jsx(DSPageNumber, {
+    currentPage: 2,
+    totalPages: 3
+  })));
+  const decreaseButton = queryByTestId('page-number__decrease');
+  const currentPage = queryByTestId('page-number__current-page');
+  fireEvent.click(decreaseButton);
+  expect(currentPage).toHaveValue('1');
+});
+test('Increases page number until last page number', async () => {
+  const {
+    queryByTestId
+  } = render(_PageNumber3 || (_PageNumber3 = /*#__PURE__*/_jsx(DSPageNumber, {
+    currentPage: 2,
+    totalPages: 3
+  })));
+  const increaseButton = queryByTestId('page-number__increase');
+  const currentPage = queryByTestId('page-number__current-page');
+  fireEvent.click(increaseButton);
+  expect(currentPage).toHaveValue('3');
+});

package/esm/components/utils.js

@@ -0,0 +1,9 @@
+import 'core-js/modules/es.string.replace.js';
+
+const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
+const cleanPage = value => {
+  if (!value || value === '' || isNaN(parseInt(value))) return '';
+  return parseInt(String(value || 1).replace(/\D/g, ''), 10);
+};
+
+export { cleanPage, lengthToSize };

package/esm/index.js

@@ -0,0 +1 @@
+export { DSPageNumber, PageNumberWithSchema, DSPageNumber as default } from './DSPageNumber.js';

package/package.json

@@ -1,26 +1,23 @@
 {
   "name": "@elliemae/ds-page-number",
-  "version": "2.3.0-alpha.9",
+  "version": "2.3.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Page Number",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./DSPageNumber": {
-      "import": "./dist/esm/DSPageNumber.js",
-      "require": "./dist/cjs/DSPageNumber.js"
+      "import": "./esm/DSPageNumber.js",
+      "require": "./cjs/DSPageNumber.js"
     },
     "./components/utils": {
-      "import": "./dist/esm/components/utils.js",
-      "require": "./dist/cjs/components/utils.js"
+      "import": "./esm/components/utils.js",
+      "require": "./cjs/components/utils.js"
     }
   },
   "sideEffects": [
@@ -32,19 +29,25 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.9",
-    "@elliemae/ds-classnames": "2.3.0-alpha.9",
-    "@elliemae/ds-form": "2.3.0-alpha.9",
-    "@elliemae/ds-icons": "2.3.0-alpha.9",
+    "@elliemae/ds-button": "2.3.0-next.3",
+    "@elliemae/ds-classnames": "2.3.0-next.3",
+    "@elliemae/ds-form": "2.3.0-next.3",
+    "@elliemae/ds-icons": "2.3.0-next.3",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.1",
+    "@testing-library/jest-dom": "~5.15.0",
     "@testing-library/react": "~12.1.2",
     "styled-components": "~5.3.3"
   },
@@ -56,12 +59,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/dist/cjs/DSPageNumber.js

@@ -1,154 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSPageNumber_exports = {};
-__export(DSPageNumber_exports, {
-  DSPageNumber: () => DSPageNumber,
-  PageNumberWithSchema: () => PageNumberWithSchema,
-  default: () => DSPageNumber_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_ds_classnames = require("@elliemae/ds-classnames");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_ds_form = require("@elliemae/ds-form");
-var import_utils = require("./components/utils");
-const blockName = "page-number-block";
-const PageNumberInputContainer = (0, import_ds_classnames.aggregatedClasses)(import_ds_form.DSInputGroup)(blockName);
-const DSPageNumber = ({
-  className,
-  disabled,
-  value,
-  onChange,
-  containerProps,
-  currentPage,
-  totalPages,
-  separator,
-  ...otherProps
-}) => {
-  const safeTotal = (0, import_utils.cleanPage)(totalPages);
-  const ref = (0, import_react.useRef)(null);
-  const { cssClassName, classNameElement } = (0, import_ds_classnames.convertPropToCssClassName)("page-number", className, {
-    disabled
-  });
-  const [page, setPage] = (0, import_react.useState)((0, import_utils.cleanPage)(currentPage) || 1);
-  const [size, setSize] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    const { width } = ref.current.getBoundingClientRect();
-    const calculatedWidth = (0, import_utils.lengthToSize)(width, page);
-    setSize(calculatedWidth);
-  }, [page, safeTotal]);
-  function handleUpdateInput(e) {
-    const newValue = (0, import_utils.cleanPage)(e.target.value);
-    if (newValue > safeTotal || newValue === 0)
-      return;
-    setPage(newValue);
-    onChange(newValue);
-  }
-  function handleIncrease() {
-    const newValue = page ? parseInt(page, 10) + 1 : 1;
-    if (newValue > safeTotal)
-      return;
-    setPage(newValue);
-    onChange(newValue);
-  }
-  function handleDecrease() {
-    const newValue = page ? parseInt(page, 10) - 1 : 1;
-    if (newValue < 1)
-      return;
-    setPage(newValue);
-    onChange(newValue);
-  }
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    "data-testid": "ds-page-number",
-    className: `${cssClassName}`,
-    ...containerProps,
-    ...otherProps
-  }, /* @__PURE__ */ import_react.default.createElement(PageNumberInputContainer, null, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: `${classNameElement("pages")}`
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSInput, {
-    className: `${classNameElement("input")}`,
-    "data-testid": "page-number__current-page",
-    onChange: handleUpdateInput,
-    style: {
-      width: `${size}px`
-    },
-    value: page
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: `${classNameElement("separator")}`
-  }, separator), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: `${classNameElement("total")}`,
-    "data-testid": "page-number__total-pages"
-  }, totalPages), /* @__PURE__ */ import_react.default.createElement("div", {
-    ref,
-    className: `${classNameElement("ref")}`
-  })), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: `${classNameElement("limiter")}`
-  }), /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-    "aria-label": "dropdown-indicator",
-    buttonType: "text",
-    className: "dropdown-indicator",
-    "data-testid": "page-number__increase",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallUp, null),
-    onClick: handleIncrease
-  }), /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-    "aria-label": "dropdown-indicator",
-    buttonType: "text",
-    className: "dropdown-indicator",
-    "data-testid": "page-number__decrease",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null),
-    onClick: handleDecrease
-  })));
-};
-const pageNumberProps = {
-  className: import_react_desc.PropTypes.string.description("html class attribute"),
-  containerProps: import_react_desc.PropTypes.object.description("Set of Properties attached to the main container"),
-  disabled: import_react_desc.PropTypes.bool.description("Whether the component is disabled or not").defaultValue(false),
-  value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number, import_react_desc.PropTypes.object]).description("page number value"),
-  onChange: import_react_desc.PropTypes.func.description("function executed when the page number changes"),
-  currentPage: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Value of the current page"),
-  totalPages: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Amount of pages").defaultValue(1),
-  separator: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Separator between current page and total pages").defaultValue("/")
-};
-DSPageNumber.propTypes = pageNumberProps;
-const PageNumberWithSchema = (0, import_react_desc.describe)(DSPageNumber);
-PageNumberWithSchema.propTypes = pageNumberProps;
-DSPageNumber.defaultProps = {
-  className: "",
-  disabled: false,
-  onChange: () => null,
-  containerProps: {},
-  value: void 0,
-  currentPage: void 0,
-  totalPages: 1,
-  separator: "/"
-};
-var DSPageNumber_default = DSPageNumber;
-module.exports = __toCommonJS(DSPageNumber_exports);
-//# sourceMappingURL=DSPageNumber.js.map

package/dist/cjs/DSPageNumber.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSPageNumber.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n  className,\n  disabled,\n  value,\n  onChange,\n  containerProps,\n  currentPage,\n  totalPages,\n  separator,\n  ...otherProps\n}) => {\n  const safeTotal = cleanPage(totalPages);\n  const ref = useRef(null);\n  const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n    disabled,\n  });\n  const [page, setPage] = useState(cleanPage(currentPage) || 1);\n  const [size, setSize] = useState(null);\n  useEffect(() => {\n    const { width } = ref.current.getBoundingClientRect();\n    const calculatedWidth = lengthToSize(width, page);\n    setSize(calculatedWidth);\n  }, [page, safeTotal]);\n\n  function handleUpdateInput(e) {\n    const newValue = cleanPage(e.target.value);\n    if (newValue > safeTotal || newValue === 0) return;\n    setPage(newValue);\n    onChange(newValue);\n  }\n  function handleIncrease() {\n    const newValue = page ? parseInt(page, 10) + 1 : 1;\n    if (newValue > safeTotal) return;\n    setPage(newValue);\n    onChange(newValue);\n  }\n  function handleDecrease() {\n    const newValue = page ? parseInt(page, 10) - 1 : 1;\n    if (newValue < 1) return;\n    setPage(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n      <PageNumberInputContainer>\n        <div className={`${classNameElement('pages')}`}>\n          <DSInput\n            className={`${classNameElement('input')}`}\n            data-testid=\"page-number__current-page\"\n            onChange={handleUpdateInput}\n            style={{\n              width: `${size}px`,\n            }}\n            value={page}\n          />\n          <div className={`${classNameElement('separator')}`}>{separator}</div>\n          <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n            {totalPages}\n          </div>\n          <div ref={ref} className={`${classNameElement('ref')}`} />\n        </div>\n        <div className={`${classNameElement('limiter')}`} />\n        <DSButton\n          aria-label=\"dropdown-indicator\"\n          buttonType=\"text\"\n          className=\"dropdown-indicator\"\n          data-testid=\"page-number__increase\"\n          icon={<ChevronSmallUp />}\n          onClick={handleIncrease}\n        />\n        <DSButton\n          aria-label=\"dropdown-indicator\"\n          buttonType=\"text\"\n          className=\"dropdown-indicator\"\n          data-testid=\"page-number__decrease\"\n          icon={<ChevronSmallDown />}\n          onClick={handleDecrease}\n        />\n      </PageNumberInputContainer>\n    </div>\n  );\n};\n\nconst pageNumberProps = {\n  className: PropTypes.string.description('html class attribute'),\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n  onChange: PropTypes.func.description('function executed when the page number changes'),\n  currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n  totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n  separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .description('Separator between current page and total pages')\n    .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\n\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n  className: '',\n  disabled: false,\n  onChange: () => null,\n  containerProps: {},\n  value: undefined,\n  currentPage: undefined,\n  totalPages: 1,\n  separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/cjs/components/utils.js

@@ -1,41 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var utils_exports = {};
-__export(utils_exports, {
-  cleanPage: () => cleanPage,
-  lengthToSize: () => lengthToSize
-});
-var React = __toESM(require("react"));
-const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
-const cleanPage = (value) => {
-  if (!value || value === "" || isNaN(parseInt(value)))
-    return "";
-  return parseInt(String(value || 1).replace(/\D/g, ""), 10);
-};
-module.exports = __toCommonJS(utils_exports);
-//# sourceMappingURL=utils.js.map

package/dist/cjs/components/utils.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const lengthToSize = (referenceWidth, value) =>\n  referenceWidth + (referenceWidth / 7) * String(value).length;\n\nexport const cleanPage = value => {\n  if (!value || value === '' || isNaN(parseInt(value))) return '';\n  return parseInt(String(value || 1).replace(/\\D/g, ''), 10);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe,CAAC,gBAAgB,UAC3C,iBAAkB,iBAAiB,IAAK,OAAO,OAAO;AAEjD,MAAM,YAAY,WAAS;AAChC,MAAI,CAAC,SAAS,UAAU,MAAM,MAAM,SAAS;AAAS,WAAO;AAC7D,SAAO,SAAS,OAAO,SAAS,GAAG,QAAQ,OAAO,KAAK;AAAA;",
-  "names": []
-}

package/dist/cjs/index.js

@@ -1,36 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var src_exports = {};
-__export(src_exports, {
-  default: () => import_DSPageNumber.default
-});
-var React = __toESM(require("react"));
-__reExport(src_exports, require("./DSPageNumber"));
-var import_DSPageNumber = __toESM(require("./DSPageNumber"));
-module.exports = __toCommonJS(src_exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSPageNumber';\n\nexport { default } from './DSPageNumber';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AAEd,0BAAwB;",
-  "names": []
-}

package/dist/esm/DSPageNumber.js

@@ -1,125 +0,0 @@
-import * as React from "react";
-import React2, { useState, useRef, useEffect } from "react";
-import { describe, PropTypes } from "react-desc";
-import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { ChevronSmallDown, ChevronSmallUp } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import { DSInput, DSInputGroup } from "@elliemae/ds-form";
-import { lengthToSize, cleanPage } from "./components/utils";
-const blockName = "page-number-block";
-const PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);
-const DSPageNumber = ({
-  className,
-  disabled,
-  value,
-  onChange,
-  containerProps,
-  currentPage,
-  totalPages,
-  separator,
-  ...otherProps
-}) => {
-  const safeTotal = cleanPage(totalPages);
-  const ref = useRef(null);
-  const { cssClassName, classNameElement } = convertPropToCssClassName("page-number", className, {
-    disabled
-  });
-  const [page, setPage] = useState(cleanPage(currentPage) || 1);
-  const [size, setSize] = useState(null);
-  useEffect(() => {
-    const { width } = ref.current.getBoundingClientRect();
-    const calculatedWidth = lengthToSize(width, page);
-    setSize(calculatedWidth);
-  }, [page, safeTotal]);
-  function handleUpdateInput(e) {
-    const newValue = cleanPage(e.target.value);
-    if (newValue > safeTotal || newValue === 0)
-      return;
-    setPage(newValue);
-    onChange(newValue);
-  }
-  function handleIncrease() {
-    const newValue = page ? parseInt(page, 10) + 1 : 1;
-    if (newValue > safeTotal)
-      return;
-    setPage(newValue);
-    onChange(newValue);
-  }
-  function handleDecrease() {
-    const newValue = page ? parseInt(page, 10) - 1 : 1;
-    if (newValue < 1)
-      return;
-    setPage(newValue);
-    onChange(newValue);
-  }
-  return /* @__PURE__ */ React2.createElement("div", {
-    "data-testid": "ds-page-number",
-    className: `${cssClassName}`,
-    ...containerProps,
-    ...otherProps
-  }, /* @__PURE__ */ React2.createElement(PageNumberInputContainer, null, /* @__PURE__ */ React2.createElement("div", {
-    className: `${classNameElement("pages")}`
-  }, /* @__PURE__ */ React2.createElement(DSInput, {
-    className: `${classNameElement("input")}`,
-    "data-testid": "page-number__current-page",
-    onChange: handleUpdateInput,
-    style: {
-      width: `${size}px`
-    },
-    value: page
-  }), /* @__PURE__ */ React2.createElement("div", {
-    className: `${classNameElement("separator")}`
-  }, separator), /* @__PURE__ */ React2.createElement("div", {
-    className: `${classNameElement("total")}`,
-    "data-testid": "page-number__total-pages"
-  }, totalPages), /* @__PURE__ */ React2.createElement("div", {
-    ref,
-    className: `${classNameElement("ref")}`
-  })), /* @__PURE__ */ React2.createElement("div", {
-    className: `${classNameElement("limiter")}`
-  }), /* @__PURE__ */ React2.createElement(DSButton, {
-    "aria-label": "dropdown-indicator",
-    buttonType: "text",
-    className: "dropdown-indicator",
-    "data-testid": "page-number__increase",
-    icon: /* @__PURE__ */ React2.createElement(ChevronSmallUp, null),
-    onClick: handleIncrease
-  }), /* @__PURE__ */ React2.createElement(DSButton, {
-    "aria-label": "dropdown-indicator",
-    buttonType: "text",
-    className: "dropdown-indicator",
-    "data-testid": "page-number__decrease",
-    icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null),
-    onClick: handleDecrease
-  })));
-};
-const pageNumberProps = {
-  className: PropTypes.string.description("html class attribute"),
-  containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
-  disabled: PropTypes.bool.description("Whether the component is disabled or not").defaultValue(false),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description("page number value"),
-  onChange: PropTypes.func.description("function executed when the page number changes"),
-  currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Value of the current page"),
-  totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Amount of pages").defaultValue(1),
-  separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Separator between current page and total pages").defaultValue("/")
-};
-DSPageNumber.propTypes = pageNumberProps;
-const PageNumberWithSchema = describe(DSPageNumber);
-PageNumberWithSchema.propTypes = pageNumberProps;
-DSPageNumber.defaultProps = {
-  className: "",
-  disabled: false,
-  onChange: () => null,
-  containerProps: {},
-  value: void 0,
-  currentPage: void 0,
-  totalPages: 1,
-  separator: "/"
-};
-var DSPageNumber_default = DSPageNumber;
-export {
-  DSPageNumber,
-  PageNumberWithSchema,
-  DSPageNumber_default as default
-};
-//# sourceMappingURL=DSPageNumber.js.map

package/dist/esm/DSPageNumber.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSPageNumber.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n  className,\n  disabled,\n  value,\n  onChange,\n  containerProps,\n  currentPage,\n  totalPages,\n  separator,\n  ...otherProps\n}) => {\n  const safeTotal = cleanPage(totalPages);\n  const ref = useRef(null);\n  const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n    disabled,\n  });\n  const [page, setPage] = useState(cleanPage(currentPage) || 1);\n  const [size, setSize] = useState(null);\n  useEffect(() => {\n    const { width } = ref.current.getBoundingClientRect();\n    const calculatedWidth = lengthToSize(width, page);\n    setSize(calculatedWidth);\n  }, [page, safeTotal]);\n\n  function handleUpdateInput(e) {\n    const newValue = cleanPage(e.target.value);\n    if (newValue > safeTotal || newValue === 0) return;\n    setPage(newValue);\n    onChange(newValue);\n  }\n  function handleIncrease() {\n    const newValue = page ? parseInt(page, 10) + 1 : 1;\n    if (newValue > safeTotal) return;\n    setPage(newValue);\n    onChange(newValue);\n  }\n  function handleDecrease() {\n    const newValue = page ? parseInt(page, 10) - 1 : 1;\n    if (newValue < 1) return;\n    setPage(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n      <PageNumberInputContainer>\n        <div className={`${classNameElement('pages')}`}>\n          <DSInput\n            className={`${classNameElement('input')}`}\n            data-testid=\"page-number__current-page\"\n            onChange={handleUpdateInput}\n            style={{\n              width: `${size}px`,\n            }}\n            value={page}\n          />\n          <div className={`${classNameElement('separator')}`}>{separator}</div>\n          <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n            {totalPages}\n          </div>\n          <div ref={ref} className={`${classNameElement('ref')}`} />\n        </div>\n        <div className={`${classNameElement('limiter')}`} />\n        <DSButton\n          aria-label=\"dropdown-indicator\"\n          buttonType=\"text\"\n          className=\"dropdown-indicator\"\n          data-testid=\"page-number__increase\"\n          icon={<ChevronSmallUp />}\n          onClick={handleIncrease}\n        />\n        <DSButton\n          aria-label=\"dropdown-indicator\"\n          buttonType=\"text\"\n          className=\"dropdown-indicator\"\n          data-testid=\"page-number__decrease\"\n          icon={<ChevronSmallDown />}\n          onClick={handleDecrease}\n        />\n      </PageNumberInputContainer>\n    </div>\n  );\n};\n\nconst pageNumberProps = {\n  className: PropTypes.string.description('html class attribute'),\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n  onChange: PropTypes.func.description('function executed when the page number changes'),\n  currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n  totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n  separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .description('Separator between current page and total pages')\n    .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\n\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n  className: '',\n  disabled: false,\n  onChange: () => null,\n  containerProps: {},\n  value: undefined,\n  currentPage: undefined,\n  totalPages: 1,\n  separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/esm/components/utils.js

@@ -1,12 +0,0 @@
-import * as React from "react";
-const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
-const cleanPage = (value) => {
-  if (!value || value === "" || isNaN(parseInt(value)))
-    return "";
-  return parseInt(String(value || 1).replace(/\D/g, ""), 10);
-};
-export {
-  cleanPage,
-  lengthToSize
-};
-//# sourceMappingURL=utils.js.map

package/dist/esm/components/utils.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/utils.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const lengthToSize = (referenceWidth, value) =>\n  referenceWidth + (referenceWidth / 7) * String(value).length;\n\nexport const cleanPage = value => {\n  if (!value || value === '' || isNaN(parseInt(value))) return '';\n  return parseInt(String(value || 1).replace(/\\D/g, ''), 10);\n};\n"],
-  "mappings": "AAAA;ACAO,MAAM,eAAe,CAAC,gBAAgB,UAC3C,iBAAkB,iBAAiB,IAAK,OAAO,OAAO;AAEjD,MAAM,YAAY,WAAS;AAChC,MAAI,CAAC,SAAS,UAAU,MAAM,MAAM,SAAS;AAAS,WAAO;AAC7D,SAAO,SAAS,OAAO,SAAS,GAAG,QAAQ,OAAO,KAAK;AAAA;",
-  "names": []
-}

package/dist/esm/index.js

@@ -1,7 +0,0 @@
-import * as React from "react";
-export * from "./DSPageNumber";
-import { default as default2 } from "./DSPageNumber";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSPageNumber';\n\nexport { default } from './DSPageNumber';\n"],
-  "mappings": "AAAA;ACAA;AAEA;",
-  "names": []
-}