@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/task-queue/SpsTaskQueue.js

@@ -0,0 +1,217 @@
+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 * as React from "react";
+import { SpsTaskStatus, SpsTaskStatusIcons, TASK_QUEUE_NOTIFICATION_DURATION_MS, TooltipKind, TooltipShowTrigger, ButtonKind, Position, } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import { SpsTooltip, TooltipVisibility } from "../tooltip/SpsTooltip";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+import { SpsButton } from "../button/SpsButton";
+import { getPosition } from "../utils/getPosition";
+import { PortalContext, usePortal } from "../utils/usePortal";
+var props = {
+    tasks: "ReactSpsTask[]",
+    taskQueuePosition: "Position",
+    notificationText: "string",
+    tooltipConfig: "{ position: Position, kind: TooltipKind }",
+    onClose: "() => void",
+    onOpen: "() => void",
+    onClearCompleted: "() => void",
+    suppressTooltips: "boolean",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { tasks: PropTypes.arrayOf(PropTypes.any), taskQueuePosition: PropTypes.enumValue(Position), notificationText: PropTypes.string, tooltipConfig: PropTypes.shape({
+        position: PropTypes.enumValue(Position),
+        kind: PropTypes.enumValue(TooltipKind),
+    }), onClose: PropTypes.fun(), onOpen: PropTypes.fun(), onClearCompleted: PropTypes.fun(), suppressTooltips: PropTypes.bool });
+export function SpsTaskQueue(_a) {
+    var _b = _a.tasks, tasks = _b === void 0 ? [] : _b, _c = _a.taskQueuePosition, taskQueuePosition = _c === void 0 ? Position.BOTTOM_RIGHT : _c, notificationText = _a.notificationText, _d = _a.tooltipConfig, tooltipConfig = _d === void 0 ? {} : _d, onOpen = _a.onOpen, onClose = _a.onClose, onClearCompleted = _a.onClearCompleted, className = _a.className, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _e = _a.suppressTooltips, suppressTooltips = _e === void 0 ? false : _e, rest = __rest(_a, ["tasks", "taskQueuePosition", "notificationText", "tooltipConfig", "onOpen", "onClose", "onClearCompleted", "className", "data-testid", "unsafelyReplaceClassName", "suppressTooltips"]);
+    var t = React.useContext(I18nContext).t;
+    var hasTasks = !!tasks.length;
+    var _f = __read(React.useState(false), 2), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = __read(React.useState(hasTasks), 2), showNotification = _g[0], setShowNotification = _g[1];
+    var toggleRef = React.useRef(null);
+    var taskQueueDropdownRef = React.useRef(null);
+    var resizeListener = React.useCallback(function () {
+        setIsOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    }, []);
+    React.useEffect(function () {
+        if (isOpen) {
+            window.addEventListener("resize", resizeListener);
+        }
+        else {
+            window.removeEventListener("resize", resizeListener);
+        }
+    }, [isOpen]);
+    var portal = usePortal("sps-task-queue-portal");
+    var portalContext = React.useContext(PortalContext);
+    var _h = __read(isOpen
+        ? getPosition(taskQueueDropdownRef, toggleRef, taskQueuePosition, __assign({ altPosition: taskQueuePosition }, portalContext))
+        : [{}, false], 1), posStyle = _h[0];
+    var tooltipPosition = tooltipConfig.position || Position.BOTTOM_RIGHT;
+    var tooltipKind = tooltipConfig.kind || TooltipKind.DEFAULT;
+    var unreadTasksCount = tasks.filter(function (task) { return task.unread; }).length;
+    var inProgressTasksCount = tasks.filter(function (task) { return task.status === SpsTaskStatus.IN_PROGRESS; })
+        .length;
+    var hasCompletedTask = tasks.some(function (task) { return (task.status === SpsTaskStatus.COMPLETED || task.status === SpsTaskStatus.ERRORED); });
+    // this gives us a stable reference to the freshest onClose handler
+    var onCloseRef = React.useRef(onClose);
+    onCloseRef.current = onClose;
+    var handleToggle = function () {
+        if (hasTasks && !isOpen) {
+            setIsOpen(true);
+            if (onOpen) {
+                onOpen();
+            }
+        }
+        else if (isOpen) {
+            setIsOpen(false);
+            if (onClose) {
+                onClose();
+            }
+        }
+    };
+    var getTaskIcon = function (task) { return (task.status === SpsTaskStatus.IN_PROGRESS
+        ? SpsTaskStatusIcons[task.status]
+        : "sps-icon sps-icon-" + SpsTaskStatusIcons[task.status]); };
+    // handles closing the task queue automatically if there are no more tasks in it
+    React.useEffect(function () {
+        if (isOpen && !hasTasks) {
+            setIsOpen(false);
+            if (onCloseRef.current) {
+                onCloseRef.current();
+            }
+        }
+    }, [isOpen, hasTasks]);
+    // handles showing notifications when new tasks are added to the queue
+    var notificationTimeout = React.useRef();
+    React.useEffect(function () {
+        if (unreadTasksCount > 0) {
+            setShowNotification(true);
+            if (notificationTimeout.current) {
+                window.clearTimeout(notificationTimeout.current);
+            }
+            notificationTimeout.current = window.setTimeout(function () {
+                notificationTimeout.current = undefined;
+                setShowNotification(false);
+            }, TASK_QUEUE_NOTIFICATION_DURATION_MS);
+        }
+        else {
+            if (notificationTimeout.current) {
+                window.clearTimeout(notificationTimeout.current);
+                notificationTimeout.current = undefined;
+            }
+            setShowNotification(false);
+        }
+    }, [unreadTasksCount]);
+    // handles clicks outside of the task queue component
+    React.useEffect(function () {
+        // handles clicks outside of the task queue
+        var documentClickListener = function () {
+            setIsOpen(function (currentIsOpen) {
+                if (currentIsOpen && onCloseRef.current) {
+                    onCloseRef.current();
+                }
+                return false;
+            });
+        };
+        document.addEventListener("click", documentClickListener);
+        return function () {
+            document.removeEventListener("click", documentClickListener);
+        };
+    }, []);
+    // handles cleanup
+    React.useEffect(function () { return function () {
+        if (notificationTimeout.current) {
+            window.clearTimeout(notificationTimeout.current);
+        }
+    }; }, []);
+    var containerClassNames = clsx(unsafelyReplaceClassName || "sps-task-queue", isOpen && "sps-task-queue--open", isOpen && "z-stratum-dropdown", !hasTasks && "sps-task-queue--no-tasks", className);
+    function renderActionButtons(task) {
+        return task.actions.map(function (action) {
+            if (React.isValidElement(action)) {
+                if (action.type !== SpsButton || action.props.kind !== ButtonKind.ICON) {
+                    throw new Error("Task queue task action must be a config object or an SpsButton of kind ICON");
+                }
+                return action;
+            }
+            return (React.createElement("div", { key: action.icon, className: "sps-button sps-button--icon" },
+                React.createElement("button", { type: "button", title: action.label, disabled: action.disabled, onClick: function () {
+                        if (action.onClick) {
+                            action.onClick(task);
+                        }
+                    } },
+                    action.caption,
+                    action.icon && (React.createElement("i", { className: "sps-icon sps-icon-" + action.icon, "aria-hidden": "true" })))));
+        });
+    }
+    return (React.createElement("div", __assign({ className: containerClassNames, onClick: function (e) {
+            /*
+             * stops click events from propagating outside of the task queue
+             * so that it doesn't close itself when clicking inside of it
+             */
+            e.nativeEvent.stopImmediatePropagation();
+        }, "data-testid": testId }, rest),
+        React.createElement("button", { type: "button", ref: toggleRef, className: "sps-task-queue__button", title: "Task Queue", onClick: handleToggle },
+            !!unreadTasksCount && (React.createElement("span", { className: "sps-tag sps-tag--info" }, unreadTasksCount)),
+            inProgressTasksCount ? (React.createElement("span", { className: "sps-spinner sps-spinner--small" })) : (React.createElement("i", { className: "sps-icon sps-icon-list", "aria-hidden": "true" }))),
+        React.createElement(SpsTooltip, { for: toggleRef, position: tooltipPosition, kind: tooltipKind, showOn: hasTasks ? TooltipShowTrigger.MANUAL : TooltipShowTrigger.MOUSEOVER, isShown: showNotification && !isOpen
+                ? TooltipVisibility.VISIBLE
+                : TooltipVisibility.HIDDEN, hideDelay: TASK_QUEUE_NOTIFICATION_DURATION_MS },
+            !suppressTooltips && showNotification && (notificationText || t("design-system:taskQueue.newTask")),
+            !suppressTooltips && !showNotification && !hasTasks && t("design-system:taskQueue.noTasks")),
+        portal(React.createElement("div", { ref: taskQueueDropdownRef, className: clsx("sps-task-queue__task-list", isOpen && "sps-task-queue__task-list--open", "z-stratum-dropdown"), style: posStyle },
+            React.createElement("div", { className: "sps-task-queue__task-list-tasks" }, tasks.map(function (task, taskIndex) { return (React.createElement("div", { key: taskIndex, className: clsx("sps-task-queue__task", task.unread && "sps-task-queue__task--unread") },
+                React.createElement("i", { className: getTaskIcon(task) }),
+                React.createElement("div", { className: "sps-task-queue__task-description" },
+                    React.createElement("div", { className: "sps-task-queue__task-heading" }, task.heading),
+                    task.subheading && (React.createElement("div", { className: "sps-task-queue__task-subheading", title: task.subheading }, task.subheading))),
+                task.actions && !!task.actions.length && (React.createElement("div", { className: "sps-task-queue__task-actions" }, renderActionButtons(task))))); })),
+            hasCompletedTask && onClearCompleted && (React.createElement("div", { className: "sps-task-queue__footer" },
+                React.createElement("div", { className: "sps-button sps-button--link" },
+                    React.createElement("button", { type: "button", onClick: onClearCompleted }, t("design-system:taskQueue.clearCompleted")))))))));
+}
+Object.assign(SpsTaskQueue, {
+    props: props,
+    propTypes: propTypes,
+    displayName: "SpsTaskQueue",
+});
+//# sourceMappingURL=SpsTaskQueue.js.map

