@elliemae/ds-zoom 2.3.1 → 3.0.0-alpha.3

package/dist/cjs/DSZoom.js

@@ -0,0 +1,151 @@
+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 DSZoom_exports = {};
+__export(DSZoom_exports, {
+  DSZoom: () => DSZoom,
+  ZoomWithSchema: () => ZoomWithSchema,
+  default: () => DSZoom_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_form = require("@elliemae/ds-form");
+var import_zoomOptions = __toESM(require("./components/zoomOptions"));
+var import_utils = require("./components/utils");
+const DSZoom = (_a) => {
+  var _b = _a, {
+    className = "",
+    disabled = false,
+    value = void 0,
+    onChange = () => null,
+    containerProps = {},
+    zoomOptions = import_zoomOptions.default
+  } = _b, otherProps = __objRest(_b, [
+    "className",
+    "disabled",
+    "value",
+    "onChange",
+    "containerProps",
+    "zoomOptions"
+  ]);
+  const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("zoom-resize", className, {
+    disabled
+  });
+  const defaultOption = zoomOptions.find((option) => option.default);
+  const [menuIsOpen, setMenuIsOpen] = (0, import_react.useState)(false);
+  const [selectedOption, setSelectedOption] = (0, import_react.useState)(defaultOption);
+  const [custom, setCustom] = (0, import_react.useState)(!value ? defaultOption : {
+    label: `${(0, import_utils.clean)(value)}%`,
+    value: (0, import_utils.clean)(value),
+    id: "custom"
+  });
+  const options = [custom, ...zoomOptions.filter((option) => !option.default)];
+  const currentValue = value || selectedOption?.value || custom?.value || defaultOption?.value;
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues(__spreadValues({
+    className: `${cssClassName}`
+  }, containerProps), otherProps), /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSComboBox, {
+    searchable: true,
+    disabled,
+    menuIsOpen,
+    onChange: (valueChange, { action }) => {
+      const op = options.find((option) => option.value === valueChange);
+      setSelectedOption(op);
+      onChange(op);
+      setMenuIsOpen(false);
+      if (action === "select-option") {
+        document.activeElement.blur();
+      }
+    },
+    onClickDropdownIndicator: () => setMenuIsOpen(!menuIsOpen),
+    onInputChange: (valueInput, action) => {
+      if (valueInput || action.action === "input-change") {
+        if (!valueInput) {
+          setCustom(defaultOption);
+          onChange(defaultOption);
+        } else if (!Number.isNaN(parseInt(valueInput, 10))) {
+          const cleanValue = parseInt(valueInput, 10);
+          const newOption = {
+            label: `${cleanValue}%`,
+            value: `${cleanValue}%`,
+            id: "custom"
+          };
+          setCustom(newOption);
+          onChange(newOption);
+        }
+      }
+      setMenuIsOpen(false);
+    },
+    options,
+    value: currentValue
+  }));
+};
+const zoomProps = {
+  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("disable component").defaultValue(false),
+  value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number, import_react_desc.PropTypes.object]).description("current value"),
+  onChange: import_react_desc.PropTypes.func.description("function called when a new value is selected"),
+  zoomOptions: import_react_desc.PropTypes.shape({
+    label: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]),
+    value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]),
+    default: import_react_desc.PropTypes.bool
+  }).description("list of options to display in the select menu")
+};
+DSZoom.propTypes = zoomProps;
+const ZoomWithSchema = (0, import_react_desc.describe)(DSZoom);
+ZoomWithSchema.propTypes = zoomProps;
+var DSZoom_default = DSZoom;
+module.exports = __toCommonJS(DSZoom_exports);
+//# sourceMappingURL=DSZoom.js.map

