@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/checkbox/SpsCheckbox.examples.js

@@ -0,0 +1,35 @@
+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 SpsCheckboxExamples = {
+    labels: {
+        label: "Labels",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n            not the <code>&lt;SpsLabel&gt;</code> component.</p>\n        "], ["\n            <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n            not the <code>&lt;SpsLabel&gt;</code> component.</p>\n        "]))),
+        examples: {
+            label: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                function DemoComponent() {\n                    const { formValue, formMeta, updateForm } = useSpsForm({\n                        red: true,\n                        blue: false,\n                        green: false,\n                    })\n\n                    return <>\n                        <SpsCheckbox\n                            name=\"red\"\n                            label=\"Red\"\n                            checked={formValue.red}\n                            formMeta={formMeta.fields.red}\n                        />\n                        <SpsCheckbox\n                            name=\"blue\"\n                            label=\"Blue\"\n                            checked={formValue.blue}\n                            formMeta={formMeta.fields.blue}\n                        />\n                        <SpsCheckbox\n                            name=\"green\"\n                            label=\"Green\"\n                            checked={formValue.green}\n                            formMeta={formMeta.fields.green}\n                            indeterminate\n                        />\n                    </>\n                  }\n                "], ["\n                function DemoComponent() {\n                    const { formValue, formMeta, updateForm } = useSpsForm({\n                        red: true,\n                        blue: false,\n                        green: false,\n                    })\n\n                    return <>\n                        <SpsCheckbox\n                            name=\"red\"\n                            label=\"Red\"\n                            checked={formValue.red}\n                            formMeta={formMeta.fields.red}\n                        />\n                        <SpsCheckbox\n                            name=\"blue\"\n                            label=\"Blue\"\n                            checked={formValue.blue}\n                            formMeta={formMeta.fields.blue}\n                        />\n                        <SpsCheckbox\n                            name=\"green\"\n                            label=\"Green\"\n                            checked={formValue.green}\n                            formMeta={formMeta.fields.green}\n                            indeterminate\n                        />\n                    </>\n                  }\n                "]))),
+            },
+        },
+    },
+    b_disabled: {
+        label: "Disabled",
+        examples: {
+            disabled: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                function DemoComponent() {\n                    const { formValue, formMeta, updateForm } = useSpsForm({\n                        red: true,\n                        blue: false,\n                        green: false,\n                    })\n\n                    return <>\n                        <SpsCheckbox\n                            name=\"red\"\n                            label=\"Red\"\n                            checked={formValue.red}\n                            formMeta={formMeta.fields.red}\n                            disabled\n                        />\n                        <SpsCheckbox\n                            name=\"blue\"\n                            label=\"Blue\"\n                            checked={formValue.blue}\n                            formMeta={formMeta.fields.blue}\n                            disabled\n                        />\n                        <SpsCheckbox\n                            name=\"green\"\n                            label=\"Green\"\n                            checked={formValue.green}\n                            formMeta={formMeta.fields.green}\n                            indeterminate\n                            disabled\n                        />\n                    </>\n                  }\n                "], ["\n                function DemoComponent() {\n                    const { formValue, formMeta, updateForm } = useSpsForm({\n                        red: true,\n                        blue: false,\n                        green: false,\n                    })\n\n                    return <>\n                        <SpsCheckbox\n                            name=\"red\"\n                            label=\"Red\"\n                            checked={formValue.red}\n                            formMeta={formMeta.fields.red}\n                            disabled\n                        />\n                        <SpsCheckbox\n                            name=\"blue\"\n                            label=\"Blue\"\n                            checked={formValue.blue}\n                            formMeta={formMeta.fields.blue}\n                            disabled\n                        />\n                        <SpsCheckbox\n                            name=\"green\"\n                            label=\"Green\"\n                            checked={formValue.green}\n                            formMeta={formMeta.fields.green}\n                            indeterminate\n                            disabled\n                        />\n                    </>\n                  }\n                "]))),
+            },
+        },
+    },
+    c_noLabels: {
+        label: "No Label",
+        description: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            <p>Checkboxes without labels are used in table rows and Summary List Rows\n            to allow those rows to be selected and deselected. They are not normally\n            used elsewhere and doing so should be done with utmost caution. Any checkbox\n            without a label should visually have an obvious purpose and should always have\n            an <code>aria-label</code> describing what it's for to screen reader users.</p>\n        "], ["\n            <p>Checkboxes without labels are used in table rows and Summary List Rows\n            to allow those rows to be selected and deselected. They are not normally\n            used elsewhere and doing so should be done with utmost caution. Any checkbox\n            without a label should visually have an obvious purpose and should always have\n            an <code>aria-label</code> describing what it's for to screen reader users.</p>\n        "]))),
+        examples: {
+            noLabels: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        const [rowIsSelected, setRowIsSelected] = React.useState(true);\n\n                        function handleSelectionChange(event) {\n                            setRowIsSelected(event.target.checked);\n                        }\n\n                        return (\n                            <SpsSummaryListRow selected={rowIsSelected}>\n                                <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                    <SpsCheckbox aria-label=\"Row Selected\" checked={rowIsSelected} onChange={handleSelectionChange}/>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn>\n                                    <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                    <div className=\"d-inline-block align-middle\">\n                                        <div className=\"fs-18\">\n                                            <a href=\"#\">Heading</a>\n                                        </div>\n                                        <div className=\"fs-14\">Sub Heading</div>\n                                    </div>\n                                </SpsSummaryListColumn>\n                            </SpsSummaryListRow>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const [rowIsSelected, setRowIsSelected] = React.useState(true);\n\n                        function handleSelectionChange(event) {\n                            setRowIsSelected(event.target.checked);\n                        }\n\n                        return (\n                            <SpsSummaryListRow selected={rowIsSelected}>\n                                <SpsSummaryListColumn width=\"2.8rem\" lean>\n                                    <SpsCheckbox aria-label=\"Row Selected\" checked={rowIsSelected} onChange={handleSelectionChange}/>\n                                </SpsSummaryListColumn>\n                                <SpsSummaryListColumn>\n                                    <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n                                    <div className=\"d-inline-block align-middle\">\n                                        <div className=\"fs-18\">\n                                            <a href=\"#\">Heading</a>\n                                        </div>\n                                        <div className=\"fs-14\">Sub Heading</div>\n                                    </div>\n                                </SpsSummaryListColumn>\n                            </SpsSummaryListRow>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=SpsCheckbox.examples.js.map

package/dist/out-tsc/checkbox/SpsCheckbox.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsCheckbox.examples.js","sourceRoot":"","sources":["../../../src/checkbox/SpsCheckbox.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,mBAAmB,GAAoB;IAClD,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,IAAI,gPAAA,6KAGZ,IAAA;QACL,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,wvCAAA,qrCA8BF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,02CAAA,uyCAiCF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,IAAI,+gBAAA,4cAMZ,IAAA;QACL,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,0+CAAA,u6CAyBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/checkbox/SpsCheckbox.js

@@ -0,0 +1,88 @@
+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 { useFormControlId } from "../form/hooks/useFormControlId";
+import { SpsFormComponentWrapper } from "../form/SpsFormComponentWrapper";
+var propsDoc = {
+    checked: "boolean",
+    disabled: "boolean",
+    formMeta: "SpsFormFieldMeta<boolean>",
+    indeterminate: "boolean",
+    inline: "boolean",
+    label: "string",
+    onChange: "ChangeEventHandler",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { checked: PropTypes.bool, disabled: PropTypes.bool, formControl: PropTypes.impl(), formMeta: PropTypes.impl(), indeterminate: PropTypes.bool, inline: PropTypes.bool, label: PropTypes.string, onChange: PropTypes.fun() });
+export function SpsCheckbox(_a) {
+    var checkedProp = _a.checked, className = _a.className, disabled = _a.disabled, formControl = _a.formControl, formMeta = _a.formMeta, id = _a.id, indeterminateProp = _a.indeterminate, inline = _a.inline, label = _a.label, onChange = _a.onChange, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, rest = __rest(_a, ["checked", "className", "disabled", "formControl", "formMeta", "id", "indeterminate", "inline", "label", "onChange", "data-testid", "unsafelyReplaceClassName"]);
+    var meta = formMeta || formControl;
+    var inputElement = React.useRef();
+    var _b = __read(React.useState(checkedProp), 2), checked = _b[0], setChecked = _b[1];
+    var _c = __read(React.useState(indeterminateProp), 2), indeterminate = _c[0], setIndeterminate = _c[1];
+    var _d = useFormControlId(id, meta), wrapperId = _d.wrapperId, controlId = _d.controlId;
+    React.useEffect(function () { return setChecked(checkedProp); }, [checkedProp]);
+    React.useEffect(function () { return setIndeterminate(indeterminateProp); }, [indeterminateProp]);
+    React.useEffect(function () {
+        inputElement.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-checkbox", "sps-checkable", inline && "sps-checkable--inline", !label && "sps-checkable--no-label", className);
+    function handleChange(event) {
+        setChecked(event.target.checked);
+        setIndeterminate(false);
+        if (meta) {
+            meta.setValue(event.target.checked);
+            meta.markAsDirty();
+        }
+        if (onChange) {
+            onChange(event);
+        }
+        inputElement.current.focus();
+    }
+    return (React.createElement(SpsFormComponentWrapper, { id: wrapperId, className: classes, formControl: formControl, formMeta: formMeta, inputRef: inputElement, "data-testid": testId },
+        React.createElement("input", __assign({ type: "checkbox", ref: inputElement, className: "sps-checkable__input", id: controlId, checked: checked, disabled: disabled, "data-testId": testId + "__checkbox-input", onChange: handleChange }, rest)),
+        React.createElement("label", { className: "sps-checkable__label", htmlFor: controlId }, label || "")));
+}
+Object.assign(SpsCheckbox, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsCheckbox",
+});
+//# sourceMappingURL=SpsCheckbox.js.map

package/dist/out-tsc/checkbox/SpsCheckbox.js.map

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

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

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

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

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

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

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

package/dist/out-tsc/checkbox-dropdown/SpsCheckboxDropdown.d.ts

@@ -0,0 +1,17 @@
+import type { SpsActionMethod, SpsActionDescriptor } from "@spscommerce/ds-shared";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    checked: PropTypes.Requireable<boolean>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    indeterminate: PropTypes.Requireable<boolean>;
+    options: PropTypes.Validator<(SpsActionMethod | [SpsActionDescriptor, () => void])[]>;
+    disabled: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsCheckboxDropdownProps = PropTypes.InferTS<typeof propTypes, HTMLElement>;
+export declare function SpsCheckboxDropdown(props: SpsCheckboxDropdownProps): JSX.Element;
+export {};

package/dist/out-tsc/checkbox-dropdown/SpsCheckboxDropdown.js

@@ -0,0 +1,54 @@
+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 { SpsIcon, } from "@spscommerce/ds-shared";
+import * as React from "react";
+import clsx from "clsx";
+import * as PropTypes from "../prop-types";
+import { SpsCheckbox } from "../checkbox/SpsCheckbox";
+import { SpsDropdown } from "../dropdown/SpsDropdown";
+var propsDoc = {
+    checked: "boolean",
+    onChange: "ChangeEventHandler",
+    indeterminate: "boolean",
+    disabled: "boolean",
+    options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { checked: PropTypes.bool, onChange: PropTypes.fun(), indeterminate: PropTypes.bool, 
+    // the type arg to PropTypes.arrayOf<T>() here confuses eslint greatly
+    /* eslint-disable */
+    options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.any])).isRequired, 
+    /* eslint-enable */
+    disabled: PropTypes.bool });
+export function SpsCheckboxDropdown(props) {
+    var options = props.options, className = props.className, checked = props.checked, onChange = props.onChange, indeterminate = props.indeterminate, disabled = props.disabled, rest = __rest(props, ["options", "className", "checked", "onChange", "indeterminate", "disabled"]);
+    var classes = clsx("sps-checkbox-dropdown", className);
+    return (React.createElement("span", __assign({ className: classes }, rest),
+        React.createElement(SpsCheckbox, { indeterminate: indeterminate, checked: checked, disabled: disabled, onChange: onChange, inline: true }),
+        React.createElement(SpsDropdown, { disabled: disabled, options: options, icon: SpsIcon.CHEVRON_DOWN })));
+}
+Object.assign(SpsCheckboxDropdown, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsCheckboxDropdown",
+});
+//# sourceMappingURL=SpsCheckboxDropdown.js.map

