@sps-woodland/column-manager 8.4.9 → 8.5.0

package/lib/column-manager/ColumnManager.d.ts

@@ -14,8 +14,10 @@ export declare type ColumnmanagerProps = ComponentProps<{
     showCount?: boolean;
     showFilter?: boolean;
     showMoveAllLinks?: boolean;
+    cancelButtonText?: string;
+    saveButtonText?: string;
     onSave?: (visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void;
     onClose?: () => void;
     onOpen?: () => void;
 }>;
-export declare function ColumnManager({ isOpen: isOpenProp, title, visibleColumnsHeader, hiddenColumnsHeader, visibleColumns, hiddenColumns, maxDisplayedItems, manualSort, showIcons, showCount, showFilter, showMoveAllLinks, onSave, onOpen, onClose, "data-testid": dataTestId, }: ColumnmanagerProps): React.JSX.Element | null;
+export declare function ColumnManager({ isOpen: isOpenProp, title, visibleColumnsHeader, hiddenColumnsHeader, visibleColumns, hiddenColumns, maxDisplayedItems, manualSort, showIcons, showCount, showFilter, showMoveAllLinks, cancelButtonText, saveButtonText, onSave, onOpen, onClose, "data-testid": dataTestId, }: ColumnmanagerProps): React.JSX.Element | null;

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("react"),T=require("@sps-woodland/core"),R=require("@sps-woodland/add-to-list"),I=require("@sps-woodland/tokens"),C=require("@spscommerce/ds-react"),b=require("@spscommerce/ds-shared"),g=require("@spscommerce/utils");function A(n){if(n&&n.__esModule)return n;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return r.default=n,Object.freeze(r)}const e=A(B);function y({isOpen:n,title:r,visibleColumnsHeader:o,hiddenColumnsHeader:s,visibleColumns:u,hiddenColumns:d,maxDisplayedItems:a,manualSort:i=!0,showIcons:f=!0,showCount:v=!0,showFilter:E=!0,showMoveAllLinks:M=!0,onSave:m,onOpen:l,onClose:t,"data-testid":p}){const[k,O]=e.useState(!!n),{t:c}=e.useContext(T.I18nContext),S=T.useChildTestIdAttrBuilder({"data-testid":p}),[h,w]=e.useState({visibleColumns:u,hiddenColumns:d}),P=()=>{O(!1),t==null||t()};return e.useEffect(()=>{k&&(w({visibleColumns:u,hiddenColumns:d}),l==null||l())},[k]),e.useEffect(()=>{O(!!n)},[n]),k?e.createElement(C.SpsModal,{title:r||c("design-system:columnManager.title"),kind:b.ModalKind.GENERAL,size:b.ModalSize.LARGE,"data-testid":p,onClose:P},e.createElement(R.AddToList,{onHeader:o||c("design-system:columnManager.onListHeader"),offHeader:s||c("design-system:columnManager.offListHeader"),onList:h.visibleColumns,offList:h.hiddenColumns,onChange:H=>{w({visibleColumns:H.onList,hiddenColumns:H.offList})},manualSort:i,maxDisplayedItems:a,showIcons:f,showCount:v,showFilter:E,showMoveAllLinks:M,...S("add-to-list")}),e.createElement(C.SpsModalFooter,null,e.createElement(C.SpsButton,{kind:b.ButtonKind.DEFAULT,onClick:()=>{w({visibleColumns:u,hiddenColumns:d}),P()},className:I.sprinkles({mr:"sm"}),...S("cancel-button")},c("design-system:columnManager.cancelButton")),e.createElement(C.SpsButton,{kind:b.ButtonKind.KEY,onClick:()=>{m==null||m(h.visibleColumns,h.hiddenColumns),P()},...S("save-button")},c("design-system:columnManager.saveButton")))):null}T.Metadata.set(y,{name:"Column Manager",props:{isOpen:{type:"boolean",required:!0},title:{type:"string"},visibleColumnsHeader:{type:"string"},hiddenColumnsHeader:{type:"string"},visibleColumns:{type:"ItemProps[]",required:!0},hiddenColumns:{type:"ItemProps[]",required:!0},manualSort:{type:"boolean"},maxDisplayedItems:{type:"number"},showIcons:{type:"boolean"},showCount:{type:"boolean"},showFilter:{type:"boolean"},showMoveAllLinks:{type:"boolean"},onSave:{type:"(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"},onClose:{type:"() => void"},onOpen:{type:"() => void"}}});const L=({isOpen:n,visibleColumns:r,hiddenColumns:o,onClose:s,onOpen:u,onSave:d})=>{const[a,i]=e.useState({isOpen:!!n,visibleColumns:r,hiddenColumns:o});e.useEffect(()=>{i(l=>({...l,isOpen:!!n}))},[n]);const f=()=>{i(l=>({...l,isOpen:!0})),u==null||u()},v=()=>{i(l=>({...l,isOpen:!1})),s==null||s()},E=(l,t)=>{i({isOpen:!1,visibleColumns:l,hiddenColumns:t}),d==null||d(l,t)},M=e.useCallback((l,t)=>{i(p=>({...p,visibleColumns:l,hiddenColumns:t}))},[]),m=e.useCallback(l=>{i(t=>({...t,isOpen:l}))},[]);return{visibleColumns:a.visibleColumns,hiddenColumns:a.hiddenColumns,isOpen:a.isOpen,columnManagerProps:{visibleColumns:a.visibleColumns,hiddenColumns:a.hiddenColumns,isOpen:a.isOpen,onClose:v,onSave:E},triggerProps:{onClick:f},setColumns:M,setOpen:m}},q={components:[y],examples:{basic:{label:"Basic Usage",examples:{basic:{react:g.code`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("react"),P=require("@sps-woodland/core"),A=require("@sps-woodland/add-to-list"),L=require("@sps-woodland/tokens"),h=require("@spscommerce/ds-react"),C=require("@spscommerce/ds-shared"),b=require("@spscommerce/utils");function q(n){if(n&&n.__esModule)return n;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return r.default=n,Object.freeze(r)}const e=q(I);function O({isOpen:n,title:r,visibleColumnsHeader:o,hiddenColumnsHeader:s,visibleColumns:u,hiddenColumns:d,maxDisplayedItems:a,manualSort:i=!0,showIcons:g=!0,showCount:f=!0,showFilter:v=!0,showMoveAllLinks:E=!0,cancelButtonText:M,saveButtonText:l,onSave:t,onOpen:m,onClose:k,"data-testid":H}){const[S,B]=e.useState(!!n),{t:c}=e.useContext(P.I18nContext),w=P.useChildTestIdAttrBuilder({"data-testid":H}),[p,T]=e.useState({visibleColumns:u,hiddenColumns:d}),y=()=>{B(!1),k==null||k()};return e.useEffect(()=>{S&&(T({visibleColumns:u,hiddenColumns:d}),m==null||m())},[S]),e.useEffect(()=>{B(!!n)},[n]),S?e.createElement(h.SpsModal,{title:r||c("design-system:columnManager.title"),kind:C.ModalKind.GENERAL,size:C.ModalSize.LARGE,"data-testid":H,onClose:y},e.createElement(A.AddToList,{onHeader:o||c("design-system:columnManager.onListHeader"),offHeader:s||c("design-system:columnManager.offListHeader"),onList:p.visibleColumns,offList:p.hiddenColumns,onChange:R=>{T({visibleColumns:R.onList,hiddenColumns:R.offList})},manualSort:i,maxDisplayedItems:a,showIcons:g,showCount:f,showFilter:v,showMoveAllLinks:E,...w("add-to-list")}),e.createElement(h.SpsModalFooter,null,e.createElement(h.SpsButton,{kind:C.ButtonKind.DEFAULT,onClick:()=>{T({visibleColumns:u,hiddenColumns:d}),y()},className:L.sprinkles({mr:"sm"}),...w("cancel-button")},M||c("design-system:columnManager.cancelButton")),e.createElement(h.SpsButton,{kind:C.ButtonKind.KEY,onClick:()=>{t==null||t(p.visibleColumns,p.hiddenColumns),y()},...w("save-button")},l||c("design-system:columnManager.saveButton")))):null}P.Metadata.set(O,{name:"Column Manager",props:{isOpen:{type:"boolean",required:!0},title:{type:"string"},visibleColumnsHeader:{type:"string"},hiddenColumnsHeader:{type:"string"},visibleColumns:{type:"ItemProps[]",required:!0},hiddenColumns:{type:"ItemProps[]",required:!0},manualSort:{type:"boolean"},maxDisplayedItems:{type:"number"},showIcons:{type:"boolean"},showCount:{type:"boolean"},showFilter:{type:"boolean"},showMoveAllLinks:{type:"boolean"},cancelButtonText:{type:"string"},saveButtonText:{type:"string"},onSave:{type:"(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"},onClose:{type:"() => void"},onOpen:{type:"() => void"}}});const j=({isOpen:n,visibleColumns:r,hiddenColumns:o,onClose:s,onOpen:u,onSave:d})=>{const[a,i]=e.useState({isOpen:!!n,visibleColumns:r,hiddenColumns:o});e.useEffect(()=>{i(l=>({...l,isOpen:!!n}))},[n]);const g=()=>{i(l=>({...l,isOpen:!0})),u==null||u()},f=()=>{i(l=>({...l,isOpen:!1})),s==null||s()},v=(l,t)=>{i({isOpen:!1,visibleColumns:l,hiddenColumns:t}),d==null||d(l,t)},E=e.useCallback((l,t)=>{i(m=>({...m,visibleColumns:l,hiddenColumns:t}))},[]),M=e.useCallback(l=>{i(t=>({...t,isOpen:l}))},[]);return{visibleColumns:a.visibleColumns,hiddenColumns:a.hiddenColumns,isOpen:a.isOpen,columnManagerProps:{visibleColumns:a.visibleColumns,hiddenColumns:a.hiddenColumns,isOpen:a.isOpen,onClose:f,onSave:v},triggerProps:{onClick:g},setColumns:E,setOpen:M}},x={components:[O],examples:{basic:{label:"Basic Usage",examples:{basic:{react:b.code`
             import { ColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -50,7 +50,7 @@
                   </div>
                 )
             }
-          `}}},hooks:{label:"useColumnManager hook",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Arguments"),e.createElement("p",null,"The column manager comes with a ",e.createElement("code",null,"useColumnManager")," hook that implements the default behavior. Arguments for this hook include:"),e.createElement("dl",null,e.createElement("dt",null,e.createElement("code",null,"visibleColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial visible columns state"),e.createElement("dt",null,e.createElement("code",null,"hiddenColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial hidden columns state"),e.createElement("dt",null,e.createElement("code",null,"isOpen"),": boolean (optional)"),e.createElement("dd",null,"Whether the column manager is open by default"),e.createElement("dt",null,e.createElement("code",null,"onOpen"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager opens",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onClose"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager closes",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onSave"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager saves",e.createElement("code",null,"(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"))),e.createElement("h5",null,"Return value"),e.createElement("p",null,"The ",e.createElement("code",null,"useColumnManager")," hook returns an object with"," ",e.createElement("code",null,"visibleColumns"),", ",e.createElement("code",null,"hiddenColumns"),", ",e.createElement("code",null,"columnManagerProps"),", ",e.createElement("code",null,"triggerProps")," ,",e.createElement("code",null,"setColumns")," and ",e.createElement("code",null,"setOpen")),e.createElement("p",null,e.createElement("code",null,"triggerProps"),": needs to be spread on the element that triggers the modal."),e.createElement("p",null,e.createElement("code",null,"columnManagerProps"),": needs to be spread on the ",e.createElement("code",null,"ColumnManager")," ","component"),e.createElement("p",null,e.createElement("code",null,"visibleColumns"),": the current state of the visible columns"),e.createElement("p",null,e.createElement("code",null,"hiddenColumns"),": the current state of the hidden columns"),e.createElement("p",null,e.createElement("code",null,"setColumns"),": function that allows programmatically setting the current state of the visible and hidden columns. This function is safe to use in effects."),e.createElement("p",null,e.createElement("code",null,"setOpen"),": function that allows programmatically setting the current isOpen state. This function is safe to use in effects."),e.createElement("p",null,"Please refer to the examples to see its implementation"))},hooksExamples:{label:"Hook Usage",examples:{basic:{description:"Minimal API Reference",react:g.code`
+          `}}},hooks:{label:"useColumnManager hook",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Arguments"),e.createElement("p",null,"The column manager comes with a ",e.createElement("code",null,"useColumnManager")," hook that implements the default behavior. Arguments for this hook include:"),e.createElement("dl",null,e.createElement("dt",null,e.createElement("code",null,"visibleColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial visible columns state"),e.createElement("dt",null,e.createElement("code",null,"hiddenColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial hidden columns state"),e.createElement("dt",null,e.createElement("code",null,"isOpen"),": boolean (optional)"),e.createElement("dd",null,"Whether the column manager is open by default"),e.createElement("dt",null,e.createElement("code",null,"onOpen"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager opens",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onClose"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager closes",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onSave"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager saves",e.createElement("code",null,"(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"))),e.createElement("h5",null,"Return value"),e.createElement("p",null,"The ",e.createElement("code",null,"useColumnManager")," hook returns an object with"," ",e.createElement("code",null,"visibleColumns"),", ",e.createElement("code",null,"hiddenColumns"),", ",e.createElement("code",null,"columnManagerProps"),", ",e.createElement("code",null,"triggerProps")," ,",e.createElement("code",null,"setColumns")," and ",e.createElement("code",null,"setOpen")),e.createElement("p",null,e.createElement("code",null,"triggerProps"),": needs to be spread on the element that triggers the modal."),e.createElement("p",null,e.createElement("code",null,"columnManagerProps"),": needs to be spread on the ",e.createElement("code",null,"ColumnManager")," ","component"),e.createElement("p",null,e.createElement("code",null,"visibleColumns"),": the current state of the visible columns"),e.createElement("p",null,e.createElement("code",null,"hiddenColumns"),": the current state of the hidden columns"),e.createElement("p",null,e.createElement("code",null,"setColumns"),": function that allows programmatically setting the current state of the visible and hidden columns. This function is safe to use in effects."),e.createElement("p",null,e.createElement("code",null,"setOpen"),": function that allows programmatically setting the current isOpen state. This function is safe to use in effects."),e.createElement("p",null,"Please refer to the examples to see its implementation"))},hooksExamples:{label:"Hook Usage",examples:{basic:{description:"Minimal API Reference",react:b.code`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -85,7 +85,7 @@
                   </div>
                 )
             }
-          `},complete:{description:"Complete API Reference",react:g.code`
+          `},complete:{description:"Complete API Reference",react:b.code`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -136,7 +136,7 @@
                   </div>
                 )
             }
-          `}}},minimalInterface:{label:"Minimal Interface",examples:{basic:{description:"This is the minimal visual interface for the ColumnManager component",react:g.code`
+          `}}},minimalInterface:{label:"Minimal Interface",examples:{basic:{description:"This is the minimal visual interface for the ColumnManager component",react:b.code`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -176,4 +176,4 @@
                   </div>
                 )
             }