package/dist/cjs/DSZoom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSZoom.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable indent */\nimport React, { useState } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport zoomDefaultOptions from './components/zoomOptions';\nimport { clean } from './components/utils';\n\nconst DSZoom = ({\n  className = '',\n  disabled = false,\n  value = undefined,\n  onChange = () => null,\n  containerProps = {},\n  zoomOptions = zoomDefaultOptions,\n  ...otherProps\n}) => {\n  const { cssClassName } = convertPropToCssClassName('zoom-resize', className, {\n    disabled,\n  });\n  const defaultOption = zoomOptions.find((option) => option.default);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState(defaultOption);\n  const [custom, setCustom] = useState(\n    !value\n      ? defaultOption\n      : {\n          label: `${clean(value)}%`,\n          value: clean(value),\n          id: 'custom',\n        },\n  );\n  const options = [custom, ...zoomOptions.filter((option) => !option.default)];\n\n  const currentValue = value || selectedOption?.value || custom?.value || defaultOption?.value;\n\n  return (\n    <div className={`${cssClassName}`} {...containerProps} {...otherProps}>\n      <DSComboBox\n        searchable\n        disabled={disabled}\n        menuIsOpen={menuIsOpen}\n        onChange={(valueChange, { action }) => {\n          const op = options.find((option) => option.value === valueChange);\n          setSelectedOption(op);\n          onChange(op);\n          setMenuIsOpen(false);\n          if (action === 'select-option') {\n            document.activeElement.blur();\n          }\n        }}\n        onClickDropdownIndicator={() => setMenuIsOpen(!menuIsOpen)}\n        onInputChange={(valueInput, action) => {\n          if (valueInput || action.action === 'input-change') {\n            if (!valueInput) {\n              setCustom(defaultOption);\n              onChange(defaultOption);\n            } else if (!Number.isNaN(parseInt(valueInput, 10))) {\n              const cleanValue = parseInt(valueInput, 10);\n              const newOption = {\n                label: `${cleanValue}%`,\n                value: `${cleanValue}%`,\n                id: 'custom',\n              };\n              setCustom(newOption);\n              onChange(newOption);\n            }\n          }\n          setMenuIsOpen(false);\n        }}\n        options={options}\n        value={currentValue}\n      />\n    </div>\n  );\n};\n\nconst zoomProps = {\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('disable component').defaultValue(false),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('current value'),\n  onChange: PropTypes.func.description('function called when a new value is selected'),\n  zoomOptions: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    default: PropTypes.bool,\n  }).description('list of options to display in the select menu'),\n};\n\nDSZoom.propTypes = zoomProps;\n\nconst ZoomWithSchema = describe(DSZoom);\nZoomWithSchema.propTypes = zoomProps;\n\nexport { DSZoom, ZoomWithSchema };\nexport default DSZoom;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAgC;AAChC,wBAAoC;AACpC,2BAA0C;AAC1C,qBAA2B;AAC3B,yBAA+B;AAC/B,mBAAsB;AAEtB,MAAM,SAAS,CAAC,OAQV;AARU,eACd;AAAA,gBAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW,MAAM;AAAA,IACjB,iBAAiB;AAAA,IACjB,cAAc;AAAA,MANA,IAOX,uBAPW,IAOX;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,iBAAiB,oDAA0B,eAAe,WAAW;AAAA,IAC3E;AAAA;AAEF,QAAM,gBAAgB,YAAY,KAAK,CAAC,WAAW,OAAO;AAC1D,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAC7C,QAAM,CAAC,gBAAgB,qBAAqB,2BAAS;AACrD,QAAM,CAAC,QAAQ,aAAa,2BAC1B,CAAC,QACG,gBACA;AAAA,IACE,OAAO,GAAG,wBAAM;AAAA,IAChB,OAAO,wBAAM;AAAA,IACb,IAAI;AAAA;AAGZ,QAAM,UAAU,CAAC,QAAQ,GAAG,YAAY,OAAO,CAAC,WAAW,CAAC,OAAO;AAEnE,QAAM,eAAe,SAAS,gBAAgB,SAAS,QAAQ,SAAS,eAAe;AAEvF,SACE,mDAAC,OAAD;AAAA,IAAK,WAAW,GAAG;AAAA,KAAoB,iBAAoB,aACzD,mDAAC,2BAAD;AAAA,IACE,YAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU,CAAC,aAAa,EAAE,aAAa;AACrC,YAAM,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU;AACrD,wBAAkB;AAClB,eAAS;AACT,oBAAc;AACd,UAAI,WAAW,iBAAiB;AAC9B,iBAAS,cAAc;AAAA;AAAA;AAAA,IAG3B,0BAA0B,MAAM,cAAc,CAAC;AAAA,IAC/C,eAAe,CAAC,YAAY,WAAW;AACrC,UAAI,cAAc,OAAO,WAAW,gBAAgB;AAClD,YAAI,CAAC,YAAY;AACf,oBAAU;AACV,mBAAS;AAAA,mBACA,CAAC,OAAO,MAAM,SAAS,YAAY,MAAM;AAClD,gBAAM,aAAa,SAAS,YAAY;AACxC,gBAAM,YAAY;AAAA,YAChB,OAAO,GAAG;AAAA,YACV,OAAO,GAAG;AAAA,YACV,IAAI;AAAA;AAEN,oBAAU;AACV,mBAAS;AAAA;AAAA;AAGb,oBAAc;AAAA;AAAA,IAEhB;AAAA,IACA,OAAO;AAAA;AAAA;AAMf,MAAM,YAAY;AAAA,EAChB,WAAW,4BAAU,OAAO,YAAY;AAAA,EACxC,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAC7C,UAAU,4BAAU,KAAK,YAAY,qBAAqB,aAAa;AAAA,EACvE,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA,EAC/F,UAAU,4BAAU,KAAK,YAAY;AAAA,EACrC,aAAa,4BAAU,MAAM;AAAA,IAC3B,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU;AAAA,IACxD,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU;AAAA,IACxD,SAAS,4BAAU;AAAA,KAClB,YAAY;AAAA;AAGjB,OAAO,YAAY;AAEnB,MAAM,iBAAiB,gCAAS;AAChC,eAAe,YAAY;AAG3B,IAAO,iBAAQ;",
+  "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, {
+  clean: () => clean,
+  getCurrentFont: () => getCurrentFont,
+  getFactor: () => getFactor,
+  setSize: () => setSize
+});
+var React = __toESM(require("react"));
+const getCurrentFont = () => Number(window.getComputedStyle(document.querySelector(":root")).getPropertyValue("font-size").match(/\d+/)[0]);
+const setSize = (size) => document.querySelector(":root").setAttribute("style", `font-size: ${size}px`);
+const getFactor = (value) => value / 100;
+const clean = (value) => value.replace(/\D/g, "").substring(0, 3);
+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 getCurrentFont = () =>\n  Number(\n    window\n      .getComputedStyle(document.querySelector(':root'))\n      .getPropertyValue('font-size')\n      .match(/\\d+/)[0],\n  );\nexport const setSize = (size) =>\n  document.querySelector(':root').setAttribute('style', `font-size: ${size}px`);\n\nexport const getFactor = (value) => value / 100;\n\nexport const clean = (value) => value.replace(/\\D/g, '').substring(0, 3);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB,MAC5B,OACE,OACG,iBAAiB,SAAS,cAAc,UACxC,iBAAiB,aACjB,MAAM,OAAO;AAEb,MAAM,UAAU,CAAC,SACtB,SAAS,cAAc,SAAS,aAAa,SAAS,cAAc;AAE/D,MAAM,YAAY,CAAC,UAAU,QAAQ;AAErC,MAAM,QAAQ,CAAC,UAAU,MAAM,QAAQ,OAAO,IAAI,UAAU,GAAG;",
+  "names": []
+}

