@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/modal/SpsModalFooter.d.ts

@@ -0,0 +1,16 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    handleAsync: PropTypes.Requireable<PropTypes.InferProps<{
+        turnAsyncOn: PropTypes.Requireable<(...args: any[]) => any>;
+        turnAsyncOff: PropTypes.Requireable<(...args: any[]) => any>;
+        isAsyncOn: PropTypes.Requireable<boolean>;
+    }>>;
+    closeModal: PropTypes.Requireable<(...args: any[]) => any>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsModalFooterProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsModalFooter(props: SpsModalFooterProps): JSX.Element;
+export {};

package/dist/out-tsc/modal/SpsModalFooter.js

@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from "react";
+import clsx from "clsx";
+import { ButtonKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { SpsButton } from "../button/SpsButton";
+var propsDoc = {
+    handleAsync: "{ turnAsyncOn: () => void, turnAsyncOff: () => void, isAsyncOn: boolean }",
+    closeModal: "() => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { handleAsync: PropTypes.shape({
+        turnAsyncOn: PropTypes.func,
+        turnAsyncOff: PropTypes.func,
+        isAsyncOn: PropTypes.bool,
+    }), closeModal: PropTypes.func });
+export function SpsModalFooter(props) {
+    var children = props.children, className = props.className, handleAsync = props.handleAsync, closeModal = props.closeModal;
+    var footerClass = clsx("sps-modal-legacy__footer", className);
+    return (React.createElement("div", { className: footerClass }, React.Children.count(children) ? (React.Children.map(children, function (child, i) {
+        if (i === React.Children.count(children) - 1) {
+            return React.cloneElement(child, {
+                closeModal: closeModal,
+                handleAsync: handleAsync,
+                kind: "key",
+            });
+        }
+        return React.cloneElement(child, {
+            closeModal: closeModal,
+            handleAsync: handleAsync,
+        });
+    })) : (React.createElement(SpsButton, { kind: ButtonKind.KEY, onClick: closeModal }, "Ok"))));
+}
+Object.assign(SpsModalFooter, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsModalFooter",
+});
+//# sourceMappingURL=SpsModalFooter.js.map

package/dist/out-tsc/modal/SpsModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModalFooter.js","sourceRoot":"","sources":["../../../src/modal/SpsModalFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,IAAM,QAAQ,GAAG;IACf,WAAW,EAAE,2EAA2E;IACxF,UAAU,EAAE,YAAY;CACzB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC;QAC3B,WAAW,EAAE,SAAS,CAAC,IAAI;QAC3B,YAAY,EAAE,SAAS,CAAC,IAAI;QAC5B,SAAS,EAAE,SAAS,CAAC,IAAI;KAC1B,CAAC,EACF,UAAU,EAAE,SAAS,CAAC,IAAI,GAC3B,CAAC;AAIF,MAAM,UAAU,cAAc,CAAC,KAA0B;IAErD,IAAA,QAAQ,GAIN,KAAK,SAJC,EACR,SAAS,GAGP,KAAK,UAHE,EACT,WAAW,GAET,KAAK,YAFI,EACX,UAAU,GACR,KAAK,WADG,CACF;IAEV,IAAM,WAAW,GAAG,IAAI,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC;IAChE,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,IACxB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAChC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,CAAC;QACpC,IAAI,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC5C,OAAO,KAAK,CAAC,YAAY,CAAC,KAAgC,EAAE;gBAC1D,UAAU,YAAA;gBACV,WAAW,aAAA;gBACX,IAAI,EAAE,KAAK;aACZ,CAAC,CAAC;SACJ;QACD,OAAO,KAAK,CAAC,YAAY,CAAC,KAAgC,EAAE;YAC1D,UAAU,YAAA;YACV,WAAW,aAAA;SACZ,CAAC,CAAC;IACL,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,IAAI,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,EAAE,UAAU,SAAgB,CACrE,CACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IAC5B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,gBAAgB;CAC9B,CAAC,CAAC"}

