@elliemae/ds-imagelibrarymodal 3.32.2-next.1 → 3.33.0-next.0

package/dist/cjs/DSImageLibraryModal.js

@@ -0,0 +1,92 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSImageLibraryModal_exports = {};
+__export(DSImageLibraryModal_exports, {
+  DSImageLibraryModal: () => DSImageLibraryModal,
+  default: () => DSImageLibraryModal_default
+});
+module.exports = __toCommonJS(DSImageLibraryModal_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_prop_types = __toESM(require("prop-types"));
+var import_ds_modal = require("@elliemae/ds-modal");
+var import_ds_shared = require("@elliemae/ds-shared");
+var import_ImageLibraryModalImpl = __toESM(require("./components/ImageLibraryModalImpl.js"));
+const modalTypes = Object.values(import_ds_modal.MODAL_TYPE);
+const DSImageLibraryModal = ({
+  containerProps = {},
+  confirmLabel = "Add",
+  disableDoubleClick = false,
+  isOpen = true,
+  modalTitle = "Add Image",
+  modalType = modalTypes[2],
+  rejectLabel = "Cancel",
+  shouldCloseOnOverlayClick = true,
+  size = import_ds_shared.sizeOptions[3],
+  imagesData = [
+    {
+      url: "https://www.freeiconspng.com/minicovers/no-image-icon-6.png",
+      name: "no image",
+      createdBy: "user:John Doe",
+      createdDate: "0000-01-01 00:00 AM UTC"
+    }
+  ],
+  onSelect = () => null,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_ImageLibraryModalImpl.default,
+  {
+    confirmLabel,
+    containerProps,
+    disableDoubleClick,
+    imagesData,
+    isOpen,
+    modalTitle,
+    modalType,
+    onSelect,
+    rejectLabel,
+    shouldCloseOnOverlayClick,
+    size,
+    ...rest
+  }
+);
+DSImageLibraryModal.propTypes = {
+  containerProps: import_prop_types.default.shape({}),
+  /** List of images src */
+  imagesData: import_prop_types.default.arrayOf(
+    import_prop_types.default.shape({
+      url: import_prop_types.default.string,
+      name: import_prop_types.default.string
+    })
+  ),
+  /** Handler when user selects an image */
+  onSelect: import_prop_types.default.func
+};
+var DSImageLibraryModal_default = DSImageLibraryModal;
+//# sourceMappingURL=DSImageLibraryModal.js.map

package/dist/cjs/DSImageLibraryModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSImageLibraryModal.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { MODAL_TYPE } from '@elliemae/ds-modal';\nimport { sizeOptions } from '@elliemae/ds-shared';\nimport ImageLibraryModalImpl from './components/ImageLibraryModalImpl.js';\n\nconst modalTypes = Object.values(MODAL_TYPE);\n\nconst DSImageLibraryModal = ({\n  containerProps = {},\n  confirmLabel = 'Add',\n  disableDoubleClick = false,\n  isOpen = true,\n  modalTitle = 'Add Image',\n  modalType = modalTypes[2],\n  rejectLabel = 'Cancel',\n  shouldCloseOnOverlayClick = true,\n  size = sizeOptions[3],\n  imagesData = [\n    {\n      url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',\n      name: 'no image',\n      createdBy: 'user:John Doe',\n      createdDate: '0000-01-01 00:00 AM UTC',\n    },\n  ],\n  onSelect = () => null,\n  ...rest\n}) => (\n  <ImageLibraryModalImpl\n    confirmLabel={confirmLabel}\n    containerProps={containerProps}\n    disableDoubleClick={disableDoubleClick}\n    imagesData={imagesData}\n    isOpen={isOpen}\n    modalTitle={modalTitle}\n    modalType={modalType}\n    onSelect={onSelect}\n    rejectLabel={rejectLabel}\n    shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n    size={size}\n    {...rest}\n  />\n);\n\n/** Inherits DSModal props */\nDSImageLibraryModal.propTypes = {\n  containerProps: PropTypes.shape({}),\n  /** List of images src */\n  imagesData: PropTypes.arrayOf(\n    PropTypes.shape({\n      url: PropTypes.string,\n      name: PropTypes.string,\n    }),\n  ),\n  /** Handler when user selects an image */\n  onSelect: PropTypes.func,\n};\n\nexport { DSImageLibraryModal };\nexport default DSImageLibraryModal;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BrB;AA5BF,wBAAsB;AACtB,sBAA2B;AAC3B,uBAA4B;AAC5B,mCAAkC;AAElC,MAAM,aAAa,OAAO,OAAO,0BAAU;AAE3C,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY,WAAW,CAAC;AAAA,EACxB,cAAc;AAAA,EACd,4BAA4B;AAAA,EAC5B,OAAO,6BAAY,CAAC;AAAA,EACpB,aAAa;AAAA,IACX;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,WAAW,MAAM;AAAA,EACjB,GAAG;AACL,MACE;AAAA,EAAC,6BAAAA;AAAA,EAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,oBAAoB,YAAY;AAAA,EAC9B,gBAAgB,kBAAAC,QAAU,MAAM,CAAC,CAAC;AAAA;AAAA,EAElC,YAAY,kBAAAA,QAAU;AAAA,IACpB,kBAAAA,QAAU,MAAM;AAAA,MACd,KAAK,kBAAAA,QAAU;AAAA,MACf,MAAM,kBAAAA,QAAU;AAAA,IAClB,CAAC;AAAA,EACH;AAAA;AAAA,EAEA,UAAU,kBAAAA,QAAU;AACtB;AAGA,IAAO,8BAAQ;",
+  "names": ["ImageLibraryModalImpl", "PropTypes"]
+}

package/dist/cjs/components/ImageLibraryModalImpl.js

@@ -0,0 +1,193 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ImageLibraryModalImpl_exports = {};
+__export(ImageLibraryModalImpl_exports, {
+  default: () => ImageLibraryModalImpl
+});
+module.exports = __toCommonJS(ImageLibraryModalImpl_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_modal = require("@elliemae/ds-modal");
+var import_ds_spinner = require("@elliemae/ds-spinner");
+var import_ds_icon = require("@elliemae/ds-icon");
+var import_lodash = require("lodash");
+var import_react_loading_image = __toESM(require("react-loading-image"));
+var import_ds_icons = require("@elliemae/ds-icons");
+const elementClassName = "imglibmodal-element";
+class ImageLibraryModalImpl extends import_react.default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onReject = () => {
+      const { onReject, onClose } = this.props;
+      if (onReject) {
+        onReject();
+      } else {
+        onClose();
+      }
+    };
+    this.handleElementClick = (e, image) => {
+      if (e.key && e.key !== " ") {
+        return;
+      }
+      const { selected } = this.state;
+      const { disableDoubleClick, onConfirm, onSelect } = this.props;
+      if (image === selected && onConfirm && !disableDoubleClick) {
+        onConfirm();
+        return;
+      }
+      this.setState({
+        selected: image,
+        user: this.getUser(image)
+      });
+      if (onSelect) {
+        onSelect(image);
+      }
+    };
+    this.renderElements = () => {
+      const { imagesData } = this.props;
+      if (!imagesData) {
+        return "Empty";
+      }
+      const { selected } = this.state;
+      return imagesData.map((image, idx) => {
+        const extras = {};
+        const { name, id } = image;
+        if (this.focusFirst && idx === 0) {
+          extras.ref = (element) => element && element.focus();
+          this.focusFirst = void 0;
+        } else if (selected && name === selected.name) {
+          extras.ref = (element) => element && element.focus();
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: elementClassName,
+            onClick: (e) => this.handleElementClick(e, image),
+            onKeyUp: (e) => this.handleElementClick(e, image),
+            role: "button",
+            tabIndex: 0,
+            ...extras,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "content", children: name })
+          },
+          id || `${name}_${idx}`
+        );
+      });
+    };
+    this.renderSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_spinner.DSSpinner, { message: "Loading...", size: "m" });
+    this.renderError = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ImageMissing, { color: import_ds_icon.DSIconColors.NEUTRAL, size: import_ds_icon.DSIconSizes.M });
+    this.state = {
+      selected: void 0,
+      user: void 0
+    };
+    this.preventSpacebarScroll();
+  }
+  componentDidMount() {
+    const { imagesData } = this.props;
+    if (imagesData) {
+      this.handleElementClick({}, imagesData[0]);
+      this.focusFirst = true;
+    }
+  }
+  getDerivedStateFromProps(nextProps) {
+    const { imagesData } = this.props;
+    if (!imagesData && nextProps.imagesData) {
+      this.setState({ selected: imagesData[0] });
+    }
+  }
+  getUser(selected) {
+    if (!selected) {
+      return "";
+    }
+    const index = selected.createdBy.lastIndexOf("user:");
+    if (index === -1) {
+      return selected.createdBy;
+    }
+    return selected.createdBy.substring(index + 5);
+  }
+  preventSpacebarScroll() {
+    document.onkeypress = function(e) {
+      if (!(0, import_lodash.includes)(e.target.className, elementClassName)) {
+        return true;
+      }
+      e = e || window.event;
+      const charCode = e.keyCode || e.which;
+      if (charCode === 32) {
+        e.preventDefault();
+        return false;
+      }
+      return true;
+    };
+  }
+  drawDiv(className, content) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: content });
+  }
+  drawLabel(className, label, value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "value", children: value })
+    ] });
+  }
+  render() {
+    const { selected, user } = this.state;
+    const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_modal.DSModal,
+      {
+        containerProps,
+        ...modalProps,
+        className: "em-ds-modal-image-library",
+        onReject: this.onReject,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col-1", children: [
+            this.drawDiv("title", "Company Images"),
+            this.renderElements()
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col-2", children: [
+            this.drawDiv("title", selected ? selected.name : ""),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react_loading_image.default,
+              {
+                className: "image-loader",
+                error: this.renderError,
+                loading: this.renderSpinner,
+                src: selected ? selected.url : ""
+              }
+            ),
+            selected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "info", children: [
+              this.drawLabel("info-element", "Created Date:", selected.createdDate),
+              this.drawLabel("info-element", "Created By:", user)
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+}
+//# sourceMappingURL=ImageLibraryModalImpl.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ImageLibraryModalImpl.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSModal } from '@elliemae/ds-modal';\nimport { DSSpinner } from '@elliemae/ds-spinner';\nimport { DSIconSizes as ICONS_SIZES, DSIconColors as ICONS_COLORS } from '@elliemae/ds-icon';\nimport { includes } from 'lodash';\nimport ImageLoader from 'react-loading-image';\nimport { ImageMissing } from '@elliemae/ds-icons';\n\nconst elementClassName = 'imglibmodal-element';\n\nexport default class ImageLibraryModalImpl extends React.PureComponent {\n  constructor(props) {\n    super(props);\n    this.state = {\n      selected: undefined,\n      user: undefined,\n    };\n    this.preventSpacebarScroll();\n  }\n\n  componentDidMount() {\n    const { imagesData } = this.props;\n    if (imagesData) {\n      this.handleElementClick({}, imagesData[0]);\n      this.focusFirst = true;\n    }\n  }\n\n  getDerivedStateFromProps(nextProps) {\n    const { imagesData } = this.props;\n    if (!imagesData && nextProps.imagesData) {\n      this.setState({ selected: imagesData[0] });\n    }\n  }\n\n  onReject = () => {\n    const { onReject, onClose } = this.props;\n    if (onReject) {\n      onReject();\n    } else {\n      onClose();\n    }\n  };\n\n  getUser(selected) {\n    if (!selected) {\n      return '';\n    }\n    const index = selected.createdBy.lastIndexOf('user:');\n    if (index === -1) {\n      return selected.createdBy;\n    }\n    return selected.createdBy.substring(index + 5);\n  }\n\n  handleElementClick = (e, image) => {\n    if (e.key && e.key !== ' ') {\n      return;\n    }\n    const { selected } = this.state;\n    const { disableDoubleClick, onConfirm, onSelect } = this.props;\n    if (image === selected && onConfirm && !disableDoubleClick) {\n      onConfirm();\n      return;\n    }\n    this.setState({\n      selected: image,\n      user: this.getUser(image),\n    });\n    if (onSelect) {\n      onSelect(image);\n    }\n  };\n\n  preventSpacebarScroll() {\n    document.onkeypress = function (e) {\n      if (!includes(e.target.className, elementClassName)) {\n        return true;\n      }\n      e = e || window.event;\n      const charCode = e.keyCode || e.which;\n      if (charCode === 32) {\n        e.preventDefault();\n        return false;\n      }\n      return true;\n    };\n  }\n\n  drawDiv(className, content) {\n    return <div className={className}>{content}</div>;\n  }\n\n  drawLabel(className, label, value) {\n    return (\n      <div className={className}>\n        <span className=\"label\">{label}</span>\n        <span className=\"value\">{value}</span>\n      </div>\n    );\n  }\n\n  renderElements = () => {\n    const { imagesData } = this.props;\n    if (!imagesData) {\n      return 'Empty';\n    }\n    const { selected } = this.state;\n    return imagesData.map((image, idx) => {\n      const extras = {};\n      const { name, id } = image;\n      if (this.focusFirst && idx === 0) {\n        extras.ref = (element) => element && element.focus();\n        this.focusFirst = undefined;\n      } else if (selected && name === selected.name) {\n        extras.ref = (element) => element && element.focus();\n      }\n      return (\n        <div\n          key={id || `${name}_${idx}`}\n          className={elementClassName}\n          onClick={(e) => this.handleElementClick(e, image)}\n          onKeyUp={(e) => this.handleElementClick(e, image)}\n          role=\"button\"\n          tabIndex={0}\n          {...extras}\n        >\n          <div className=\"content\">{name}</div>\n        </div>\n      );\n    });\n  };\n\n  renderSpinner = () => <DSSpinner message=\"Loading...\" size=\"m\" />;\n\n  renderError = () => <ImageMissing color={ICONS_COLORS.NEUTRAL} size={ICONS_SIZES.M} />;\n\n  render() {\n    const { selected, user } = this.state;\n    const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;\n    return (\n      <DSModal\n        containerProps={containerProps}\n        {...modalProps}\n        className=\"em-ds-modal-image-library\"\n        onReject={this.onReject}\n      >\n        <div className=\"wrapper\">\n          <div className=\"col-1\">\n            {this.drawDiv('title', 'Company Images')}\n            {this.renderElements()}\n          </div>\n          <div className=\"col-2\">\n            {this.drawDiv('title', selected ? selected.name : '')}\n            <ImageLoader\n              className=\"image-loader\"\n              error={this.renderError}\n              loading={this.renderSpinner}\n              src={selected ? selected.url : ''}\n            />\n            {selected && (\n              <div className=\"info\">\n                {this.drawLabel('info-element', 'Created Date:', selected.createdDate)}\n                {this.drawLabel('info-element', 'Created By:', user)}\n              </div>\n            )}\n          </div>\n        </div>\n      </DSModal>\n    );\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React", "ICONS_COLORS", "ICONS_SIZES", "ImageLoader"]
+}

