@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/pagination/SpsPageSelector.js.map

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

package/dist/out-tsc/pagination/SpsPagination.d.ts

@@ -0,0 +1,16 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+    onPageChange: PropTypes.Validator<(page: number, pageSize: number, indices: [number, number]) => void>;
+    page: PropTypes.Requireable<number>;
+    pageSize: PropTypes.Requireable<number>;
+    pageSizeOptions: PropTypes.Requireable<number[]>;
+    totalResults: PropTypes.Requireable<number>;
+    disabled: PropTypes.Requireable<boolean>;
+};
+export declare type SpsPaginationProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsPagination(props: SpsPaginationProps): JSX.Element;
+export {};

package/dist/out-tsc/pagination/SpsPagination.examples.d.ts

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

package/dist/out-tsc/pagination/SpsPagination.examples.js

@@ -0,0 +1,78 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import { code } from '@spscommerce/utils';
+export var SpsPaginationExamples = {
+    general: {
+        label: 'General Usage',
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."),
+            React.createElement("p", null, "Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))); },
+    },
+    pagination: {
+        label: 'Standard Pagination Bar',
+        description: function (_a) {
+            var Link = _a.Link;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("p", null, "The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."),
+                React.createElement("ul", null,
+                    React.createElement("li", null,
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "sps-text-semibold" }, "Results-per-page Select"),
+                            ' ',
+                            "(left): allows the user to adjust the number of records being displayed per page.*")),
+                    React.createElement("li", null,
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "sps-text-semibold" }, "Viewing details"),
+                            " (middle): describes which results are being displayed on the current page.")),
+                    React.createElement("li", null,
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "sps-text-semibold" }, "Page Navigator"),
+                            " (right): allows the user to navigate between pages of results"))),
+                React.createElement("i", null, "*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."),
+                React.createElement("br", null),
+                React.createElement("p", { className: "mt-2" },
+                    "To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the",
+                    ' ',
+                    React.createElement(Link, { to: "/style-and-layout/page-types" }, "Page Types"),
+                    " page.")));
+        },
+        examples: {
+            basic: {
+                description: function () { return React.createElement("h4", null, "Building the Standard Pagination Bar"); },
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        const [page, setPage] = React.useState(2);\n                        const [pageSize, setPageSize] = React.useState(25);\n\n                        function handlePageChange(newPage, newPageSize) {\n                          console.log(\"change\", newPage, newPageSize);\n                          setPage(newPage);\n                          setPageSize(newPageSize);\n                        }\n\n                        return (\n                          <React.Fragment>\n                            <SpsPagination id=\"basic\"\n                              totalResults={123}\n                              page={page}\n                              pageSize={pageSize}\n                              onPageChange={handlePageChange}\n                            />\n                            <span className=\"mr-2\">page: {page}</span>\n                            <span>pageSize: {pageSize}</span>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const [page, setPage] = React.useState(2);\n                        const [pageSize, setPageSize] = React.useState(25);\n\n                        function handlePageChange(newPage, newPageSize) {\n                          console.log(\"change\", newPage, newPageSize);\n                          setPage(newPage);\n                          setPageSize(newPageSize);\n                        }\n\n                        return (\n                          <React.Fragment>\n                            <SpsPagination id=\"basic\"\n                              totalResults={123}\n                              page={page}\n                              pageSize={pageSize}\n                              onPageChange={handlePageChange}\n                            />\n                            <span className=\"mr-2\">page: {page}</span>\n                            <span>pageSize: {pageSize}</span>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            disabled: {
+                description: 'Disabled state',
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <SpsPagination id=\"basic\"\n                                totalResults={123}\n                                page={2}\n                                pageSize={25}\n                                onPageChange={() => {}}\n                                disabled\n                            />\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <SpsPagination id=\"basic\"\n                                totalResults={123}\n                                page={2}\n                                pageSize={25}\n                                onPageChange={() => {}}\n                                disabled\n                            />\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    pageSelector: {
+        label: 'Page Navigator',
+        description: function (_a) {
+            var Link = _a.Link;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("p", null, "When navigating through a series of paginated results inside of a container such as a sidebar, a miniature version of the pagination bar can be used. This version utilizes only the page navigation component. Use Mini Pagination inside of a Card Header that also includes a title describing the content contained in the card below."),
+                React.createElement("p", null,
+                    "To see an example of the Page Navigator in context within a Card Header, view the General Content section on the",
+                    ' ',
+                    React.createElement(Link, { to: "/style-and-layout/page-types" }, "Page Types"),
+                    " page.")));
+        },
+        examples: {
+            basic: {
+                description: function () { return React.createElement("h4", null, "Building the Page Navigator"); },
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const pageChanged = val => {\n                          console.log(val);\n                        };\n                        return <SpsPageSelector numPages={25} onPageChange={pageChanged} />;\n                    }\n                "], ["\n                    function Component() {\n                        const pageChanged = val => {\n                          console.log(val);\n                        };\n                        return <SpsPageSelector numPages={25} onPageChange={pageChanged} />;\n                    }\n                "]))),
+            },
+            disabled: {
+                description: 'Disabled state',
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        return <SpsPageSelector numPages={25} onPageChange={() => {}} disabled />;\n                    }\n                "], ["\n                    function Component() {\n                        return <SpsPageSelector numPages={25} onPageChange={() => {}} disabled />;\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=SpsPagination.examples.js.map

package/dist/out-tsc/pagination/SpsPagination.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsPagination.examples.js","sourceRoot":"","sources":["../../../src/pagination/SpsPagination.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,qBAAqB,GAAoB;IAClD,OAAO,EAAE;QACL,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,cAAM,OAAA,CACf;YACI,qMAII;YACJ,kIAGI,CACL,CACN,EAZkB,CAYlB;KACJ;IACD,UAAU,EAAE;QACR,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,UAAC,EAAQ;gBAAN,IAAI,UAAA;YAAO,OAAA,CACvB;gBACI,wNAII;gBACJ;oBACI;wBACI;4BACI,8BAAM,SAAS,EAAC,mBAAmB,8BAA+B;4BAAC,GAAG;iHAGtE,CACH;oBACL;wBACI;4BACI,8BAAM,SAAS,EAAC,mBAAmB,sBAAuB;0GAE1D,CACH;oBACL;wBACI;4BACI,8BAAM,SAAS,EAAC,mBAAmB,qBAAsB;6FAEzD,CACH,CACJ;gBACL,gLAGI;gBACJ,+BAAM;gBACN,2BAAG,SAAS,EAAC,MAAM;;oBAEgB,GAAG;oBAClC,oBAAC,IAAI,IAAC,EAAE,EAAC,8BAA8B,iBAAkB;6BACzD,CACL,CACN;QAvC0B,CAuC1B;QACD,QAAQ,EAAE;YACN,KAAK,EAAE;gBACH,WAAW,EAAE,cAAM,OAAA,uEAA6C,EAA7C,CAA6C;gBAChE,KAAK,EAAE,IAAI,yoCAAA,skCAwBV,IAAA;aACJ;YACD,QAAQ,EAAE;gBACN,WAAW,EAAE,gBAAgB;gBAC7B,KAAK,EAAE,IAAI,iiBAAA,8dAYV,IAAA;aACJ;SACJ;KACJ;IACD,YAAY,EAAE;QACV,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,UAAC,EAAQ;gBAAN,IAAI,UAAA;YAAO,OAAA,CACvB;gBACI,4WAMI;gBACJ;;oBAEuC,GAAG;oBACtC,oBAAC,IAAI,IAAC,EAAE,EAAC,8BAA8B,iBAAkB;6BACzD,CACL,CACN;QAf0B,CAe1B;QACD,QAAQ,EAAE;YACN,KAAK,EAAE;gBACH,WAAW,EAAE,cAAM,OAAA,8DAAoC,EAApC,CAAoC;gBACvD,KAAK,EAAE,IAAI,uXAAA,oTAOV,IAAA;aACJ;YACD,QAAQ,EAAE;gBACN,WAAW,EAAE,gBAAgB;gBAC7B,KAAK,EAAE,IAAI,8PAAA,2LAIV,IAAA;aACJ;SACJ;KACJ;CACJ,CAAC"}

package/dist/out-tsc/pagination/SpsPagination.js

@@ -0,0 +1,138 @@
+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 { DEFAULT_PAGE_SIZE_OPTIONS } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { SpsSelect } from "../select/SpsSelect";
+import { usePatchReducer } from "../utils/usePatchReducer";
+import { SpsPageSelector } from "./SpsPageSelector";
+var propsDoc = {
+    page: "number",
+    pageSize: "number",
+    pageSizeOptions: "Array<number>",
+    totalResults: "number",
+    onPageChange: "(page: number, pageSize: number, indices: [number, number]) => void",
+    disabled: "boolean",
+};
+var propTypes = __assign({ onPageChange: PropTypes.fun()
+        .isRequired, page: PropTypes.number, pageSize: PropTypes.number, pageSizeOptions: PropTypes.arrayOf(PropTypes.number), totalResults: PropTypes.number, disabled: PropTypes.bool }, PropTypes.spsGlobalPropTypes);
+export function SpsPagination(props) {
+    var className = props.className, onPageChange = props.onPageChange, _a = props.page, pageProp = _a === void 0 ? 1 : _a, _b = props.pageSizeOptions, pageSizeOptions = _b === void 0 ? DEFAULT_PAGE_SIZE_OPTIONS : _b, _c = props.pageSize, pageSizeProp = _c === void 0 ? pageSizeOptions[0] : _c, testId = props["data-testid"], totalResults = props.totalResults, unsafelyReplaceClassName = props.unsafelyReplaceClassName, _d = props.disabled, disabled = _d === void 0 ? false : _d, rest = __rest(props, ["className", "onPageChange", "page", "pageSizeOptions", "pageSize", "data-testid", "totalResults", "unsafelyReplaceClassName", "disabled"]);
+    var _e = __read(usePatchReducer({
+        page: pageProp,
+        pageSize: pageSizeProp,
+        numPages: 0,
+        indices: [0, 0],
+    }), 2), state = _e[0], patchState = _e[1];
+    function numPages(pageSize) {
+        if (pageSize === void 0) { pageSize = state.pageSize; }
+        return Math.ceil(totalResults / pageSize);
+    }
+    function indices(page, pageSize) {
+        if (page === void 0) { page = state.page; }
+        if (pageSize === void 0) { pageSize = state.pageSize; }
+        var numPgs = numPages();
+        var resultsVisibleIfThereArePages = page === numPgs
+            ? totalResults % pageSize || pageSize
+            : pageSize;
+        var resultsVisible = numPgs === 0 ? 0 : resultsVisibleIfThereArePages;
+        var start = (page - 1) * pageSize;
+        return numPgs === 0 ? [0, 0] : [start + 1, start + resultsVisible];
+    }
+    function setPage(newPage) {
+        var newState = {
+            page: newPage,
+            indices: indices(newPage),
+        };
+        patchState(newState);
+        return newState;
+    }
+    function setPageSize(newPageSize, newPage) {
+        var newState = {
+            page: newPage,
+            pageSize: newPageSize,
+            numPages: numPages(newPageSize),
+            indices: indices(newPage, newPageSize),
+        };
+        patchState(newState);
+        return newState;
+    }
+    React.useEffect(function () {
+        if (pageProp !== state.page) {
+            setPage(pageProp);
+        }
+    }, [pageProp]);
+    React.useEffect(function () {
+        if (pageSizeProp !== state.pageSize) {
+            setPageSize(pageSizeProp, pageProp !== state.page ? pageProp : state.page);
+        }
+    }, [pageSizeProp]);
+    React.useEffect(function () {
+        patchState({
+            numPages: numPages(),
+            indices: indices(),
+        });
+    }, [totalResults]);
+    function totalResultsString() {
+        return typeof totalResults === "number" ? totalResults : "many";
+    }
+    function handlePageSizeChange(event) {
+        var newState = setPageSize(event.target.value, 1);
+        onPageChange(newState.page, newState.pageSize, newState.indices);
+    }
+    function handlePageChange(newPage) {
+        var newState = setPage(newPage);
+        onPageChange(newState.page, state.pageSize, newState.indices);
+    }
+    var classes = clsx(unsafelyReplaceClassName || "sps-pagination", className);
+    return (React.createElement("div", __assign({ className: classes, "data-testid": testId }, rest),
+        React.createElement("div", { "data-testid": testId + "__size-selector", className: "sps-page-size-selector" },
+            "View",
+            React.createElement(SpsSelect, { options: pageSizeOptions, onChange: handlePageSizeChange, notClearable: true, autoFixWidth: true, value: state.pageSize, className: "ml-1 mr-1", disabled: disabled }),
+            "Per Page"),
+        React.createElement("div", { className: "sps-pagination__details" }, "Viewing " + state.indices[0] + " - " + state.indices[1] + " of " + totalResultsString()),
+        React.createElement(SpsPageSelector, { numPages: state.numPages, page: state.page, onPageChange: handlePageChange, disabled: disabled })));
+}
+Object.assign(SpsPagination, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsPagination",
+});
+//# sourceMappingURL=SpsPagination.js.map

package/dist/out-tsc/pagination/SpsPagination.js.map

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

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

@@ -0,0 +1,3 @@
+export * from "./SpsPagination";
+export * from "./SpsPageSelector";
+export * from "./SpsPagination.examples";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC"}

package/dist/out-tsc/product-bar/SpsProductBar.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    activeTab: PropTypes.Requireable<string>;
+    fullWidth: PropTypes.Requireable<boolean>;
+    onTabChange: PropTypes.Requireable<(newTab: string) => void>;
+    onProductNameClick: PropTypes.Requireable<React.MouseEventHandler<Element>>;
+    productLogoSrc: PropTypes.Requireable<string>;
+    productName: PropTypes.Validator<string>;
+    productNameHref: PropTypes.Requireable<string>;
+    tabs: PropTypes.Requireable<string[]>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsProductBarProps = PropTypes.InferTS<typeof propTypes, HTMLElement>;
+export declare function SpsProductBar(props: SpsProductBarProps): JSX.Element;
+export {};

package/dist/out-tsc/product-bar/SpsProductBar.examples.d.ts

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

package/dist/out-tsc/product-bar/SpsProductBar.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 SpsProductBarExamples = {
+    basic: {
+        label: "Basic",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>Product navigation bar</p>\n        "], ["\n            <p>Product navigation bar</p>\n        "]))),
+        examples: {
+            basic: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    action: {
+        label: "Action",
+        examples: {
+            basic: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                onProductNameClick={() => console.log(\"product name clicked\")}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                onProductNameClick={() => console.log(\"product name clicked\")}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    link: {
+        label: "Link",
+        examples: {
+            basic: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                productNameHref=\"https://www.google.com\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const navTabs = [\"Foo\", \"Bar\", \"Baz\"];\n                        function handleTabChange(newTab) {\n                            alert(newTab);\n                        }\n\n                        return (\n                            <SpsProductBar productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                productNameHref=\"https://www.google.com\"\n                                tabs={navTabs}\n                                activeTab=\"Bar\"\n                                onTabChange={handleTabChange}\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            ><SpsButton>do the thing</SpsButton></SpsProductBar>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    customTabs: {
+        label: "Custom Tabs",
+        examples: {
+            basic: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const [activeTab, setActiveTab] = React.useState(\"Bar\");\n\n                        return (\n                            <SpsProductBar\n                                productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            >\n                                <SpsProductBarTab\n                                    active={activeTab === \"Foo\"}\n                                    onClick={() => {\n                                        setActiveTab(\"Foo\");\n                                        console.log(\"Foo!\");\n                                    }}\n                                >\n                                    Foo\n                                </SpsProductBarTab>\n                                <SpsProductBarTab\n                                    active={activeTab === \"Bar\"}\n                                    onClick={() => {\n                                        setActiveTab(\"Bar\");\n                                        console.log(\"Bar!\");\n                                    }}\n                                >\n                                    Bar\n                                </SpsProductBarTab>\n                                <SpsProductBarTab\n                                    active={activeTab === \"Baz\"}\n                                    target=\"_blank\"\n                                    href=\"https://www.google.com\"\n                                    onClick={() => {\n                                        setActiveTab(\"Baz\");\n                                    }}\n                                >\n                                    Baz\n                                </SpsProductBarTab>\n                                <SpsButton>do the thing</SpsButton>\n                            </SpsProductBar>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const [activeTab, setActiveTab] = React.useState(\"Bar\");\n\n                        return (\n                            <SpsProductBar\n                                productName=\"My Product\"\n                                productLogoSrc=\"https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg\"\n                                fullWidth\n                                style={{ position: \"relative\", zIndex: \"auto\" }} // display this example in its place instead of at the top\n                            >\n                                <SpsProductBarTab\n                                    active={activeTab === \"Foo\"}\n                                    onClick={() => {\n                                        setActiveTab(\"Foo\");\n                                        console.log(\"Foo!\");\n                                    }}\n                                >\n                                    Foo\n                                </SpsProductBarTab>\n                                <SpsProductBarTab\n                                    active={activeTab === \"Bar\"}\n                                    onClick={() => {\n                                        setActiveTab(\"Bar\");\n                                        console.log(\"Bar!\");\n                                    }}\n                                >\n                                    Bar\n                                </SpsProductBarTab>\n                                <SpsProductBarTab\n                                    active={activeTab === \"Baz\"}\n                                    target=\"_blank\"\n                                    href=\"https://www.google.com\"\n                                    onClick={() => {\n                                        setActiveTab(\"Baz\");\n                                    }}\n                                >\n                                    Baz\n                                </SpsProductBarTab>\n                                <SpsButton>do the thing</SpsButton>\n                            </SpsProductBar>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=SpsProductBar.examples.js.map

package/dist/out-tsc/product-bar/SpsProductBar.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsProductBar.examples.js","sourceRoot":"","sources":["../../../src/product-bar/SpsProductBar.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,qBAAqB,GAAoB;IACpD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,IAAI,0HAAA,uDAEZ,IAAA;QACL,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,6hCAAA,09BAkBF,IAAA;aACV;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,+nCAAA,4jCAmBF,IAAA;aACV;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,ymCAAA,siCAmBF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,oyEAAA,iuEA2CF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/product-bar/SpsProductBar.js

@@ -0,0 +1,90 @@
+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 { selectChildren } from "../utils/selectChildren";
+import { PortalContext } from "../utils/usePortal";
+import { SpsProductBarTab } from "./SpsProductBarTab";
+var propsDoc = {
+    activeTab: "string",
+    fullWidth: "boolean",
+    onTabChange: "(newTab: string) => void",
+    onProductNameClick: "React.MouseEventHandler",
+    productLogoSrc: "string",
+    productName: { type: "string", required: true },
+    productNameHref: "string",
+    tabs: "Array<string>",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { activeTab: PropTypes.string, fullWidth: PropTypes.bool, onTabChange: PropTypes.fun(), onProductNameClick: PropTypes.fun(), productLogoSrc: PropTypes.string, productName: PropTypes.string.isRequired, productNameHref: PropTypes.string, tabs: PropTypes.arrayOf(PropTypes.string) });
+export function SpsProductBar(props) {
+    var activeTabInit = props.activeTab, children = props.children, className = props.className, fullWidth = props.fullWidth, onProductNameClick = props.onProductNameClick, onTabChange = props.onTabChange, productLogoSrc = props.productLogoSrc, productName = props.productName, productNameHref = props.productNameHref, _a = props.tabs, tabs = _a === void 0 ? [] : _a, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["activeTab", "children", "className", "fullWidth", "onProductNameClick", "onTabChange", "productLogoSrc", "productName", "productNameHref", "tabs", "unsafelyReplaceClassName"]);
+    var rootElement = React.useRef();
+    var _b = __read(selectChildren(children, [{ type: SpsProductBarTab }]), 2), tabElement = _b[0], otherChildren = _b[1];
+    var _c = __read(React.useState(activeTabInit || tabs[0]), 2), activeTab = _c[0], setActiveTab = _c[1];
+    React.useEffect(function () {
+        setActiveTab(activeTabInit);
+    }, [activeTabInit]);
+    function handleTabClick(tab) {
+        setActiveTab(tab);
+        if (onTabChange) {
+            onTabChange(tab);
+        }
+    }
+    var classes = clsx(unsafelyReplaceClassName || "sps-navbar-container", "z-stratum-bar", className);
+    return (React.createElement("div", __assign({ className: classes }, rest, { ref: rootElement }),
+        React.createElement("nav", { className: clsx("sps-navbar", "sps-navbar--expand-lg", fullWidth && "sps-navbar--full-width") },
+            React.createElement("a", { className: "sps-navbar__brand", href: productNameHref, onClick: onProductNameClick },
+                productLogoSrc && (React.createElement("img", { className: "sps-navbar__brand-logo", src: productLogoSrc, "aria-hidden": "true", alt: productName + " Logo" })),
+                React.createElement("span", { className: "sps-navbar__brand-name" }, productName)),
+            React.createElement("span", { className: "sps-vertical-rule" }),
+            React.createElement("div", { className: "sps-navbar__nav" },
+                tabs.map(function (tab) { return (React.createElement("a", { className: clsx("sps-nav__item", "sps-nav__link", tab === activeTab && "active"), key: tab, onClick: function () { return handleTabClick(tab); } },
+                    React.createElement("span", null, tab),
+                    tab === activeTab && React.createElement("span", { className: "sr-only" }, "(current)"))); }),
+                tabElement),
+            React.createElement("div", { className: "sps-navbar__content" },
+                React.createElement(PortalContext.Provider, { value: { parentElementRef: rootElement, fixed: true } }, otherChildren)))));
+}
+Object.assign(SpsProductBar, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsProductBar",
+});
+//# sourceMappingURL=SpsProductBar.js.map

package/dist/out-tsc/product-bar/SpsProductBar.js.map

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

package/dist/out-tsc/product-bar/SpsProductBarTab.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export declare type SpsProductBarTagProps<T extends React.ElementType> = {
+    active: boolean;
+    as?: T;
+} & React.ComponentPropsWithoutRef<T>;
+export declare function SpsProductBarTab<T extends React.ElementType = "a">(props: SpsProductBarTagProps<T>): JSX.Element;

package/dist/out-tsc/product-bar/SpsProductBarTab.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import clsx from "clsx";
+import * as React from "react";
+var propsDoc = {
+    active: "boolean",
+    as: "React.ElementType",
+};
+export function SpsProductBarTab(props) {
+    var active = props.active, _a = props.as, RootElement = _a === void 0 ? "a" : _a, children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["active", "as", "children", "className", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-nav__item", "sps-nav__link", active && "active");
+    return (React.createElement(RootElement, __assign({ className: classes }, rest), children));
+}
+Object.assign(SpsProductBarTab, {
+    props: propsDoc,
+    displayName: "SpsProductBarTab",
+});
+//# sourceMappingURL=SpsProductBarTab.js.map

package/dist/out-tsc/product-bar/SpsProductBarTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsProductBarTab.js","sourceRoot":"","sources":["../../../src/product-bar/SpsProductBarTab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,IAAM,QAAQ,GAAG;IACf,MAAM,EAAE,SAAS;IACjB,EAAE,EAAE,mBAAmB;CACxB,CAAC;AAOF,MAAM,UAAU,gBAAgB,CAAoC,KAA+B;IAE/F,IAAA,MAAM,GAMJ,KAAK,OAND,EACN,KAKE,KAAK,GALc,EAAjB,WAAW,mBAAG,GAAG,KAAA,EACrB,QAAQ,GAIN,KAAK,SAJC,EACR,SAAS,GAGP,KAAK,UAHE,EACT,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EAPH,qEAOL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,eAAe,EAC3C,eAAe,EACf,MAAM,IAAI,QAAQ,CACnB,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,aAAC,SAAS,EAAE,OAAO,IAAM,IAAI,GACtC,QAAQ,CACG,CACf,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC9B,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,kBAAkB;CAChC,CAAC,CAAC"}

package/dist/out-tsc/product-bar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SpsProductBar";
+export * from "./SpsProductBarTab";
+export * from "./SpsProductBar.examples";

package/dist/out-tsc/product-bar/index.js

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

package/dist/out-tsc/product-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/product-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

package/dist/out-tsc/progress-bar/SpsProgressBar.d.ts

@@ -0,0 +1,15 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    percentComplete: PropTypes.Requireable<number>;
+    title: PropTypes.Requireable<string>;
+    detail: PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    onClose: PropTypes.Requireable<() => void>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsProgressBarProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsProgressBar(props: SpsProgressBarProps): JSX.Element;
+export {};

package/dist/out-tsc/progress-bar/SpsProgressBar.examples.d.ts

@@ -0,0 +1,27 @@
+export declare const SpsProgressBarExamples: {
+    general: {
+        label: string;
+        customSection: () => JSX.Element;
+    };
+    standard: {
+        label: string;
+        description: () => JSX.Element;
+        examples: {
+            standard: {
+                label: string;
+                description: () => JSX.Element;
+                react: string;
+            };
+            completed: {
+                label: string;
+                description: () => JSX.Element;
+                react: string;
+            };
+            disabled: {
+                label: string;
+                description: () => JSX.Element;
+                react: string;
+            };
+        };
+    };
+};