package/dist/cjs/components/zoomOptions.js

@@ -0,0 +1,69 @@
+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 zoomOptions_exports = {};
+__export(zoomOptions_exports, {
+  default: () => zoomOptions_default
+});
+var React = __toESM(require("react"));
+var zoomOptions_default = [
+  {
+    label: "25%",
+    value: "25"
+  },
+  {
+    label: "50%",
+    value: "50"
+  },
+  {
+    label: "75%",
+    value: "75"
+  },
+  {
+    label: "100%",
+    value: "100",
+    default: true
+  },
+  {
+    label: "125%",
+    value: "125"
+  },
+  {
+    label: "150%",
+    value: "150"
+  },
+  {
+    label: "175%",
+    value: "175"
+  },
+  {
+    label: "200%",
+    value: "200"
+  }
+];
+module.exports = __toCommonJS(zoomOptions_exports);
+//# sourceMappingURL=zoomOptions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/zoomOptions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export default [\n  {\n    label: '25%',\n    value: '25',\n  },\n  {\n    label: '50%',\n    value: '50',\n  },\n  {\n    label: '75%',\n    value: '75',\n  },\n  {\n    label: '100%',\n    value: '100',\n    default: true,\n  },\n  {\n    label: '125%',\n    value: '125',\n  },\n  {\n    label: '150%',\n    value: '150',\n  },\n  {\n    label: '175%',\n    value: '175',\n  },\n  {\n    label: '200%',\n    value: '200',\n  },\n];\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,IAAO,sBAAQ;AAAA,EACb;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA;AAAA,EAEX;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;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_DSZoom.default
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, require("./DSZoom"));
+var import_DSZoom = __toESM(require("./DSZoom"));
+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 './DSZoom';\nexport { default } from './DSZoom';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,oBAAwB;",
+  "names": []
+}

package/dist/esm/DSZoom.js