package/dist/out-tsc/checkbox-dropdown/SpsCheckboxDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsCheckboxDropdown.js","sourceRoot":"","sources":["../../../src/checkbox-dropdown/SpsCheckboxDropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,OAAO,EACL,OAAO,GACR,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,IAAM,QAAQ,GAAG;IACf,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,oBAAoB;IAC9B,aAAa,EAAE,SAAS;IACxB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,4DAA4D;CACtE,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,OAAO,EAAE,SAAS,CAAC,IAAI,EACvB,QAAQ,EAAE,SAAS,CAAC,GAAG,EAA4B,EACnD,aAAa,EAAE,SAAS,CAAC,IAAI;IAC7B,sEAAsE;IACtE,oBAAoB;IAClB,OAAO,EAAE,SAAS,CAAC,OAAO,CACtB,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CACvD,CAAC,UAAU;IACZ,mBAAmB;IACrB,QAAQ,EAAE,SAAS,CAAC,IAAI,GACzB,CAAC;AAIF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IAE/D,IAAA,OAAO,GAOL,KAAK,QAPA,EACP,SAAS,GAMP,KAAK,UANE,EACT,OAAO,GAKL,KAAK,QALA,EACP,QAAQ,GAIN,KAAK,SAJC,EACR,aAAa,GAGX,KAAK,cAHM,EACb,QAAQ,GAEN,KAAK,SAFC,EACL,IAAI,UACL,KAAK,EARH,4EAQL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,uBAAuB,EACvB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAM,SAAS,EAAE,OAAO,IAAM,IAAI;QAChC,oBAAC,WAAW,IACV,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAe,EACzB,MAAM,SACN;QACF,oBAAC,WAAW,IACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,CAAC,YAAY,GAC1B,CACG,CACR,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/checkbox-dropdown/index.d.ts

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

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

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

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

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

