@spscommerce/ds-react 5.2.2-ie → 5.2.5

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

@@ -1,398 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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

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

@@ -1,166 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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