@spscommerce/ds-react 5.0.2 → 5.2.2-ie

package/dist/out-tsc/dropdown/SpsDropdown.js

@@ -0,0 +1,162 @@
+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 { DropdownKind, SPS_ACTION_DEFAULTS, SpsIcon, Position, } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import { SpsOptionList } from "../option-list/SpsOptionList";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+import { useElementId } from "../utils/useElementId";
+var propsDoc = {
+    alignLeft: "boolean",
+    disabled: "boolean",
+    icon: "SpsIcon",
+    kind: "DropdownKind",
+    label: "string",
+    options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>",
+    spinning: "boolean",
+    spinningTitle: "string",
+    tallOptionList: "boolean",
+    onOpen: "() => void",
+    onClose: "() => void",
+    loading: "boolean",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { alignLeft: PropTypes.bool, disabled: PropTypes.bool, icon: PropTypes.enumValue(SpsIcon), kind: PropTypes.enumValue(DropdownKind), label: PropTypes.string, 
+    // eslint thinks there is a space between the name and open paren below for some reason
+    // eslint-disable-next-line no-spaced-func
+    options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.any])).isRequired, spinning: PropTypes.bool, spinningTitle: PropTypes.string, tallOptionList: PropTypes.bool, onOpen: PropTypes.fun(), onClose: PropTypes.fun(), loading: PropTypes.bool });
+export function SpsDropdown(props) {
+    var alignLeft = props.alignLeft, className = props.className, disabled = props.disabled, iconProp = props.icon, idProp = props.id, kindProp = props.kind, label = props.label, _a = props.options, optionsProp = _a === void 0 ? [] : _a, tabIndex = props.tabIndex, spinning = props.spinning, spinningTitle = props.spinningTitle, tallOptionList = props.tallOptionList, unsafelyReplaceClassName = props.unsafelyReplaceClassName, onOpen = props.onOpen, onClose = props.onClose, loading = props.loading, rest = __rest(props, ["alignLeft", "className", "disabled", "icon", "id", "kind", "label", "options", "tabIndex", "spinning", "spinningTitle", "tallOptionList", "unsafelyReplaceClassName", "onOpen", "onClose", "loading"]);
+    var t = React.useContext(I18nContext).t;
+    var id = useElementId(idProp);
+    var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = __read(React.useState(false), 2), opensUpward = _c[0], setOpensUpward = _c[1];
+    var _d = __read(React.useState(null), 2), keyDown = _d[0], setKeyDown = _d[1];
+    var options = optionsProp.map(function (o) { return (typeof o === "function"
+        ? o
+        : Object.assign(o[1], __assign(__assign({}, SPS_ACTION_DEFAULTS), o[0]))); });
+    var buttonId = id.current + "-button";
+    var menuId = id.current + "-menu";
+    var icon;
+    var kind;
+    if (label) {
+        kind = kindProp || DropdownKind.DEFAULT;
+        icon = iconProp;
+    }
+    else {
+        kind = DropdownKind.ICON;
+        icon = iconProp || SpsIcon.ELLIPSES;
+    }
+    var dropdownRef = React.useRef(null);
+    React.useEffect(function () {
+        if (isOpen && onOpen) {
+            onOpen();
+        }
+        else if (!isOpen && onClose) {
+            onClose();
+        }
+    }, [isOpen]);
+    function handleDocumentClick() {
+        setIsOpen(false);
+    }
+    function handleButtonClick(event) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        event.preventDefault();
+        if (!disabled && !spinning) {
+            setIsOpen(!isOpen);
+        }
+    }
+    function handleSelfToggle(olIsOpen) {
+        setIsOpen(olIsOpen);
+    }
+    function handleOptionSelected() {
+        setIsOpen(false);
+    }
+    function handleKeyDown(event) {
+        if (!disabled) {
+            if (["Up",
+                "ArrowUp",
+                "Down",
+                "ArrowDown"].indexOf(event.key) > -1) {
+                event.preventDefault();
+            }
+            event.persist();
+            setKeyDown(event);
+        }
+    }
+    function handleDropdownOpened(event) {
+        if (event.detail !== id.current) {
+            setIsOpen(false);
+        }
+    }
+    React.useEffect(function () {
+        document.addEventListener("click", handleDocumentClick);
+        document.addEventListener("DropdownOpened", handleDropdownOpened);
+        return function () {
+            document.removeEventListener("click", handleDocumentClick);
+            document.removeEventListener("DropdownOpened", handleDropdownOpened);
+        };
+    }, []);
+    React.useEffect(function () {
+        if (isOpen) {
+            var event_1 = document.createEvent("CustomEvent");
+            event_1.initCustomEvent("DropdownOpened", false, false, id.current);
+            document.dispatchEvent(event_1);
+        }
+    }, [isOpen]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-dropdown", isOpen && "sps-dropdown--open", isOpen && "z-stratum-dropdown", opensUpward && "sps-dropdown--opens-upward", !label && "sps-dropdown--no-label", disabled && "disabled", className);
+    var buttonClasses = clsx("sps-button", "sps-button--" + kind, disabled && "sps-button--disabled", spinning && "sps-button--spinning");
+    var positionOverride = kind === DropdownKind.ICON && !alignLeft
+        ? [Position.BOTTOM_RIGHT, Position.TOP_RIGHT]
+        : null;
+    return (React.createElement("div", __assign({}, rest, { id: id.current, className: classes, onKeyDown: handleKeyDown }),
+        React.createElement(SpsOptionList, { positionOverride: positionOverride, isOpen: isOpen, "aria-labelledby": buttonId, keyDown: keyDown, onOptionSelected: handleOptionSelected, id: menuId, attachTo: dropdownRef, onPositionFlip: setOpensUpward, onSelfToggle: handleSelfToggle, options: options, offsets: [0, 0], tall: tallOptionList, optionRole: "option", loading: loading }),
+        React.createElement("div", { onClick: handleButtonClick, className: buttonClasses, ref: dropdownRef },
+            React.createElement("button", { type: "button", id: buttonId, "aria-haspopup": "true", "aria-controls": menuId, "aria-expanded": isOpen ? true : null, tabIndex: tabIndex, disabled: disabled, onClick: handleButtonClick },
+                React.createElement("i", { className: clsx("sps-icon", "sps-icon-" + icon) }),
+                label && React.createElement("span", null, label),
+                spinning && (React.createElement("div", { className: "sps-spinner", key: 1 }, spinningTitle || t("design-system:button.spinningTitle")))))));
+}
+Object.assign(SpsDropdown, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsDropdown",
+});
+//# sourceMappingURL=SpsDropdown.js.map