package/dist/out-tsc/modal/SpsModalHeader.d.ts

@@ -0,0 +1,11 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    header: PropTypes.Requireable<string | (() => string)>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsModalHeaderProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsModalHeader(props: SpsModalHeaderProps): JSX.Element;
+export {};

package/dist/out-tsc/modal/SpsModalHeader.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import clsx from "clsx";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    header: "string | () => string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { header: PropTypes.oneOfType([
+        PropTypes.string, PropTypes.fun(),
+    ]) });
+export function SpsModalHeader(props) {
+    var header = props.header, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["header", "className", "unsafelyReplaceClassName"]);
+    var headerClass = unsafelyReplaceClassName || clsx("sps-modal-legacy__header", className);
+    var modalHeader = typeof header === "function"
+        ? header
+        : function () { return React.createElement("div", { className: "sps-modal-legacy__title" }, header); };
+    return React.createElement("div", __assign({ className: headerClass }, rest), modalHeader());
+}
+Object.assign(SpsModalHeader, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsModalHeader",
+});
+//# sourceMappingURL=SpsModalHeader.js.map

package/dist/out-tsc/modal/SpsModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModalHeader.js","sourceRoot":"","sources":["../../../src/modal/SpsModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,MAAM,EAAE,uBAAuB;CAChC,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,EAAgB;KAChD,CAAC,GACH,CAAC;AAIF,MAAM,UAAU,cAAc,CAAC,KAA0B;IAErD,IAAA,MAAM,GAIJ,KAAK,OAJD,EACN,SAAS,GAGP,KAAK,UAHE,EACT,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EALH,mDAKL,CADQ,CACC;IAEV,IAAM,WAAW,GAAG,wBAAwB,IAAI,IAAI,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC;IAC5F,IAAM,WAAW,GAAG,OAAO,MAAM,KAAK,UAAU;QAC9C,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,cAAM,OAAA,6BAAK,SAAS,EAAC,yBAAyB,IAAE,MAAM,CAAO,EAAvD,CAAuD,CAAC;IAClE,OAAO,sCAAK,SAAS,EAAE,WAAW,IAAM,IAAI,GAAG,WAAW,EAAE,CAAO,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IAC5B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,gBAAgB;CAC9B,CAAC,CAAC"}

package/dist/out-tsc/modal/SpsModalOverlay.d.ts

@@ -0,0 +1,12 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
+    backdrop: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsModalOverlayProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsModalOverlay(props: SpsModalOverlayProps): JSX.Element;
+export {};

package/dist/out-tsc/modal/SpsModalOverlay.js

@@ -0,0 +1,53 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import clsx from "clsx";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    onOverlayClick: "EventHandler",
+    backdrop: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { onOverlayClick: PropTypes.func, backdrop: PropTypes.string });
+export function SpsModalOverlay(props) {
+    var backdrop = props.backdrop, onOverlayClick = props.onOverlayClick, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["backdrop", "onOverlayClick", "data-testid", "unsafelyReplaceClassName"]);
+    var element = React.useRef();
+    React.useEffect(function () {
+        if (typeof onOverlayClick === "function" && backdrop !== "static" && element) {
+            element.current.addEventListener("mousedown", onOverlayClick, false);
+        }
+    }, []);
+    React.useEffect(function () {
+        if (typeof onOverlayClick === "function" && backdrop !== "static" && element) {
+            element.current.removeEventListener("mousedown", onOverlayClick, false);
+            element.current.addEventListener("mousedown", onOverlayClick, false);
+        }
+    }, [onOverlayClick]);
+    var overlayClasses = unsafelyReplaceClassName || clsx("modal-backdrop show");
+    return (React.createElement("div", __assign({ className: overlayClasses, "data-testid": testId, ref: element }, rest)));
+}
+Object.assign(SpsModalOverlay, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsModalOverlay",
+});
+//# sourceMappingURL=SpsModalOverlay.js.map

