@spscommerce/ds-react 8.53.15 → 8.53.17

package/lib/index.js

@@ -27008,6 +27008,198 @@ const rT = {
                 `
       }
     }
+  },
+  withContentRows: {
+    label: "With Content Rows",
+    multi: !0,
+    examples: {
+      basic: {
+        description: () => /* @__PURE__ */ o.createElement("p", null, "Filter panel alongside a list of content rows. The filter panel controls which rows are displayed based on the selected filters."),
+        react: S`
+          import {
+            useSpsForm,
+            SpsForm,
+            SpsFilterPanel,
+            SpsFilterPanelCap,
+            SpsFilterPanelSection,
+            SpsCheckbox,
+            SpsContentRow,
+            SpsContentRowCol,
+            SpsTag,
+            SpsKeyValueTag,
+            SpsDropdown,
+            SpsListActionBar,
+            SpsButton,
+          } from "@spscommerce/ds-react";
+          import { ButtonKind, SpsIcon, TagKind } from "@spscommerce/ds-shared";
+
+          const ITEMS = [
+            { id: 1, name: "Widget A", category: "Electronics", status: "Active", price: "$29.99" },
+            { id: 2, name: "Gadget B", category: "Electronics", status: "Inactive", price: "$49.99" },
+            { id: 3, name: "Tool C", category: "Hardware", status: "Active", price: "$19.99" },
+            { id: 4, name: "Part D", category: "Hardware", status: "Active", price: "$9.99" },
+            { id: 5, name: "Device E", category: "Electronics", status: "Inactive", price: "$99.99" },
+            { id: 6, name: "Supply F", category: "Office", status: "Active", price: "$14.99" },
+          ];
+
+          // Separate component for the item list display
+          function ItemList({ items, selectedIds, selectItem, deselectItem, onRemove }) {
+            return (
+              <div className="d-flex" style={{ flexDirection: "column", gap: "0.625rem" }}>
+                {items.map((item) => {
+                  const actions = [
+                    [{ label: "View Details" }, () => {}],
+                    [{ label: "Remove" }, () => onRemove([item.id])],
+                  ];
+
+                  return (
+                    <SpsContentRow
+                      key={item.id}
+                      selectable
+                      selected={selectedIds.includes(item.id)}
+                      onSelectionChange={(e) => {
+                        if (e.target.checked) {
+                          selectItem(item.id);
+                        } else {
+                          deselectItem(item.id);
+                        }
+                      }}
+                    >
+                      <SpsContentRowCol>
+                        <div className="d-flex justify-content-between flex-wrap">
+                          <div>
+                            <div className="fs-14">{item.name}</div>
+                            <div>{item.category}</div>
+                          </div>
+                          <div>
+                            <SpsTag kind={item.status === "Active" ? TagKind.SUCCESS : TagKind.DEFAULT}>
+                              {item.status}
+                            </SpsTag>
+                          </div>
+                        </div>
+                      </SpsContentRowCol>
+
+                      <SpsContentRowCol style={{ verticalAlign: "baseline" }}>
+                        <div className="d-flex flex-wrap">
+                          <SpsKeyValueTag className="mr-1 mb-1" tagKey="Price" value={item.price} />
+                        </div>
+                      </SpsContentRowCol>
+
+                      <SpsContentRowCol widthRem={4.25}>
+                        <SpsDropdown icon={SpsIcon.ELLIPSES} options={actions} />
+                      </SpsContentRowCol>
+                    </SpsContentRow>
+                  );
+                })}
+                {items.length === 0 && (
+                  <div className="text-center text-muted py-4">
+                    No items match the selected filters
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          // Main component that combines the filter panel with the item list
+          function FilterPanelWithContentRows() {
+            const initialValues = {
+              categories: {
+                Electronics: false,
+                Hardware: false,
+                Office: false,
+              },
+              statuses: {
+                Active: false,
+                Inactive: false,
+              },
+            };
+
+            const { formValue, formMeta, updateForm } = useSpsForm(initialValues);
+
+            const handleClear = () => {
+              updateForm(initialValues);
+              formMeta.markAsPristine();
+            };
+
+            const [selectedIds, setSelectedIds] = React.useState([]);
+
+            const selectItem = (id) => setSelectedIds((current) => [...current, id]);
+            const deselectItem = (id) => setSelectedIds((current) => current.filter((i) => i !== id));
+            const removeItems = (ids) => setSelectedIds((current) => current.filter((i) => !ids.includes(i)));
+
+            const selectedCategories = Object.entries(formValue.categories)
+              .filter(([_, selected]) => selected)
+              .map(([category]) => category);
+
+            const selectedStatuses = Object.entries(formValue.statuses)
+              .filter(([_, selected]) => selected)
+              .map(([status]) => status);
+
+            const filteredItems = ITEMS.filter((item) => {
+              const categoryMatch = selectedCategories.length === 0 || selectedCategories.includes(item.category);
+              const statusMatch = selectedStatuses.length === 0 || selectedStatuses.includes(item.status);
+              return categoryMatch && statusMatch;
+            });
+
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-3">
+                  <SpsForm formMeta={formMeta}>
+                    <SpsFilterPanel>
+                      <SpsFilterPanelCap onClear={handleClear} />
+                      <SpsFilterPanelSection title="Category">
+                        {Object.keys(initialValues.categories).map((category) => (
+                          <SpsCheckbox
+                            key={category}
+                            name={category}
+                            label={category}
+                            checked={formValue.categories[category]}
+                            formMeta={formMeta.fields.categories.fields[category]}
+                          />
+                        ))}
+                      </SpsFilterPanelSection>
+                      <SpsFilterPanelSection title="Status">
+                        {Object.keys(initialValues.statuses).map((status) => (
+                          <SpsCheckbox
+                            key={status}
+                            name={status}
+                            label={status}
+                            checked={formValue.statuses[status]}
+                            formMeta={formMeta.fields.statuses.fields[status]}
+                          />
+                        ))}
+                      </SpsFilterPanelSection>
+                    </SpsFilterPanel>
+                  </SpsForm>
+                </div>
+                <div className="sfg-col-9">
+                  <ItemList
+                    items={filteredItems}
+                    selectedIds={selectedIds}
+                    selectItem={selectItem}
+                    deselectItem={deselectItem}
+                    onRemove={removeItems}
+                  />
+
+                  {selectedIds.length > 0 && (
+                    <SpsListActionBar
+                      itemsSelected={selectedIds.length}
+                      clearSelected={() => setSelectedIds([])}
+                    >
+                      <SpsButton kind={ButtonKind.DELETE} onClick={() => removeItems(selectedIds)}>
+                        Remove Selected
+                      </SpsButton>
+                    </SpsListActionBar>
+                  )}
+                </div>
+              </div>
+            );
+          }
+
+          render(<FilterPanelWithContentRows />);
+        `
+      }
+    }
   }
 }, oT = {
   value: "string",

package/lib/index.umd.cjs

@@ -9395,7 +9395,189 @@ Valid keys: `+JSON.stringify(Object.keys(E),null,"  "));var Q=U(X,ee,te,ne,W+"."
                         </div>
                       );
                     }
-                `}}}},UE={value:"string",placeholder:"string",formMeta:"SpsFormFieldMeta<string>",onFilterChange:"ChangeEventHandler<HTMLInputElement>"};function Ls({className:e,value:t,placeholder:n,formMeta:o,onFilterChange:a,...s}){const{t:i}=Se.useWoodlandLanguage();return r.createElement("div",{className:K("sps-filter-panel__filter-box",e),...s},r.createElement(cr,{value:t,icon:A.SpsIcon.FILTER,formMeta:o,placeholder:n||i("filterPanel.filterPlaceholder",{defaultValue:"Filter options"}),onChange:a}))}Object.assign(Ls,{props:UE,displayName:"SpsFilterPanelFilterBox"});const jE={showCondition:"boolean"};function _s({showCondition:e=!0,children:t,className:n,...o}){return e?r.createElement("div",{className:K("sps-conditional-field",n),...o},t):null}Object.assign(_s,{props:jE,displayName:"SpsConditionalField"});const Wp={generalUsage:{label:"General Usage",examples:{withCheckbox:{react:S.code`
+                `}}},withContentRows:{label:"With Content Rows",multi:!0,examples:{basic:{description:()=>r.createElement("p",null,"Filter panel alongside a list of content rows. The filter panel controls which rows are displayed based on the selected filters."),react:S.code`
+          import {
+            useSpsForm,
+            SpsForm,
+            SpsFilterPanel,
+            SpsFilterPanelCap,
+            SpsFilterPanelSection,
+            SpsCheckbox,
+            SpsContentRow,
+            SpsContentRowCol,
+            SpsTag,
+            SpsKeyValueTag,
+            SpsDropdown,
+            SpsListActionBar,
+            SpsButton,
+          } from "@spscommerce/ds-react";
+          import { ButtonKind, SpsIcon, TagKind } from "@spscommerce/ds-shared";
+
+          const ITEMS = [
+            { id: 1, name: "Widget A", category: "Electronics", status: "Active", price: "$29.99" },
+            { id: 2, name: "Gadget B", category: "Electronics", status: "Inactive", price: "$49.99" },
+            { id: 3, name: "Tool C", category: "Hardware", status: "Active", price: "$19.99" },
+            { id: 4, name: "Part D", category: "Hardware", status: "Active", price: "$9.99" },
+            { id: 5, name: "Device E", category: "Electronics", status: "Inactive", price: "$99.99" },
+            { id: 6, name: "Supply F", category: "Office", status: "Active", price: "$14.99" },
+          ];
+
+          // Separate component for the item list display
+          function ItemList({ items, selectedIds, selectItem, deselectItem, onRemove }) {
+            return (
+              <div className="d-flex" style={{ flexDirection: "column", gap: "0.625rem" }}>
+                {items.map((item) => {
+                  const actions = [
+                    [{ label: "View Details" }, () => {}],
+                    [{ label: "Remove" }, () => onRemove([item.id])],
+                  ];
+
+                  return (
+                    <SpsContentRow
+                      key={item.id}
+                      selectable
+                      selected={selectedIds.includes(item.id)}
+                      onSelectionChange={(e) => {
+                        if (e.target.checked) {
+                          selectItem(item.id);
+                        } else {
+                          deselectItem(item.id);
+                        }
+                      }}
+                    >
+                      <SpsContentRowCol>
+                        <div className="d-flex justify-content-between flex-wrap">
+                          <div>
+                            <div className="fs-14">{item.name}</div>
+                            <div>{item.category}</div>
+                          </div>
+                          <div>
+                            <SpsTag kind={item.status === "Active" ? TagKind.SUCCESS : TagKind.DEFAULT}>
+                              {item.status}
+                            </SpsTag>
+                          </div>
+                        </div>
+                      </SpsContentRowCol>
+
+                      <SpsContentRowCol style={{ verticalAlign: "baseline" }}>
+                        <div className="d-flex flex-wrap">
+                          <SpsKeyValueTag className="mr-1 mb-1" tagKey="Price" value={item.price} />
+                        </div>
+                      </SpsContentRowCol>
+
+                      <SpsContentRowCol widthRem={4.25}>
+                        <SpsDropdown icon={SpsIcon.ELLIPSES} options={actions} />
+                      </SpsContentRowCol>
+                    </SpsContentRow>
+                  );
+                })}
+                {items.length === 0 && (
+                  <div className="text-center text-muted py-4">
+                    No items match the selected filters
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          // Main component that combines the filter panel with the item list
+          function FilterPanelWithContentRows() {
+            const initialValues = {
+              categories: {
+                Electronics: false,
+                Hardware: false,
+                Office: false,
+              },
+              statuses: {
+                Active: false,
+                Inactive: false,
+              },
+            };
+
+            const { formValue, formMeta, updateForm } = useSpsForm(initialValues);
+
+            const handleClear = () => {
+              updateForm(initialValues);
+              formMeta.markAsPristine();
+            };
+
+            const [selectedIds, setSelectedIds] = React.useState([]);
+
+            const selectItem = (id) => setSelectedIds((current) => [...current, id]);
+            const deselectItem = (id) => setSelectedIds((current) => current.filter((i) => i !== id));
+            const removeItems = (ids) => setSelectedIds((current) => current.filter((i) => !ids.includes(i)));
+
+            const selectedCategories = Object.entries(formValue.categories)
+              .filter(([_, selected]) => selected)
+              .map(([category]) => category);
+
+            const selectedStatuses = Object.entries(formValue.statuses)
+              .filter(([_, selected]) => selected)
+              .map(([status]) => status);
+
+            const filteredItems = ITEMS.filter((item) => {
+              const categoryMatch = selectedCategories.length === 0 || selectedCategories.includes(item.category);
+              const statusMatch = selectedStatuses.length === 0 || selectedStatuses.includes(item.status);
+              return categoryMatch && statusMatch;
+            });
+
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-3">
+                  <SpsForm formMeta={formMeta}>
+                    <SpsFilterPanel>
+                      <SpsFilterPanelCap onClear={handleClear} />
+                      <SpsFilterPanelSection title="Category">
+                        {Object.keys(initialValues.categories).map((category) => (
+                          <SpsCheckbox
+                            key={category}
+                            name={category}
+                            label={category}
+                            checked={formValue.categories[category]}
+                            formMeta={formMeta.fields.categories.fields[category]}
+                          />
+                        ))}
+                      </SpsFilterPanelSection>
+                      <SpsFilterPanelSection title="Status">
+                        {Object.keys(initialValues.statuses).map((status) => (
+                          <SpsCheckbox
+                            key={status}
+                            name={status}
+                            label={status}
+                            checked={formValue.statuses[status]}
+                            formMeta={formMeta.fields.statuses.fields[status]}
+                          />
+                        ))}
+                      </SpsFilterPanelSection>
+                    </SpsFilterPanel>
+                  </SpsForm>
+                </div>
+                <div className="sfg-col-9">
+                  <ItemList
+                    items={filteredItems}
+                    selectedIds={selectedIds}
+                    selectItem={selectItem}
+                    deselectItem={deselectItem}
+                    onRemove={removeItems}
+                  />
+
+                  {selectedIds.length > 0 && (
+                    <SpsListActionBar
+                      itemsSelected={selectedIds.length}
+                      clearSelected={() => setSelectedIds([])}
+                    >
+                      <SpsButton kind={ButtonKind.DELETE} onClick={() => removeItems(selectedIds)}>
+                        Remove Selected
+                      </SpsButton>
+                    </SpsListActionBar>
+                  )}
+                </div>
+              </div>
+            );
+          }
+
+          render(<FilterPanelWithContentRows />);
+        `}}}},UE={value:"string",placeholder:"string",formMeta:"SpsFormFieldMeta<string>",onFilterChange:"ChangeEventHandler<HTMLInputElement>"};function Ls({className:e,value:t,placeholder:n,formMeta:o,onFilterChange:a,...s}){const{t:i}=Se.useWoodlandLanguage();return r.createElement("div",{className:K("sps-filter-panel__filter-box",e),...s},r.createElement(cr,{value:t,icon:A.SpsIcon.FILTER,formMeta:o,placeholder:n||i("filterPanel.filterPlaceholder",{defaultValue:"Filter options"}),onChange:a}))}Object.assign(Ls,{props:UE,displayName:"SpsFilterPanelFilterBox"});const jE={showCondition:"boolean"};function _s({showCondition:e=!0,children:t,className:n,...o}){return e?r.createElement("div",{className:K("sps-conditional-field",n),...o},t):null}Object.assign(_s,{props:jE,displayName:"SpsConditionalField"});const Wp={generalUsage:{label:"General Usage",examples:{withCheckbox:{react:S.code`
                     import {
                       SpsCheckbox,
                       SpsInputGroup,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "8.53.15",
+  "version": "8.53.17",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -46,11 +46,11 @@
     "moment-timezone": "^0.6.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@sps-woodland/illustrations": "8.53.15",
-    "@spscommerce/ds-colors": "8.53.15",
-    "@spscommerce/i18n": "8.53.15",
-    "@spscommerce/positioning": "8.53.15",
-    "@spscommerce/ds-shared": "8.53.15"
+    "@sps-woodland/illustrations": "8.53.17",
+    "@spscommerce/ds-colors": "8.53.17",
+    "@spscommerce/ds-shared": "8.53.17",
+    "@spscommerce/i18n": "8.53.17",
+    "@spscommerce/positioning": "8.53.17"
   },
   "devDependencies": {
     "@react-stately/collections": "3.12.10",
@@ -70,12 +70,12 @@
     "raf-stub": "3.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/illustrations": "8.53.15",
-    "@spscommerce/ds-shared": "8.53.15",
-    "@spscommerce/ds-colors": "8.53.15",
-    "@spscommerce/i18n": "8.53.15",
-    "test": "8.53.15",
-    "@spscommerce/positioning": "8.53.15"
+    "@sps-woodland/illustrations": "8.53.17",
+    "@spscommerce/ds-colors": "8.53.17",
+    "@spscommerce/ds-shared": "8.53.17",
+    "@spscommerce/i18n": "8.53.17",
+    "@spscommerce/positioning": "8.53.17",
+    "test": "8.53.17"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",