@spscommerce/ds-react 5.20.0 → 5.20.3-ie

package/dist/out-tsc/list-toolbar/SpsListToolbar.examples.js

@@ -0,0 +1,425 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 * as React from "react";
+import { code } from "@spscommerce/utils";
+import { ButtonKind } from "@spscommerce/ds-shared";
+import { SpsButton } from "../button";
+import { SpsFocusedTask } from "../focused-task";
+import { SpsTable, SpsTableBody, SpsTableCell, SpsTableHead, SpsTableHeader, SpsTableRow, } from "../table";
+export function ContentOrderExample() {
+    var _a = __read(React.useState(false), 2), showFocusedTask = _a[0], setShowFocusedTask = _a[1];
+    function onClose() {
+        setShowFocusedTask(false);
+    }
+    function onOpen() {
+        setShowFocusedTask(true);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("p", null, "The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),
+        React.createElement(SpsButton, { kind: ButtonKind.LINK, onClick: onOpen }, "View Content Order Example"),
+        React.createElement(SpsFocusedTask, { isOpen: showFocusedTask, onClose: onClose },
+            React.createElement("h1", null, "Content Order"),
+            React.createElement("img", { src: "assets/images/list-toolbar-example.svg", alt: "A List Toolbar with labels on each section", className: "w-100 mb-3" }),
+            React.createElement(SpsTable, null,
+                React.createElement(SpsTableHead, null,
+                    React.createElement(SpsTableHeader, { style: { width: "80px" } }, "Order"),
+                    React.createElement(SpsTableHeader, null, "Section"),
+                    React.createElement(SpsTableHeader, null, "Notes")),
+                React.createElement(SpsTableBody, null,
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "1")),
+                        React.createElement(SpsTableCell, null, "Checkbox"),
+                        React.createElement(SpsTableCell, null, "For Content Rows and Content Tiles only.")),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "2")),
+                        React.createElement(SpsTableCell, null, "Search/Filter Box"),
+                        React.createElement(SpsTableCell, null)),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "3")),
+                        React.createElement(SpsTableCell, null, "Saved Search"),
+                        React.createElement(SpsTableCell, null)),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "4")),
+                        React.createElement(SpsTableCell, null, "Advanced Search"),
+                        React.createElement(SpsTableCell, null, "For more information, visit the Advanced Search page.")),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "5")),
+                        React.createElement(SpsTableCell, null, "Column Editor"),
+                        React.createElement(SpsTableCell, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "6")),
+                        React.createElement(SpsTableCell, null, "List View Selector"),
+                        React.createElement(SpsTableCell, null)),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "7")),
+                        React.createElement(SpsTableCell, null, "Sorting"),
+                        React.createElement(SpsTableCell, null)),
+                    React.createElement(SpsTableRow, null,
+                        React.createElement(SpsTableCell, null,
+                            React.createElement("span", { className: "sps-tag sps-tag--info" }, "8")),
+                        React.createElement(SpsTableCell, null, "Buttons"),
+                        React.createElement(SpsTableCell, { wrap: 500 }, "Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page.")))))));
+}
+export var SpsListToolbarExamples = {
+    general: {
+        label: "General Usage",
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("h5", null, "Use a List Toolbar:"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),
+            React.createElement("h5", null, "Avoid a List Toolbar:"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "When no list is present."),
+                React.createElement("li", null, "When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))); },
+    },
+    contentOrder: {
+        label: "Content Order",
+        description: React.createElement(ContentOrderExample, null),
+    },
+    checkbox: {
+        label: "Checkbox",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("p", null,
+                "Use a Checkbox in the List Toolbar when items in a",
+                " ",
+                React.createElement(NavigateTo, { to: "Content rows" }, "Content Row"),
+                " or",
+                " ",
+                React.createElement(NavigateTo, { to: "Content tiles" }, "Content Tile"),
+                " are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."));
+        },
+        examples: {
+            checkbox: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n                        \n                        const [selectedColors, setSelectedColors] = React.useState([]);\n                        colors = ['Red', 'Blue', 'Green']\n\n                        const isIndeterminate = selectedColors.length > 0 && selectedColors.length < colors.length\n                        const isSelected = selectedColors.length > 0\n\n                        return (\n                            <>\n                                <SpsListToolbar\n                                    selectable\n                                    isIndeterminate={isIndeterminate}\n                                    isSelected={isSelected}\n                                    onSelectionChange={() => {\n                                        if (isIndeterminate || isSelected) {\n                                            setSelectedColors([])\n                                        } else {\n                                            setSelectedColors(colors);\n                                        }\n                                    }}\n                                >\n                                    <SpsListToolbarSearch onSubmit={handleSearch}>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            icon={SpsIcon.FILTER}\n                                            placeholder=\"Filter fields\"\n                                        />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                {colors.map((color) => (\n                                    <SpsCheckbox \n                                        checked={selectedColors.includes(color)} \n                                        inline \n                                        label={color} \n                                        onChange={() => {\n                                            if (selectedColors.includes(color)) {\n                                                setSelectedColors(selectedColors.filter((c) => c !== color))\n                                            } else { \n                                                setSelectedColors([...selectedColors, color])\n                                            }\n                                        }}\n                                    />\n                                ))}\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n                        \n                        const [selectedColors, setSelectedColors] = React.useState([]);\n                        colors = ['Red', 'Blue', 'Green']\n\n                        const isIndeterminate = selectedColors.length > 0 && selectedColors.length < colors.length\n                        const isSelected = selectedColors.length > 0\n\n                        return (\n                            <>\n                                <SpsListToolbar\n                                    selectable\n                                    isIndeterminate={isIndeterminate}\n                                    isSelected={isSelected}\n                                    onSelectionChange={() => {\n                                        if (isIndeterminate || isSelected) {\n                                            setSelectedColors([])\n                                        } else {\n                                            setSelectedColors(colors);\n                                        }\n                                    }}\n                                >\n                                    <SpsListToolbarSearch onSubmit={handleSearch}>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            icon={SpsIcon.FILTER}\n                                            placeholder=\"Filter fields\"\n                                        />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                {colors.map((color) => (\n                                    <SpsCheckbox \n                                        checked={selectedColors.includes(color)} \n                                        inline \n                                        label={color} \n                                        onChange={() => {\n                                            if (selectedColors.includes(color)) {\n                                                setSelectedColors(selectedColors.filter((c) => c !== color))\n                                            } else { \n                                                setSelectedColors([...selectedColors, color])\n                                            }\n                                        }}\n                                    />\n                                ))}\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    searchAndFilter: {
+        label: "Search + Filter Inputs",
+        description: function () { return (React.createElement("p", null, "Use Search and Filter inputs to make it easier to quickly find list items.")); },
+        examples: {
+            search: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h5", null, "Search"),
+                    React.createElement("p", null, "Use Search to find list item(s) starting from an empty list."))); },
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+            searchAndSelect: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h5", null, "Search + Select"),
+                    React.createElement("p", null, "Use Select to search for list item(s) in a particular category."))); },
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+            filter: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h5", null, "Filter"),
+                    React.createElement("p", null, "Use Filter to find list item(s) starting from a populated list."))); },
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+            filterAndSelect: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h5", null, "Filter + Select"),
+                    React.createElement("p", null, "Use Select to filter list item(s) in a particular category."))); },
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const filterKeys = [\"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+            searchInfo: {
+                description: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement("h5", null, "Search Info"),
+                    React.createElement("p", null, "Use SpsListToolbarSearchInfo component to add additional information about your search."))); },
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function Component() {\n                        const filterKeys = [\"Key Item ID\", \"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                                <SpsListToolbarSearchInfo>\n                                  <div style={{ display: 'flex', alignItems: 'center'}}>\n                                    <span  style={{ marginRight: 5 }} >\n                                      Key Item ID = Vendor Part Number\n                                    </span>\n                                    <SpsI icon={SpsIcon.INFO_CIRCLE} className=\"blue200\"/>\n                                  </div>\n                                </SpsListToolbarSearchInfo>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const filterKeys = [\"Key Item ID\", \"Document Type\", \"Sender Name\", \"Receiver Name\"];\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                            filterOption: filterKeys[0],\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsSelect\n                                        options={filterKeys}\n                                        formMeta={formMeta.fields.filterOption}\n                                        value={formValue.filterOption}\n                                        notClearable\n                                    />\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        icon={SpsIcon.FILTER}\n                                        placeholder=\"Filter fields\"\n                                    />\n                                </SpsListToolbarSearch>\n                                <SpsListToolbarSearchInfo>\n                                  <div style={{ display: 'flex', alignItems: 'center'}}>\n                                    <span  style={{ marginRight: 5 }} >\n                                      Key Item ID = Vendor Part Number\n                                    </span>\n                                    <SpsI icon={SpsIcon.INFO_CIRCLE} className=\"blue200\"/>\n                                  </div>\n                                </SpsListToolbarSearchInfo>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    /*
+     * TODO: updates needed to the list toolbar component
+     * savedSearch: {
+     *     label: 'Saved Search',
+     *     description: () => (
+     *         <p>
+     *             Use the Saved Search feature to enable users to repeat a
+     *              frequently-executed search query.
+     *              For more information, visit the Saved Search page.
+     *         </p>
+     *     ),
+     *     examples: {
+     *         savedSearch: {
+     *             react: code`
+     *                 function Component() {
+     *                     const { formValue, formMeta, updateForm } = useSpsForm({
+     *                         searchText: "",
+     *                     });
+     */
+    /*
+     *                     function handleSearch(event) {
+     *                         console.log(event, formValue.searchText)
+     *                     }
+     */
+    /*
+     *                     return (
+     *                         <SpsListToolbar>
+     *                             <SpsListToolbarSearch onSubmit={handleSearch}>
+     *                                 <SpsTextInput
+     *                                     value={formValue.searchText}
+     *                                     formMeta={formMeta.fields.searchText}
+     *                                     placeholder="Search fields"
+     *                                 />
+     *                                 <SpsButton
+     *                                      kind={ButtonKind.ICON}
+     *                                      icon={SpsIcon.SEARCH}
+     *                                      type="submit"
+     *                                  />
+     *                             </SpsListToolbarSearch>
+     *                             <SpsDropdown
+     *                                 label="Saved Searches"
+     *                                 options={[
+     *                                     [{ label: "Option A" }, () => console.log("Option A")],
+     *                                 ]}
+     *                             />
+     *                         </SpsListToolbar>
+     *                     )
+     *                 }
+     *             `,
+     *         },
+     *     },
+     * },
+     */
+    advancedSearch: {
+        label: "Advanced Search",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("p", null,
+                "Include the Advanced Search feature when more complex options are required to narrow down search results. For more information, visit the",
+                " ",
+                React.createElement(NavigateTo, { to: "advanced-search" }, "Advanced Search"),
+                " page."));
+        },
+        examples: {
+            advancedSearch: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: false,\n                            controlsDisabled: true,\n                        });\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n                    \n                        return (\n                            <>\n                                <SpsListToolbar advancedSearch={advSearch}\n                                    onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                >\n                                    <SpsListToolbarSearch>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            placeholder=\"Search fields\"\n                                        />\n                                        <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                <SpsAdvancedSearch {...advSearch}>\n                                    <i>insert form here</i>\n                                </SpsAdvancedSearch>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [advSearch, setAdvSearch] = React.useState({\n                            isOpen: false,\n                            controlsDisabled: true,\n                        });\n\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleToggleAdvancedSearch(isOpen) {\n                            setAdvSearch({ isOpen });\n                        }\n                    \n                        return (\n                            <>\n                                <SpsListToolbar advancedSearch={advSearch}\n                                    onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                >\n                                    <SpsListToolbarSearch>\n                                        <SpsTextInput\n                                            value={formValue.searchText}\n                                            formMeta={formMeta.fields.searchText}\n                                            placeholder=\"Search fields\"\n                                        />\n                                        <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                    </SpsListToolbarSearch>\n                                </SpsListToolbar>\n                                <SpsAdvancedSearch {...advSearch}>\n                                    <i>insert form here</i>\n                                </SpsAdvancedSearch>\n                            </>\n                        )\n                    }\n                "]))),
+            },
+            withResultsBar: {
+                description: function (_a) {
+                    var NavigateTo = _a.NavigateTo;
+                    return (React.createElement("p", null,
+                        "You can include ",
+                        React.createElement(NavigateTo, { to: "search-results-bar" }, "Search Results Bar"),
+                        " (SpsSearchResultsBarV2)."));
+                },
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    function Component() {\n                      const senderOptions = [\"Aktie Sports\", \"FGL Sports\",\"Modells Sporting Goods\", \"Perry Sport\", \"Sportman Warhouse Australia\"];\n                      const receiverOptions = [\"FGL Sports\", \"Foot Asylum\", \"Hervis\", \"Lovell Rugby\", \"Aktie Sports\"];    \n                      const doctypeOptions = [\".doc\", \".txt\", \".pdf\"];    \n                      const statusOptions = [\"pending\", \"done\"];\n                  \n                      const [advSearch, setAdvSearch] = React.useState({\n                          isOpen: false\n                      });\n                      \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n                      \n                      const [selections, setSelections] = React.useState();\n                      const [results, setResults] = React.useState(0);\n                      \n                      const initValue = {\n                          searchText: \"\",\n                          sender: [],\n                          receiver: [],\n                          doctype: [],\n                          status: [],\n                      };\n                  \n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n                  \n                      function handleToggleAdvancedSearch(isOpen) {\n                          setAdvSearch({ isOpen });\n                      }\n                      \n                      function handleAdvancedSearchSubmit() {\n                          console.log(\"submit\");\n                          setShowSearchBar(true);\n                          setSelections(omit(formValue, \"searchText\"));\n                          setResults(Math.floor(Math.random() * 100));\n                      }\n                  \n                      function handleAdvancedSearchClear() {\n                          updateForm(initValue);\n                      }\n                  \n                      return (\n                          <>\n                              <SpsListToolbar advancedSearch={advSearch}\n                                  onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                              >\n                                  <SpsListToolbarSearch>\n                                      <SpsTextInput\n                                          value={formValue.searchText}\n                                          formMeta={formMeta.fields.searchText}\n                                          placeholder=\"Search fields\"\n                                      />\n                                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                  </SpsListToolbarSearch>\n                                  <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                  <SpsButton>Button</SpsButton>\n                                  <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                                  {showSearchBar && (\n                                      <SpsSearchResultsBarV2\n                                          results={results}\n                                          selections={selections}\n                                          onClear={() => setShowSearchBar(false)}\n                                      />\n                                  )}\n                              </SpsListToolbar>\n                              <SpsAdvancedSearch {...advSearch}\n                                  formMeta={formMeta}\n                                  onSubmit={handleAdvancedSearchSubmit}\n                                  onClear={handleAdvancedSearchClear}\n                              >\n                                  <div className=\"sfg-row\">\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.sender}\n                                              value={formValue.sender}\n                                              options={senderOptions}\n                                          />\n                                      </div>\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.receiver}\n                                              value={formValue.receiver}\n                                              options={receiverOptions}\n                                          />\n                                      </div>\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.doctype}\n                                              value={formValue.doctype}\n                                              options={doctypeOptions}\n                                          />\n                                      </div>\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.status}\n                                              value={formValue.status}\n                                              options={statusOptions}\n                                          />\n                                      </div>\n                                  </div>\n                              </SpsAdvancedSearch>\n                          </>\n                      )\n                  }\n                "], ["\n                    function Component() {\n                      const senderOptions = [\"Aktie Sports\", \"FGL Sports\",\"Modells Sporting Goods\", \"Perry Sport\", \"Sportman Warhouse Australia\"];\n                      const receiverOptions = [\"FGL Sports\", \"Foot Asylum\", \"Hervis\", \"Lovell Rugby\", \"Aktie Sports\"];    \n                      const doctypeOptions = [\".doc\", \".txt\", \".pdf\"];    \n                      const statusOptions = [\"pending\", \"done\"];\n                  \n                      const [advSearch, setAdvSearch] = React.useState({\n                          isOpen: false\n                      });\n                      \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n                      \n                      const [selections, setSelections] = React.useState();\n                      const [results, setResults] = React.useState(0);\n                      \n                      const initValue = {\n                          searchText: \"\",\n                          sender: [],\n                          receiver: [],\n                          doctype: [],\n                          status: [],\n                      };\n                  \n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n                  \n                      function handleToggleAdvancedSearch(isOpen) {\n                          setAdvSearch({ isOpen });\n                      }\n                      \n                      function handleAdvancedSearchSubmit() {\n                          console.log(\"submit\");\n                          setShowSearchBar(true);\n                          setSelections(omit(formValue, \"searchText\"));\n                          setResults(Math.floor(Math.random() * 100));\n                      }\n                  \n                      function handleAdvancedSearchClear() {\n                          updateForm(initValue);\n                      }\n                  \n                      return (\n                          <>\n                              <SpsListToolbar advancedSearch={advSearch}\n                                  onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                              >\n                                  <SpsListToolbarSearch>\n                                      <SpsTextInput\n                                          value={formValue.searchText}\n                                          formMeta={formMeta.fields.searchText}\n                                          placeholder=\"Search fields\"\n                                      />\n                                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                  </SpsListToolbarSearch>\n                                  <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                  <SpsButton>Button</SpsButton>\n                                  <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                                  {showSearchBar && (\n                                      <SpsSearchResultsBarV2\n                                          results={results}\n                                          selections={selections}\n                                          onClear={() => setShowSearchBar(false)}\n                                      />\n                                  )}\n                              </SpsListToolbar>\n                              <SpsAdvancedSearch {...advSearch}\n                                  formMeta={formMeta}\n                                  onSubmit={handleAdvancedSearchSubmit}\n                                  onClear={handleAdvancedSearchClear}\n                              >\n                                  <div className=\"sfg-row\">\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.sender}\n                                              value={formValue.sender}\n                                              options={senderOptions}\n                                          />\n                                      </div>\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.receiver}\n                                              value={formValue.receiver}\n                                              options={receiverOptions}\n                                          />\n                                      </div>\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.doctype}\n                                              value={formValue.doctype}\n                                              options={doctypeOptions}\n                                          />\n                                      </div>\n                                      <div className=\"sfg-col-4\">\n                                          <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n                                          <SpsMultiSelect\n                                              formMeta={formMeta.fields.status}\n                                              value={formValue.status}\n                                              options={statusOptions}\n                                          />\n                                      </div>\n                                  </div>\n                              </SpsAdvancedSearch>\n                          </>\n                      )\n                  }\n                "]))),
+            },
+            pinnedResultsBar: {
+                description: function () { return (React.createElement("p", null, "You can pin the Results Bar by passing pinResultsBar prop to SpsListToolbar.")); },
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    function Component() {            \n                      const [advSearch, setAdvSearch] = React.useState({\n                          isOpen: false\n                      });\n                      \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n                      \n                      const [results, setResults] = React.useState(0);\n                      \n                      const initValue = {\n                          searchText: \"\",\n                      };\n                  \n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n                  \n                      function handleToggleAdvancedSearch(isOpen) {\n                          setAdvSearch({ isOpen });\n                      }\n                      \n                      function handleAdvancedSearchSubmit() {\n                          setShowSearchBar(true);\n                          setResults(Math.floor(Math.random() * 100));\n                      }\n                  \n                      function handleAdvancedSearchClear() {\n                          updateForm(initValue);\n                      }\n                  \n                      return (\n                          <>\n                              <SpsListToolbar advancedSearch={advSearch}\n                                  onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                  pinResultsBar\n                              >\n                                  <SpsListToolbarSearch>\n                                      <SpsTextInput\n                                          value={formValue.searchText}\n                                          formMeta={formMeta.fields.searchText}\n                                          placeholder=\"Search fields\"\n                                      />\n                                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                  </SpsListToolbarSearch>\n                                  <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                  <SpsButton>Button</SpsButton>\n                                  <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                                  {showSearchBar && (\n                                      <SpsSearchResultsBarV2\n                                          results={results}\n                                          onClear={() => setShowSearchBar(false)}\n                                      />\n                                  )}\n                              </SpsListToolbar>\n                              <SpsAdvancedSearch {...advSearch} \n                                  onSubmit={handleAdvancedSearchSubmit}\n                              >\n                                  <i>insert form here</i>\n                              </SpsAdvancedSearch>\n                          </>\n                      )\n                  }\n                "], ["\n                    function Component() {            \n                      const [advSearch, setAdvSearch] = React.useState({\n                          isOpen: false\n                      });\n                      \n                      const [showSearchBar, setShowSearchBar] = React.useState(true);\n                      \n                      const [results, setResults] = React.useState(0);\n                      \n                      const initValue = {\n                          searchText: \"\",\n                      };\n                  \n                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n                  \n                      function handleToggleAdvancedSearch(isOpen) {\n                          setAdvSearch({ isOpen });\n                      }\n                      \n                      function handleAdvancedSearchSubmit() {\n                          setShowSearchBar(true);\n                          setResults(Math.floor(Math.random() * 100));\n                      }\n                  \n                      function handleAdvancedSearchClear() {\n                          updateForm(initValue);\n                      }\n                  \n                      return (\n                          <>\n                              <SpsListToolbar advancedSearch={advSearch}\n                                  onToggleAdvancedSearch={handleToggleAdvancedSearch}\n                                  pinResultsBar\n                              >\n                                  <SpsListToolbarSearch>\n                                      <SpsTextInput\n                                          value={formValue.searchText}\n                                          formMeta={formMeta.fields.searchText}\n                                          placeholder=\"Search fields\"\n                                      />\n                                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                                  </SpsListToolbarSearch>\n                                  <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                  <SpsButton>Button</SpsButton>\n                                  <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                                  {showSearchBar && (\n                                      <SpsSearchResultsBarV2\n                                          results={results}\n                                          onClear={() => setShowSearchBar(false)}\n                                      />\n                                  )}\n                              </SpsListToolbar>\n                              <SpsAdvancedSearch {...advSearch} \n                                  onSubmit={handleAdvancedSearchSubmit}\n                              >\n                                  <i>insert form here</i>\n                              </SpsAdvancedSearch>\n                          </>\n                      )\n                  }\n                "]))),
+            },
+        },
+    },
+    columnEditor: {
+        label: "Column Editor",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("p", null,
+                "Use a Column Editor when tables require the ability to show or hide specific columns based on the user's preferences. The Column Editor should only be used for",
+                " ",
+                React.createElement(NavigateTo, { to: "tables" }, "Tables"),
+                ", and not any other type of list view. For more information, visit the",
+                " ",
+                React.createElement(NavigateTo, { to: "column-chooser" }, "Column Editor"),
+                " page."));
+        },
+        examples: {
+            columnEditor: {
+                react: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    function Component() {\n                        const unselectedCols = [\n                            { name: \"Title\" },\n                        ];\n                        const selectedCols = [\n                            { name: \"Documents\" },\n                            { name: \"Price\" },\n                        ]\n                        \n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsColumnChooser\n                                    unselectedColumns={unselectedCols}\n                                    selectedColumns={selectedCols}\n                                    onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                                />\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const unselectedCols = [\n                            { name: \"Title\" },\n                        ];\n                        const selectedCols = [\n                            { name: \"Documents\" },\n                            { name: \"Price\" },\n                        ]\n                        \n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsColumnChooser\n                                    unselectedColumns={unselectedCols}\n                                    selectedColumns={selectedCols}\n                                    onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n                                />\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    /*
+     * TODO: add when list view selector is implemented
+     * listViewSelector: {
+     *     label: 'List View Selector',
+     *     description: ({ NavigateTo }) => (
+     *         <p>
+     *             Use a List View Selector to change the visual display of the list between{' '}
+     *             <NavigateTo to="tables">Tables</NavigateTo>,{' '}
+     *             <NavigateTo to="content-rows">Content Rows</NavigateTo>,{' '}
+     *             <NavigateTo to="cards">Cards</NavigateTo>.
+     *         </p>
+     *     ),
+     *     examples: {
+     *         listView: {
+     *             react: code`
+     *                 function Component() {
+     *                     const { formValue, formMeta, updateForm } = useSpsForm({
+     *                         searchText: "",
+     *                     });
+     */
+    /*
+     *                     function handleSearch(event) {
+     *                         console.log(event, formValue.searchText)
+     *                     }
+     */
+    /*
+     *                     return (
+     *                         <SpsListToolbar>
+     *                             <SpsListToolbarSearch onSubmit={handleSearch}>
+     *                                 <SpsTextInput
+     *                                     value={formValue.searchText}
+     *                                     formMeta={formMeta.fields.searchText}
+     *                                     placeholder="Search fields"
+     *                                 />
+     *                                 <SpsButton
+     *                                      kind={ButtonKind.ICON}
+     *                                      icon={SpsIcon.SEARCH}
+     *                                      type="submit"
+     *                                  />
+     *                             </SpsListToolbarSearch>
+     *                             <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.LIST_TABLE} />
+     *                             </SpsListToolbar>
+     *                     )
+     *                 }
+     *             `,
+     *         },
+     *     },
+     * },
+     * TODO: add example when sorting feature is implemented
+     * sorting: {
+     *     label: 'Sorting',
+     *     description: ({ NavigateTo }) => (
+     *         <>
+     *             <p>
+     *                 Use the Sorting feature only when content is displayed in{' '}
+     *                 <NavigateTo to="content-rows">Content Rows</NavigateTo> or{' '}
+     *                 <NavigateTo to="cards">Cards</NavigateTo>.
+     *             </p>
+     *             <i>
+     *                 Note: The <NavigateTo to="tables">Table</NavigateTo> component has its own
+     *                 sorting options for each column.
+     *             </i>
+     *         </>
+     *     ),
+     *     examples: {
+     *         sorting: {
+     *             react: code`
+     *                 function Component() {
+     *                     const { formValue, formMeta, updateForm } = useSpsForm({
+     *                         searchText: "",
+     *                     });
+     */
+    /*
+     *                     function handleSearch(event) {
+     *                         console.log(event, formValue.searchText)
+     *                     }
+     */
+    /*
+     *                     return (
+     *                         <SpsListToolbar>
+     *                             <SpsListToolbarSearch onSubmit={handleSearch}>
+     *                                 <SpsTextInput
+     *                                     value={formValue.searchText}
+     *                                     formMeta={formMeta.fields.searchText}
+     *                                     placeholder="Search fields"
+     *                                 />
+     *                                 <SpsButton
+     *                                      kind={ButtonKind.ICON}
+     *                                      icon={SpsIcon.SEARCH}
+     *                                      type="submit"
+     *                                  />
+     *                             </SpsListToolbarSearch>
+     *                             <SpsButton
+     *                                  className="gray500"
+     *                                  kind={ButtonKind.LINK}
+     *                                  icon={SpsIcon.ARROW_DOWN}>
+     *                                  Order Type
+     *                              </SpsButton>
+     *                         </SpsListToolbar>
+     *                     )
+     *                 }
+     *             `,
+     *         },
+     *     },
+     * },
+     */
+    buttons: {
+        label: "Buttons",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("p", null,
+                "Use Buttons only for actions that do not affect existing list items, such as exporting the list or creating a new list item. For actions that are taken on list items, such as changing a status of a list item, refer to the",
+                " ",
+                React.createElement(NavigateTo, { to: "list-action-bar" }, "List Action Bar"),
+                "."));
+        },
+        examples: {
+            buttons: {
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsButton>Button</SpsButton>\n                                <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        });\n\n                        function handleSearch(event) {\n                            console.log(event, formValue.searchText)\n                        }\n\n                        return (\n                            <SpsListToolbar>\n                                <SpsListToolbarSearch onSubmit={handleSearch}>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} type=\"submit\" />\n                                </SpsListToolbarSearch>\n                                <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsButton>Button</SpsButton>\n                                <SpsButton kind={ButtonKind.KEY}>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    tabs: {
+        label: "Tabs",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("p", null,
+                "When tabs are included, they appear above the List Toolbar. Tab rules are outlined on the ",
+                React.createElement(NavigateTo, { to: "cards" }, "Cards"),
+                " page."));
+        },
+        examples: {
+            tabs: {
+                react: code(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                    function Component() {\n                        const tabs = [\n                            {\n                                label: \"Good Tab\",\n                            },\n                            {\n                                label: \"Great Tab\",\n                            },\n                            {\n                                label: \"Best Tab\",\n                            },\n                        ];\n                        const activeTab = { label: \"Good Tab\" };\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        })\n                        const handleChange = e => {\n                            setSearchText(e.target.value);\n                        };\n\n                        function handleTabChange(tab) {\n                            console.log(tab);\n                        }\n\n                        return (\n                            <SpsListToolbar\n                                tabs={tabs}\n                                activeTab={activeTab}\n                                onTabChange={handleTabChange}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind=\"icon\" icon=\"search\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const tabs = [\n                            {\n                                label: \"Good Tab\",\n                            },\n                            {\n                                label: \"Great Tab\",\n                            },\n                            {\n                                label: \"Best Tab\",\n                            },\n                        ];\n                        const activeTab = { label: \"Good Tab\" };\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            searchText: \"\",\n                        })\n                        const handleChange = e => {\n                            setSearchText(e.target.value);\n                        };\n\n                        function handleTabChange(tab) {\n                            console.log(tab);\n                        }\n\n                        return (\n                            <SpsListToolbar\n                                tabs={tabs}\n                                activeTab={activeTab}\n                                onTabChange={handleTabChange}\n                            >\n                                <SpsListToolbarSearch>\n                                    <SpsTextInput\n                                        value={formValue.searchText}\n                                        formMeta={formMeta.fields.searchText}\n                                        placeholder=\"Search fields\"\n                                    />\n                                    <SpsButton kind=\"icon\" icon=\"search\" />\n                                </SpsListToolbarSearch>\n                            </SpsListToolbar>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    title: {
+        label: "Title",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("p", null,
+                "Use Titles when there is no Search or Filter input required for the list items, such as when the only search options are in an Advanced Search panel. For more information, visit the ",
+                React.createElement(NavigateTo, { to: "advanced-search" }, "Advanced Search"),
+                " ",
+                "page."));
+        },
+        examples: {
+            title: {
+                react: code(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <SpsListToolbar title=\"Good List Title\">\n                                <SpsButton>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <SpsListToolbar title=\"Good List Title\">\n                                <SpsButton>Button</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    sortBy: {
+        label: "Sort By",
+        description: function () { return (React.createElement("p", null, "Use Sort By component to sort list of rows. It looks like SpsDropdown but with sorting interface.")); },
+        examples: {
+            title: {
+                react: code(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                    function Component() {\n                        const [activeOption, setActiveOption] = React.useState(null);\n                        const defaultOption = {\n                            label: \"Default\",\n                            key: \"default\",\n                            direction: SortDirection.ASCENDING,\n                            icon: SpsIcon.SORT_ALPHA_ASC,\n                        }\n                        const options = [\n                            defaultOption,\n                            {\n                                label: \"Company Name: A-Z\",\n                                key: \"name\",\n                                direction: SortDirection.ASCENDING,\n                                icon: SpsIcon.SORT_ALPHA_ASC,\n                            },\n                            {\n                                label: \"Company Name: Z-A\",\n                                key: \"name\",\n                                direction: SortDirection.DESCENDING,\n                                icon: SpsIcon.SORT_ALPHA_DESC,\n                            },\n                            {\n                                label: 'Created Date: Oldest to Newest',\n                                key: 'created',\n                                direction: SortDirection.ASCENDING,\n                                icon: SpsIcon.SORT_NUM_ASC,\n                            },\n                            {\n                                label: 'Created Date: Newest to Oldest',\n                                key: 'created',\n                                direction: SortDirection.DESCENDING,\n                                icon: SpsIcon.SORT_NUM_DESC,\n                            }\n                        ]\n\n                        return (\n                            <SpsListToolbar title=\"List of sortable rows\">\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsVerticalRule />\n                                <SpsListToolbarSortBy\n                                    options={options}\n                                    activeOption={activeOption}\n                                    defaultOption={defaultOption}\n                                    onSortChange={(option) => setActiveOption(option)}\n                                />\n                                <SpsVerticalRule />\n                                <SpsButton kind={ButtonKind.CONFIRM}>Create New</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [activeOption, setActiveOption] = React.useState(null);\n                        const defaultOption = {\n                            label: \"Default\",\n                            key: \"default\",\n                            direction: SortDirection.ASCENDING,\n                            icon: SpsIcon.SORT_ALPHA_ASC,\n                        }\n                        const options = [\n                            defaultOption,\n                            {\n                                label: \"Company Name: A-Z\",\n                                key: \"name\",\n                                direction: SortDirection.ASCENDING,\n                                icon: SpsIcon.SORT_ALPHA_ASC,\n                            },\n                            {\n                                label: \"Company Name: Z-A\",\n                                key: \"name\",\n                                direction: SortDirection.DESCENDING,\n                                icon: SpsIcon.SORT_ALPHA_DESC,\n                            },\n                            {\n                                label: 'Created Date: Oldest to Newest',\n                                key: 'created',\n                                direction: SortDirection.ASCENDING,\n                                icon: SpsIcon.SORT_NUM_ASC,\n                            },\n                            {\n                                label: 'Created Date: Newest to Oldest',\n                                key: 'created',\n                                direction: SortDirection.DESCENDING,\n                                icon: SpsIcon.SORT_NUM_DESC,\n                            }\n                        ]\n\n                        return (\n                            <SpsListToolbar title=\"List of sortable rows\">\n                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                                <SpsVerticalRule />\n                                <SpsListToolbarSortBy\n                                    options={options}\n                                    activeOption={activeOption}\n                                    defaultOption={defaultOption}\n                                    onSortChange={(option) => setActiveOption(option)}\n                                />\n                                <SpsVerticalRule />\n                                <SpsButton kind={ButtonKind.CONFIRM}>Create New</SpsButton>\n                            </SpsListToolbar>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+//# sourceMappingURL=SpsListToolbar.examples.js.map

package/dist/out-tsc/list-toolbar/SpsListToolbar.examples.js.map

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