package/dist/out-tsc/modal/SpsModalOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModalOverlay.js","sourceRoot":"","sources":["../../../src/modal/SpsModalOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,cAAc,EAAE,cAAc;IAC9B,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,cAAc,EAAE,SAAS,CAAC,IAAI,EAC9B,QAAQ,EAAE,SAAS,CAAC,MAAM,GAC3B,CAAC;AAIF,MAAM,UAAU,eAAe,CAAC,KAA2B;IAEvD,IAAA,QAAQ,GAKN,KAAK,SALC,EACR,cAAc,GAIZ,KAAK,eAJO,EACC,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EANH,yEAML,CADQ,CACC;IAEV,IAAM,OAAO,GAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;IAEpC,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,OAAO,cAAc,KAAK,UAAU,IAAI,QAAQ,KAAK,QAAQ,IAAI,OAAO,EAAE;YAC5E,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;SACtE;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,OAAO,cAAc,KAAK,UAAU,IAAI,QAAQ,KAAK,QAAQ,IAAI,OAAO,EAAE;YAC5E,OAAO,CAAC,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;YACxE,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;SACtE;IACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,IAAM,cAAc,GAAG,wBAAwB,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAE/E,OAAO,CACL,sCAAK,SAAS,EAAE,cAAc,iBAAe,MAAM,EAAE,GAAG,EAAE,OAAO,IAAM,IAAI,EAAI,CAChF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IAC7B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,iBAAiB;CAC/B,CAAC,CAAC"}

package/dist/out-tsc/modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SpsModal";
+export * from "./SpsModal.examples";

package/dist/out-tsc/modal/index.js

@@ -0,0 +1,5 @@
+// Circular dep will be resolved when we delete the old modal
+/* eslint-disable import/no-cycle */
+export * from "./SpsModal";
+export * from "./SpsModal.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,oCAAoC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC"}

package/dist/out-tsc/modal-v2/SpsModalV2.d.ts

@@ -0,0 +1,18 @@
+import { ModalKind, ModalSize } from "@spscommerce/ds-shared";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    kind: PropTypes.Requireable<ModalKind>;
+    size: PropTypes.Requireable<ModalSize>;
+    title: PropTypes.Requireable<string>;
+    onClose: PropTypes.Requireable<() => void>;
+    focusElementOnOpen: PropTypes.Requireable<React.MutableRefObject<HTMLElement>>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsModalV2Props = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsModalV2Footer({ children }: SpsModalV2Props): JSX.Element;
+export declare function SpsModalV2({ children, className, id: idProp, kind, size, onClose, focusElementOnOpen, title, ...rest }: SpsModalV2Props): JSX.Element;
+export {};

package/dist/out-tsc/modal-v2/SpsModalV2.js