@@ -0,0 +1,124 @@
+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 } from "react";
+import { describe, PropTypes } from "react-desc";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { DSComboBox } from "@elliemae/ds-form";
+import zoomDefaultOptions from "./components/zoomOptions";
+import { clean } from "./components/utils";
+const DSZoom = (_a) => {
+  var _b = _a, {
+    className = "",
+    disabled = false,
+    value = void 0,
+    onChange = () => null,
+    containerProps = {},
+    zoomOptions = zoomDefaultOptions
+  } = _b, otherProps = __objRest(_b, [
+    "className",
+    "disabled",
+    "value",
+    "onChange",
+    "containerProps",
+    "zoomOptions"
+  ]);
+  const { cssClassName } = convertPropToCssClassName("zoom-resize", className, {
+    disabled
+  });
+  const defaultOption = zoomOptions.find((option) => option.default);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(defaultOption);
+  const [custom, setCustom] = useState(!value ? defaultOption : {
+    label: `${clean(value)}%`,
+    value: clean(value),
+    id: "custom"
+  });
+  const options = [custom, ...zoomOptions.filter((option) => !option.default)];
+  const currentValue = value || selectedOption?.value || custom?.value || defaultOption?.value;
+  return /* @__PURE__ */ React2.createElement("div", __spreadValues(__spreadValues({
+    className: `${cssClassName}`
+  }, containerProps), otherProps), /* @__PURE__ */ React2.createElement(DSComboBox, {
+    searchable: true,
+    disabled,
+    menuIsOpen,
+    onChange: (valueChange, { action }) => {
+      const op = options.find((option) => option.value === valueChange);
+      setSelectedOption(op);
+      onChange(op);
+      setMenuIsOpen(false);
+      if (action === "select-option") {
+        document.activeElement.blur();
+      }
+    },
+    onClickDropdownIndicator: () => setMenuIsOpen(!menuIsOpen),
+    onInputChange: (valueInput, action) => {
+      if (valueInput || action.action === "input-change") {
+        if (!valueInput) {
+          setCustom(defaultOption);
+          onChange(defaultOption);
+        } else if (!Number.isNaN(parseInt(valueInput, 10))) {
+          const cleanValue = parseInt(valueInput, 10);
+          const newOption = {
+            label: `${cleanValue}%`,
+            value: `${cleanValue}%`,
+            id: "custom"
+          };
+          setCustom(newOption);
+          onChange(newOption);
+        }
+      }
+      setMenuIsOpen(false);
+    },
+    options,
+    value: currentValue
+  }));
+};
+const zoomProps = {
+  className: PropTypes.string.description("html class attribute"),
+  containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
+  disabled: PropTypes.bool.description("disable component").defaultValue(false),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description("current value"),
+  onChange: PropTypes.func.description("function called when a new value is selected"),
+  zoomOptions: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    default: PropTypes.bool
+  }).description("list of options to display in the select menu")
+};
+DSZoom.propTypes = zoomProps;
+const ZoomWithSchema = describe(DSZoom);
+ZoomWithSchema.propTypes = zoomProps;
+var DSZoom_default = DSZoom;
+export {
+  DSZoom,
+  ZoomWithSchema,
+  DSZoom_default as default
+};
+//# sourceMappingURL=DSZoom.js.map

