@elliemae/ds-page-number 2.3.1 → 3.0.0-alpha.3

package/dist/cjs/DSPageNumber.js

@@ -0,0 +1,187 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 = (_a) => {
+  var _b = _a, {
+    className,
+    disabled,
+    value,
+    onChange,
+    containerProps,
+    currentPage,
+    totalPages,
+    separator
+  } = _b, otherProps = __objRest(_b, [
+    "className",
+    "disabled",
+    "value",
+    "onChange",
+    "containerProps",
+    "currentPage",
+    "totalPages",
+    "separator"
+  ]);
+  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", __spreadValues(__spreadValues({
+    "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

@@ -0,0 +1,7 @@
+{
+  "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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,7 @@
+{
+  "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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,7 @@
+{
+  "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

@@ -0,0 +1,160 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 = (_a) => {
+  var _b = _a, {
+    className,
+    disabled,
+    value,
+    onChange,
+    containerProps,
+    currentPage,
+    totalPages,
+    separator
+  } = _b, otherProps = __objRest(_b, [
+    "className",
+    "disabled",
+    "value",
+    "onChange",
+    "containerProps",
+    "currentPage",
+    "totalPages",
+    "separator"
+  ]);
+  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", __spreadValues(__spreadValues({
+    "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

@@ -0,0 +1,7 @@
+{
+  "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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,7 @@
+{
+  "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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "@elliemae/ds-page-number",
-  "version": "2.3.1",
+  "version": "3.0.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Page Number",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./DSPageNumber": {
-      "import": "./esm/DSPageNumber.js",
-      "require": "./cjs/DSPageNumber.js"
+      "import": "./dist/esm/DSPageNumber.js",
+      "require": "./dist/cjs/DSPageNumber.js"
     },
     "./components/utils": {
-      "import": "./esm/components/utils.js",
-      "require": "./cjs/components/utils.js"
+      "import": "./dist/esm/components/utils.js",
+      "require": "./dist/cjs/components/utils.js"
     }
   },
   "sideEffects": [
@@ -29,25 +32,25 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "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"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.1",
-    "@elliemae/ds-classnames": "2.3.1",
-    "@elliemae/ds-form": "2.3.1",
-    "@elliemae/ds-icons": "2.3.1",
+    "@elliemae/ds-button": "3.0.0-alpha.3",
+    "@elliemae/ds-classnames": "3.0.0-alpha.3",
+    "@elliemae/ds-form": "3.0.0-alpha.3",
+    "@elliemae/ds-icons": "3.0.0-alpha.3",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
     "styled-components": "~5.3.3"
   },
@@ -59,7 +62,13 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/DSPageNumber.js

@@ -1,159 +0,0 @@
-'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

@@ -1,48 +0,0 @@
-'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

@@ -1,14 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-'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

@@ -1,146 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

package/types/DSPageNumber.d.ts

@@ -1,73 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
-declare const DSPageNumber: {
-    ({ className, disabled, value, onChange, containerProps, currentPage, totalPages, separator, ...otherProps }: {
-        [x: string]: any;
-        className: any;
-        disabled: any;
-        value: any;
-        onChange: any;
-        containerProps: any;
-        currentPage: any;
-        totalPages: any;
-        separator: any;
-    }): JSX.Element;
-    propTypes: {
-        className: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        containerProps: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        disabled: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        value: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        onChange: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        currentPage: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        totalPages: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        separator: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-    };
-    defaultProps: {
-        className: string;
-        disabled: boolean;
-        onChange: () => null;
-        containerProps: {};
-        value: undefined;
-        currentPage: undefined;
-        totalPages: number;
-        separator: string;
-    };
-};
-declare const PageNumberWithSchema: {
-    (props?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { DSPageNumber, PageNumberWithSchema };
-export default DSPageNumber;

package/types/DSPageNumber.test.d.ts

@@ -1 +0,0 @@
-export {};

package/types/components/utils.d.ts

@@ -1,2 +0,0 @@
-export declare const lengthToSize: (referenceWidth: any, value: any) => any;
-export declare const cleanPage: (value: any) => number | "";

package/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from './DSPageNumber';
-export { default } from './DSPageNumber';