@@ -0,0 +1,146 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { ModalKind, ModalSize, ButtonKind } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { selectChildren } from "../utils/selectChildren";
+import { useElementId } from "../utils/useElementId";
+import { SpsButton } from "../button/SpsButton";
+import { I18nContext } from "../i18n";
+import { PortalContext } from "../utils/usePortal";
+var propsDoc = {
+    kind: "ModalKind",
+    size: "ModalSize",
+    title: "string",
+    onClose: "() => void",
+    focusElementOnOpen: "React.MutableRefObject<HTMLElement>",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { kind: PropTypes.enumValue(ModalKind), size: PropTypes.enumValue(ModalSize), title: PropTypes.string, onClose: PropTypes.fun(), focusElementOnOpen: PropTypes.ref() });
+export function SpsModalV2Footer(_a) {
+    var children = _a.children;
+    return React.createElement("div", { className: "sps-modal__footer" }, children);
+}
+Object.assign(SpsModalV2Footer, {
+    props: {},
+    propTypes: {},
+    displayName: "SpsModalV2Footer",
+});
+export function SpsModalV2(_a) {
+    var children = _a.children, className = _a.className, idProp = _a.id, _b = _a.kind, kind = _b === void 0 ? ModalKind.GENERAL : _b, _c = _a.size, size = _c === void 0 ? ModalSize.SMALL : _c, onClose = _a.onClose, focusElementOnOpen = _a.focusElementOnOpen, title = _a.title, rest = __rest(_a, ["children", "className", "id", "kind", "size", "onClose", "focusElementOnOpen", "title"]);
+    var id = useElementId(idProp);
+    var classes = clsx("sps-modal", "z-stratum-dialog", "sps-modal--" + kind, "sps-modal--" + size, className);
+    var t = React.useContext(I18nContext).t;
+    var rootElement = React.useRef();
+    var _d = __read(React.useState(false), 2), bodyIsReady = _d[0], setBodyIsReady = _d[1];
+    React.useEffect(function () {
+        var scrollbarWidth = window.innerWidth - document.body.clientWidth + "px";
+        document.body.style.paddingRight = scrollbarWidth;
+        document.body.style.overflow = "hidden";
+        /* eslint-disable no-param-reassign */
+        document.querySelectorAll(".z-stratum-bar").forEach(function (element) {
+            element.tempPaddingRightHolder = element.style.paddingRight;
+            element.style.paddingRight = scrollbarWidth;
+        });
+        setBodyIsReady(true);
+        return function () {
+            document.body.style.paddingRight = "initial";
+            document.body.style.overflow = "auto";
+            document.querySelectorAll(".z-stratum-bar").forEach(function (element) {
+                element.style.paddingRight = element.tempPaddingRightHolder || "";
+                delete element.tempPaddingRightHolder;
+            });
+        };
+        /* eslint-enable no-param-reassign */
+    }, []);
+    React.useEffect(function () {
+        if (focusElementOnOpen && focusElementOnOpen.current) {
+            focusElementOnOpen.current.focus();
+        }
+        else if (rootElement.current) {
+            rootElement.current.focus();
+        }
+    }, [focusElementOnOpen, bodyIsReady]);
+    var handleKeydown = React.useCallback(function (event) {
+        if (event && event.key === "Escape" && onClose) {
+            onClose();
+        }
+        if (event && event.key === "Tab") {
+            var focusableElements = rootElement.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            var firstFocusableElement = focusableElements[0];
+            var lastFocusableElement = focusableElements[focusableElements.length - 1];
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+            }
+            else if (event.shiftKey && event.target === firstFocusableElement) {
+                event.preventDefault();
+                lastFocusableElement.focus();
+            }
+            else if (!event.shiftKey && event.target === lastFocusableElement) {
+                event.preventDefault();
+                firstFocusableElement.focus();
+            }
+        }
+    }, [onClose]);
+    var _e = __read(selectChildren(children, [{ type: SpsModalV2Footer }]), 2), _f = __read(_e[0], 1), footer = _f[0], bodyContent = _e[1];
+    return bodyIsReady
+        ? (React.createElement("div", { id: id.current, role: "dialog", "aria-modal": true, "aria-labelledby": id.current + "-title", className: classes, onKeyDown: handleKeydown, tabIndex: -1, ref: rootElement },
+            React.createElement("div", __assign({}, rest, { className: "sps-modal__dialog" }),
+                React.createElement("div", { className: "sps-modal__titlebar" },
+                    React.createElement("div", { className: "sps-modal__title", id: id.current + "-title" }, title || t("design-system:modal.defaultTitle." + kind)),
+                    onClose && (React.createElement("div", { className: "sps-button sps-button--icon", onClick: onClose },
+                        React.createElement("button", { "aria-label": t("design-system:modal.close"), type: "button" },
+                            React.createElement("i", { className: "sps-icon sps-icon-x" }))))),
+                React.createElement("div", { className: "sps-modal__body" },
+                    React.createElement(PortalContext.Provider, { value: {
+                            parentElementRef: rootElement,
+                            fixed: true,
+                        } }, bodyContent)),
+                footer || (React.createElement("div", { className: "sps-modal__footer" },
+                    React.createElement(SpsButton, { kind: kind === ModalKind.SERIOUS_WARNING
+                            ? ButtonKind.DELETE
+                            : ButtonKind.KEY, onClick: onClose }, t("design-system:modal.defaultButtonLabel")))))))
+        : React.createElement(React.Fragment, null);
+}
+Object.assign(SpsModalV2, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsModalV2",
+});
+//# sourceMappingURL=SpsModalV2.js.map

