@spscommerce/ds-react 5.5.0-ie.2 → 5.8.0

package/dist/out-tsc/side-nav/SpsSideNav.examples.js

@@ -1,76 +0,0 @@
-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 SpsSideNavExamples = {
-    usage: {
-        label: "Usage",
-        customSection: function () { return (React.createElement(React.Fragment, null,
-            React.createElement("div", null,
-                React.createElement("span", { className: "sps-body-14 mb-2" }, "Use the Side Navigation if:"),
-                React.createElement("ul", { className: "mt-2" },
-                    React.createElement("li", { className: "mb-1" }, "The navigation benefits from subsections or nested structures"),
-                    React.createElement("li", { className: "mb-1" }, "There are too many items for Tabbed Navigation"),
-                    React.createElement("li", null, "The navigation items have long names"))),
-            React.createElement("div", null,
-                React.createElement("span", { className: "sps-body-14 mb-2" }, "Avoid using the Side Navigation if:"),
-                React.createElement("ul", { className: "mt-2" },
-                    React.createElement("li", { className: "mb-1" }, "Tabbed Navigation is sufficient"),
-                    React.createElement("li", { className: "mb-1" }, "The full width of the page is required to sufficiently display content"))))); },
-    },
-    filter: {
-        label: "Filter",
-        description: "Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",
-        examples: {
-            simple: {
-                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                      function onChange(selection) {\n                        console.log(selection);\n                      }\n\n                      const items = [\n                          {\n                            sectionTitle: \"\",\n                            navItems: [\n                              {\n                                name: \"A Multiple Line Navigation Item That Has to Wrap Because it\u2019s so Long\",\n                              },\n                              {\n                                name: \"Navigation Item 2\",\n                              },\n                              {\n                                name: \"Navigation Item 3\",\n                              },\n                              {\n                                name: \"Navigation Item 4\",\n                              },\n                              {\n                                name: \"Navigation Item 5\",\n                              },\n                              {\n                                name: \"Navigation Item 6\",\n                              },\n                              {\n                                name: \"Navigation Item 7\",\n                              },\n                              {\n                                name: \"Navigation Item 8\",\n                              },\n                              {\n                                name: \"Navigation Item 9\",\n                              },\n                              {\n                                name: \"Navigation Item 10\",\n                              },\n                              {\n                                name: \"Navigation Item 11\",\n                              },\n                              {\n                                name: \"Navigation Item 12\",\n                              },\n                              {\n                                name: \"Navigation Item 13\",\n                              },\n                            ],\n                          }\n                      ];\n\n                      return (\n                        <div className=\"sfg-row\">\n                          <div className=\"sfg-col-4\">\n                            <SpsSideNav\n                                title=\"Title\"\n                                titleIcon={SpsIcon.STATUS_OK}\n                                navOptions={items}\n                                activeNavItem=\"Navigation Item 2\"\n                                onNavChange={onChange}\n                                filterable={true}\n                                filterInputPlaceholder=\"Filter\"\n                            />\n                          </div>\n                        </div>\n                      );\n                  }\n                "], ["\n                    function DemoComponent() {\n                      function onChange(selection) {\n                        console.log(selection);\n                      }\n\n                      const items = [\n                          {\n                            sectionTitle: \"\",\n                            navItems: [\n                              {\n                                name: \"A Multiple Line Navigation Item That Has to Wrap Because it\u2019s so Long\",\n                              },\n                              {\n                                name: \"Navigation Item 2\",\n                              },\n                              {\n                                name: \"Navigation Item 3\",\n                              },\n                              {\n                                name: \"Navigation Item 4\",\n                              },\n                              {\n                                name: \"Navigation Item 5\",\n                              },\n                              {\n                                name: \"Navigation Item 6\",\n                              },\n                              {\n                                name: \"Navigation Item 7\",\n                              },\n                              {\n                                name: \"Navigation Item 8\",\n                              },\n                              {\n                                name: \"Navigation Item 9\",\n                              },\n                              {\n                                name: \"Navigation Item 10\",\n                              },\n                              {\n                                name: \"Navigation Item 11\",\n                              },\n                              {\n                                name: \"Navigation Item 12\",\n                              },\n                              {\n                                name: \"Navigation Item 13\",\n                              },\n                            ],\n                          }\n                      ];\n\n                      return (\n                        <div className=\"sfg-row\">\n                          <div className=\"sfg-col-4\">\n                            <SpsSideNav\n                                title=\"Title\"\n                                titleIcon={SpsIcon.STATUS_OK}\n                                navOptions={items}\n                                activeNavItem=\"Navigation Item 2\"\n                                onNavChange={onChange}\n                                filterable={true}\n                                filterInputPlaceholder=\"Filter\"\n                            />\n                          </div>\n                        </div>\n                      );\n                  }\n                "]))),
-            },
-        },
-    },
-    icons: {
-        label: "Icons",
-        description: function (_a) {
-            var Link = _a.Link;
-            return (React.createElement("div", null,
-                React.createElement("span", { className: "sps-body-14" }, "Use Icons to further illustrate what the navigation item contains. If one navigation item has an Icon, all of the need to have an Icon. Do not use an Icon more than once in a single Side Navigation. Example: A bell icon to represent a Notifications navigation item."),
-                React.createElement("div", { className: "mt-2" },
-                    React.createElement(Link, { to: "/style-and-layout/icons" }, "View All Icons"))));
-        },
-        examples: {
-            simple: {
-                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                        {\n                          sectionTitle: \"\",\n                          navItems: [\n                            {\n                              name: \"Navigation Item 1\",\n                              icon: SpsIcon.CHART_LINE\n                            },\n                            {\n                              name: \"Navigation Item 2\",\n                              icon: SpsIcon.ARCHIVE\n                            },\n                            {\n                              name: \"Navigation Item 3\",\n                              icon: SpsIcon.FOLDER_OPEN\n                            },\n                            {\n                              name: \"Navigation Item 4\",\n                              icon: SpsIcon.BELL\n                            },\n                            {\n                              name: \"Navigation Item 5\",\n                              icon: SpsIcon.BOOK\n                            },\n                            {\n                              name: \"Navigation Item 6\",\n                              icon: SpsIcon.BARCODE\n                            },\n                          ],\n                        }\n                    ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "], ["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                        {\n                          sectionTitle: \"\",\n                          navItems: [\n                            {\n                              name: \"Navigation Item 1\",\n                              icon: SpsIcon.CHART_LINE\n                            },\n                            {\n                              name: \"Navigation Item 2\",\n                              icon: SpsIcon.ARCHIVE\n                            },\n                            {\n                              name: \"Navigation Item 3\",\n                              icon: SpsIcon.FOLDER_OPEN\n                            },\n                            {\n                              name: \"Navigation Item 4\",\n                              icon: SpsIcon.BELL\n                            },\n                            {\n                              name: \"Navigation Item 5\",\n                              icon: SpsIcon.BOOK\n                            },\n                            {\n                              name: \"Navigation Item 6\",\n                              icon: SpsIcon.BARCODE\n                            },\n                          ],\n                        }\n                    ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "]))),
-            },
-        },
-    },
-    nesting: {
-        label: "Nesting",
-        description: "Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",
-        examples: {
-            simple: {
-                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                        {\n                          sectionTitle: \"\",\n                          navItems: [\n                            {\n                              name: \"Parent 1\",\n                              subNavItems: [\n                                {\n                                  name: \"Child 1\",\n                                  subNavItems: [\n                                    {\n                                      name: \"Grandchild 1\",\n                                    },\n                                    {\n                                      name: \"Grandchild 2\",\n                                    }\n                                  ]\n                                },\n                                {\n                                  name: \"Child 2\",\n                                  subNavItems: [\n                                    {\n                                      name: \"Grandchild 3\",\n                                    },\n                                    {\n                                      name: \"Grandchild 4\",\n                                    }\n                                  ]\n                                }\n                              ]\n                            },\n                            {\n                              name: \"Parent 2\",\n                              subNavItems: [\n                                {\n                                  name: \"Child 3\"\n                                },\n                                {\n                                  name: \"Child 4\"\n                                }\n                              ]\n                            },\n                          ],\n                        }\n                    ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                              activeNavItem=\"Grandchild 1\"\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "], ["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                        {\n                          sectionTitle: \"\",\n                          navItems: [\n                            {\n                              name: \"Parent 1\",\n                              subNavItems: [\n                                {\n                                  name: \"Child 1\",\n                                  subNavItems: [\n                                    {\n                                      name: \"Grandchild 1\",\n                                    },\n                                    {\n                                      name: \"Grandchild 2\",\n                                    }\n                                  ]\n                                },\n                                {\n                                  name: \"Child 2\",\n                                  subNavItems: [\n                                    {\n                                      name: \"Grandchild 3\",\n                                    },\n                                    {\n                                      name: \"Grandchild 4\",\n                                    }\n                                  ]\n                                }\n                              ]\n                            },\n                            {\n                              name: \"Parent 2\",\n                              subNavItems: [\n                                {\n                                  name: \"Child 3\"\n                                },\n                                {\n                                  name: \"Child 4\"\n                                }\n                              ]\n                            },\n                          ],\n                        }\n                    ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                              activeNavItem=\"Grandchild 1\"\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "]))),
-            },
-        },
-    },
-    sections: {
-        label: "Sections",
-        description: "Use Sections to break up content into different categories. Sections utilize Subtitles.",
-        examples: {
-            simple: {
-                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                        {\n                          sectionTitle: \"Good Section\",\n                          navItems: [\n                            {\n                              name: \"Parent 1\",\n                              subNavItems: [\n                                {\n                                  name: \"Child\",\n                                }\n                              ]\n                            },\n                            {\n                              name: \"Parent 2\",\n                            },\n                            {\n                              name: \"Parent 3\",\n                              subNavItems: [\n                                {\n                                  name: \"Child 1\",\n                                  subNavItems: [\n                                    {\n                                      name: \"Grandchild 1\",\n                                    }\n                                  ]\n                                }\n                              ]\n                            },\n                          ],\n                        },\n                        {\n                          sectionTitle: \"Great Section\",\n                          navItems: [\n                            {\n                              name: \"Parent 4\",\n                            },\n                            {\n                              name: \"Parent 5\",\n                            },\n                            {\n                              name: \"Parent 6\",\n                            },\n                          ],\n                        }\n                    ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Test Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                              activeNavItem=\"Grandchild 1\"\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "], ["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                        {\n                          sectionTitle: \"Good Section\",\n                          navItems: [\n                            {\n                              name: \"Parent 1\",\n                              subNavItems: [\n                                {\n                                  name: \"Child\",\n                                }\n                              ]\n                            },\n                            {\n                              name: \"Parent 2\",\n                            },\n                            {\n                              name: \"Parent 3\",\n                              subNavItems: [\n                                {\n                                  name: \"Child 1\",\n                                  subNavItems: [\n                                    {\n                                      name: \"Grandchild 1\",\n                                    }\n                                  ]\n                                }\n                              ]\n                            },\n                          ],\n                        },\n                        {\n                          sectionTitle: \"Great Section\",\n                          navItems: [\n                            {\n                              name: \"Parent 4\",\n                            },\n                            {\n                              name: \"Parent 5\",\n                            },\n                            {\n                              name: \"Parent 6\",\n                            },\n                          ],\n                        }\n                    ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Test Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                              activeNavItem=\"Grandchild 1\"\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "]))),
-            },
-        },
-    },
-    tags: {
-        label: "Tags",
-        description: "Use Tags to indicate a number of additional detail related to the navigation item.",
-        examples: {
-            simple: {
-                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                      {\n                        sectionTitle: \"\",\n                        navItems: [\n                          {\n                            name: \"Navigation Item 1\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Cool\",\n                          },\n                          {\n                            name: \"Navigation Item 2\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Good\",\n                          },\n                          {\n                            name: \"Navigation Item 3\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Fun\",\n                          },\n                          {\n                            name: \"Navigation Item 4\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Nice\",\n                          },\n                          {\n                            name: \"Navigation Item 5\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Grand\",\n                          },\n                          {\n                            name: \"Navigation Item 6\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Great\",\n                          },\n                        ],\n                      }\n                  ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                              activeNavItem=\"Navigation Item 1\"\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "], ["\n                  function DemoComponent() {\n                    function onChange(selection) {\n                      console.log(selection);\n                    }\n\n                    const items = [\n                      {\n                        sectionTitle: \"\",\n                        navItems: [\n                          {\n                            name: \"Navigation Item 1\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Cool\",\n                          },\n                          {\n                            name: \"Navigation Item 2\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Good\",\n                          },\n                          {\n                            name: \"Navigation Item 3\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Fun\",\n                          },\n                          {\n                            name: \"Navigation Item 4\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Nice\",\n                          },\n                          {\n                            name: \"Navigation Item 5\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Grand\",\n                          },\n                          {\n                            name: \"Navigation Item 6\",\n                            tag: TagKind.DEFAULT,\n                            tagContent: \"Great\",\n                          },\n                        ],\n                      }\n                  ];\n\n                    return (\n                      <div className=\"sfg-row\">\n                        <div className=\"sfg-col-4\">\n                          <SpsSideNav\n                              title=\"Title\"\n                              titleIcon={SpsIcon.STATUS_OK}\n                              navOptions={items}\n                              onNavChange={onChange}\n                              activeNavItem=\"Navigation Item 1\"\n                          />\n                        </div>\n                      </div>\n                    );\n                }\n              "]))),
-            },
-        },
-    },
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
-//# sourceMappingURL=SpsSideNav.examples.js.map