package/dist/esm/DSZoom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSZoom.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useState } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport zoomDefaultOptions from './components/zoomOptions';\nimport { clean } from './components/utils';\n\nconst DSZoom = ({\n  className = '',\n  disabled = false,\n  value = undefined,\n  onChange = () => null,\n  containerProps = {},\n  zoomOptions = zoomDefaultOptions,\n  ...otherProps\n}) => {\n  const { cssClassName } = convertPropToCssClassName('zoom-resize', className, {\n    disabled,\n  });\n  const defaultOption = zoomOptions.find((option) => option.default);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState(defaultOption);\n  const [custom, setCustom] = useState(\n    !value\n      ? defaultOption\n      : {\n          label: `${clean(value)}%`,\n          value: clean(value),\n          id: 'custom',\n        },\n  );\n  const options = [custom, ...zoomOptions.filter((option) => !option.default)];\n\n  const currentValue = value || selectedOption?.value || custom?.value || defaultOption?.value;\n\n  return (\n    <div className={`${cssClassName}`} {...containerProps} {...otherProps}>\n      <DSComboBox\n        searchable\n        disabled={disabled}\n        menuIsOpen={menuIsOpen}\n        onChange={(valueChange, { action }) => {\n          const op = options.find((option) => option.value === valueChange);\n          setSelectedOption(op);\n          onChange(op);\n          setMenuIsOpen(false);\n          if (action === 'select-option') {\n            document.activeElement.blur();\n          }\n        }}\n        onClickDropdownIndicator={() => setMenuIsOpen(!menuIsOpen)}\n        onInputChange={(valueInput, action) => {\n          if (valueInput || action.action === 'input-change') {\n            if (!valueInput) {\n              setCustom(defaultOption);\n              onChange(defaultOption);\n            } else if (!Number.isNaN(parseInt(valueInput, 10))) {\n              const cleanValue = parseInt(valueInput, 10);\n              const newOption = {\n                label: `${cleanValue}%`,\n                value: `${cleanValue}%`,\n                id: 'custom',\n              };\n              setCustom(newOption);\n              onChange(newOption);\n            }\n          }\n          setMenuIsOpen(false);\n        }}\n        options={options}\n        value={currentValue}\n      />\n    </div>\n  );\n};\n\nconst zoomProps = {\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('disable component').defaultValue(false),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('current value'),\n  onChange: PropTypes.func.description('function called when a new value is selected'),\n  zoomOptions: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    default: PropTypes.bool,\n  }).description('list of options to display in the select menu'),\n};\n\nDSZoom.propTypes = zoomProps;\n\nconst ZoomWithSchema = describe(DSZoom);\nZoomWithSchema.propTypes = zoomProps;\n\nexport { DSZoom, ZoomWithSchema };\nexport default DSZoom;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,SAAS,CAAC,OAQV;AARU,eACd;AAAA,gBAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW,MAAM;AAAA,IACjB,iBAAiB;AAAA,IACjB,cAAc;AAAA,MANA,IAOX,uBAPW,IAOX;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,iBAAiB,0BAA0B,eAAe,WAAW;AAAA,IAC3E;AAAA;AAEF,QAAM,gBAAgB,YAAY,KAAK,CAAC,WAAW,OAAO;AAC1D,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,gBAAgB,qBAAqB,SAAS;AACrD,QAAM,CAAC,QAAQ,aAAa,SAC1B,CAAC,QACG,gBACA;AAAA,IACE,OAAO,GAAG,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,IAAI;AAAA;AAGZ,QAAM,UAAU,CAAC,QAAQ,GAAG,YAAY,OAAO,CAAC,WAAW,CAAC,OAAO;AAEnE,QAAM,eAAe,SAAS,gBAAgB,SAAS,QAAQ,SAAS,eAAe;AAEvF,SACE,qCAAC,OAAD;AAAA,IAAK,WAAW,GAAG;AAAA,KAAoB,iBAAoB,aACzD,qCAAC,YAAD;AAAA,IACE,YAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU,CAAC,aAAa,EAAE,aAAa;AACrC,YAAM,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU;AACrD,wBAAkB;AAClB,eAAS;AACT,oBAAc;AACd,UAAI,WAAW,iBAAiB;AAC9B,iBAAS,cAAc;AAAA;AAAA;AAAA,IAG3B,0BAA0B,MAAM,cAAc,CAAC;AAAA,IAC/C,eAAe,CAAC,YAAY,WAAW;AACrC,UAAI,cAAc,OAAO,WAAW,gBAAgB;AAClD,YAAI,CAAC,YAAY;AACf,oBAAU;AACV,mBAAS;AAAA,mBACA,CAAC,OAAO,MAAM,SAAS,YAAY,MAAM;AAClD,gBAAM,aAAa,SAAS,YAAY;AACxC,gBAAM,YAAY;AAAA,YAChB,OAAO,GAAG;AAAA,YACV,OAAO,GAAG;AAAA,YACV,IAAI;AAAA;AAEN,oBAAU;AACV,mBAAS;AAAA;AAAA;AAGb,oBAAc;AAAA;AAAA,IAEhB;AAAA,IACA,OAAO;AAAA;AAAA;AAMf,MAAM,YAAY;AAAA,EAChB,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,UAAU,UAAU,KAAK,YAAY,qBAAqB,aAAa;AAAA,EACvE,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,aAAa,UAAU,MAAM;AAAA,IAC3B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACxD,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACxD,SAAS,UAAU;AAAA,KAClB,YAAY;AAAA;AAGjB,OAAO,YAAY;AAEnB,MAAM,iBAAiB,SAAS;AAChC,eAAe,YAAY;AAG3B,IAAO,iBAAQ;",
+  "names": []
+}