package/dist/out-tsc/modal-v2/SpsModalV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsModalV2.js","sourceRoot":"","sources":["../../../src/modal-v2/SpsModalV2.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/modal-v2/index.d.ts

@@ -0,0 +1 @@
+export * from "./SpsModalV2";

package/dist/out-tsc/modal-v2/index.js

@@ -0,0 +1,2 @@
+export * from "./SpsModalV2";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/modal-v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal-v2/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/out-tsc/multi-select/SpsMultiSelect.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { Eventually } from "@spscommerce/utils";
+import type { SpsActionMethod } from "@spscommerce/ds-shared";
+import { SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import type { SpsFormControl } from "../form/hooks/formControl";
+import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
+declare const propTypes: {
+    action: PropTypes.Requireable<SpsActionMethod>;
+    captionKey: PropTypes.Requireable<string>;
+    clearSearchOnBlur: PropTypes.Requireable<boolean>;
+    debounce: PropTypes.Requireable<number>;
+    disabled: PropTypes.Requireable<boolean>;
+    disableSelected: PropTypes.Requireable<boolean>;
+    comparisonKey: PropTypes.Requireable<string>;
+    formControl: PropTypes.Requireable<SpsFormControl<any[]>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<any[]>>;
+    hideSelected: PropTypes.Requireable<boolean>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    onSearchChange: PropTypes.Requireable<(searchText: string) => void>;
+    options: PropTypes.Validator<any[] | Promise<any[]> | ((filter?: string) => Eventually<any[]>)>;
+    placeholder: PropTypes.Requireable<string>;
+    tallOptionList: PropTypes.Requireable<boolean>;
+    textKey: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<any>;
+    zeroState: PropTypes.Requireable<string>;
+    loading: PropTypes.Requireable<boolean>;
+    maxHeightOptionListPx: PropTypes.Requireable<number>;
+    maxHeightOptionListRem: PropTypes.Requireable<number>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsMultiSelectProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
+export declare function SpsMultiSelect({ action, captionKey, className, clearSearchOnBlur, debounce, disabled, disableSelected, comparisonKey, formControl, formMeta, hideSelected, id, onChange, onSearchChange, options, placeholder, tallOptionList, textKey, unsafelyReplaceClassName, value, zeroState, loading, icon, maxHeightOptionListPx, maxHeightOptionListRem, "data-testid": testId, ...rest }: SpsMultiSelectProps): JSX.Element;
+export {};

package/dist/out-tsc/multi-select/SpsMultiSelect.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsMultiSelectExamples: DSReactExamples;

package/dist/out-tsc/multi-select/SpsMultiSelect.examples.js

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsMultiSelectExamples = {
+    basic: {
+        label: "Basic",
+        description: "<p>Multi select component</p>",
+        examples: {
+            a_basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "]))),
+            },
+            b_disabled: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect disabled\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect disabled\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "]))),
+            },
+            c_externalTags: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const [foo, setFoo] = React.useState([\"orp\"])\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        function handleChange(event) {\n                            setFoo(event.target.value)\n                        }\n                        function removeByIndex(i) {\n                            foo.splice(i, 1)\n                            setFoo([...foo])\n                        }\n                        return (\n                            <>\n                                <SpsMultiSelect\n                                    hideSelected\n                                    options={opts}\n                                    value={foo}\n                                    onChange={handleChange}\n                                />\n                                <br />\n                                {foo.map((opt, i) => (\n                                    <SpsClickableTag\n                                        className=\"mt-1 ml-1\"\n                                        key={i}\n                                        onRemove={() => removeByIndex(i)}\n                                    >\n                                        {opt}\n                                    </SpsClickableTag>\n                                ))}\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [foo, setFoo] = React.useState([\"orp\"])\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        function handleChange(event) {\n                            setFoo(event.target.value)\n                        }\n                        function removeByIndex(i) {\n                            foo.splice(i, 1)\n                            setFoo([...foo])\n                        }\n                        return (\n                            <>\n                                <SpsMultiSelect\n                                    hideSelected\n                                    options={opts}\n                                    value={foo}\n                                    onChange={handleChange}\n                                />\n                                <br />\n                                {foo.map((opt, i) => (\n                                    <SpsClickableTag\n                                        className=\"mt-1 ml-1\"\n                                        key={i}\n                                        onRemove={() => removeByIndex(i)}\n                                    >\n                                        {opt}\n                                    </SpsClickableTag>\n                                ))}\n                            </>\n                        )\n                    }\n                "]))),
+            },
+            icon: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                icon={SpsIcon.FILTER}\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"])\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            things: [ opts[0] ]\n                        })\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.things}>Things</SpsLabel>\n                            <SpsMultiSelect\n                                icon={SpsIcon.FILTER}\n                                options={opts}\n                                formMeta={formMeta.fields.things}\n                                value={formValue.things}\n                            />\n                            <br />\n                            {JSON.stringify(formValue)}\n                        </>\n                    }\n                "]))),
+            },
+            objects: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\n                            { id: 1, name: \"Target\" },\n                            { id: 2, name: \"Cabela's\" },\n                            { id: 3, name: \"Best Buy\" },\n                        ])\n                        const [foo, setFoo] = React.useState([])\n                        function handleChange(event) {\n                            setFoo(event.target.value)\n                        }\n                        return (\n                            <>\n                                <SpsMultiSelect\n                                    options={opts}\n                                    textKey=\"name\"\n                                    value={foo}\n                                    onChange={handleChange}\n                                />\n                                <br />\n                                {JSON.stringify(foo)}\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\n                            { id: 1, name: \"Target\" },\n                            { id: 2, name: \"Cabela's\" },\n                            { id: 3, name: \"Best Buy\" },\n                        ])\n                        const [foo, setFoo] = React.useState([])\n                        function handleChange(event) {\n                            setFoo(event.target.value)\n                        }\n                        return (\n                            <>\n                                <SpsMultiSelect\n                                    options={opts}\n                                    textKey=\"name\"\n                                    value={foo}\n                                    onChange={handleChange}\n                                />\n                                <br />\n                                {JSON.stringify(foo)}\n                            </>\n                        )\n                    }\n                "]))),
+            },
+            disabledOptions: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function Component() {\n                        const [opts] = React.useState([\n                            { id: 1, name: \"Target\", disabled: true },\n                            { id: 2, name: \"Cabela's\", disabled: true },\n                            { id: 3, name: \"Best Buy\" },\n                        ])\n                        const [foo, setFoo] = React.useState([])\n                        function handleChange(event) {\n                            setFoo(event.target.value)\n                        }\n                        return (\n                            <>\n                                <SpsMultiSelect\n                                    options={opts}\n                                    textKey=\"name\"\n                                    value={foo}\n                                    onChange={handleChange}\n                                />\n                                <br />\n                                {JSON.stringify(foo)}\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [opts] = React.useState([\n                            { id: 1, name: \"Target\", disabled: true },\n                            { id: 2, name: \"Cabela's\", disabled: true },\n                            { id: 3, name: \"Best Buy\" },\n                        ])\n                        const [foo, setFoo] = React.useState([])\n                        function handleChange(event) {\n                            setFoo(event.target.value)\n                        }\n                        return (\n                            <>\n                                <SpsMultiSelect\n                                    options={opts}\n                                    textKey=\"name\"\n                                    value={foo}\n                                    onChange={handleChange}\n                                />\n                                <br />\n                                {JSON.stringify(foo)}\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    searchText: {
+        label: "Search text",
+        description: "Get search text",
+        examples: {
+            a_actionWithSearchText: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n           function Component() {\n              const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"]);\n              const { formValue, formMeta, updateForm } = useSpsForm({\n                tags: [opts[0]],\n              });\n            \n              const [searchText, setSearchText] = React.useState(\"\");\n            \n              React.useEffect(() => {\n                  updateAction({\n                  label: searchText ? `Create a New Tag \"${searchText}\"` : \"Create a New Tag\",\n                  });\n              }, [searchText, opts]);\n              \n              const handleSearchChange = (searchTextValue) => {\n                setSearchText(searchTextValue)\n              }\n            \n              const [action, updateAction] = useSpsAction(\n                {\n                  label: \"Create a New Tag\",\n                  icon: SpsIcon.PLUS_SIGN,\n                },\n                () => console.log(\"New Tag has been created\")\n              );\n            \n              return (\n                <>\n                  <SpsLabel for={formMeta.fields.tags}>Tags</SpsLabel>\n                  <SpsMultiSelect\n                    disableSelected\n                    icon={SpsIcon.FILTER}\n                    options={opts}\n                    action={action}\n                    formMeta={formMeta.fields.tags}\n                    value={formValue.tags}\n                    onSearchChange={handleSearchChange}\n                  />\n                </>\n              );\n          }"], ["\n           function Component() {\n              const [opts] = React.useState([\"foo\", \"bar\", \"baz\", \"orp\"]);\n              const { formValue, formMeta, updateForm } = useSpsForm({\n                tags: [opts[0]],\n              });\n            \n              const [searchText, setSearchText] = React.useState(\"\");\n            \n              React.useEffect(() => {\n                  updateAction({\n                  label: searchText ? \\`Create a New Tag \"\\${searchText}\"\\` : \"Create a New Tag\",\n                  });\n              }, [searchText, opts]);\n              \n              const handleSearchChange = (searchTextValue) => {\n                setSearchText(searchTextValue)\n              }\n            \n              const [action, updateAction] = useSpsAction(\n                {\n                  label: \"Create a New Tag\",\n                  icon: SpsIcon.PLUS_SIGN,\n                },\n                () => console.log(\"New Tag has been created\")\n              );\n            \n              return (\n                <>\n                  <SpsLabel for={formMeta.fields.tags}>Tags</SpsLabel>\n                  <SpsMultiSelect\n                    disableSelected\n                    icon={SpsIcon.FILTER}\n                    options={opts}\n                    action={action}\n                    formMeta={formMeta.fields.tags}\n                    value={formValue.tags}\n                    onSearchChange={handleSearchChange}\n                  />\n                </>\n              );\n          }"]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=SpsMultiSelect.examples.js.map

package/dist/out-tsc/multi-select/SpsMultiSelect.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsMultiSelect.examples.js","sourceRoot":"","sources":["../../../src/multi-select/SpsMultiSelect.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,sBAAsB,GAAoB;IACrD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,+BAA+B;QAC5C,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,q4BAAA,k0BAkBF,IAAA;aACV;YACD,UAAU,EAAE;gBACV,KAAK,EAAE,IAAI,84BAAA,20BAkBF,IAAA;aACV;YACD,cAAc,EAAE;gBACd,KAAK,EAAE,IAAI,oiDAAA,i+CAgCF,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,IAAI,47BAAA,y3BAmBF,IAAA;aACV;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,wnCAAA,qjCAwBF,IAAA;aACV;YACD,eAAe,EAAE;gBACf,KAAK,EAAE,IAAI,wpCAAA,qlCAwBF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,iBAAiB;QAC9B,QAAQ,EAAE;YACR,sBAAsB,EAAE;gBACtB,KAAK,EAAE,IAAI,6lDAAA,giDAyCP,IAAA;aACL;SACF;KACF;CACF,CAAC"}