package/dist/out-tsc/side-nav/SpsSideNav.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpsSideNav.examples.js","sourceRoot":"","sources":["../../../src/side-nav/SpsSideNav.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,kBAAkB,GAAoB;IACjD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,cAAM,OAAA,CACnB;YACE;gBACE,8BAAM,SAAS,EAAC,kBAAkB,kCAAmC;gBACrE,4BAAI,SAAS,EAAC,MAAM;oBAClB,4BAAI,SAAS,EAAC,MAAM,oEAEf;oBACL,4BAAI,SAAS,EAAC,MAAM,qDAAoD;oBACxE,uEAA6C,CAC1C,CACD;YACN;gBACE,8BAAM,SAAS,EAAC,kBAAkB,0CAA2C;gBAC7E,4BAAI,SAAS,EAAC,MAAM;oBAClB,4BAAI,SAAS,EAAC,MAAM,sCAAqC;oBACzD,4BAAI,SAAS,EAAC,MAAM,6EAEf,CACF,CACD,CACL,CACJ,EAtBoB,CAsBpB;KACF;IAED,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,WAAW,EACH,yHAAyH;QACjI,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,y6FAAA,s2FAqEF,IAAA;aACV;SACF;KACF;IAED,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,UAAC,EAAQ;gBAAN,IAAI,UAAA;YAAO,OAAA,CACzB;gBACE,8BAAM,SAAS,EAAC,aAAa,gRAKtB;gBACP,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,IAAI,IAAC,EAAE,EAAC,yBAAyB,qBAAsB,CACpD,CACF,CACP;QAZ0B,CAY1B;QACD,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,mhEAAA,g9DAmDJ,IAAA;aACR;SACF;KACF;IAED,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,WAAW,EACH,uFAAuF;QAC/F,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,soFAAA,mkFAkEJ,IAAA;aACR;SACF;KACF;IAED,QAAQ,EAAE;QACR,KAAK,EAAE,UAAU;QACjB,WAAW,EACH,yFAAyF;QACjG,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,6hFAAA,09EAkEJ,IAAA;aACR;SACF;KACF;IAED,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,WAAW,EACH,oFAAoF;QAC5F,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,40EAAA,ywEA0DJ,IAAA;aACR;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/side-nav/SpsSideNav.js