package/dist/esm/components/utils.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const getCurrentFont = () => Number(window.getComputedStyle(document.querySelector(":root")).getPropertyValue("font-size").match(/\d+/)[0]);
+const setSize = (size) => document.querySelector(":root").setAttribute("style", `font-size: ${size}px`);
+const getFactor = (value) => value / 100;
+const clean = (value) => value.replace(/\D/g, "").substring(0, 3);
+export {
+  clean,
+  getCurrentFont,
+  getFactor,
+  setSize
+};
+//# 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 getCurrentFont = () =>\n  Number(\n    window\n      .getComputedStyle(document.querySelector(':root'))\n      .getPropertyValue('font-size')\n      .match(/\\d+/)[0],\n  );\nexport const setSize = (size) =>\n  document.querySelector(':root').setAttribute('style', `font-size: ${size}px`);\n\nexport const getFactor = (value) => value / 100;\n\nexport const clean = (value) => value.replace(/\\D/g, '').substring(0, 3);\n"],
+  "mappings": "AAAA;ACAO,MAAM,iBAAiB,MAC5B,OACE,OACG,iBAAiB,SAAS,cAAc,UACxC,iBAAiB,aACjB,MAAM,OAAO;AAEb,MAAM,UAAU,CAAC,SACtB,SAAS,cAAc,SAAS,aAAa,SAAS,cAAc;AAE/D,MAAM,YAAY,CAAC,UAAU,QAAQ;AAErC,MAAM,QAAQ,CAAC,UAAU,MAAM,QAAQ,OAAO,IAAI,UAAU,GAAG;",
+  "names": []
+}

package/dist/esm/components/zoomOptions.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+var zoomOptions_default = [
+  {
+    label: "25%",
+    value: "25"
+  },
+  {
+    label: "50%",
+    value: "50"
+  },
+  {
+    label: "75%",
+    value: "75"
+  },
+  {
+    label: "100%",
+    value: "100",
+    default: true
+  },
+  {
+    label: "125%",
+    value: "125"
+  },
+  {
+    label: "150%",
+    value: "150"
+  },
+  {
+    label: "175%",
+    value: "175"
+  },
+  {
+    label: "200%",
+    value: "200"
+  }
+];
+export {
+  zoomOptions_default as default
+};
+//# sourceMappingURL=zoomOptions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/zoomOptions.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export default [\n  {\n    label: '25%',\n    value: '25',\n  },\n  {\n    label: '50%',\n    value: '50',\n  },\n  {\n    label: '75%',\n    value: '75',\n  },\n  {\n    label: '100%',\n    value: '100',\n    default: true,\n  },\n  {\n    label: '125%',\n    value: '125',\n  },\n  {\n    label: '150%',\n    value: '150',\n  },\n  {\n    label: '175%',\n    value: '175',\n  },\n  {\n    label: '200%',\n    value: '200',\n  },\n];\n"],
+  "mappings": "AAAA;ACAA,IAAO,sBAAQ;AAAA,EACb;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA;AAAA,EAEX;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+export * from "./DSZoom";
+import { default as default2 } from "./DSZoom";
+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 './DSZoom';\nexport { default } from './DSZoom';\n"],
+  "mappings": "AAAA;ACAA;AACA;",
+  "names": []
+}

package/package.json