package/dist/cjs/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -29,10 +28,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
-  default: () => import_ds_legacy_imagelibrarymodal.default
+  DSImageLibraryModal: () => import_DSImageLibraryModal.DSImageLibraryModal,
+  default: () => import_DSImageLibraryModal.default
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("@elliemae/ds-legacy-imagelibrarymodal"), module.exports);
-var import_ds_legacy_imagelibrarymodal = __toESM(require("@elliemae/ds-legacy-imagelibrarymodal"));
+var import_DSImageLibraryModal = __toESM(require("./DSImageLibraryModal.js"));
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from '@elliemae/ds-legacy-imagelibrarymodal';\nexport { default } from '@elliemae/ds-legacy-imagelibrarymodal';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,kDAAd;AACA,yCAAwB;",
+  "sourcesContent": ["export { default, DSImageLibraryModal } from './DSImageLibraryModal.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAA6C;",
   "names": []
 }

package/dist/esm/DSImageLibraryModal.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { MODAL_TYPE } from "@elliemae/ds-modal";
+import { sizeOptions } from "@elliemae/ds-shared";
+import ImageLibraryModalImpl from "./components/ImageLibraryModalImpl.js";
+const modalTypes = Object.values(MODAL_TYPE);
+const DSImageLibraryModal = ({
+  containerProps = {},
+  confirmLabel = "Add",
+  disableDoubleClick = false,
+  isOpen = true,
+  modalTitle = "Add Image",
+  modalType = modalTypes[2],
+  rejectLabel = "Cancel",
+  shouldCloseOnOverlayClick = true,
+  size = sizeOptions[3],
+  imagesData = [
+    {
+      url: "https://www.freeiconspng.com/minicovers/no-image-icon-6.png",
+      name: "no image",
+      createdBy: "user:John Doe",
+      createdDate: "0000-01-01 00:00 AM UTC"
+    }
+  ],
+  onSelect = () => null,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  ImageLibraryModalImpl,
+  {
+    confirmLabel,
+    containerProps,
+    disableDoubleClick,
+    imagesData,
+    isOpen,
+    modalTitle,
+    modalType,
+    onSelect,
+    rejectLabel,
+    shouldCloseOnOverlayClick,
+    size,
+    ...rest
+  }
+);
+DSImageLibraryModal.propTypes = {
+  containerProps: PropTypes.shape({}),
+  /** List of images src */
+  imagesData: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string,
+      name: PropTypes.string
+    })
+  ),
+  /** Handler when user selects an image */
+  onSelect: PropTypes.func
+};
+var DSImageLibraryModal_default = DSImageLibraryModal;
+export {
+  DSImageLibraryModal,
+  DSImageLibraryModal_default as default
+};
+//# sourceMappingURL=DSImageLibraryModal.js.map