@@ -1,124 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-/** TODO: Fix circular deps, update to follow our patterns, then remove eslint override */
-/* eslint-disable import/no-cycle */
-import * as React from "react";
-import { useRef, useState } from "react";
-import clsx from "clsx";
-import { SpsSideNavBranch } from "./SpsSideNavBranch";
-/**
- * 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 var findParentBranches = function (nav, activeTab) {
-    if (nav) {
-        return (nav.some(function (navItem) { return navItem.name === activeTab; })
-            || nav.some(function (navItem) { return findParentBranches(navItem.subNavItems, activeTab); }));
-    }
-    return false;
-};
-export var SpsSideNav = function (_a) {
-    var title = _a.title, titleIcon = _a.titleIcon, navOptions = _a.navOptions, onNavChange = _a.onNavChange, activeNavItem = _a.activeNavItem, tabs = _a.tabs, onTabChange = _a.onTabChange, initialActiveTab = _a.initialActiveTab, filterable = _a.filterable, filterInputPlaceholder = _a.filterInputPlaceholder;
-    var previousActiveNavItem = useRef(activeNavItem);
-    var _b = __read(useState(activeNavItem), 2), activeBranch = _b[0], setActiveBranch = _b[1];
-    var _c = __read(useState(initialActiveTab || (tabs && tabs[0])), 2), activeTab = _c[0], setActiveTab = _c[1];
-    var _d = __read(useState(""), 2), filterValue = _d[0], setFilterValue = _d[1];
-    /**
-     * Handler that sets selected branch as active
-     * @param branch string navigation branch to be marked as active
-     */
-    var handleNavAction = function (branch) {
-        setActiveBranch(branch);
-        if (onNavChange) {
-            onNavChange(branch);
-        }
-    };
-    /**
-     * Handler that sets selected tab as active
-     * @param tab string navigation branch to be marked as active
-     */
-    var handleTabAction = function (tab) {
-        setActiveTab(tab);
-        if (onTabChange) {
-            onTabChange(tab);
-        }
-    };
-    /**
-     * Helper to filter top level navigation based on nested child branches
-     * @param nav SideNavItems[] array of navigation branches to be checked
-     */
-    var filterChildBranches = function (nav) {
-        if (nav) {
-            return (nav.some(function (navItem) { return navItem.name.toLowerCase().includes(filterValue); })
-                || nav.some(function (navItem) { return filterChildBranches(navItem.subNavItems); }));
-        }
-        return false;
-    };
-    /**
-     * Filtered list of navigation options. If child of top level matches filter value,
-     * the top level is kept.
-     */
-    var filteredNavOptions = navOptions.map(function (option) { return ({
-        sectionTitle: option.sectionTitle,
-        navItems: option.navItems.filter(function (navItem) { return (navItem.name.toLowerCase().includes(filterValue)
-            || filterChildBranches(navItem.subNavItems)); }),
-    }); });
-    if (activeNavItem !== previousActiveNavItem.current) {
-        setActiveBranch(activeNavItem);
-        previousActiveNavItem.current = activeNavItem;
-    }
-    return (React.createElement("div", { className: "sps-side-nav sps-card" },
-        title && (React.createElement("div", { className: "sps-card__header", title: title },
-            React.createElement("div", { className: "sps-card__title" },
-                titleIcon && (React.createElement("i", { className: "sps-icon sps-icon-" + titleIcon })),
-                title))),
-        tabs && (React.createElement("nav", { className: "sps-nav sps-nav--tabs" }, tabs.map(function (tab) { return (React.createElement("span", { className: clsx("sps-nav__item", "sps-nav__link", tab === activeTab && "active"), "data-toggle": "tab", role: "tab", tabIndex: 0, key: tab, onClick: function () { return handleTabAction(tab); }, onKeyDown: function (event) {
-                if (event.key === "Enter"
-                    || event.key === " ") {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    handleTabAction(tab);
-                }
-            } },
-            React.createElement("span", null, tab))); }))),
-        React.createElement("div", { className: "sps-card__body" },
-            filterable && (React.createElement("section", { className: "sps-side-nav__section" },
-                React.createElement("div", { className: "sps-text-input" },
-                    React.createElement("div", { className: "sps-form-control" },
-                        React.createElement("i", { className: "sps-text-input__icon sps-icon sps-icon-filter" }),
-                        React.createElement("input", { type: "text", className: "sps-text-input__input", placeholder: filterInputPlaceholder, onChange: function (event) {
-                                setFilterValue(event.target.value);
-                            } }))))),
-            filteredNavOptions.map(function (section) { return (React.createElement("section", { className: "sps-side-nav__section", key: section.sectionTitle },
-                React.createElement("div", { className: "sps-side-nav__section-title", style: { fontWeight: 400 } }, section.sectionTitle),
-                section.navItems.map(function (item) { return (React.createElement(SpsSideNavBranch, { branch: __assign(__assign({}, item), { expanded: findParentBranches(item.subNavItems, activeNavItem) }), activeBranch: activeBranch, setActiveBranch: function (branchName) {
-                        handleNavAction(branchName);
-                    }, key: item.name })); }))); }))));
-};
-//# sourceMappingURL=SpsSideNav.js.map

