@spscommerce/ds-react 4.34.1 → 4.34.2-ie

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

@@ -0,0 +1,398 @@
+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;
+};
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+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                "]))),
+            },
+        },
+    },
+    /*
+     * 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_6 || (templateObject_6 = __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                "]))),
+            },
+        },
+    },
+    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_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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_10 || (templateObject_10 = __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                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+//# 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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"}

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

@@ -0,0 +1,166 @@
+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 { ButtonKind, TagKind } from "@spscommerce/ds-shared";
+import { lockToAnimationFrames } from "@spscommerce/utils";
+import clsx from "clsx";
+import * as React from "react";
+import { SpsButton } from "../button/SpsButton";
+import * as PropTypes from "../prop-types";
+import { SpsTabs } from "../tabs/SpsTabs";
+import { SpsTag } from "../tag/SpsTag";
+import { selectChildren } from "../utils/selectChildren";
+import { I18nContext } from "../i18n";
+import { PortalContext } from "../utils";
+import { SpsCheckbox } from "../checkbox";
+import { SpsListToolbarSearch } from "./SpsListToolbarSearch";
+var propsDoc = {
+    activeTab: "SpsTab",
+    advancedSearch: "{ isOpen: boolean, enteredFields: number }",
+    onToggleAdvancedSearch: "(boolean) => void",
+    onTabChange: "(SpsTab) => void",
+    title: "string",
+    tabs: "Array<SpsTab>",
+    onToolbarPinned: "(boolean) => void",
+    selectable: "boolean",
+    isSelected: "boolean",
+    isIndeterminate: "boolean",
+    onSelectionChange: "(boolean) => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { activeTab: PropTypes.impl(), advancedSearch: PropTypes.shape({
+        isOpen: PropTypes.bool,
+        enteredFields: PropTypes.number,
+    }), onToggleAdvancedSearch: PropTypes.fun(), onTabChange: PropTypes.fun(), title: PropTypes.string, tabs: PropTypes.arrayOf(PropTypes.impl()), onToolbarPinned: PropTypes.fun(), selectable: PropTypes.bool, isSelected: PropTypes.bool, isIndeterminate: PropTypes.bool, onSelectionChange: PropTypes.fun() });
+export function SpsListToolbar(props) {
+    var activeTab = props.activeTab, advancedSearch = props.advancedSearch, children = props.children, className = props.className, onToggleAdvancedSearch = props.onToggleAdvancedSearch, onTabChange = props.onTabChange, tabs = props.tabs, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, onToolbarPinned = props.onToolbarPinned, selectable = props.selectable, isSelected = props.isSelected, isIndeterminate = props.isIndeterminate, onSelectionChange = props.onSelectionChange, testId = props["data-testid"], rest = __rest(props, ["activeTab", "advancedSearch", "children", "className", "onToggleAdvancedSearch", "onTabChange", "tabs", "title", "unsafelyReplaceClassName", "onToolbarPinned", "selectable", "isSelected", "isIndeterminate", "onSelectionChange", "data-testid"]);
+    var t = React.useContext(I18nContext).t;
+    var unpinScrollY = null;
+    var _a = __read(React.useState(false), 2), isPinned = _a[0], setIsPinned = _a[1];
+    var rootElement = React.useRef();
+    var wrapperElement = React.useRef();
+    var onScroll = lockToAnimationFrames(function () {
+        if (rootElement.current) {
+            var rect = rootElement.current.getBoundingClientRect();
+            if (rect && rect.height > 0 && rect.top <= 60) {
+                if (typeof unpinScrollY === "number") {
+                    if (window.scrollY < unpinScrollY) {
+                        unpinScrollY = null;
+                        setIsPinned(false);
+                    }
+                }
+                else {
+                    unpinScrollY = window.scrollY;
+                    setIsPinned(true);
+                    if (onToggleAdvancedSearch) {
+                        onToggleAdvancedSearch(false);
+                    }
+                }
+            }
+        }
+    });
+    React.useEffect(function () {
+        window.addEventListener("scroll", onScroll);
+        return function () {
+            window.removeEventListener("scroll", onScroll);
+        };
+    }, []);
+    var unpinnedStyles = React.useRef(null);
+    React.useLayoutEffect(function () {
+        if (isPinned && unpinnedStyles.current) {
+            wrapperElement.current.style.height = unpinnedStyles.current.height;
+            wrapperElement.current.style.width = unpinnedStyles.current.width;
+            wrapperElement.current.style.marginBottom = unpinnedStyles.current.marginBottom;
+        }
+        else if (!isPinned) {
+            wrapperElement.current.style.height = null;
+            wrapperElement.current.style.width = null;
+            wrapperElement.current.style.marginBottom = null;
+            var rootComputedStyles = window.getComputedStyle(rootElement.current);
+            unpinnedStyles.current = {
+                height: rootComputedStyles.height,
+                width: rootComputedStyles.width,
+                marginBottom: rootComputedStyles.marginBottom,
+            };
+        }
+    }, [isPinned]);
+    function handleTabChange(tab) {
+        if (onTabChange) {
+            onTabChange(tab);
+        }
+    }
+    function toggleAdvancedSearch() {
+        if (onToggleAdvancedSearch) {
+            onToggleAdvancedSearch(!advancedSearch.isOpen);
+        }
+    }
+    function emitToolbarPinned(status) {
+        if (onToolbarPinned) {
+            onToolbarPinned(status);
+        }
+    }
+    React.useEffect(function () {
+        emitToolbarPinned(isPinned);
+    }, [isPinned]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && "sps-list-toolbar--pinned", isPinned && "z-stratum-bar", advancedSearch && advancedSearch.isOpen && "sps-list-toolbar--advanced-search-open", className);
+    var _b = __read(selectChildren(children, [
+        { type: SpsListToolbarSearch },
+    ]), 2), listToolbarSearch = _b[0], otherChildren = _b[1];
+    return (React.createElement("div", { className: "sps-list-toolbar__wrapper", ref: wrapperElement },
+        React.createElement("div", __assign({ className: classes, "data-testid": testId, ref: rootElement }, rest),
+            !!selectable && (React.createElement("div", { className: "sps-list-toolbar__selection-controls" },
+                React.createElement(SpsCheckbox, { checked: isSelected, indeterminate: isIndeterminate, onChange: function () {
+                        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(!isSelected);
+                    } }))),
+            tabs && (React.createElement(SpsTabs, { tabs: tabs, onTabChange: handleTabChange, activeTab: activeTab, "data-testid": testId + "__tabs" })),
+            React.createElement("div", { className: "sps-list-toolbar__search-controls" },
+                !title && listToolbarSearch,
+                listToolbarSearch.length > 0 && advancedSearch && (React.createElement("div", { className: "sps-list-toolbar__advanced-search-toggle", "data-testid": testId + "__advanced-search" },
+                    React.createElement("div", { className: "sps-list-toolbar__advanced-search-toggle-button-wrapper" },
+                        React.createElement(SpsButton, { kind: ButtonKind.LINK, onClick: toggleAdvancedSearch }, t("design-system:listToolbar.advancedSearchToggle"))),
+                    advancedSearch.enteredFields > 0 && (React.createElement(SpsTag, { kind: TagKind.INFO },
+                        React.createElement("span", null, advancedSearch.enteredFields))))),
+                title && (React.createElement("div", { "data-testid": testId + "-title", className: "sps-list-toolbar__advanced-search-title" }, title))),
+            isPinned ? (React.createElement("div", { className: "sps-list-toolbar__header-content" },
+                React.createElement(PortalContext.Provider, { value: { fixed: true } }, otherChildren))) : (React.createElement("div", { className: "sps-list-toolbar__header-content" }, otherChildren)))));
+}
+Object.assign(SpsListToolbar, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsListToolbar",
+});
+//# sourceMappingURL=SpsListToolbar.js.map