@@ -1,27 +1,30 @@
 {
   "name": "@elliemae/ds-zoom",
-  "version": "2.3.1",
+  "version": "3.0.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Zoom",
-  "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"
     },
     "./DSZoom": {
-      "import": "./esm/DSZoom.js",
-      "require": "./cjs/DSZoom.js"
+      "import": "./dist/esm/DSZoom.js",
+      "require": "./dist/cjs/DSZoom.js"
     },
     "./components/zoomOptions": {
-      "import": "./esm/components/zoomOptions.js",
-      "require": "./cjs/components/zoomOptions.js"
+      "import": "./dist/esm/components/zoomOptions.js",
+      "require": "./dist/cjs/components/zoomOptions.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": [
@@ -33,23 +36,23 @@
     "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-classnames": "2.3.1",
-    "@elliemae/ds-form": "2.3.1",
+    "@elliemae/ds-classnames": "3.0.0-alpha.3",
+    "@elliemae/ds-form": "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"
   },
   "peerDependencies": {
@@ -58,7 +61,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/DSZoom.js

@@ -1,125 +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/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.find.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.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 dsForm = require('@elliemae/ds-form');
-var zoomOptions = require('./components/zoomOptions.js');
-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);
-
-const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "zoomOptions"];
-
-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 DSZoom = _ref => {
-  let {
-    className = '',
-    disabled = false,
-    value = undefined,
-    onChange = () => null,
-    containerProps = {},
-    zoomOptions: zoomOptions$1 = zoomOptions
-  } = _ref,
-      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  const {
-    cssClassName
-  } = dsClassnames.convertPropToCssClassName('zoom-resize', className, {
-    disabled
-  });
-  const defaultOption = zoomOptions$1.find(option => option.default);
-  const [menuIsOpen, setMenuIsOpen] = react.useState(false);
-  const [selectedOption, setSelectedOption] = react.useState(defaultOption);
-  const [custom, setCustom] = react.useState(!value ? defaultOption : {
-    label: "".concat(utils.clean(value), "%"),
-    value: utils.clean(value),
-    id: 'custom'
-  });
-  const options = [custom, ...zoomOptions$1.filter(option => !option.default)];
-  const currentValue = value || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || (custom === null || custom === void 0 ? void 0 : custom.value) || (defaultOption === null || defaultOption === void 0 ? void 0 : defaultOption.value);
-  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
-    className: "".concat(cssClassName)
-  }, containerProps), otherProps), {}, {
-    children: /*#__PURE__*/_jsx__default["default"](dsForm.DSComboBox, {
-      searchable: true,
-      disabled: disabled,
-      menuIsOpen: menuIsOpen,
-      onChange: (valueChange, _ref2) => {
-        let {
-          action
-        } = _ref2;
-        const op = options.find(option => option.value === valueChange);
-        setSelectedOption(op);
-        onChange(op);
-        setMenuIsOpen(false);
-
-        if (action === 'select-option') {
-          document.activeElement.blur();
-        }
-      },
-      onClickDropdownIndicator: () => setMenuIsOpen(!menuIsOpen),
-      onInputChange: (valueInput, action) => {
-        if (valueInput || action.action === 'input-change') {
-          if (!valueInput) {
-            setCustom(defaultOption);
-            onChange(defaultOption);
-          } else if (!Number.isNaN(parseInt(valueInput, 10))) {
-            const cleanValue = parseInt(valueInput, 10);
-            const newOption = {
-              label: "".concat(cleanValue, "%"),
-              value: "".concat(cleanValue, "%"),
-              id: 'custom'
-            };
-            setCustom(newOption);
-            onChange(newOption);
-          }
-        }
-
-        setMenuIsOpen(false);
-      },
-      options: options,
-      value: currentValue
-    })
-  }));
-};
-
-const zoomProps = {
-  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('disable component').defaultValue(false),
-  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.object]).description('current value'),
-  onChange: reactDesc.PropTypes.func.description('function called when a new value is selected'),
-  zoomOptions: reactDesc.PropTypes.shape({
-    label: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]),
-    value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]),
-    default: reactDesc.PropTypes.bool
-  }).description('list of options to display in the select menu')
-};
-const ZoomWithSchema = reactDesc.describe(DSZoom);
-ZoomWithSchema.propTypes = zoomProps;
-
-exports.DSZoom = DSZoom;
-exports.ZoomWithSchema = ZoomWithSchema;
-exports["default"] = DSZoom;

package/cjs/components/utils.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/es.string.replace.js');
-
-const getCurrentFont = () => Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
-const setSize = size => document.querySelector(':root').setAttribute('style', "font-size: ".concat(size, "px"));
-const getFactor = value => value / 100;
-const clean = value => value.replace(/\D/g, '').substring(0, 3);
-
-exports.clean = clean;
-exports.getCurrentFont = getCurrentFont;
-exports.getFactor = getFactor;
-exports.setSize = setSize;

package/cjs/components/zoomOptions.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var zoomDefaultOptions = [{
-  label: '25%',
-  value: '25'
-}, {
-  label: '50%',
-  value: '50'
-}, {
-  label: '75%',
-  value: '75'
-}, {
-  label: '100%',
-  value: '100',
-  default: true
-}, {
-  label: '125%',
-  value: '125'
-}, {
-  label: '150%',
-  value: '150'
-}, {
-  label: '175%',
-  value: '175'
-}, {
-  label: '200%',
-  value: '200'
-}];
-
-module.exports = zoomDefaultOptions;

package/cjs/index.js

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

package/esm/DSZoom.js