-          `}}}}},j={"Column Manager":q};exports.ColumnManager=y;exports.MANIFEST=j;exports.useColumnManager=L;
+          `}}}}},F={"Column Manager":x};exports.ColumnManager=O;exports.MANIFEST=F;exports.useColumnManager=j;

package/lib/index.es.js

@@ -1,91 +1,93 @@
 import * as e from "react";
-import { Metadata as O, I18nContext as B, useChildTestIdAttrBuilder as R } from "@sps-woodland/core";
-import { AddToList as I } from "@sps-woodland/add-to-list";
-import { sprinkles as A } from "@sps-woodland/tokens";
-import { SpsModal as L, SpsModalFooter as x, SpsButton as P } from "@spscommerce/ds-react";
-import { ModalKind as F, ModalSize as j, ButtonKind as T } from "@spscommerce/ds-shared";
-import { code as p } from "@spscommerce/utils";
-function y({
+import { Metadata as R, I18nContext as I, useChildTestIdAttrBuilder as A } from "@sps-woodland/core";
+import { AddToList as L } from "@sps-woodland/add-to-list";
+import { sprinkles as x } from "@sps-woodland/tokens";
+import { SpsModal as F, SpsModalFooter as j, SpsButton as P } from "@spscommerce/ds-react";
+import { ModalKind as q, ModalSize as V, ButtonKind as O } from "@spscommerce/ds-shared";
+import { code as c } from "@spscommerce/utils";
+function B({
   isOpen: s,
-  title: h,
-  visibleColumnsHeader: C,
+  title: p,
+  visibleColumnsHeader: h,
   hiddenColumnsHeader: r,
   visibleColumns: a,
   hiddenColumns: i,
   maxDisplayedItems: t,
   manualSort: o = !0,
-  showIcons: b = !0,
-  showCount: f = !0,
-  showFilter: g = !0,
-  showMoveAllLinks: v = !0,
-  onSave: m,
-  onOpen: n,
-  onClose: l,
-  "data-testid": d
+  showIcons: C = !0,
+  showCount: b = !0,
+  showFilter: f = !0,
+  showMoveAllLinks: g = !0,
+  cancelButtonText: v,
+  saveButtonText: n,
+  onSave: l,
+  onOpen: m,
+  onClose: E,
+  "data-testid": T
 }) {
-  const [E, w] = e.useState(!!s), { t: u } = e.useContext(B), M = R({ "data-testid": d }), [c, k] = e.useState({
+  const [M, y] = e.useState(!!s), { t: u } = e.useContext(I), k = A({ "data-testid": T }), [d, S] = e.useState({
     visibleColumns: a,
     hiddenColumns: i
-  }), S = () => {
-    w(!1), l == null || l();
+  }), w = () => {
+    y(!1), E == null || E();
   };
   return e.useEffect(() => {
-    E && (k({ visibleColumns: a, hiddenColumns: i }), n == null || n());
-  }, [E]), e.useEffect(() => {
-    w(!!s);
-  }, [s]), E ? /* @__PURE__ */ e.createElement(
-    L,
+    M && (S({ visibleColumns: a, hiddenColumns: i }), m == null || m());
+  }, [M]), e.useEffect(() => {
+    y(!!s);
+  }, [s]), M ? /* @__PURE__ */ e.createElement(
+    F,
     {
-      title: h || u("design-system:columnManager.title"),
-      kind: F.GENERAL,
-      size: j.LARGE,
-      "data-testid": d,
-      onClose: S
+      title: p || u("design-system:columnManager.title"),
+      kind: q.GENERAL,
+      size: V.LARGE,
+      "data-testid": T,
+      onClose: w
     },
     /* @__PURE__ */ e.createElement(
-      I,
+      L,
       {
-        onHeader: C || u("design-system:columnManager.onListHeader"),
+        onHeader: h || u("design-system:columnManager.onListHeader"),
         offHeader: r || u("design-system:columnManager.offListHeader"),
-        onList: c.visibleColumns,
-        offList: c.hiddenColumns,
+        onList: d.visibleColumns,
+        offList: d.hiddenColumns,
         onChange: (H) => {
-          k({ visibleColumns: H.onList, hiddenColumns: H.offList });
+          S({ visibleColumns: H.onList, hiddenColumns: H.offList });
         },
         manualSort: o,
         maxDisplayedItems: t,
-        showIcons: b,
-        showCount: f,
-        showFilter: g,
-        showMoveAllLinks: v,
-        ...M("add-to-list")
+        showIcons: C,
+        showCount: b,
+        showFilter: f,
+        showMoveAllLinks: g,
+        ...k("add-to-list")
       }
     ),
-    /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement(j, null, /* @__PURE__ */ e.createElement(
       P,
       {
-        kind: T.DEFAULT,
+        kind: O.DEFAULT,
         onClick: () => {
-          k({ visibleColumns: a, hiddenColumns: i }), S();
+          S({ visibleColumns: a, hiddenColumns: i }), w();
         },
-        className: A({ mr: "sm" }),
-        ...M("cancel-button")
+        className: x({ mr: "sm" }),
+        ...k("cancel-button")
       },
-      u("design-system:columnManager.cancelButton")
+      v || u("design-system:columnManager.cancelButton")
     ), /* @__PURE__ */ e.createElement(
       P,
       {
-        kind: T.KEY,
+        kind: O.KEY,
         onClick: () => {
-          m == null || m(c.visibleColumns, c.hiddenColumns), S();
+          l == null || l(d.visibleColumns, d.hiddenColumns), w();
         },
-        ...M("save-button")
+        ...k("save-button")
       },
-      u("design-system:columnManager.saveButton")
+      n || u("design-system:columnManager.saveButton")
     ))
   ) : null;
 }
-O.set(y, {
+R.set(B, {
   name: "Column Manager",
   props: {
     isOpen: { type: "boolean", required: !0 },
@@ -100,36 +102,38 @@ O.set(y, {
     showCount: { type: "boolean" },
     showFilter: { type: "boolean" },
     showMoveAllLinks: { type: "boolean" },
+    cancelButtonText: { type: "string" },
+    saveButtonText: { type: "string" },
     onSave: { type: "(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void" },
     onClose: { type: "() => void" },
     onOpen: { type: "() => void" }
   }
 });
-const D = ({
+const W = ({
   isOpen: s,
-  visibleColumns: h,
-  hiddenColumns: C,
+  visibleColumns: p,
+  hiddenColumns: h,
   onClose: r,
   onOpen: a,
   onSave: i
 }) => {
   const [t, o] = e.useState({
     isOpen: !!s,
-    visibleColumns: h,
-    hiddenColumns: C
+    visibleColumns: p,
+    hiddenColumns: h
   });
   e.useEffect(() => {
     o((n) => ({ ...n, isOpen: !!s }));
   }, [s]);
-  const b = () => {
+  const C = () => {
     o((n) => ({ ...n, isOpen: !0 })), a == null || a();
-  }, f = () => {
+  }, b = () => {
     o((n) => ({ ...n, isOpen: !1 })), r == null || r();
-  }, g = (n, l) => {
+  }, f = (n, l) => {
     o({ isOpen: !1, visibleColumns: n, hiddenColumns: l }), i == null || i(n, l);
-  }, v = e.useCallback((n, l) => {
-    o((d) => ({ ...d, visibleColumns: n, hiddenColumns: l }));
-  }, []), m = e.useCallback((n) => {
+  }, g = e.useCallback((n, l) => {
+    o((m) => ({ ...m, visibleColumns: n, hiddenColumns: l }));
+  }, []), v = e.useCallback((n) => {
     o((l) => ({ ...l, isOpen: n }));
   }, []);
   return {
@@ -140,23 +144,23 @@ const D = ({
       visibleColumns: t.visibleColumns,
       hiddenColumns: t.hiddenColumns,
       isOpen: t.isOpen,
-      onClose: f,
-      onSave: g
+      onClose: b,
+      onSave: f
     },
     triggerProps: {
-      onClick: b
+      onClick: C
     },
-    setColumns: v,
-    setOpen: m
+    setColumns: g,
+    setOpen: v
   };
-}, q = {
-  components: [y],
+}, J = {
+  components: [B],
   examples: {
     basic: {
       label: "Basic Usage",
       examples: {
         basic: {
-          react: p`
+          react: c`
             import { ColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -221,7 +225,7 @@ const D = ({
       examples: {
         basic: {
           description: "Minimal API Reference",
-          react: p`
+          react: c`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -260,7 +264,7 @@ const D = ({
         },
         complete: {
           description: "Complete API Reference",
-          react: p`
+          react: c`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -320,7 +324,7 @@ const D = ({
       examples: {
         basic: {
           description: "This is the minimal visual interface for the ColumnManager component",
-          react: p`
+          react: c`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -365,11 +369,11 @@ const D = ({
       }
     }
   }
-}, G = {
-  "Column Manager": q
+}, Y = {
+  "Column Manager": J
 };
 export {
-  y as ColumnManager,
-  G as MANIFEST,
-  D as useColumnManager
+  B as ColumnManager,
+  Y as MANIFEST,
+  W as useColumnManager
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/column-manager",
   "description": "SPS Woodland Design System column manager component",
-  "version": "8.4.9",
+  "version": "8.5.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/column-manager",
@@ -26,11 +26,11 @@
     "@vanilla-extract/css-utils": "^0.1.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.4.9",
-    "@sps-woodland/add-to-list": "8.4.9",
-    "@sps-woodland/tokens": "8.4.9",
-    "@spscommerce/ds-react": "8.4.9",
-    "@spscommerce/ds-shared": "8.4.9"
+    "@sps-woodland/core": "8.5.0",
+    "@sps-woodland/add-to-list": "8.5.0",
+    "@sps-woodland/tokens": "8.5.0",
+    "@spscommerce/ds-react": "8.5.0",
+    "@spscommerce/ds-shared": "8.5.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -39,11 +39,11 @@
     "@vanilla-extract/css-utils": "^0.1.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.4.9",
-    "@sps-woodland/add-to-list": "8.4.9",
-    "@sps-woodland/tokens": "8.4.9",
-    "@spscommerce/ds-react": "8.4.9",
-    "@spscommerce/ds-shared": "8.4.9"
+    "@sps-woodland/core": "8.5.0",
+    "@sps-woodland/add-to-list": "8.5.0",
+    "@sps-woodland/tokens": "8.5.0",
+    "@spscommerce/ds-react": "8.5.0",
+    "@spscommerce/ds-shared": "8.5.0"
   },
   "dependencies": {
     "nanoid": "^3.3.4"