package/dist/out-tsc/side-nav/SpsSideNav.js.map

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

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

@@ -1,9 +0,0 @@
-/** TODO: Fix circular deps, update to follow our patterns, then remove eslint override */
-import * as React from "react";
-import type { SideNavBranch } from "./SpsSideNav";
-export interface SpsSideNavBranchProps {
-    branch: SideNavBranch;
-    activeBranch: string;
-    setActiveBranch: (activeChildBranchName: string) => void;
-}
-export declare const SpsSideNavBranch: React.FC<SpsSideNavBranchProps>;

package/dist/out-tsc/side-nav/SpsSideNavBranch.js

@@ -1,65 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-/** TODO: Fix circular deps, update to follow our patterns, then remove eslint override */
-/* eslint-disable import/no-cycle */
-import * as React from "react";
-import clsx from "clsx";
-import { useState } from "react";
-import { findParentBranches } from "./SpsSideNav";
-export var SpsSideNavBranch = function (_a) {
-    var branch = _a.branch, setActiveBranch = _a.setActiveBranch, activeBranch = _a.activeBranch;
-    var _b = __read(useState(branch.expanded || false), 2), isBranchExpanded = _b[0], setIsBranchExpanded = _b[1];
-    return (React.createElement("ul", { className: clsx("sps-side-nav__branch", branch.name === activeBranch && "sps-side-nav__branch--active") },
-        React.createElement("li", { className: clsx("sps-side-nav__leaf", branch.name === activeBranch && "sps-side-nav__leaf--active") },
-            React.createElement("span", { className: "sps-side-nav__link", onClick: function () {
-                    setIsBranchExpanded(!isBranchExpanded);
-                    if (!branch.subNavItems) {
-                        setActiveBranch(branch.name);
-                    }
-                }, onKeyDown: function (event) {
-                    if (event.key === "Enter" || event.key === " ") {
-                        event.stopPropagation();
-                        event.preventDefault();
-                        setIsBranchExpanded(!isBranchExpanded);
-                        if (!branch.subNavItems) {
-                            setActiveBranch(branch.name);
-                        }
-                    }
-                }, role: "tab", tabIndex: 0 },
-                branch.subNavItems && (React.createElement("i", { className: clsx("sps-icon sps-side-nav__toggle", isBranchExpanded
-                        ? "sps-icon-chevron-down"
-                        : "sps-icon-chevron-right") })),
-                React.createElement("span", { className: "sps-side-nav__link-title" },
-                    branch.icon && React.createElement("i", { className: "sps-icon sps-icon-" + branch.icon + " mr-2" }),
-                    branch.name),
-                React.createElement("div", { className: "sps-side-nav__link-tag", style: { marginTop: "-2px" } }, branch.tag && (React.createElement("span", { className: "sps-tag sps-tag--" + branch.tag }, branch.tagContent)))),
-            branch.subNavItems
-                && isBranchExpanded
-                && branch.subNavItems.map(function (subNav) { return (React.createElement(SpsSideNavBranch, { branch: __assign(__assign({}, subNav), { expanded: findParentBranches(subNav.subNavItems, activeBranch) }), setActiveBranch: setActiveBranch, activeBranch: activeBranch, key: subNav.name })); }))));
-};
-//# sourceMappingURL=SpsSideNavBranch.js.map