package/dist/out-tsc/dropdown/SpsDropdown.js.map

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

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

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

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

@@ -0,0 +1,3 @@
+export * from "./SpsDropdown";
+export * from "./SpsDropdown.examples";
+//# sourceMappingURL=index.js.map

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

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

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.d.ts

@@ -0,0 +1,12 @@
+import { FeedbackBlockKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    kind: PropTypes.Requireable<FeedbackBlockKind>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFeedbackBlockProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFeedbackBlock(props: SpsFeedbackBlockProps): JSX.Element;
+export {};

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.examples.d.ts

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

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.examples.js

@@ -0,0 +1,63 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+import { code } from "@spscommerce/utils";
+export var SpsFeedbackBlockExamples = {
+    standard: {
+        label: "Standard Size",
+        description: "Use Standard Size Feedback Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Feedback Block.",
+        examples: {
+            error: {
+                description: "Error",
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            info: {
+                description: "Information",
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.INFO}>\n                        FYI - This page has been updated. Click refresh to see the most recent version.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.INFO}>\n                        FYI - This page has been updated. Click refresh to see the most recent version.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            proTip: {
+                description: "Pro Tip",
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.TIP}>\n                        Please Note: Click the Receive button above to check for new transactions from QuickBooks.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.TIP}>\n                        Please Note: Click the Receive button above to check for new transactions from QuickBooks.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            success: {
+                description: "Success",
+                jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.SUCCESS}>\n                        All items have been uploaded and are ready for export.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.SUCCESS}>\n                        All items have been uploaded and are ready for export.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            warning: {
+                description: "Warning",
+                jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.WARNING}>\n                        Warning! This order is missing a shipment date and is in jeopardy of being past due.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.WARNING}>\n                        Warning! This order is missing a shipment date and is in jeopardy of being past due.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+        },
+    },
+    micro: {
+        label: "Micro Size",
+        description: "Use Micro Size Feedback Blocks when a Standard Size Feedback Block is too large or too visually overwhelming.",
+        examples: {
+            error: {
+                description: "Error",
+                jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.ERROR}\n                        message=\"We are experiencing difficulties communicating to the server. Please try again later.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.ERROR}\n                        message=\"We are experiencing difficulties communicating to the server. Please try again later.\"\n                    />\n                "]))),
+            },
+            info: {
+                description: "Information",
+                jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.INFO}\n                        message=\"Refresh the page to see the most recent version.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.INFO}\n                        message=\"Refresh the page to see the most recent version.\"\n                    />\n                "]))),
+            },
+            proTip: {
+                description: "Pro Tip",
+                jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "]))),
+            },
+            success: {
+                description: "Success",
+                jsx: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.SUCCESS}\n                        message=\"All items have been uploaded and are ready for export.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.SUCCESS}\n                        message=\"All items have been uploaded and are ready for export.\"\n                    />\n                "]))),
+            },
+            warning: {
+                description: "Warning",
+                jsx: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+//# sourceMappingURL=SpsFeedbackBlock.examples.js.map

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFeedbackBlock.examples.js","sourceRoot":"","sources":["../../../src/feedback-block/SpsFeedbackBlock.examples.tsx"],"names":[],"mappings":";;;;AAAA,qCAAqC;AACrC,sDAAsD;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,wBAAwB,GAAoB;IACvD,QAAQ,EAAE;QACR,KAAK,EAAE,eAAe;QACtB,WAAW,EACH,iJAAiJ;QACzJ,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,GAAG,EAAE,IAAI,sTAAA,mPAIA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,aAAa;gBAC1B,GAAG,EAAE,IAAI,+SAAA,4OAIA,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,yTAAA,sPAIA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,yRAAA,sNAIA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,uTAAA,oPAIA,IAAA;aACV;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,YAAY;QACnB,WAAW,EACH,+GAA+G;QACvH,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,GAAG,EAAE,IAAI,sUAAA,mQAKA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,aAAa;gBAC1B,GAAG,EAAE,IAAI,gSAAA,6NAKA,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,2SAAA,wOAKA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,ySAAA,sOAKA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,2RAAA,sNAKA,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.js

@@ -0,0 +1,43 @@
+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 { FeedbackBlockIcons, FeedbackBlockKind } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    kind: "FeedbackBlockKind",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { kind: PropTypes.enumValue(FeedbackBlockKind) });
+export function SpsFeedbackBlock(props) {
+    var children = props.children, className = props.className, _a = props.kind, kind = _a === void 0 ? FeedbackBlockKind.TIP : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "kind", "data-testid", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-feedback-block", "sps-feedback-block--" + kind, className);
+    return (React.createElement("div", __assign({ className: classes, role: "alert", "data-testid": testId }, rest),
+        React.createElement("i", { className: clsx("sps-icon", "sps-icon-" + FeedbackBlockIcons[kind]), "aria-hidden": "true" }),
+        React.createElement("span", { className: "sps-feedback-block__content", "data-testid": testId + "__text" }, children)));
+}
+Object.assign(SpsFeedbackBlock, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsFeedbackBlock",
+});
+//# sourceMappingURL=SpsFeedbackBlock.js.map

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFeedbackBlock.js","sourceRoot":"","sources":["../../../src/feedback-block/SpsFeedbackBlock.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,IAAI,EAAE,SAAS,CAAC,SAAS,CAAoB,iBAAiB,CAAC,GAChE,CAAC;AAIF,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAEzD,IAAA,QAAQ,GAMN,KAAK,SANC,EACR,SAAS,GAKP,KAAK,UALE,EACT,KAIE,KAAK,KAJqB,EAA5B,IAAI,mBAAG,iBAAiB,CAAC,GAAG,KAAA,EACb,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EAPH,4EAOL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,oBAAoB,EAChD,yBAAuB,IAAM,EAC7B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,iBAAc,MAAM,IAAM,IAAI;QACjE,2BAAG,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,cAAY,kBAAkB,CAAC,IAAI,CAAG,CAAC,iBAAc,MAAM,GAAG;QAC7F,8BAAM,SAAS,EAAC,6BAA6B,iBAAiB,MAAM,WAAQ,IAAG,QAAQ,CAAQ,CAC3F,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC9B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,kBAAkB;CAChC,CAAC,CAAC"}