package/dist/out-tsc/clickable-tag/SpsClickableTag.d.ts

@@ -0,0 +1,16 @@
+import { ClickableTagKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    disabled: PropTypes.Requireable<boolean>;
+    href: PropTypes.Requireable<string>;
+    kind: PropTypes.Requireable<ClickableTagKind>;
+    onAdd: PropTypes.Requireable<() => void>;
+    onRemove: PropTypes.Requireable<() => void>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsClickableTagProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsClickableTag(props: SpsClickableTagProps): JSX.Element;
+export {};

package/dist/out-tsc/clickable-tag/SpsClickableTag.examples.d.ts

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

package/dist/out-tsc/clickable-tag/SpsClickableTag.examples.js

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsClickableTagExamples = {
+    basic: {
+        label: "Basic",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n                            Gray\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n                            Gray\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "]))),
+            },
+            disabled: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <SpsClickableTag className=\"mt-1 ml-1\" disabled>\n                          Disabled\n                        </SpsClickableTag>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <SpsClickableTag className=\"mt-1 ml-1\" disabled>\n                          Disabled\n                        </SpsClickableTag>\n                      );\n                    }\n                "]))),
+            },
+        },
+    },
+    button: {
+        label: "Button",
+        examples: {
+            Remove: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag\n                            className=\"mt-1 ml-1\"\n                            onRemove={() => console.log(\"removed\")}\n                          >\n                            One\n                          </SpsClickableTag>\n                          <SpsClickableTag\n                            className=\"mt-1 ml-1\"\n                            onRemove={() => console.log(\"removed\")}\n                          >\n                            Two\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag\n                            className=\"mt-1 ml-1\"\n                            onRemove={() => console.log(\"removed\")}\n                          >\n                            One\n                          </SpsClickableTag>\n                          <SpsClickableTag\n                            className=\"mt-1 ml-1\"\n                            onRemove={() => console.log(\"removed\")}\n                          >\n                            Two\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "]))),
+            },
+            Add: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n                            One\n                          </SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n                            Two\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <>\n                          <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n                            One\n                          </SpsClickableTag>\n                          <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n                            Two\n                          </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "]))),
+            },
+        },
+    },
+    link: {
+        label: "Link",
+        examples: {
+            basic: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                        return (\n                            <>\n                                <SpsClickableTag\n                                    className=\"mt-1 ml-1\"\n                                    href=\"https://google.com\"\n                                >\n                                    Link\n                                </SpsClickableTag>\n                                <SpsClickableTag\n                                    className=\"mt-1 ml-1\"\n                                    onClick={() => window.alert(\"hi\")}\n                                    kind={ClickableTagKind.GRAY}\n                                >\n                                    Link\n                                </SpsClickableTag>\n                            </>\n                        )\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n                    function Component() {\n                        return (\n                            <>\n                                <SpsClickableTag\n                                    className=\"mt-1 ml-1\"\n                                    href=\"https://google.com\"\n                                >\n                                    Link\n                                </SpsClickableTag>\n                                <SpsClickableTag\n                                    className=\"mt-1 ml-1\"\n                                    onClick={() => window.alert(\"hi\")}\n                                    kind={ClickableTagKind.GRAY}\n                                >\n                                    Link\n                                </SpsClickableTag>\n                            </>\n                        )\n                    }\n                "]))),
+            },
+            button: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <>\n                            <SpsClickableTag\n                                className=\"mt-1 ml-1\"\n                                href=\"https://google.com\"\n                                onRemove={() => console.log(\"removed\")}\n                            >\n                                Remove\n                            </SpsClickableTag>\n                            <SpsClickableTag\n                                className=\"mt-1 ml-1\"\n                                onClick={() => window.alert(\"hi\")}\n                                onAdd={() => console.log(\"added\")}\n                            >\n                                Add\n                            </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "], ["\n                    import { SpsClickableTag } from \"@spscommerce/ds-react\";\n                    function Component() {\n                      return (\n                        <>\n                            <SpsClickableTag\n                                className=\"mt-1 ml-1\"\n                                href=\"https://google.com\"\n                                onRemove={() => console.log(\"removed\")}\n                            >\n                                Remove\n                            </SpsClickableTag>\n                            <SpsClickableTag\n                                className=\"mt-1 ml-1\"\n                                onClick={() => window.alert(\"hi\")}\n                                onAdd={() => console.log(\"added\")}\n                            >\n                                Add\n                            </SpsClickableTag>\n                        </>\n                      );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=SpsClickableTag.examples.js.map

package/dist/out-tsc/clickable-tag/SpsClickableTag.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsClickableTag.examples.js","sourceRoot":"","sources":["../../../src/clickable-tag/SpsClickableTag.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,uBAAuB,GAAoB;IACtD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,4rBAAA,ynBAaF,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,gcAAA,6XASF,IAAA;aACV;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,q4BAAA,k0BAoBF,IAAA;aACV;YACD,GAAG,EAAE;gBACH,KAAK,EAAE,IAAI,+sBAAA,4oBAcF,IAAA;aACV;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,umCAAA,oiCAsBF,IAAA;aACV;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,0iCAAA,u+BAsBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/clickable-tag/SpsClickableTag.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;
+};
+import { SpsIcon, ClickableTagKind } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    disabled: "boolean",
+    href: "string",
+    kind: "ClickableTagKind",
+    onAdd: "() => void",
+    onRemove: "() => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { disabled: PropTypes.bool, href: PropTypes.string, kind: PropTypes.enumValue(ClickableTagKind), onAdd: PropTypes.fun(), onRemove: PropTypes.fun() });
+export function SpsClickableTag(props) {
+    var children = props.children, className = props.className, disabled = props.disabled, href = props.href, _a = props.kind, kind = _a === void 0 ? ClickableTagKind.BLUE : _a, onAdd = props.onAdd, onRemove = props.onRemove, onClick = props.onClick, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "disabled", "href", "kind", "onAdd", "onRemove", "onClick", "data-testid", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-clickable-tag", "sps-clickable-tag--" + kind, className, disabled && "sps-clickable-tag--disabled", (onAdd || onRemove) && "sps-clickable-tag--icon");
+    var labelClasses = clsx("sps-clickable-tag__label", (href || onClick) && "sps-clickable-tag__label--link");
+    var title = React.Children.toArray(children)
+        .filter(function (c) { return typeof c === "string"; })
+        .join("");
+    function emitEvent(event) {
+        if (onAdd) {
+            onAdd();
+        }
+        else if (onRemove) {
+            onRemove();
+        }
+        event.stopPropagation();
+    }
+    React.useEffect(function () {
+        if (onRemove && onAdd) {
+            throw new Error("Clickable tag should have onRemove or onAdd, not both");
+        }
+    }, [onAdd, onRemove]);
+    function handleClick(event) {
+        event.stopPropagation();
+        if (onClick) {
+            onClick(event);
+        }
+    }
+    return (React.createElement("div", __assign({ className: classes, "data-testid": testId }, rest),
+        React.createElement("span", { className: labelClasses, title: title, onClick: handleClick },
+            href && React.createElement("a", { href: href }, children),
+            !href && children),
+        (onAdd || onRemove) && !disabled && (React.createElement("div", { className: "sps-clickable-tag__icon", onClick: disabled ? null : emitEvent, "aria-label": onAdd ? "Add" : "Remove" },
+            React.createElement("i", { "aria-hidden": "true", className: "sps-icon sps-icon-" + (onAdd ? SpsIcon.PLUS_SIGN : SpsIcon.X), "data-testid": testId + "__icon" })))));
+}
+Object.assign(SpsClickableTag, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsClickableTag",
+});
+//# sourceMappingURL=SpsClickableTag.js.map