package/dist/out-tsc/side-nav/SpsSideNavBranch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpsSideNavBranch.js","sourceRoot":"","sources":["../../../src/side-nav/SpsSideNavBranch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0FAA0F;AAC1F,oCAAoC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAQlD,MAAM,CAAC,IAAM,gBAAgB,GAAoC,UAAC,EAIjE;QAHC,MAAM,YAAA,EACN,eAAe,qBAAA,EACf,YAAY,kBAAA;IAEN,IAAA,KAAA,OAA0C,QAAQ,CACtD,MAAM,CAAC,QAAQ,IAAI,KAAK,CACzB,IAAA,EAFM,gBAAgB,QAAA,EAAE,mBAAmB,QAE3C,CAAC;IAEF,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CACb,sBAAsB,EACtB,MAAM,CAAC,IAAI,KAAK,YAAY,IAAI,8BAA8B,CAC/D;QAED,4BACE,SAAS,EAAE,IAAI,CACb,oBAAoB,EACpB,MAAM,CAAC,IAAI,KAAK,YAAY,IAAI,4BAA4B,CAC7D;YAED,8BACE,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE;oBACP,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;oBACvC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE;wBACvB,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;qBAC9B;gBACH,CAAC,EACD,SAAS,EAAE,UAAC,KAAK;oBACf,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;wBAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;wBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;wBACvC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE;4BACvB,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;yBAC9B;qBACF;gBACH,CAAC,EACD,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC;gBAEV,MAAM,CAAC,WAAW,IAAI,CACrB,2BACE,SAAS,EAAE,IAAI,CACb,+BAA+B,EAC/B,gBAAgB;wBACd,CAAC,CAAC,uBAAuB;wBACzB,CAAC,CAAC,wBAAwB,CAC7B,GACD,CACH;gBACD,8BAAM,SAAS,EAAC,0BAA0B;oBACvC,MAAM,CAAC,IAAI,IAAI,2BAAG,SAAS,EAAE,uBAAqB,MAAM,CAAC,IAAI,UAAO,GAAI;oBACxE,MAAM,CAAC,IAAI,CACP;gBACP,6BACE,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,IAE3B,MAAM,CAAC,GAAG,IAAI,CACb,8BACE,SAAS,EAAE,sBAAoB,MAAM,CAAC,GAAK,IAE1C,MAAM,CAAC,UAAU,CACb,CACR,CACG,CACD;YACN,MAAM,CAAC,WAAW;mBACJ,gBAAgB;mBAChB,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,MAAoB,IAAK,OAAA,CAClD,oBAAC,gBAAgB,IACf,MAAM,wBACD,MAAM,KACT,QAAQ,EAAE,kBAAkB,CAC1B,MAAM,CAAC,WAAW,EAClB,YAAY,CACb,KAEH,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,MAAM,CAAC,IAAI,GAChB,CACH,EAbmD,CAanD,CAAC,CACX,CACF,CACN,CAAC;AACJ,CAAC,CAAC"}

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

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