package/dist/out-tsc/task-queue/SpsTaskQueue.js.map

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

package/dist/out-tsc/task-queue/index.d.ts

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

package/dist/out-tsc/task-queue/index.js

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

package/dist/out-tsc/task-queue/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/task-queue/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}

package/dist/out-tsc/test-util.d.ts

@@ -0,0 +1,2 @@
+export declare function waitATick(): void;
+export declare function wait(delay?: number): Promise<unknown>;

package/dist/out-tsc/test-util.js

@@ -0,0 +1,54 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { act } from "@testing-library/react";
+export function waitATick() {
+    var _this = this;
+    void act(function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Promise(function (resolve) {
+                    window.setTimeout(resolve, 0);
+                })];
+        });
+    }); });
+}
+export function wait(delay) {
+    if (delay === void 0) { delay = 0; }
+    return new Promise(function (resolve) {
+        window.setTimeout(resolve, delay);
+    });
+}
+//# sourceMappingURL=test-util.js.map

package/dist/out-tsc/test-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-util.js","sourceRoot":"","sources":["../../src/test-util.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAE7C,MAAM,UAAU,SAAS;IAAzB,iBAIC;IAHC,KAAK,GAAG,CAAC;;YAAY,sBAAA,IAAI,OAAO,CAAC,UAAC,OAAO;oBACvC,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;gBAChC,CAAC,CAAC,EAAA;;SAAA,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,KAAS;IAAT,sBAAA,EAAA,SAAS;IAC5B,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO;QACzB,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/out-tsc/text-input/SpsTextInput.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+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: {
+    disabled: PropTypes.Requireable<boolean>;
+    formControl: PropTypes.Requireable<SpsFormControl<string>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<string>>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    name: PropTypes.Requireable<string>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<HTMLInputElement>>;
+    placeholder: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsTextInputProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
+export declare const SpsTextInput: React.ForwardRefExoticComponent<Pick<SpsTextInputProps, "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "icon" | "data-testid" | "unsafelyReplaceClassName" | "formMeta" | "formControl"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/out-tsc/text-input/SpsTextInput.examples.d.ts

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

package/dist/out-tsc/text-input/SpsTextInput.examples.js

@@ -0,0 +1,45 @@
+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 SpsTextInputExamples = {
+    standard: {
+        label: "Standard",
+        description: "info about standard text inputs",
+        examples: {
+            standard: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.foo}>Foo</SpsLabel>\n                            <SpsTextInput\n                                value={formValue.foo}\n                                formMeta={formMeta.fields.foo}\n                            />\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.foo}>Foo</SpsLabel>\n                            <SpsTextInput\n                                value={formValue.foo}\n                                formMeta={formMeta.fields.foo}\n                            />\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    b_placeholder: {
+        label: "Placeholder",
+        description: "info about text input placeholders",
+        examples: {
+            placeholder: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                                <SpsLabel for={formMeta.fields.foo}>\n                                    Company Name\n                                </SpsLabel>\n                                <SpsTextInput formMeta={formMeta.fields.foo}\n                                    value={formValue.foo}\n                                    placeholder=\"Enter a company name\"\n                                ></SpsTextInput>\n                            </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                                <SpsLabel for={formMeta.fields.foo}>\n                                    Company Name\n                                </SpsLabel>\n                                <SpsTextInput formMeta={formMeta.fields.foo}\n                                    value={formValue.foo}\n                                    placeholder=\"Enter a company name\"\n                                ></SpsTextInput>\n                            </>\n                    }\n                "]))),
+            },
+        },
+    },
+    c_description: {
+        label: "Description",
+        description: "info about text inputs with descriptions",
+        examples: {
+            description: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                                <SpsLabel for={formMeta.fields.foo}\n                                    value={formValue.foo}\n                                    description=\"This is a brief description of the field to provide additional context.\"\n                                >\n                                    Label\n                                </SpsLabel>\n                                <SpsTextInput formMeta={formMeta.fields.foo}/>\n                            </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ foo: \"bar\" });\n\n                        return <>\n                                <SpsLabel for={formMeta.fields.foo}\n                                    value={formValue.foo}\n                                    description=\"This is a brief description of the field to provide additional context.\"\n                                >\n                                    Label\n                                </SpsLabel>\n                                <SpsTextInput formMeta={formMeta.fields.foo}/>\n                            </>\n                    }\n                "]))),
+            },
+        },
+    },
+    d_disabled: {
+        label: "Disabled",
+        description: "info about disabled text inputs",
+        examples: {
+            disabled: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ email: \"foo@bar.com\" });\n\n                        return <>\n                                <SpsLabel for={formMeta.fields.email}>\n                                    Email Address\n                                </SpsLabel>\n                                <SpsTextInput id=\"disabledTextInput\" disabled\n                                    value={formValue.email}\n                                    formMeta={formMeta.fields.email}\n                                ></SpsTextInput>\n                            </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({ email: \"foo@bar.com\" });\n\n                        return <>\n                                <SpsLabel for={formMeta.fields.email}>\n                                    Email Address\n                                </SpsLabel>\n                                <SpsTextInput id=\"disabledTextInput\" disabled\n                                    value={formValue.email}\n                                    formMeta={formMeta.fields.email}\n                                ></SpsTextInput>\n                            </>\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=SpsTextInput.examples.js.map

package/dist/out-tsc/text-input/SpsTextInput.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsTextInput.examples.js","sourceRoot":"","sources":["../../../src/text-input/SpsTextInput.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,oBAAoB,GAAoB;IACnD,QAAQ,EAAE;QACR,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,iCAAiC;QAC9C,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,slBAAA,mhBAYF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,oCAAoC;QACjD,QAAQ,EAAE;YACR,WAAW,EAAE;gBACX,KAAK,EAAE,IAAI,ivBAAA,8qBAcF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,0CAA0C;QACvD,QAAQ,EAAE;YACR,WAAW,EAAE;gBACX,KAAK,EAAE,IAAI,+wBAAA,4sBAcF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,iCAAiC;QAC9C,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,+vBAAA,4rBAcF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/text-input/SpsTextInput.js

@@ -0,0 +1,73 @@
+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 clsx from "clsx";
+import * as React from "react";
+import { SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { FauxChangeEvent } from "../utils/FauxChangeEvent";
+import { useFormControlId } from "../form/hooks/useFormControlId";
+import { SpsFormComponentWrapper } from "../form/SpsFormComponentWrapper";
+var propsDoc = {
+    disabled: "boolean",
+    formMeta: "SpsFormFieldMeta<string>",
+    icon: "SpsIcon",
+    name: "string",
+    onChange: "ChangeEventHandler<HTMLInputElement>",
+    placeholder: "string",
+    value: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { disabled: PropTypes.bool, formControl: PropTypes.impl(), formMeta: PropTypes.impl(), icon: PropTypes.enumValue(SpsIcon), name: PropTypes.string, onChange: PropTypes.fun(), placeholder: PropTypes.string, value: PropTypes.string });
+export var SpsTextInput = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, formControl = _a.formControl, formMeta = _a.formMeta, icon = _a.icon, id = _a.id, name = _a.name, onChange = _a.onChange, placeholder = _a.placeholder, testId = _a["data-testid"], title = _a.title, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _c = _a.value, value = _c === void 0 ? "" : _c, rest = __rest(_a, ["className", "disabled", "formControl", "formMeta", "icon", "id", "name", "onChange", "placeholder", "data-testid", "title", "unsafelyReplaceClassName", "value"]);
+    var meta = formMeta || formControl;
+    var _d = useFormControlId(id, meta), wrapperId = _d.wrapperId, controlId = _d.controlId;
+    var textInput = React.useRef();
+    function setAndPropagateValue(newValue, event) {
+        if (meta) {
+            meta.setValue(newValue);
+            meta.markAsDirty();
+        }
+        if (onChange) {
+            onChange(event || new FauxChangeEvent(textInput.current));
+        }
+    }
+    function clear() {
+        textInput.current.value = "";
+        setAndPropagateValue("");
+    }
+    function handleChange(event) {
+        setAndPropagateValue(event.target.value, event);
+    }
+    var classes = clsx(unsafelyReplaceClassName || "sps-text-input", className);
+    return (React.createElement(SpsFormComponentWrapper, { id: wrapperId, className: classes, formControl: formControl, formMeta: formMeta, inputRef: textInput, ref: ref, focusInputOnClick: true, "data-testid": "" + testId },
+        React.createElement("div", { className: clsx("sps-form-control", disabled && "disabled") },
+            icon && React.createElement("i", { className: clsx("sps-text-input__icon", "sps-icon", "sps-icon-" + icon) }),
+            React.createElement("input", __assign({ type: "text", ref: textInput, "data-testid": testId + "__input", className: "sps-text-input__input", id: controlId, name: name, placeholder: placeholder, onChange: handleChange, title: title, value: value, disabled: disabled }, rest)),
+            value && !disabled && (React.createElement("i", { "data-testid": testId + "__input_clear", className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })))));
+});
+Object.assign(SpsTextInput, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsTextInput",
+});
+//# sourceMappingURL=SpsTextInput.js.map