package/dist/out-tsc/clickable-tag/SpsClickableTag.js.map

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

package/dist/out-tsc/clickable-tag/index.d.ts

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

package/dist/out-tsc/clickable-tag/index.js

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

package/dist/out-tsc/clickable-tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/clickable-tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC"}

package/dist/out-tsc/column-chooser/SpsColumnChooser.d.ts

@@ -0,0 +1,19 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    maxSelectedColumns: PropTypes.Requireable<number>;
+    unselectedColumns: PropTypes.Requireable<any[]>;
+    selectedColumns: PropTypes.Requireable<any[]>;
+    onApplyChanges: PropTypes.Requireable<(selectedColumns: ColumnProps[]) => void>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsColumnChooserProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export interface ColumnProps {
+    name: string;
+    value: string;
+    mandatory?: boolean;
+}
+export declare function SpsColumnChooser(props: SpsColumnChooserProps): JSX.Element;
+export {};

package/dist/out-tsc/column-chooser/SpsColumnChooser.examples.d.ts

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

package/dist/out-tsc/column-chooser/SpsColumnChooser.examples.js

@@ -0,0 +1,18 @@
+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 SpsColumnChooserExamples = {
+    basic: {
+        label: "Basic",
+        description: "Column chooser component",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const unselectedCols = [\n                            { name: \"Red Fish\", value: \"Red\" },\n                            { name: \"Blue Fish\", value: \"Blue\" }\n                        ];\n                        const selectedCols = [\n                            { name: \"One Fish\", value: \"One\" },\n                            { name: \"Two Fish\", value: \"Two\" }\n                        ]\n                        return (\n                            <SpsColumnChooser\n                                unselectedColumns={unselectedCols}\n                                selectedColumns={selectedCols}\n                                onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                            />\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const unselectedCols = [\n                            { name: \"Red Fish\", value: \"Red\" },\n                            { name: \"Blue Fish\", value: \"Blue\" }\n                        ];\n                        const selectedCols = [\n                            { name: \"One Fish\", value: \"One\" },\n                            { name: \"Two Fish\", value: \"Two\" }\n                        ]\n                        return (\n                            <SpsColumnChooser\n                                unselectedColumns={unselectedCols}\n                                selectedColumns={selectedCols}\n                                onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                            />\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1;
+//# sourceMappingURL=SpsColumnChooser.examples.js.map

package/dist/out-tsc/column-chooser/SpsColumnChooser.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsColumnChooser.examples.js","sourceRoot":"","sources":["../../../src/column-chooser/SpsColumnChooser.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,wBAAwB,GAAoB;IACvD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,k8BAAA,+3BAkBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}