package/dist/out-tsc/side-nav/index.js

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

package/dist/out-tsc/side-nav/index.js.map

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

package/dist/out-tsc/slack-link/SpsSlackLink.d.ts

@@ -1,11 +0,0 @@
-import * as PropTypes from "../prop-types";
-declare const propTypes: {
-    channelId: PropTypes.Validator<string>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    className: PropTypes.Requireable<string>;
-    "data-testid": PropTypes.Requireable<string>;
-    unsafelyReplaceClassName: PropTypes.Requireable<string>;
-};
-export declare type SpsSlackLinkProps = PropTypes.InferTS<typeof propTypes, HTMLAnchorElement>;
-export declare function SpsSlackLink(props: SpsSlackLinkProps): JSX.Element;
-export {};

package/dist/out-tsc/slack-link/SpsSlackLink.examples.d.ts

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

package/dist/out-tsc/slack-link/SpsSlackLink.examples.js

@@ -1,16 +0,0 @@
-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 SpsSlackLinkExamples = {
-    basic: {
-        examples: {
-            basic: {
-                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\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={[\"Foo\", \"Bar\", \"Baz\"]}\n                                activeTab=\"Bar\"\n                                fullWidth\n                                style={{ position: \"relative\" }} // display this example in its place instead of at the top\n                            ><SpsSlackLink channelId=\"CELEGDK4Y\" /></SpsProductBar>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\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={[\"Foo\", \"Bar\", \"Baz\"]}\n                                activeTab=\"Bar\"\n                                fullWidth\n                                style={{ position: \"relative\" }} // display this example in its place instead of at the top\n                            ><SpsSlackLink channelId=\"CELEGDK4Y\" /></SpsProductBar>\n                        );\n                    }\n                "]))),
-            },
-        },
-    },
-};
-var templateObject_1;
-//# sourceMappingURL=SpsSlackLink.examples.js.map

package/dist/out-tsc/slack-link/SpsSlackLink.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpsSlackLink.examples.js","sourceRoot":"","sources":["../../../src/slack-link/SpsSlackLink.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,oBAAoB,GAAoB;IACnD,KAAK,EAAE;QACL,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,0xBAAA,utBAYF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/slack-link/SpsSlackLink.js

@@ -1,45 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import clsx from "clsx";
-import * as React from "react";
-import { SpsIcon } from "@spscommerce/ds-shared";
-import * as PropTypes from "../prop-types";
-import { I18nContext } from "../i18n";
-var propsDoc = {
-    channelId: { type: "string", required: true },
-};
-var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { channelId: PropTypes.string.isRequired });
-export function SpsSlackLink(props) {
-    var channelId = props.channelId, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["channelId", "className", "unsafelyReplaceClassName"]);
-    var t = React.useContext(I18nContext).t;
-    var classes = clsx(unsafelyReplaceClassName || "sps-slack-link", className);
-    return (React.createElement("a", __assign({ className: classes, target: "_blank", rel: "noreferrer", href: "https://spscommerce.slack.com/archives/" + channelId }, rest),
-        React.createElement("i", { className: "sps-icon sps-icon-" + SpsIcon.CONVERSATION, "aria-hidden": "true" }),
-        React.createElement("span", null, t("design-system:slackLink.label"))));
-}
-Object.assign(SpsSlackLink, {
-    props: propsDoc,
-    propTypes: propTypes,
-    displayName: "SpsSlackLink",
-});
-//# sourceMappingURL=SpsSlackLink.js.map