@@ -1,113 +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/esnext.async-iterator.find.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.find.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.filter.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 { useState } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import { DSComboBox } from '@elliemae/ds-form';
-import zoomDefaultOptions from './components/zoomOptions.js';
-import { clean } from './components/utils.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "zoomOptions"];
-
-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 DSZoom = _ref => {
-  let {
-    className = '',
-    disabled = false,
-    value = undefined,
-    onChange = () => null,
-    containerProps = {},
-    zoomOptions = zoomDefaultOptions
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
-  const {
-    cssClassName
-  } = convertPropToCssClassName('zoom-resize', className, {
-    disabled
-  });
-  const defaultOption = zoomOptions.find(option => option.default);
-  const [menuIsOpen, setMenuIsOpen] = useState(false);
-  const [selectedOption, setSelectedOption] = useState(defaultOption);
-  const [custom, setCustom] = useState(!value ? defaultOption : {
-    label: "".concat(clean(value), "%"),
-    value: clean(value),
-    id: 'custom'
-  });
-  const options = [custom, ...zoomOptions.filter(option => !option.default)];
-  const currentValue = value || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || (custom === null || custom === void 0 ? void 0 : custom.value) || (defaultOption === null || defaultOption === void 0 ? void 0 : defaultOption.value);
-  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
-    className: "".concat(cssClassName)
-  }, containerProps), otherProps), {}, {
-    children: /*#__PURE__*/_jsx(DSComboBox, {
-      searchable: true,
-      disabled: disabled,
-      menuIsOpen: menuIsOpen,
-      onChange: (valueChange, _ref2) => {
-        let {
-          action
-        } = _ref2;
-        const op = options.find(option => option.value === valueChange);
-        setSelectedOption(op);
-        onChange(op);
-        setMenuIsOpen(false);
-
-        if (action === 'select-option') {
-          document.activeElement.blur();
-        }
-      },
-      onClickDropdownIndicator: () => setMenuIsOpen(!menuIsOpen),
-      onInputChange: (valueInput, action) => {
-        if (valueInput || action.action === 'input-change') {
-          if (!valueInput) {
-            setCustom(defaultOption);
-            onChange(defaultOption);
-          } else if (!Number.isNaN(parseInt(valueInput, 10))) {
-            const cleanValue = parseInt(valueInput, 10);
-            const newOption = {
-              label: "".concat(cleanValue, "%"),
-              value: "".concat(cleanValue, "%"),
-              id: 'custom'
-            };
-            setCustom(newOption);
-            onChange(newOption);
-          }
-        }
-
-        setMenuIsOpen(false);
-      },
-      options: options,
-      value: currentValue
-    })
-  }));
-};
-
-const zoomProps = {
-  className: PropTypes.string.description('html class attribute'),
-  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
-  disabled: PropTypes.bool.description('disable component').defaultValue(false),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('current value'),
-  onChange: PropTypes.func.description('function called when a new value is selected'),
-  zoomOptions: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    default: PropTypes.bool
-  }).description('list of options to display in the select menu')
-};
-const ZoomWithSchema = describe(DSZoom);
-ZoomWithSchema.propTypes = zoomProps;
-
-export { DSZoom, ZoomWithSchema, DSZoom as default };

package/esm/components/utils.js

@@ -1,8 +0,0 @@
-import 'core-js/modules/es.string.replace.js';
-
-const getCurrentFont = () => Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
-const setSize = size => document.querySelector(':root').setAttribute('style', "font-size: ".concat(size, "px"));
-const getFactor = value => value / 100;
-const clean = value => value.replace(/\D/g, '').substring(0, 3);
-
-export { clean, getCurrentFont, getFactor, setSize };

package/esm/components/zoomOptions.js

@@ -1,28 +0,0 @@
-var zoomDefaultOptions = [{
-  label: '25%',
-  value: '25'
-}, {
-  label: '50%',
-  value: '50'
-}, {
-  label: '75%',
-  value: '75'
-}, {
-  label: '100%',
-  value: '100',
-  default: true
-}, {
-  label: '125%',
-  value: '125'
-}, {
-  label: '150%',
-  value: '150'
-}, {
-  label: '175%',
-  value: '175'
-}, {
-  label: '200%',
-  value: '200'
-}];
-
-export { zoomDefaultOptions as default };

package/esm/index.js

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

package/types/DSZoom.d.ts

@@ -1,63 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
-declare const DSZoom: {
-    ({ className, disabled, value, onChange, containerProps, zoomOptions, ...otherProps }: {
-        [x: string]: any;
-        className?: string | undefined;
-        disabled?: boolean | undefined;
-        value?: undefined;
-        onChange?: (() => null) | undefined;
-        containerProps?: {} | undefined;
-        zoomOptions?: ({
-            label: string;
-            value: string;
-            default?: undefined;
-        } | {
-            label: string;
-            value: string;
-            default: boolean;
-        })[] | undefined;
-    }): 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;
-        };
-        zoomOptions: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-    };
-};
-declare const ZoomWithSchema: {
-    (props?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { DSZoom, ZoomWithSchema };
-export default DSZoom;

package/types/components/utils.d.ts

@@ -1,4 +0,0 @@
-export declare const getCurrentFont: () => number;
-export declare const setSize: (size: any) => void;
-export declare const getFactor: (value: any) => number;
-export declare const clean: (value: any) => any;

package/types/components/zoomOptions.d.ts

@@ -1,10 +0,0 @@
-declare const _default: ({
-    label: string;
-    value: string;
-    default?: undefined;
-} | {
-    label: string;
-    value: string;
-    default: boolean;
-})[];
-export default _default;

package/types/index.d.ts

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

package/types/tests/DSZoom.test.d.ts

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