@spscommerce/ds-react 5.10.3 → 5.10.5-ie.2

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.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 SpsSearchResultsBarExamples = {
+    noCount: {
+        label: "Basic",
+        description: "<p>Info about Basic Search Result Bars</p>",
+        examples: {
+            noCount: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                function SpsSearchResultsBarBasic() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar onClear={clearHandler}/>\n                    );\n                }\n                "], ["\n                function SpsSearchResultsBarBasic() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar onClear={clearHandler}/>\n                    );\n                }\n                "]))),
+            },
+        },
+    },
+    withCount: {
+        label: "With Count",
+        description: "<p>Info about Search Result Bars with count bars</p>",
+        examples: {
+            withCount: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                function SpsSearchResultsBarCount() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n\n                    return (\n                        <SpsSearchResultsBar resultsCount={125} onClear={clearHandler}/>\n                    );\n                }\n                "], ["\n                function SpsSearchResultsBarCount() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n\n                    return (\n                        <SpsSearchResultsBar resultsCount={125} onClear={clearHandler}/>\n                    );\n                }\n                "]))),
+            },
+        },
+    },
+    withCountAndTotal: {
+        label: "With Count and total",
+        description: "<p> Info about Search Result Bars with count & total</p>",
+        examples: {
+            withCountAndTotal: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                function SpsSearchResultsBarCountTotal() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar resultsCount={125} totalResults={250} onClear={clearHandler} />\n                    );\n                }\n                "], ["\n                function SpsSearchResultsBarCountTotal() {\n                    function clearHandler() {\n                        console.log(\"change handler called\");\n                    }\n                    return (\n                        <SpsSearchResultsBar resultsCount={125} totalResults={250} onClear={clearHandler} />\n                    );\n                }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SpsSearchResultsBar.examples.js.map

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSearchResultsBar.examples.js","sourceRoot":"","sources":["../../../src/search-results-bar/SpsSearchResultsBar.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,2BAA2B,GAAoB;IAC1D,OAAO,EAAE;QACP,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,4CAA4C;QACzD,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,qaAAA,kWASF,IAAA;aACV;SACF;KACF;IACD,SAAS,EAAE;QACT,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,sDAAsD;QACnE,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,KAAK,EAAE,IAAI,0bAAA,uXAUF,IAAA;aACV;SACF;KACF;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,sBAAsB;QAC7B,WAAW,EAAE,0DAA0D;QACvE,QAAQ,EAAE;YACR,iBAAiB,EAAE;gBACjB,KAAK,EAAE,IAAI,idAAA,8YASF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.js

@@ -0,0 +1,74 @@
+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 clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+var propsDoc = {
+    resultsCount: "number",
+    totalResults: "number",
+    onClear: "() => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { resultsCount: PropTypes.number, totalResults: PropTypes.number, onClear: PropTypes.fun() });
+export function SpsSearchResultsBar(props) {
+    var children = props.children, className = props.className, resultsCount = props.resultsCount, totalResults = props.totalResults, onClear = props.onClear, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "resultsCount", "totalResults", "onClear", "data-testid", "unsafelyReplaceClassName"]);
+    var t = React.useContext(I18nContext).t;
+    var classes = clsx(unsafelyReplaceClassName || "sps-search-results-bar", className);
+    var _a = __read(t("design-system:searchResultsBar.count", { count: resultsCount, total: totalResults })
+        .split(" "), 3), count = _a[0], ofText = _a[1], total = _a[2];
+    return (React.createElement("div", __assign({ className: classes, "data-testid": "" + testId }, rest),
+        React.createElement("span", { className: "sps-search-results-bar__label", "data-testid": testId + "__label" }, t("design-system:searchResultsBar.matchingResults")),
+        count && !Number.isNaN(Number(count))
+            && (React.createElement("span", { className: "sps-search-results-bar__count", "data-testid": testId + "__count" },
+                React.createElement("i", { className: "sps-icon sps-icon-double-angle-right" }),
+                React.createElement("span", null, count))),
+        total && !Number.isNaN(Number(total))
+            && (React.createElement("span", { className: "sps-search-results-bar__total", "data-testid": testId + "__total" },
+                ofText,
+                " ",
+                total)),
+        React.createElement("div", { className: "sps-search-results-bar__buttons", "data-testid": testId + "__button" },
+            React.createElement("button", { type: "button", onClick: onClear }, t("design-system:searchResultsBar.clear")))));
+}
+Object.assign(SpsSearchResultsBar, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSearchResultsBar",
+});
+//# sourceMappingURL=SpsSearchResultsBar.js.map

package/dist/out-tsc/search-results-bar/SpsSearchResultsBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSearchResultsBar.js","sourceRoot":"","sources":["../../../src/search-results-bar/SpsSearchResultsBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,IAAM,QAAQ,GAAG;IACf,YAAY,EAAE,QAAQ;IACtB,YAAY,EAAE,QAAQ;IACtB,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,YAAY,EAAE,SAAS,CAAC,MAAM,EAC9B,YAAY,EAAE,SAAS,CAAC,MAAM,EAC9B,OAAO,EAAE,SAAS,CAAC,GAAG,EAAc,GACrC,CAAC;AAIF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IAE/D,IAAA,QAAQ,GAQN,KAAK,SARC,EACR,SAAS,GAOP,KAAK,UAPE,EACT,YAAY,GAMV,KAAK,aANK,EACZ,YAAY,GAKV,KAAK,aALK,EACZ,OAAO,GAIL,KAAK,QAJA,EACQ,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EATH,+GASL,CADQ,CACC;IAEF,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,wBAAwB,EACpD,SAAS,CACV,CAAC;IAEI,IAAA,KAAA,OAEK,CAAC,CAAC,sCAAsC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;SAC/F,KAAK,CAAC,GAAG,CAAC,IAAA,EAHN,KAAK,QAAA,EACV,MAAM,QAAA,EACN,KAAK,QACM,CAAC;IAEd,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,iBAAe,KAAG,MAAQ,IAAM,IAAI;QACzD,8BAAM,SAAS,EAAC,+BAA+B,iBAAiB,MAAM,YAAS,IAAG,CAAC,CAAC,gDAAgD,CAAC,CAAQ;QAE3I,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;eAC1B,CACD,8BAAM,SAAS,EAAC,+BAA+B,iBAAiB,MAAM,YAAS;gBAC7E,2BAAG,SAAS,EAAC,sCAAsC,GAAG;gBACtD,kCAAO,KAAK,CAAQ,CACf,CACR;QAGT,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;eAC1B,CACD,8BAAM,SAAS,EAAC,+BAA+B,iBAAiB,MAAM,YAAS;gBAC5E,MAAM;gBACN,GAAG;gBACH,KAAK,CACD,CACR;QAEX,6BAAK,SAAS,EAAC,iCAAiC,iBAAiB,MAAM,aAAU;YAC/E,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,IAAG,CAAC,CAAC,sCAAsC,CAAC,CAAU,CACxF,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE;IACjC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,qBAAqB;CACnC,CAAC,CAAC"}

package/dist/out-tsc/search-results-bar/index.d.ts

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

package/dist/out-tsc/search-results-bar/index.js

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

package/dist/out-tsc/search-results-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/search-results-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC"}

package/dist/out-tsc/select/SpsSelect.d.ts

@@ -0,0 +1,37 @@
+import type { SpsActionMethod } from "@spscommerce/ds-shared";
+import type { Eventually } from "@spscommerce/utils";
+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: {
+    action: PropTypes.Requireable<SpsActionMethod>;
+    captionKey: PropTypes.Requireable<string>;
+    comparisonKey: PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    formControl: PropTypes.Requireable<SpsFormControl<any>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<any>>;
+    notClearable: PropTypes.Requireable<boolean>;
+    options: PropTypes.Validator<any[] | Promise<any[]> | ((filter?: string) => Eventually<any[]>)>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    placeholder: PropTypes.Requireable<string>;
+    searchDebounce: PropTypes.Requireable<number>;
+    searchPlaceholder: PropTypes.Requireable<string>;
+    tallOptionList: PropTypes.Requireable<boolean>;
+    textKey: PropTypes.Requireable<string>;
+    valueKey: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<any>;
+    zeroState: PropTypes.Requireable<string>;
+    autoFixWidth: PropTypes.Requireable<boolean>;
+    loading: PropTypes.Requireable<boolean>;
+    filterByTextAndCaptionKey: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsSelectProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare const SpsSelect: React.ForwardRefExoticComponent<Pick<SpsSelectProps, "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" | "data-testid" | "unsafelyReplaceClassName" | "formMeta" | "formControl" | "loading" | "filterByTextAndCaptionKey" | "searchDebounce" | "searchPlaceholder" | "captionKey" | "comparisonKey" | "options" | "textKey" | "valueKey" | "zeroState" | "tallOptionList" | "notClearable" | "autoFixWidth"> & React.RefAttributes<{
+    focus: () => void;
+}>>;
+export {};

package/dist/out-tsc/select/SpsSelect.examples.d.ts

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

package/dist/out-tsc/select/SpsSelect.examples.js

@@ -0,0 +1,77 @@
+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 SpsSelectExamples = {
+    basic: {
+        label: "Basic",
+        description: "info about basic selects",
+        examples: {
+            a_simple: {
+                description: "Simple value options",
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"basic\" options={colors}/>\n                        )\n                    }\n                "]))),
+            },
+            b_formHooks: {
+                description: "Form hooks",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: colors[0]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                            <SpsSelect options={colors} formMeta={formMeta.fields.color}\n                                value={formValue.color}\n                            />\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            color: colors[0]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n                            <SpsSelect options={colors} formMeta={formMeta.fields.color}\n                                value={formValue.color}\n                            />\n                        </>\n                    }\n                "]))),
+            },
+            c_placeholder: {
+                description: "Custom placeholder text",
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"placeholder\" options={colors} placeholder=\"Choose a color\u2026\"/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect id=\"placeholder\" options={colors} placeholder=\"Choose a color\u2026\"/>\n                        )\n                    }\n                "]))),
+            },
+            d_notClearable: {
+                description: "Not clearable",
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect options={colors} value=\"red\" notClearable />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"blue\", \"green\"];\n\n                        return (\n                            <SpsSelect options={colors} value=\"red\" notClearable />\n                        )\n                    }\n                "]))),
+            },
+            e_zeroState: {
+                description: "Zero state",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <SpsSelect options={[]} zeroState=\"We're sorry, there are no options to choose from at this time, because reasons.\" />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <SpsSelect options={[]} zeroState=\"We're sorry, there are no options to choose from at this time, because reasons.\" />\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    b_objectOpts: {
+        label: "Object Options",
+        description: "info about object options",
+        examples: {
+            a_basic: {
+                description: "Basic use of object options",
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const sizes = [\n                            { size: \"S\", price: \"10.99\" },\n                            { size: \"M\", price: \"12.99\" },\n                            { size: \"L\", price: \"14.99\" }\n                        ];\n\n                        return (\n                            <SpsSelect options={sizes} textKey=\"size\" />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const sizes = [\n                            { size: \"S\", price: \"10.99\" },\n                            { size: \"M\", price: \"12.99\" },\n                            { size: \"L\", price: \"14.99\" }\n                        ];\n\n                        return (\n                            <SpsSelect options={sizes} textKey=\"size\" />\n                        )\n                    }\n                "]))),
+            },
+            b_captions: {
+                description: "Captions",
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const lorem = [\n                            {\n                                title: \"Lorem\",\n                                description: \"Ut enim ad minim veniam\"\n                            },\n                            {\n                                title: \"Ipsum\",\n                                description: \"Excepteur sint occaecat cupidatat non proident\"\n                            }\n                        ];\n\n                        return (\n                            <SpsSelect options={lorem} textKey=\"title\" captionKey=\"description\" />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const lorem = [\n                            {\n                                title: \"Lorem\",\n                                description: \"Ut enim ad minim veniam\"\n                            },\n                            {\n                                title: \"Ipsum\",\n                                description: \"Excepteur sint occaecat cupidatat non proident\"\n                            }\n                        ];\n\n                        return (\n                            <SpsSelect options={lorem} textKey=\"title\" captionKey=\"description\" />\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    c_searchable: {
+        label: "Search/Filter",
+        description: "info about search/filter",
+        examples: {
+            a_simple: {
+                description: "Simple search function",
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect  id=\"search-function\" options={colorSearch} zeroState=\"While I'm sure that's a lovely color, it's not an option we support.\"/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect  id=\"search-function\" options={colorSearch} zeroState=\"While I'm sure that's a lovely color, it's not an option we support.\"/>\n                        )\n                    }\n                "]))),
+            },
+            b_promise: {
+                description: "Search function returning a Promise",
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return new Promise((resolve, reject) => {\n                                const result = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                    .filter(s => new RegExp(search, \"i\").test(s));\n                                resolve(result);\n                            });\n                        }\n\n                        return (\n                            <SpsSelect options={colorSearch}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return new Promise((resolve, reject) => {\n                                const result = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                    .filter(s => new RegExp(search, \"i\").test(s));\n                                resolve(result);\n                            });\n                        }\n\n                        return (\n                            <SpsSelect options={colorSearch}/>\n                        )\n                    }\n                "]))),
+            },
+            c_debounce: {
+                description: "Search with Debounce",
+                react: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect id=\"debounce-select\" options={colorSearch} searchDebounce={2000}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function colorSearch(search) {\n                            return [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"]\n                                .filter(s => (new RegExp(search, \"i\")).test(s));\n                        }\n\n                        return (\n                            <SpsSelect id=\"debounce-select\" options={colorSearch} searchDebounce={2000}/>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    d_specialAction: {
+        label: "Simple Action",
+        description: "info about simple action selects",
+        examples: {
+            a_action: {
+                description: "Action",
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"orange\", \"yellow\", \"blue\", \"indigo\", \"violet\"];\n                        const [action, updateAction] = useSpsAction(\n                            {\n                                label: \"Test Action\",\n                                icon: \"drill\"\n                            },\n                            () => console.log(\"Action\")\n                        );\n                        function handleChange(event) {\n                            updateAction({\n                                label: \"Test Action\"\n                            });\n                        }\n\n                        return (\n                            <SpsSelect  id=\"special-action\" options={colors} action={action} onChange={handleChange}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const colors = [\"red\", \"orange\", \"yellow\", \"blue\", \"indigo\", \"violet\"];\n                        const [action, updateAction] = useSpsAction(\n                            {\n                                label: \"Test Action\",\n                                icon: \"drill\"\n                            },\n                            () => console.log(\"Action\")\n                        );\n                        function handleChange(event) {\n                            updateAction({\n                                label: \"Test Action\"\n                            });\n                        }\n\n                        return (\n                            <SpsSelect  id=\"special-action\" options={colors} action={action} onChange={handleChange}/>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+//# sourceMappingURL=SpsSelect.examples.js.map

package/dist/out-tsc/select/SpsSelect.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSelect.examples.js","sourceRoot":"","sources":["../../../src/select/SpsSelect.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,iBAAiB,GAAoB;IAChD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,sBAAsB;gBACnC,KAAK,EAAE,IAAI,6WAAA,0SAQF,IAAA;aACV;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,YAAY;gBACzB,KAAK,EAAE,IAAI,4sBAAA,yoBAcF,IAAA;aACV;YACD,aAAa,EAAE;gBACb,WAAW,EAAE,yBAAyB;gBACtC,KAAK,EAAE,IAAI,wZAAA,qVAQF,IAAA;aACV;YACD,cAAc,EAAE;gBACd,WAAW,EAAE,eAAe;gBAC5B,KAAK,EAAE,IAAI,4XAAA,yTAQF,IAAA;aACV;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,YAAY;gBACzB,KAAK,EAAE,IAAI,iXAAA,8SAMF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,2BAA2B;QACxC,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,6BAA6B;gBAC1C,KAAK,EAAE,IAAI,6iBAAA,0eAYF,IAAA;aACV;YACD,UAAU,EAAE;gBACV,WAAW,EAAE,UAAU;gBACvB,KAAK,EAAE,IAAI,wxBAAA,qtBAiBF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,wBAAwB;gBACrC,KAAK,EAAE,IAAI,kqBAAA,+lBAWF,IAAA;aACV;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,qCAAqC;gBAClD,KAAK,EAAE,IAAI,+tBAAA,4pBAcF,IAAA;aACV;YACD,UAAU,EAAE;gBACV,WAAW,EAAE,sBAAsB;gBACnC,KAAK,EAAE,IAAI,smBAAA,iiBAWF,IAAA;aACV;SACF;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,kCAAkC;QAC/C,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,QAAQ;gBACrB,KAAK,EAAE,IAAI,o+BAAA,+5BAoBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/select/SpsSelect.js

@@ -0,0 +1,205 @@
+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 clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { FauxChangeEvent } from "../utils/FauxChangeEvent";
+import { usePatchReducer } from "../utils/usePatchReducer";
+import { useDidUpdateEffect } from "../utils/useDidUpdateEffect";
+import { I18nContext } from "../i18n";
+import { SpsFormComponentWrapper } from "../form/SpsFormComponentWrapper";
+import { SpsOptionList } from "../option-list/SpsOptionList";
+import { useFormControlId } from "../form/hooks/useFormControlId";
+var propsDoc = {
+    action: "SpsActionMethod",
+    captionKey: "string",
+    comparisonKey: "string",
+    disabled: "boolean",
+    formMeta: "SpsFormFieldMeta<any>",
+    notClearable: "boolean",
+    options: "Eventually<any[]> | (filter?: string) => Eventually<any[]>",
+    onChange: "ChangeEventHandler",
+    placeholder: "string",
+    searchDebounce: "number",
+    searchPlaceholder: "string",
+    tallOptionList: "boolean",
+    textKey: "string",
+    valueKey: "string",
+    value: "any",
+    zeroState: "string",
+    autoFixWidth: "boolean",
+    loading: "boolean",
+    filterByTextAndCaptionKey: "boolean",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { action: PropTypes.fun(), captionKey: PropTypes.string, comparisonKey: PropTypes.string, disabled: PropTypes.bool, formControl: PropTypes.impl(), formMeta: PropTypes.impl(), notClearable: PropTypes.bool, options: PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.instanceOf(Promise),
+        PropTypes.fun(),
+    ]).isRequired, onChange: PropTypes.fun(), placeholder: PropTypes.string, searchDebounce: PropTypes.number, searchPlaceholder: PropTypes.string, tallOptionList: PropTypes.bool, textKey: PropTypes.string, valueKey: PropTypes.string, value: PropTypes.any, zeroState: PropTypes.string, autoFixWidth: PropTypes.bool, loading: PropTypes.bool, filterByTextAndCaptionKey: PropTypes.bool });
+export var SpsSelect = React.forwardRef(function (props, ref) {
+    var action = props.action, _a = props.autoFixWidth, autoFixWidth = _a === void 0 ? false : _a, captionKey = props.captionKey, className = props.className, comparisonKey = props.comparisonKey, disabled = props.disabled, formControl = props.formControl, formMeta = props.formMeta, id = props.id, notClearable = props.notClearable, options = props.options, onChange = props.onChange, onClick = props.onClick, placeholder = props.placeholder, searchDebounce = props.searchDebounce, _b = props.searchPlaceholder, searchPlaceholder = _b === void 0 ? "Search…" : _b, tallOptionList = props.tallOptionList, textKey = props.textKey, valueKey = props.valueKey, unsafelyReplaceClassName = props.unsafelyReplaceClassName, valueProp = props.value, zeroState = props.zeroState, loading = props.loading, filterByTextAndCaptionKey = props.filterByTextAndCaptionKey, testId = props["data-testid"], rest = __rest(props, ["action", "autoFixWidth", "captionKey", "className", "comparisonKey", "disabled", "formControl", "formMeta", "id", "notClearable", "options", "onChange", "onClick", "placeholder", "searchDebounce", "searchPlaceholder", "tallOptionList", "textKey", "valueKey", "unsafelyReplaceClassName", "value", "zeroState", "loading", "filterByTextAndCaptionKey", "data-testid"]);
+    var meta = formMeta || formControl;
+    var _c = useFormControlId(id, meta), wrapperId = _c.wrapperId, controlId = _c.controlId;
+    var optionsList = React.useRef(null);
+    var rootElement = React.useRef(null);
+    var controlButton = React.useRef(null);
+    var t = React.useContext(I18nContext).t;
+    var _d = __read(usePatchReducer({
+        isOpen: false,
+        value: valueProp,
+        text: "",
+        keyDown: null,
+        opensUpward: false,
+        optionIds: "",
+    }), 2), state = _d[0], patchState = _d[1];
+    function setValueAndText(newValue) {
+        patchState({
+            value: newValue,
+            text: newValue && textKey ? newValue[textKey] : newValue,
+        });
+    }
+    function updateValue(newValue) {
+        setValueAndText(newValue);
+        var actualValue = newValue && valueKey && typeof newValue === "object" ? newValue[valueKey] : newValue;
+        if (meta) {
+            meta.setValue(actualValue);
+            meta.markAsDirty();
+        }
+        if (onChange) {
+            onChange(new FauxChangeEvent({ value: actualValue }));
+        }
+    }
+    React.useEffect(function () {
+        setValueAndText(valueProp);
+    }, [valueProp, textKey]);
+    function handleClearIconClick() {
+        updateValue(undefined);
+    }
+    function handleDocumentClick() {
+        patchState({ isOpen: false });
+    }
+    function handleControlButtonClick(event) {
+        event.nativeEvent.stopImmediatePropagation();
+        if (!disabled) {
+            patchState({ isOpen: !state.isOpen });
+        }
+    }
+    function handleKeyDown(event) {
+        if (!disabled) {
+            // older browsers use "Spacebar" over " "
+            if (["Up",
+                "ArrowUp",
+                "Down",
+                "ArrowDown",
+                " ",
+                "Spacebar"].indexOf(event.key) > -1) {
+                event.preventDefault();
+            }
+            event.persist();
+            patchState({ keyDown: event });
+        }
+    }
+    function handleSelfToggle(olIsOpen) {
+        patchState({ isOpen: olIsOpen });
+    }
+    function handlePositionFlip(opensUpward) {
+        patchState({ opensUpward: opensUpward });
+    }
+    function handleDropdownOpened(event) {
+        if (event.detail !== wrapperId) {
+            patchState({ isOpen: false });
+        }
+    }
+    function handleOptionListChanged(filteredListLength) {
+        patchState({
+            optionIds: new Array(filteredListLength)
+                .fill("")
+                .map(function (s, i) { return wrapperId + "-options-option-" + i; })
+                .join(","),
+        });
+    }
+    React.useEffect(function () {
+        document.addEventListener("click", handleDocumentClick);
+        document.addEventListener("DropdownOpened", handleDropdownOpened);
+        return function () {
+            document.removeEventListener("click", handleDocumentClick);
+            document.removeEventListener("DropdownOpened", handleDropdownOpened);
+        };
+    }, []);
+    React.useLayoutEffect(function () {
+        if (autoFixWidth && controlButton.current && optionsList.current) {
+            optionsList.current.style.width = null;
+            var optionsWrapperWidth = optionsList.current.getBoundingClientRect().width;
+            var fixedWidth = optionsWrapperWidth + 6 + "px";
+            optionsList.current.style.width = fixedWidth;
+            controlButton.current.style.width = fixedWidth;
+            controlButton.current.style.maxWidth = fixedWidth;
+        }
+    });
+    useDidUpdateEffect(function () {
+        if (state.isOpen) {
+            var event_1 = document.createEvent("CustomEvent");
+            event_1.initCustomEvent("DropdownOpened", false, false, wrapperId);
+            document.dispatchEvent(event_1);
+        }
+        else {
+            rootElement.current.focus();
+        }
+    }, [state.isOpen]);
+    React.useImperativeHandle(ref, function () { return ({
+        focus: function () {
+            rootElement.current.focus();
+        },
+    }); });
+    var classes = clsx(unsafelyReplaceClassName || "sps-select", state.isOpen && "sps-select--open", state.isOpen && "z-stratum-dropdown", state.opensUpward && "sps-select--opens-upward", className);
+    var valueText = state.text || placeholder || t("design-system:select.defaultPlaceholder");
+    return (React.createElement(SpsFormComponentWrapper, __assign({ id: wrapperId, className: classes, onKeyDown: handleKeyDown, formControl: formControl, formMeta: formMeta, ref: rootElement, role: "listbox", "aria-owns": state.optionIds, "data-testid": testId, onClick: onClick }, rest),
+        React.createElement("div", { className: clsx("sps-select__dropctrl", disabled && "disabled"), id: controlId, tabIndex: 0, onClick: handleControlButtonClick, ref: controlButton, title: valueText, "data-testid": testId + "-dropctrl" },
+            React.createElement("div", { className: "sps-select__dropctrl-content" },
+                React.createElement("span", { className: clsx("sps-select__value", !state.text && "sps-select__value--placeholder"), "data-testid": testId + "-value" }, valueText),
+                state.value && !notClearable && !disabled && (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-select__clear-btn", onClick: handleClearIconClick, "data-testid": testId + "-clear-value" })),
+                React.createElement("i", { className: "sps-icon sps-icon-chevron-down" }))),
+        React.createElement(SpsOptionList, { id: wrapperId + "-options", ref: optionsList, attachTo: controlButton, captionKey: captionKey, comparisonKey: comparisonKey, isOpen: state.isOpen, keyDown: state.keyDown, nullOption: state.value && !notClearable ? placeholder : null, options: options, onOptionSelected: updateValue, onPositionFlip: handlePositionFlip, onSelfToggle: handleSelfToggle, searchDebounce: searchDebounce, searchPlaceholder: searchPlaceholder, selectedOption: state.value, specialAction: action, tall: tallOptionList, textKey: textKey, filterByTextAndCaptionKey: filterByTextAndCaptionKey, optionRole: "option", valueKey: valueKey, onOptionListChanged: handleOptionListChanged, zeroState: zeroState, ignoreWidthStyles: autoFixWidth, loading: loading, "data-testid": testId + "-option-list" })));
+});
+Object.assign(SpsSelect, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsSelect",
+});
+//# sourceMappingURL=SpsSelect.js.map

package/dist/out-tsc/select/SpsSelect.js.map

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

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

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

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

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

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

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

package/dist/out-tsc/side-nav/SpsSideNav.d.ts

@@ -0,0 +1,38 @@
+/** TODO: Fix circular deps, update to follow our patterns, then remove eslint override */
+import * as React from "react";
+import type { SpsIcon, TagKind } from "@spscommerce/ds-shared";
+export interface SideNavItem {
+    name: string;
+    tag?: TagKind;
+    key?: string | number;
+    tagContent?: string;
+    subNavItems?: SideNavItem[];
+    icon?: SpsIcon;
+}
+export interface SideNavSection {
+    sectionTitle?: string;
+    key?: string | number;
+    navItems: SideNavItem[];
+}
+export interface SideNavBranch extends SideNavItem {
+    expanded: boolean;
+}
+export interface SpsSideNavProps {
+    title?: string;
+    titleIcon?: SpsIcon;
+    activeNavItem: string;
+    onNavChange?: (newNav: string, newNavKey?: string | number) => void;
+    navOptions: SideNavSection[];
+    tabs?: string[];
+    initialActiveTab?: string;
+    onTabChange?: (newTab: string) => void;
+    filterable?: boolean;
+    filterInputPlaceholder?: string;
+}
+/**
+ * Helper to find if parent navigation contains the active child branch
+ * @param nav SideNavItems[] array of navigation branches to be checked
+ * @param activeTab string currently active tab
+ */
+export declare const findParentBranches: (nav: SideNavItem[], activeTab: string) => boolean;
+export declare const SpsSideNav: React.FC<SpsSideNavProps>;

package/dist/out-tsc/side-nav/SpsSideNav.examples.d.ts

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