package/dist/out-tsc/slack-link/SpsSlackLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpsSlackLink.js","sourceRoot":"","sources":["../../../src/slack-link/SpsSlackLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,IAAM,QAAQ,GAAG;IACf,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC9C,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,GACvC,CAAC;AAIF,MAAM,UAAU,YAAY,CAAC,KAAwB;IAEjD,IAAA,SAAS,GAIP,KAAK,UAJE,EACT,SAAS,GAGP,KAAK,UAHE,EACT,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EALH,sDAKL,CADQ,CACC;IAEF,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,gBAAgB,EAC5C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oCACE,SAAS,EAAE,OAAO,EAClB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,IAAI,EAAE,4CAA0C,SAAW,IACvD,IAAI;QAER,2BAAG,SAAS,EAAE,uBAAqB,OAAO,CAAC,YAAc,iBAAc,MAAM,GAAG;QAChF,kCAAO,CAAC,CAAC,+BAA+B,CAAC,CAAQ,CAC/C,CACL,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAC1B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,cAAc;CAC5B,CAAC,CAAC"}

package/dist/out-tsc/slack-link/index.d.ts

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

package/dist/out-tsc/slack-link/index.js

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

package/dist/out-tsc/slack-link/index.js.map

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

package/dist/out-tsc/sorting-header/SpsSortingHeader.d.ts

@@ -1,13 +0,0 @@
-import type { SortChangeHandler, SortedColumn } from "@spscommerce/ds-shared";
-import * as PropTypes from "../prop-types";
-declare const propTypes: {
-    sort: PropTypes.Requireable<SortedColumn[]>;
-    onSortChange: PropTypes.Requireable<SortChangeHandler>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    className: PropTypes.Requireable<string>;
-    "data-testid": PropTypes.Requireable<string>;
-    unsafelyReplaceClassName: PropTypes.Requireable<string>;
-};
-export declare type SpsSortingHeaderProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
-export declare function SpsSortingHeader({ className, "data-testid": testId, unsafelyReplaceClassName, sort, onSortChange, children, ...rest }: SpsSortingHeaderProps): JSX.Element;
-export {};

package/dist/out-tsc/sorting-header/SpsSortingHeader.examples.d.ts

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

package/dist/out-tsc/sorting-header/SpsSortingHeader.examples.js

@@ -1,17 +0,0 @@
-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 SpsSortingHeaderExamples = {
-    basic: {
-        label: "Basic Sorting Header",
-        examples: {
-            basic: {
-                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                function DemoComponent() {\n                    const [sort, setSort] = React.useState([{ key: 'id', direction: SortDirection.DESCENDING }]);\n            \n                    const items = React.useMemo(() => [\n                        {\n                            id: '9712323',\n                            type: '850',\n                            timestamp: 'July 21, 2021 @ 4:40 PM'\n                        },\n                        {\n                            id: '8712378',\n                            type: '810',\n                            timestamp: 'May 24, 2021 @ 4:39 PM'\n                        },\n                        {\n                            id: '8912389',\n                            type: '850',\n                            timestamp: 'May 23, 2021 @ 4:38 PM'\n                        }\n                    ].sort((a, b) => {\n                        if (!sort.length) {\n                            return 0;\n                        }\n\n                        const [{ key, direction }] = sort;\n                        if (a[key] < b[key]) {\n                            return direction === SortDirection.ASCENDING ? -1 : 1;\n                        } else if (a[key] > b[key]) {\n                            return direction === SortDirection.ASCENDING ? 1 : -1;\n                        } else {\n                            return 0;\n                        }\n                    }), [sort]);\n\n                    return (\n                      <>\n                        <SpsSortingHeader sort={sort} onSortChange={setSort} className=\"mb-2\">\n                            <SpsSortingHeaderCell sortKey='id'>ID</SpsSortingHeaderCell>\n                            <SpsSortingHeaderCell sortKey='type'>Type</SpsSortingHeaderCell>\n                            <SpsSortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SpsSortingHeaderCell>\n                        </SpsSortingHeader>\n\n                        <pre>{JSON.stringify(items, undefined, 2)}</pre>\n                      </>\n                    )\n                  }\n                "], ["\n                function DemoComponent() {\n                    const [sort, setSort] = React.useState([{ key: 'id', direction: SortDirection.DESCENDING }]);\n            \n                    const items = React.useMemo(() => [\n                        {\n                            id: '9712323',\n                            type: '850',\n                            timestamp: 'July 21, 2021 @ 4:40 PM'\n                        },\n                        {\n                            id: '8712378',\n                            type: '810',\n                            timestamp: 'May 24, 2021 @ 4:39 PM'\n                        },\n                        {\n                            id: '8912389',\n                            type: '850',\n                            timestamp: 'May 23, 2021 @ 4:38 PM'\n                        }\n                    ].sort((a, b) => {\n                        if (!sort.length) {\n                            return 0;\n                        }\n\n                        const [{ key, direction }] = sort;\n                        if (a[key] < b[key]) {\n                            return direction === SortDirection.ASCENDING ? -1 : 1;\n                        } else if (a[key] > b[key]) {\n                            return direction === SortDirection.ASCENDING ? 1 : -1;\n                        } else {\n                            return 0;\n                        }\n                    }), [sort]);\n\n                    return (\n                      <>\n                        <SpsSortingHeader sort={sort} onSortChange={setSort} className=\"mb-2\">\n                            <SpsSortingHeaderCell sortKey='id'>ID</SpsSortingHeaderCell>\n                            <SpsSortingHeaderCell sortKey='type'>Type</SpsSortingHeaderCell>\n                            <SpsSortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SpsSortingHeaderCell>\n                        </SpsSortingHeader>\n\n                        <pre>{JSON.stringify(items, undefined, 2)}</pre>\n                      </>\n                    )\n                  }\n                "]))),
-            },
-        },
-    },
-};
-var templateObject_1;
-//# sourceMappingURL=SpsSortingHeader.examples.js.map