package/dist/esm/DSImageLibraryModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSImageLibraryModal.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { MODAL_TYPE } from '@elliemae/ds-modal';\nimport { sizeOptions } from '@elliemae/ds-shared';\nimport ImageLibraryModalImpl from './components/ImageLibraryModalImpl.js';\n\nconst modalTypes = Object.values(MODAL_TYPE);\n\nconst DSImageLibraryModal = ({\n  containerProps = {},\n  confirmLabel = 'Add',\n  disableDoubleClick = false,\n  isOpen = true,\n  modalTitle = 'Add Image',\n  modalType = modalTypes[2],\n  rejectLabel = 'Cancel',\n  shouldCloseOnOverlayClick = true,\n  size = sizeOptions[3],\n  imagesData = [\n    {\n      url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',\n      name: 'no image',\n      createdBy: 'user:John Doe',\n      createdDate: '0000-01-01 00:00 AM UTC',\n    },\n  ],\n  onSelect = () => null,\n  ...rest\n}) => (\n  <ImageLibraryModalImpl\n    confirmLabel={confirmLabel}\n    containerProps={containerProps}\n    disableDoubleClick={disableDoubleClick}\n    imagesData={imagesData}\n    isOpen={isOpen}\n    modalTitle={modalTitle}\n    modalType={modalType}\n    onSelect={onSelect}\n    rejectLabel={rejectLabel}\n    shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n    size={size}\n    {...rest}\n  />\n);\n\n/** Inherits DSModal props */\nDSImageLibraryModal.propTypes = {\n  containerProps: PropTypes.shape({}),\n  /** List of images src */\n  imagesData: PropTypes.arrayOf(\n    PropTypes.shape({\n      url: PropTypes.string,\n      name: PropTypes.string,\n    }),\n  ),\n  /** Handler when user selects an image */\n  onSelect: PropTypes.func,\n};\n\nexport { DSImageLibraryModal };\nexport default DSImageLibraryModal;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BrB;AA5BF,OAAO,eAAe;AACtB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,OAAO,2BAA2B;AAElC,MAAM,aAAa,OAAO,OAAO,UAAU;AAE3C,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY,WAAW,CAAC;AAAA,EACxB,cAAc;AAAA,EACd,4BAA4B;AAAA,EAC5B,OAAO,YAAY,CAAC;AAAA,EACpB,aAAa;AAAA,IACX;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,WAAW,MAAM;AAAA,EACjB,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,oBAAoB,YAAY;AAAA,EAC9B,gBAAgB,UAAU,MAAM,CAAC,CAAC;AAAA;AAAA,EAElC,YAAY,UAAU;AAAA,IACpB,UAAU,MAAM;AAAA,MACd,KAAK,UAAU;AAAA,MACf,MAAM,UAAU;AAAA,IAClB,CAAC;AAAA,EACH;AAAA;AAAA,EAEA,UAAU,UAAU;AACtB;AAGA,IAAO,8BAAQ;",
+  "names": []
+}

package/dist/esm/components/ImageLibraryModalImpl.js

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { DSModal } from "@elliemae/ds-modal";
+import { DSSpinner } from "@elliemae/ds-spinner";
+import { DSIconSizes as ICONS_SIZES, DSIconColors as ICONS_COLORS } from "@elliemae/ds-icon";
+import { includes } from "lodash";
+import ImageLoader from "react-loading-image";
+import { ImageMissing } from "@elliemae/ds-icons";
+const elementClassName = "imglibmodal-element";
+class ImageLibraryModalImpl extends React2.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onReject = () => {
+      const { onReject, onClose } = this.props;
+      if (onReject) {
+        onReject();
+      } else {
+        onClose();
+      }
+    };
+    this.handleElementClick = (e, image) => {
+      if (e.key && e.key !== " ") {
+        return;
+      }
+      const { selected } = this.state;
+      const { disableDoubleClick, onConfirm, onSelect } = this.props;
+      if (image === selected && onConfirm && !disableDoubleClick) {
+        onConfirm();
+        return;
+      }
+      this.setState({
+        selected: image,
+        user: this.getUser(image)
+      });
+      if (onSelect) {
+        onSelect(image);
+      }
+    };
+    this.renderElements = () => {
+      const { imagesData } = this.props;
+      if (!imagesData) {
+        return "Empty";
+      }
+      const { selected } = this.state;
+      return imagesData.map((image, idx) => {
+        const extras = {};
+        const { name, id } = image;
+        if (this.focusFirst && idx === 0) {
+          extras.ref = (element) => element && element.focus();
+          this.focusFirst = void 0;
+        } else if (selected && name === selected.name) {
+          extras.ref = (element) => element && element.focus();
+        }
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: elementClassName,
+            onClick: (e) => this.handleElementClick(e, image),
+            onKeyUp: (e) => this.handleElementClick(e, image),
+            role: "button",
+            tabIndex: 0,
+            ...extras,
+            children: /* @__PURE__ */ jsx("div", { className: "content", children: name })
+          },
+          id || `${name}_${idx}`
+        );
+      });
+    };
+    this.renderSpinner = () => /* @__PURE__ */ jsx(DSSpinner, { message: "Loading...", size: "m" });
+    this.renderError = () => /* @__PURE__ */ jsx(ImageMissing, { color: ICONS_COLORS.NEUTRAL, size: ICONS_SIZES.M });
+    this.state = {
+      selected: void 0,
+      user: void 0
+    };
+    this.preventSpacebarScroll();
+  }
+  componentDidMount() {
+    const { imagesData } = this.props;
+    if (imagesData) {
+      this.handleElementClick({}, imagesData[0]);
+      this.focusFirst = true;
+    }
+  }
+  getDerivedStateFromProps(nextProps) {
+    const { imagesData } = this.props;
+    if (!imagesData && nextProps.imagesData) {
+      this.setState({ selected: imagesData[0] });
+    }
+  }
+  getUser(selected) {
+    if (!selected) {
+      return "";
+    }
+    const index = selected.createdBy.lastIndexOf("user:");
+    if (index === -1) {
+      return selected.createdBy;
+    }
+    return selected.createdBy.substring(index + 5);
+  }
+  preventSpacebarScroll() {
+    document.onkeypress = function(e) {
+      if (!includes(e.target.className, elementClassName)) {
+        return true;
+      }
+      e = e || window.event;
+      const charCode = e.keyCode || e.which;
+      if (charCode === 32) {
+        e.preventDefault();
+        return false;
+      }
+      return true;
+    };
+  }
+  drawDiv(className, content) {
+    return /* @__PURE__ */ jsx("div", { className, children: content });
+  }
+  drawLabel(className, label, value) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      /* @__PURE__ */ jsx("span", { className: "label", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "value", children: value })
+    ] });
+  }
+  render() {
+    const { selected, user } = this.state;
+    const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;
+    return /* @__PURE__ */ jsx(
+      DSModal,
+      {
+        containerProps,
+        ...modalProps,
+        className: "em-ds-modal-image-library",
+        onReject: this.onReject,
+        children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+          /* @__PURE__ */ jsxs("div", { className: "col-1", children: [
+            this.drawDiv("title", "Company Images"),
+            this.renderElements()
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "col-2", children: [
+            this.drawDiv("title", selected ? selected.name : ""),
+            /* @__PURE__ */ jsx(
+              ImageLoader,
+              {
+                className: "image-loader",
+                error: this.renderError,
+                loading: this.renderSpinner,
+                src: selected ? selected.url : ""
+              }
+            ),
+            selected && /* @__PURE__ */ jsxs("div", { className: "info", children: [
+              this.drawLabel("info-element", "Created Date:", selected.createdDate),
+              this.drawLabel("info-element", "Created By:", user)
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+}
+export {
+  ImageLibraryModalImpl as default
+};
+//# sourceMappingURL=ImageLibraryModalImpl.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/ImageLibraryModalImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSModal } from '@elliemae/ds-modal';\nimport { DSSpinner } from '@elliemae/ds-spinner';\nimport { DSIconSizes as ICONS_SIZES, DSIconColors as ICONS_COLORS } from '@elliemae/ds-icon';\nimport { includes } from 'lodash';\nimport ImageLoader from 'react-loading-image';\nimport { ImageMissing } from '@elliemae/ds-icons';\n\nconst elementClassName = 'imglibmodal-element';\n\nexport default class ImageLibraryModalImpl extends React.PureComponent {\n  constructor(props) {\n    super(props);\n    this.state = {\n      selected: undefined,\n      user: undefined,\n    };\n    this.preventSpacebarScroll();\n  }\n\n  componentDidMount() {\n    const { imagesData } = this.props;\n    if (imagesData) {\n      this.handleElementClick({}, imagesData[0]);\n      this.focusFirst = true;\n    }\n  }\n\n  getDerivedStateFromProps(nextProps) {\n    const { imagesData } = this.props;\n    if (!imagesData && nextProps.imagesData) {\n      this.setState({ selected: imagesData[0] });\n    }\n  }\n\n  onReject = () => {\n    const { onReject, onClose } = this.props;\n    if (onReject) {\n      onReject();\n    } else {\n      onClose();\n    }\n  };\n\n  getUser(selected) {\n    if (!selected) {\n      return '';\n    }\n    const index = selected.createdBy.lastIndexOf('user:');\n    if (index === -1) {\n      return selected.createdBy;\n    }\n    return selected.createdBy.substring(index + 5);\n  }\n\n  handleElementClick = (e, image) => {\n    if (e.key && e.key !== ' ') {\n      return;\n    }\n    const { selected } = this.state;\n    const { disableDoubleClick, onConfirm, onSelect } = this.props;\n    if (image === selected && onConfirm && !disableDoubleClick) {\n      onConfirm();\n      return;\n    }\n    this.setState({\n      selected: image,\n      user: this.getUser(image),\n    });\n    if (onSelect) {\n      onSelect(image);\n    }\n  };\n\n  preventSpacebarScroll() {\n    document.onkeypress = function (e) {\n      if (!includes(e.target.className, elementClassName)) {\n        return true;\n      }\n      e = e || window.event;\n      const charCode = e.keyCode || e.which;\n      if (charCode === 32) {\n        e.preventDefault();\n        return false;\n      }\n      return true;\n    };\n  }\n\n  drawDiv(className, content) {\n    return <div className={className}>{content}</div>;\n  }\n\n  drawLabel(className, label, value) {\n    return (\n      <div className={className}>\n        <span className=\"label\">{label}</span>\n        <span className=\"value\">{value}</span>\n      </div>\n    );\n  }\n\n  renderElements = () => {\n    const { imagesData } = this.props;\n    if (!imagesData) {\n      return 'Empty';\n    }\n    const { selected } = this.state;\n    return imagesData.map((image, idx) => {\n      const extras = {};\n      const { name, id } = image;\n      if (this.focusFirst && idx === 0) {\n        extras.ref = (element) => element && element.focus();\n        this.focusFirst = undefined;\n      } else if (selected && name === selected.name) {\n        extras.ref = (element) => element && element.focus();\n      }\n      return (\n        <div\n          key={id || `${name}_${idx}`}\n          className={elementClassName}\n          onClick={(e) => this.handleElementClick(e, image)}\n          onKeyUp={(e) => this.handleElementClick(e, image)}\n          role=\"button\"\n          tabIndex={0}\n          {...extras}\n        >\n          <div className=\"content\">{name}</div>\n        </div>\n      );\n    });\n  };\n\n  renderSpinner = () => <DSSpinner message=\"Loading...\" size=\"m\" />;\n\n  renderError = () => <ImageMissing color={ICONS_COLORS.NEUTRAL} size={ICONS_SIZES.M} />;\n\n  render() {\n    const { selected, user } = this.state;\n    const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;\n    return (\n      <DSModal\n        containerProps={containerProps}\n        {...modalProps}\n        className=\"em-ds-modal-image-library\"\n        onReject={this.onReject}\n      >\n        <div className=\"wrapper\">\n          <div className=\"col-1\">\n            {this.drawDiv('title', 'Company Images')}\n            {this.renderElements()}\n          </div>\n          <div className=\"col-2\">\n            {this.drawDiv('title', selected ? selected.name : '')}\n            <ImageLoader\n              className=\"image-loader\"\n              error={this.renderError}\n              loading={this.renderSpinner}\n              src={selected ? selected.url : ''}\n            />\n            {selected && (\n              <div className=\"info\">\n                {this.drawLabel('info-element', 'Created Date:', selected.createdDate)}\n                {this.drawLabel('info-element', 'Created By:', user)}\n              </div>\n            )}\n          </div>\n        </div>\n      </DSModal>\n    );\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-export * from "@elliemae/ds-legacy-imagelibrarymodal";
-import { default as default2 } from "@elliemae/ds-legacy-imagelibrarymodal";
+import { default as default2, DSImageLibraryModal } from "./DSImageLibraryModal.js";
 export {
+  DSImageLibraryModal,
   default2 as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +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 '@elliemae/ds-legacy-imagelibrarymodal';\nexport { default } from '@elliemae/ds-legacy-imagelibrarymodal';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSImageLibraryModal } from './DSImageLibraryModal.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,UAAS,2BAA2B;",
   "names": ["default"]
 }

package/dist/types/DSImageLibraryModal.d.ts

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+declare const DSImageLibraryModal: {
+    ({ containerProps, confirmLabel, disableDoubleClick, isOpen, modalTitle, modalType, rejectLabel, shouldCloseOnOverlayClick, size, imagesData, onSelect, ...rest }: {
+        [x: string]: any;
+        containerProps?: {} | undefined;
+        confirmLabel?: string | undefined;
+        disableDoubleClick?: boolean | undefined;
+        isOpen?: boolean | undefined;
+        modalTitle?: string | undefined;
+        modalType?: string | undefined;
+        rejectLabel?: string | undefined;
+        shouldCloseOnOverlayClick?: boolean | undefined;
+        size?: string | undefined;
+        imagesData?: {
+            url: string;
+            name: string;
+            createdBy: string;
+            createdDate: string;
+        }[] | undefined;
+        onSelect?: (() => null) | undefined;
+    }): import("react/jsx-runtime.js").JSX.Element;
+    /** Inherits DSModal props */
+    propTypes: {
+        containerProps: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+        /** List of images src */
+        imagesData: PropTypes.Requireable<(PropTypes.InferProps<{
+            url: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        /** Handler when user selects an image */
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export { DSImageLibraryModal };
+export default DSImageLibraryModal;

package/dist/types/components/ImageLibraryModalImpl.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export default class ImageLibraryModalImpl extends React.PureComponent {
+    constructor(props: any);
+    componentDidMount(): void;
+    getDerivedStateFromProps(nextProps: any): void;
+    onReject: () => void;
+    getUser(selected: any): any;
+    handleElementClick: (e: any, image: any) => void;
+    preventSpacebarScroll(): void;
+    drawDiv(className: any, content: any): import("react/jsx-runtime").JSX.Element;
+    drawLabel(className: any, label: any, value: any): import("react/jsx-runtime").JSX.Element;
+    renderElements: () => any;
+    renderSpinner: () => import("react/jsx-runtime").JSX.Element;
+    renderError: () => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/types/index.d.ts

@@ -1,2 +1 @@
-export * from '@elliemae/ds-legacy-imagelibrarymodal';
-export { default } from '@elliemae/ds-legacy-imagelibrarymodal';
+export { default, DSImageLibraryModal } from './DSImageLibraryModal.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-imagelibrarymodal",
-  "version": "3.32.2-next.1",
+  "version": "3.33.0-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Image Library Modal",
   "files": [
@@ -35,12 +35,18 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-legacy-imagelibrarymodal": "^1.0.5"
+    "prop-types": "~15.8.1",
+    "react-loading-image": "~0.5.0",
+    "@elliemae/ds-icon": "3.33.0-next.0",
+    "@elliemae/ds-icons": "3.33.0-next.0",
+    "@elliemae/ds-modal": "3.33.0-next.0",
+    "@elliemae/ds-shared": "3.33.0-next.0",
+    "@elliemae/ds-spinner": "3.33.0-next.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.32.2-next.1"
+    "@elliemae/ds-monorepo-devops": "3.33.0-next.0"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",