package/dist/out-tsc/feedback-block/index.d.ts

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

package/dist/out-tsc/feedback-block/index.js

@@ -0,0 +1,3 @@
+export * from "./SpsFeedbackBlock";
+export * from "./SpsFeedbackBlock.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/feedback-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/feedback-block/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC"}

package/dist/out-tsc/fieldset/SpsFieldset.d.ts

@@ -0,0 +1,22 @@
+import * as PropTypes from "../prop-types";
+import type { SpsFormArray } from "../form/hooks/formArray";
+import type { SpsFormGroup } from "../form/hooks/formGroup";
+import type { SpsFormSetMeta } from "../form/hooks/useSpsForm";
+declare const propTypes: {
+    errors: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    formArray: PropTypes.Requireable<SpsFormArray<any>>;
+    formGroup: PropTypes.Requireable<SpsFormGroup>;
+    formMeta: PropTypes.Requireable<SpsFormSetMeta<any, import("../form/hooks/useSpsForm").InferredSpsFormMetaSetMembers<any>>>;
+    legend: PropTypes.Requireable<string>;
+    optional: PropTypes.Requireable<boolean>;
+    enabled: PropTypes.Requireable<boolean>;
+    onToggled: PropTypes.Requireable<(isEnabled: boolean) => void>;
+    tooltip: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFieldsetProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFieldset({ children, className, errors, formArray, formGroup, formMeta, legend, unsafelyReplaceClassName, optional, enabled, onToggled, tooltip, }: SpsFieldsetProps): JSX.Element;
+export {};

package/dist/out-tsc/fieldset/SpsFieldset.examples.d.ts

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

package/dist/out-tsc/fieldset/SpsFieldset.examples.js

@@ -0,0 +1,54 @@
+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 SpsFieldsetExamples = {
+    basic: {
+        label: "Basic Fieldsets",
+        description: "info about basic fieldsets",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    b_nested: {
+        label: "Nested Fieldsets",
+        description: "info about nested fieldsets",
+        examples: {
+            nested: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                foo: \"\",\n                                fsNested: {\n                                    bar: RADIO_OPTIONS[1].value,\n                                    fsNested2: {\n                                        baz: \"\"\n                                    }\n                                }\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.foo}\n                                            value={formValue.topFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend=\"Nested Fieldset\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>\n                                            {RADIO_OPTIONS.map(option => (\n                                                <SpsRadioButton key={option.value} name=\"fsRadio\"\n                                                    label={option.label} value={option.value}\n                                                    formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.bar}\n                                                    checked={formValue.topFieldset.fsNested.bar === option.value}\n                                                />\n                                            ))}\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend=\"Doubly Nested Fieldset\">\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>\n                                                <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}\n                                                    value={formValue.topFieldset.fsNested.baz}\n                                                    placeholder=\"Enter a thing\"\n                                                ></SpsTextInput>\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                foo: \"\",\n                                fsNested: {\n                                    bar: RADIO_OPTIONS[1].value,\n                                    fsNested2: {\n                                        baz: \"\"\n                                    }\n                                }\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.foo}\n                                            value={formValue.topFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend=\"Nested Fieldset\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>\n                                            {RADIO_OPTIONS.map(option => (\n                                                <SpsRadioButton key={option.value} name=\"fsRadio\"\n                                                    label={option.label} value={option.value}\n                                                    formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.bar}\n                                                    checked={formValue.topFieldset.fsNested.bar === option.value}\n                                                />\n                                            ))}\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend=\"Doubly Nested Fieldset\">\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>\n                                                <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}\n                                                    value={formValue.topFieldset.fsNested.baz}\n                                                    placeholder=\"Enter a thing\"\n                                                ></SpsTextInput>\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    c_optional: {
+        label: "Optional Fieldsets",
+        description: "info about optional fieldsets",
+        examples: {
+            optional: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const initValue = {\n                            optionalFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                            }\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        function handleToggle(isChecked) {\n                            console.log(isChecked ? \"optional fieldset visible\" : \"optional fieldset not visible\");\n                        }\n\n                        return <>\n                            <SpsFieldset legend=\"Fieldset Legend\" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.foo}\n                                            value={formValue.optionalFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.bar}\n                                            value={formValue.optionalFieldset.bar}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const initValue = {\n                            optionalFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                            }\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        function handleToggle(isChecked) {\n                            console.log(isChecked ? \"optional fieldset visible\" : \"optional fieldset not visible\");\n                        }\n\n                        return <>\n                            <SpsFieldset legend=\"Fieldset Legend\" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.foo}\n                                            value={formValue.optionalFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.bar}\n                                            value={formValue.optionalFieldset.bar}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    d_validationOnField: {
+        label: "Validation on Field",
+        description: "info about validation on fields",
+        examples: {
+            validationOnField: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                            }\n                        }, {\n                            \"myFieldset.foo\": [SpsValidators.required]\n                        })\n\n                        React.useEffect(() => {\n                            formMeta.markAsDirty();\n                        }, [])\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                            }\n                        }, {\n                            \"myFieldset.foo\": [SpsValidators.required]\n                        })\n\n                        React.useEffect(() => {\n                            formMeta.markAsDirty();\n                        }, [])\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    e_topFieldset: {
+        label: "Validation on Fieldset",
+        description: "info about validation on fieldsets",
+        examples: {
+            validationOnFieldset: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function mustSelectAColorValidator(value) {\n                            if (value.radio === \"b\") {\n                                if (value.colors.filter(Boolean).length === 0) {\n                                    return {\n                                        mustSelectAColor: true\n                                    };\n                                }\n                            }\n                            return null;\n                        };\n\n                        const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                text: \"\",\n                                nestedFieldset: {\n                                    radio: \"b\",\n                                    colors: COLOR_OPTIONS.map(() => false)\n                                }\n                            }\n                        }, {\n                            \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n                        });\n\n                        React.useEffect(() => {\n                            formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n                        }, [])\n\n                        return (\n                            <SpsForm formMeta={formMeta}>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n                                            <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n                                                value={formValue.topFieldset.text}\n                                                placeholder=\"Enter a thing\"\n                                            ></SpsTextInput>\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n                                        legend=\"Nested Fieldset\"\n                                        errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n                                            && \"If you choose Option B, you must select at least one color.\"}\n                                    >\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n                                                <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n                                                />\n                                                <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n                                                />\n                                            </div>\n                                            <div className=\"sfg-col-8\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n                                                {COLOR_OPTIONS.map((color, index) =>\n                                                    <SpsCheckbox key={index} name=\"colors\" label={color}\n                                                        formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n                                                        checked={formValue.topFieldset.nestedFieldset.colors[index]}\n                                                    />\n                                                )}\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsForm>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function mustSelectAColorValidator(value) {\n                            if (value.radio === \"b\") {\n                                if (value.colors.filter(Boolean).length === 0) {\n                                    return {\n                                        mustSelectAColor: true\n                                    };\n                                }\n                            }\n                            return null;\n                        };\n\n                        const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                text: \"\",\n                                nestedFieldset: {\n                                    radio: \"b\",\n                                    colors: COLOR_OPTIONS.map(() => false)\n                                }\n                            }\n                        }, {\n                            \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n                        });\n\n                        React.useEffect(() => {\n                            formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n                        }, [])\n\n                        return (\n                            <SpsForm formMeta={formMeta}>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n                                            <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n                                                value={formValue.topFieldset.text}\n                                                placeholder=\"Enter a thing\"\n                                            ></SpsTextInput>\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n                                        legend=\"Nested Fieldset\"\n                                        errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n                                            && \"If you choose Option B, you must select at least one color.\"}\n                                    >\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n                                                <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n                                                />\n                                                <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n                                                />\n                                            </div>\n                                            <div className=\"sfg-col-8\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n                                                {COLOR_OPTIONS.map((color, index) =>\n                                                    <SpsCheckbox key={index} name=\"colors\" label={color}\n                                                        formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n                                                        checked={formValue.topFieldset.nestedFieldset.colors[index]}\n                                                    />\n                                                )}\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsForm>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=SpsFieldset.examples.js.map

package/dist/out-tsc/fieldset/SpsFieldset.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFieldset.examples.js","sourceRoot":"","sources":["../../../src/fieldset/SpsFieldset.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,mBAAmB,GAAoB;IAClD,KAAK,EAAE;QACL,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,4BAA4B;QACzC,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,orFAAA,inFA2CF,IAAA;aACV;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,6BAA6B;QAC1C,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,4yHAAA,yuHAyDF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,+BAA+B;QAC5C,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,woEAAA,qkEAmCF,IAAA;aACV;SACF;KACF;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,qBAAqB;QAC5B,WAAW,EAAE,iCAAiC;QAC9C,QAAQ,EAAE;YACR,iBAAiB,EAAE;gBACjB,KAAK,EAAE,IAAI,83CAAA,2zCA2BF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,oCAAoC;QACjD,QAAQ,EAAE;YACR,oBAAoB,EAAE;gBACpB,KAAK,EAAE,IAAI,o+JAAA,i6JA0EF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/fieldset/SpsFieldset.js

@@ -0,0 +1,99 @@
+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 __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 { TooltipKind, TooltipShowTrigger, SpsIcon as SpsIcons } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { SpsTooltip, TooltipVisibility } from "../tooltip/SpsTooltip";
+import { contentOf } from "../utils/contentOf";
+import { SpsCheckbox } from "../checkbox/SpsCheckbox";
+import { SpsI } from "../icon/SpsIcon";
+var propsDoc = {
+    errors: "ReactNodeOrRenderFn",
+    formMeta: "SpsFormSetMeta<any>",
+    legend: "string",
+    optional: "boolean",
+    enabled: "boolean",
+    onToggled: "(isEnabled: boolean) => void",
+    tooltip: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { errors: PropTypes.nodeOrRenderFn, formArray: PropTypes.impl(), formGroup: PropTypes.impl(), formMeta: PropTypes.impl(), legend: PropTypes.string, optional: PropTypes.bool, enabled: PropTypes.bool, onToggled: PropTypes.fun(), tooltip: PropTypes.string });
+export function SpsFieldset(_a) {
+    var children = _a.children, className = _a.className, errors = _a.errors, formArray = _a.formArray, formGroup = _a.formGroup, formMeta = _a.formMeta, legend = _a.legend, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _b = _a.optional, optional = _b === void 0 ? false : _b, enabled = _a.enabled, onToggled = _a.onToggled, tooltip = _a.tooltip;
+    var formControlSet = formGroup || formArray;
+    var legendElement = React.useRef(null);
+    var infoCircleElement = React.useRef(null);
+    var _c = __read(React.useState(TooltipVisibility.HIDDEN), 2), showTip = _c[0], setShowTip = _c[1];
+    var _d = __read(React.useState(false), 2), wasFocused = _d[0], setWasFocused = _d[1];
+    var _e = __read(React.useState(false), 2), isChecked = _e[0], setisChecked = _e[1];
+    React.useEffect(function () {
+        setisChecked(enabled);
+    }, [enabled]);
+    React.useEffect(function () {
+        if (typeof onToggled === "function") {
+            onToggled(isChecked);
+        }
+    }, [isChecked]);
+    React.useEffect(function () {
+        if (formControlSet || formMeta) {
+            var isFocused = (formControlSet && formControlSet.isFocused())
+                || (formMeta && formMeta.isFocused());
+            if (!wasFocused && isFocused) {
+                setShowTip(TooltipVisibility.VISIBLE);
+            }
+            else if (wasFocused && !isFocused) {
+                setShowTip(TooltipVisibility.HIDDEN);
+            }
+            setWasFocused(isFocused);
+        }
+    });
+    var fieldsetClasses = clsx(unsafelyReplaceClassName || "sps-fieldset", ((formControlSet && !formControlSet.isPristine() && formControlSet.invalid)
+        || (formMeta && (!formMeta.isValid() || !formMeta.contentsAreValid()))) && "sps-fieldset--error", className, optional && !isChecked && "sps-fieldset--collapsed");
+    function toggleTooltip() {
+        setShowTip(showTip === TooltipVisibility.VISIBLE
+            ? TooltipVisibility.HIDDEN : TooltipVisibility.VISIBLE);
+    }
+    return (React.createElement("div", { className: "sps-fieldset-container" },
+        React.createElement("fieldset", { className: fieldsetClasses },
+            React.createElement("legend", { className: "sps-fieldset__legend", ref: legendElement, onMouseEnter: function () { return setShowTip(TooltipVisibility.VISIBLE); }, onMouseLeave: function () { return setShowTip(TooltipVisibility.DELAYED_HIDDEN); }, onClick: toggleTooltip },
+                optional && (React.createElement(SpsCheckbox, { checked: isChecked, className: "d-inline-flex", onChange: function () {
+                        setisChecked(!isChecked);
+                    } })),
+                legend,
+                tooltip && (React.createElement("span", { className: "sps-fieldset__legend-icon", ref: infoCircleElement },
+                    React.createElement(SpsI, { icon: SpsIcons.INFO_CIRCLE })))),
+            tooltip && (React.createElement(SpsTooltip, { for: infoCircleElement }, tooltip)),
+            React.createElement(SpsTooltip, { for: legendElement, kind: TooltipKind.ERROR, showOn: TooltipShowTrigger.MANUAL, isShown: showTip }, contentOf(errors)),
+            children)));
+}
+Object.assign(SpsFieldset, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsFieldset",
+});
+//# sourceMappingURL=SpsFieldset.js.map

package/dist/out-tsc/fieldset/SpsFieldset.js.map

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

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

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

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

@@ -0,0 +1,3 @@
+export * from "./SpsFieldset";
+export * from "./SpsFieldset.examples";
+//# sourceMappingURL=index.js.map