@spscommerce/ds-react 5.20.0 → 5.20.3-ie

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,128 @@
+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
+     * @param key string | number unique id of navigation item to be marked as active
+     */
+    var handleNavAction = function (branch, key) {
+        setActiveBranch(branch);
+        if (onNavChange) {
+            onNavChange(branch, key);
+        }
+    };
+    /**
+     * 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 (__assign(__assign({}, option), { 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) {
+                var _a;
+                return (React.createElement("section", { className: "sps-side-nav__section", key: (_a = section.key) !== null && _a !== void 0 ? _a : section.sectionTitle },
+                    section.sectionTitle && (React.createElement("div", { className: "sps-side-nav__section-title", style: { fontWeight: 400 } }, section.sectionTitle)),
+                    section.navItems.map(function (item) {
+                        var _a;
+                        return (React.createElement(SpsSideNavBranch, { branch: __assign(__assign({}, item), { expanded: findParentBranches(item.subNavItems, activeNavItem) }), activeBranch: activeBranch, setActiveBranch: function (branchName, key) {
+                                handleNavAction(branchName, key);
+                            }, key: (_a = item.key) !== null && _a !== void 0 ? _a : item.name }));
+                    })));
+            }))));
+};
+//# sourceMappingURL=SpsSideNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpsSideNav.js","sourceRoot":"","sources":["../../../src/side-nav/SpsSideNav.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0FAA0F;AAC1F,oCAAoC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAkCtD;;;;GAIG;AACH,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAChC,GAAkB,EAClB,SAAiB;IAEjB,IAAI,GAAG,EAAE;QACP,OAAO,CACL,GAAG,CAAC,IAAI,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,IAAI,KAAK,SAAS,EAA1B,CAA0B,CAAC;eAC9C,GAAG,CAAC,IAAI,CAAC,UAAC,OAAO,IAAK,OAAA,kBAAkB,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,EAAlD,CAAkD,CAAC,CAC7E,CAAC;KACH;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAA8B,UAAC,EAWrD;QAVC,KAAK,WAAA,EACL,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,IAAI,UAAA,EACJ,WAAW,iBAAA,EACX,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,sBAAsB,4BAAA;IAEtB,IAAM,qBAAqB,GAAG,MAAM,CAAS,aAAa,CAAC,CAAC;IACtD,IAAA,KAAA,OAAkC,QAAQ,CAC9C,aAAa,CACd,IAAA,EAFM,YAAY,QAAA,EAAE,eAAe,QAEnC,CAAC;IACI,IAAA,KAAA,OAA4B,QAAQ,CACxC,gBAAgB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,IAAA,EAFM,SAAS,QAAA,EAAE,YAAY,QAE7B,CAAC;IACI,IAAA,KAAA,OAAgC,QAAQ,CAAS,EAAE,CAAC,IAAA,EAAnD,WAAW,QAAA,EAAE,cAAc,QAAwB,CAAC;IAE3D;;;;OAIG;IACH,IAAM,eAAe,GAAG,UAAC,MAAc,EAAE,GAAqB;QAC5D,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF;;;OAGG;IACH,IAAM,eAAe,GAAG,UAAC,GAAW;QAClC,YAAY,CAAC,GAAG,CAAC,CAAC;QAClB,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF;;;OAGG;IACH,IAAM,mBAAmB,GAAG,UAAC,GAAkB;QAC7C,IAAI,GAAG,EAAE;YACP,OAAO,CACL,GAAG,CAAC,IAAI,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAhD,CAAgD,CAAC;mBACpE,GAAG,CAAC,IAAI,CAAC,UAAC,OAAO,IAAK,OAAA,mBAAmB,CAAC,OAAO,CAAC,WAAW,CAAC,EAAxC,CAAwC,CAAC,CACnE,CAAC;SACH;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF;;;OAGG;IACH,IAAM,kBAAkB,GAAG,UAAU,CAAC,GAAG,CACvC,UAAC,MAAsB,IAAqB,OAAA,uBACvC,MAAM,KACT,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAC,OAAO,IAAK,OAAA,CAC5C,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;eACzC,mBAAmB,CAAC,OAAO,CAAC,WAAW,CAAC,CAChD,EAH6C,CAG7C,CAAC,IACF,EAN0C,CAM1C,CACH,CAAC;IAEF,IAAI,aAAa,KAAK,qBAAqB,CAAC,OAAO,EAAE;QACnD,eAAe,CAAC,aAAa,CAAC,CAAC;QAC/B,qBAAqB,CAAC,OAAO,GAAG,aAAa,CAAC;KAC/C;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACnC,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,kBAAkB,EAAC,KAAK,EAAE,KAAK;YAC5C,6BAAK,SAAS,EAAC,iBAAiB;gBAC7B,SAAS,IAAI,CACZ,2BAAG,SAAS,EAAE,uBAAqB,SAAW,GAAI,CACnD;gBACA,KAAK,CACF,CACF,CACP;QACA,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB,IACnC,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,CACjB,8BACE,SAAS,EAAE,IAAI,CACb,eAAe,EACf,eAAe,EACf,GAAG,KAAK,SAAS,IAAI,QAAQ,CAC9B,iBACW,KAAK,EACjB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,cAAY,OAAA,eAAe,CAAC,GAAG,CAAC,EAApB,CAAoB,EACzC,SAAS,EAAE,UAAC,KAAK;gBACf,IACE,KAAK,CAAC,GAAG,KAAK,OAAO;uBACd,KAAK,CAAC,GAAG,KAAK,GAAG,EACxB;oBACA,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,eAAe,CAAC,GAAG,CAAC,CAAC;iBACtB;YACH,CAAC;YAED,kCAAO,GAAG,CAAQ,CACb,CACR,EAzBkB,CAyBlB,CAAC,CACE,CACP;QACD,6BAAK,SAAS,EAAC,gBAAgB;YAC5B,UAAU,IAAI,CACb,iCAAS,SAAS,EAAC,uBAAuB;gBACxC,6BAAK,SAAS,EAAC,gBAAgB;oBAC7B,6BAAK,SAAS,EAAC,kBAAkB;wBAC/B,2BAAG,SAAS,EAAC,+CAA+C,GAAG;wBAC/D,+BACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,uBAAuB,EACjC,WAAW,EAAE,sBAAsB,EACnC,QAAQ,EAAE,UAAC,KAAK;gCACd,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;4BACrC,CAAC,GACD,CACE,CACF,CACE,CACX;YACA,kBAAkB,CAAC,GAAG,CAAC,UAAC,OAAuB;;gBAAK,OAAA,CACnD,iCACE,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,MAAA,OAAO,CAAC,GAAG,mCAAI,OAAO,CAAC,YAAY;oBAEvC,OAAO,CAAC,YAAY,IAAI,CACvB,6BACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,IAEzB,OAAO,CAAC,YAAY,CACjB,CACP;oBACA,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAI;;wBAAK,OAAA,CAC9B,oBAAC,gBAAgB,IACf,MAAM,wBACD,IAAI,KACP,QAAQ,EAAE,kBAAkB,CAC1B,IAAI,CAAC,WAAW,EAChB,aAAa,CACd,KAEH,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,UACf,UAAkB,EAClB,GAAqB;gCAErB,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;4BACnC,CAAC,EACD,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,IAAI,CAAC,IAAI,GAC1B,CACH,CAAA;qBAAA,CAAC,CACM,CACX,CAAA;aAAA,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+/** 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, activeChildBranchKey?: string | number) => void;
+}
+export declare const SpsSideNavBranch: React.FC<SpsSideNavBranchProps>;