package/dist/out-tsc/sorting-header/SpsSortingHeader.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpsSortingHeader.examples.js","sourceRoot":"","sources":["../../../src/sorting-header/SpsSortingHeader.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,wBAAwB,GAAoB;IACvD,KAAK,EAAE;QACL,KAAK,EAAE,sBAAsB;QAC7B,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,2pEAAA,wlEA+CF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/sorting-header/SpsSortingHeader.js

@@ -1,51 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import clsx from "clsx";
-import * as React from "react";
-import * as PropTypes from "../prop-types";
-import { SpsSortingHeaderCell } from "./SpsSortingHeaderCell";
-var propsDoc = {
-    sort: "SortedColumn[]",
-    onSortChange: "SortChangeHandler",
-};
-var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { sort: PropTypes.arrayOf(PropTypes.impl()), onSortChange: PropTypes.fun() });
-export function SpsSortingHeader(_a) {
-    var className = _a.className, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, sort = _a.sort, onSortChange = _a.onSortChange, children = _a.children, rest = __rest(_a, ["className", "data-testid", "unsafelyReplaceClassName", "sort", "onSortChange", "children"]);
-    var classes = clsx(unsafelyReplaceClassName || "sps-sorting-header", className);
-    var newProps = {
-        sort: sort,
-        onSortChange: onSortChange,
-    };
-    return (React.createElement("div", __assign({ className: classes }, rest), React.Children.map(children, function (child) {
-        if (child && React.isValidElement(child) && child.type === SpsSortingHeaderCell) {
-            return React.cloneElement(child, newProps);
-        }
-        return child;
-    })));
-}
-Object.assign(SpsSortingHeader, {
-    props: propsDoc,
-    propTypes: propTypes,
-    displayName: "SpsSortingHeader",
-});
-//# sourceMappingURL=SpsSortingHeader.js.map

package/dist/out-tsc/sorting-header/SpsSortingHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpsSortingHeader.js","sourceRoot":"","sources":["../../../src/sorting-header/SpsSortingHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,IAAM,QAAQ,GAAG;IACf,IAAI,EAAE,gBAAgB;IACtB,YAAY,EAAE,mBAAmB;CAClC,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAgB,CAAC,EACvD,YAAY,EAAE,SAAS,CAAC,GAAG,EAAqB,GACjD,CAAC;AAIF,MAAM,UAAU,gBAAgB,CAAC,EAQT;IAPtB,IAAA,SAAS,eAAA,EACM,MAAM,oBAAA,EACrB,wBAAwB,8BAAA,EACxB,IAAI,UAAA,EACJ,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACL,IAAI,cAPwB,4FAQhC,CADQ;IAEP,IAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,IAAI,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAElF,IAAM,QAAQ,GAAG;QACf,IAAI,MAAA;QACJ,YAAY,cAAA;KACb,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,IAAM,IAAI,GAC9B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAClC,IAAI,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,oBAAoB,EAAE;YAC/E,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC9B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,kBAAkB;CAChC,CAAC,CAAC"}

package/dist/out-tsc/sorting-header/SpsSortingHeaderCell.d.ts

@@ -1,17 +0,0 @@
-import type { SortChangeHandler, SortedColumn } from "@spscommerce/ds-shared";
-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>;
-    sortKey: PropTypes.Requireable<string>;
-    sortDisabled: PropTypes.Requireable<boolean>;
-    sort: PropTypes.Requireable<SortedColumn[]>;
-    onSortChange: PropTypes.Requireable<SortChangeHandler>;
-    widthPx: PropTypes.Requireable<number>;
-    widthRem: PropTypes.Requireable<number>;
-};
-export declare type SpsSortingHeaderCellProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
-export declare function SpsSortingHeaderCell({ className, "data-testid": testId, unsafelyReplaceClassName, sortKey, sort, sortDisabled, onSortChange, onClick, children, widthPx, widthRem, style, ...rest }: SpsSortingHeaderCellProps): JSX.Element;
-export {};