package/dist/out-tsc/text-input/SpsTextInput.js.map

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

package/dist/out-tsc/text-input/index.d.ts

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

package/dist/out-tsc/text-input/index.js

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

package/dist/out-tsc/text-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}

package/dist/out-tsc/textarea/SpsTextarea.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import type { SpsFormControl } from "../form/hooks/formControl";
+import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
+declare const propTypes: {
+    disabled: PropTypes.Requireable<boolean>;
+    formControl: PropTypes.Requireable<SpsFormControl<string>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<string>>;
+    name: PropTypes.Requireable<string>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    placeholder: PropTypes.Requireable<string>;
+    ref: PropTypes.Requireable<React.MutableRefObject<HTMLDivElement>>;
+    rows: PropTypes.Requireable<number>;
+    value: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsTextareaProps = PropTypes.InferTS<typeof propTypes, HTMLTextAreaElement>;
+export declare function SpsTextarea({ className, disabled, formControl, formMeta, id, name, onChange, placeholder, ref, rows, "data-testid": testId, unsafelyReplaceClassName, value, ...rest }: SpsTextareaProps): JSX.Element;
+export {};

package/dist/out-tsc/textarea/SpsTextarea.examples.d.ts

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

package/dist/out-tsc/textarea/SpsTextarea.examples.js

@@ -0,0 +1,36 @@
+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 SpsTextareaExamples = {
+    basic: {
+        label: "Basic",
+        description: "info about basic text areas",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function numLinesValidator(n) {\n                            return function(value) {\n                                const lines = typeof value === \"string\" ? value.split(\"\\n\").length : 0;\n                                if (lines !== n) {\n                                    return {\n                                        numLines: {\n                                            actualLines: lines,\n                                            requiredLines: n\n                                        }\n                                    };\n                                }\n                                return null;\n                            };\n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            haiku: \"\"\n                        }, {\n                            \"haiku\": [numLinesValidator(3)]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.haiku}\n                                help=\"A haiku is a three-line poem of 5, 7, and 5 syllables respectively.\"\n                                errors={() =>\n                                    formMeta.fields.haiku.hasError(\"numLines\") && (\n                                        <>\n                                        You need {formMeta.fields.haiku.errors[\"numLines\"].requiredLines} lines,\n                                        but you've only written {formMeta.fields.haiku.errors[\"numLines\"].actualLines} lines!\n                                    </>\n                                )\n                            }>\n                                Haiku\n                            </SpsLabel>\n                            <SpsTextarea placeholder=\"Write a haiku\" rows={3}\n                                formMeta={formMeta.fields.haiku}\n                                value={formValue.haiku}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function numLinesValidator(n) {\n                            return function(value) {\n                                const lines = typeof value === \"string\" ? value.split(\"\\\\n\").length : 0;\n                                if (lines !== n) {\n                                    return {\n                                        numLines: {\n                                            actualLines: lines,\n                                            requiredLines: n\n                                        }\n                                    };\n                                }\n                                return null;\n                            };\n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            haiku: \"\"\n                        }, {\n                            \"haiku\": [numLinesValidator(3)]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.haiku}\n                                help=\"A haiku is a three-line poem of 5, 7, and 5 syllables respectively.\"\n                                errors={() =>\n                                    formMeta.fields.haiku.hasError(\"numLines\") && (\n                                        <>\n                                        You need {formMeta.fields.haiku.errors[\"numLines\"].requiredLines} lines,\n                                        but you've only written {formMeta.fields.haiku.errors[\"numLines\"].actualLines} lines!\n                                    </>\n                                )\n                            }>\n                                Haiku\n                            </SpsLabel>\n                            <SpsTextarea placeholder=\"Write a haiku\" rows={3}\n                                formMeta={formMeta.fields.haiku}\n                                value={formValue.haiku}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    b_description: {
+        label: "Description",
+        description: "info about text areas with descriptions",
+        examples: {
+            description: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            textareaWithDescription: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.textareaWithDescription}\n                                description=\"This is a brief description of the field to provide additional context.\"\n                            >\n                                Label\n                            </SpsLabel>\n                            <SpsTextarea formMeta={formMeta.fields.textareaWithDescription}\n                                value={formValue.textareaWithDescription}\n                            />\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            textareaWithDescription: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.textareaWithDescription}\n                                description=\"This is a brief description of the field to provide additional context.\"\n                            >\n                                Label\n                            </SpsLabel>\n                            <SpsTextarea formMeta={formMeta.fields.textareaWithDescription}\n                                value={formValue.textareaWithDescription}\n                            />\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    c_disabled: {
+        label: "Disabled",
+        description: "info about disabled text areas",
+        examples: {
+            disabled: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            notes: \"This is the value of the textarea but you can't edit it right now\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.notes}>Notes</SpsLabel>\n                            <SpsTextarea disabled rows={5}\n                                formMeta={formMeta.fields.notes}\n                                value={formValue.notes}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            notes: \"This is the value of the textarea but you can't edit it right now\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.notes}>Notes</SpsLabel>\n                            <SpsTextarea disabled rows={5}\n                                formMeta={formMeta.fields.notes}\n                                value={formValue.notes}\n                            ></SpsTextarea>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SpsTextarea.examples.js.map

package/dist/out-tsc/textarea/SpsTextarea.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsTextarea.examples.js","sourceRoot":"","sources":["../../../src/textarea/SpsTextarea.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,mBAAmB,GAAoB;IAClD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,6BAA6B;QAC1C,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,srEAAA,qnEA0CF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,yCAAyC;QACtD,QAAQ,EAAE;YACR,WAAW,EAAE;gBACX,KAAK,EAAE,IAAI,+4BAAA,40BAiBF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,gCAAgC;QAC7C,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,ivBAAA,8qBAcF,IAAA;aACV;SACF;KACF;CACF,CAAC"}