@sps-woodland/column-manager 7.11.3 → 7.12.0

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

@@ -8,6 +8,7 @@ export type ColumnmanagerProps = ComponentProps<{
     visibleColumns: ItemProps[];
     hiddenColumns: ItemProps[];
     manualSort?: boolean;
+    maxDisplayedItems?: number;
     showIcons?: boolean;
     showCount?: boolean;
     showFilter?: boolean;
@@ -16,4 +17,4 @@ export type ColumnmanagerProps = ComponentProps<{
     onClose?: () => void;
     onOpen?: () => void;
 }>;
-export declare function ColumnManager({ isOpen: isOpenProp, title, visibleColumnsHeader, hiddenColumnsHeader, visibleColumns, hiddenColumns, manualSort, showIcons, showCount, showFilter, showMoveAllLinks, onSave, onOpen, onClose, "data-testid": dataTestId, }: ColumnmanagerProps): JSX.Element | null;
+export declare function ColumnManager({ isOpen: isOpenProp, title, visibleColumnsHeader, hiddenColumnsHeader, visibleColumns, hiddenColumns, maxDisplayedItems, manualSort, showIcons, showCount, showFilter, showMoveAllLinks, onSave, onOpen, onClose, "data-testid": dataTestId, }: ColumnmanagerProps): 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 H=require("react"),P=require("@sps-woodland/core"),B=require("@sps-woodland/add-to-list"),R=require("@sps-woodland/tokens"),b=require("@spscommerce/ds-react"),g=require("@spscommerce/ds-shared"),f=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(H);function T({isOpen:n,title:r,visibleColumnsHeader:o,hiddenColumnsHeader:s,visibleColumns:u,hiddenColumns:d,manualSort:a=!0,showIcons:i=!0,showCount:v=!0,showFilter:E=!0,showMoveAllLinks:M=!0,onSave:m,onOpen:c,onClose:l,"data-testid":t}){const[p,O]=e.useState(!!n),{t:h}=e.useContext(P.I18nContext),k=P.useChildTestIdAttrBuilder({"data-testid":t}),[C,S]=e.useState({visibleColumns:u,hiddenColumns:d}),w=()=>{O(!1),l==null||l()};return e.useEffect(()=>{p&&(S({visibleColumns:u,hiddenColumns:d}),c==null||c())},[p]),e.useEffect(()=>{O(!!n)},[n]),p?e.createElement(b.SpsModal,{title:r||h("design-system:columnManager.title"),kind:g.ModalKind.GENERAL,size:g.ModalSize.LARGE,"data-testid":t,onClose:w},e.createElement(B.AddToList,{onHeader:o||h("design-system:columnManager.onListHeader"),offHeader:s||h("design-system:columnManager.offListHeader"),onList:C.visibleColumns,offList:C.hiddenColumns,onChange:y=>{S({visibleColumns:y.onList,hiddenColumns:y.offList})},manualSort:a,showIcons:i,showCount:v,showFilter:E,showMoveAllLinks:M,...k("add-to-list")}),e.createElement(b.SpsModalFooter,null,e.createElement(b.SpsButton,{kind:g.ButtonKind.DEFAULT,onClick:()=>{S({visibleColumns:u,hiddenColumns:d}),w()},className:R.sprinkles({mr:"sm"}),...k("cancel-button")},h("design-system:columnManager.cancelButton")),e.createElement(b.SpsButton,{kind:g.ButtonKind.KEY,onClick:()=>{m==null||m(C.visibleColumns,C.hiddenColumns),w()},...k("save-button")},h("design-system:columnManager.saveButton")))):null}P.Metadata.set(T,{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"},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 I=({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 v=()=>{i(l=>({...l,isOpen:!0})),u==null||u()},E=()=>{i(l=>({...l,isOpen:!1})),s==null||s()},M=(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}))},[]),c=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:E,onSave:M},triggerProps:{onClick:v},setColumns:m,setOpen:c}},L={components:[T],examples:{basic:{label:"Basic Usage",examples:{basic:{react:f.code`
+"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`
             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:f.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:g.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:f.code`
+          `},complete:{description:"Complete API Reference",react:g.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:f.code`
+          `}}},minimalInterface:{label:"Minimal Interface",examples:{basic:{description:"This is the minimal visual interface for the ColumnManager component",react:g.code`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -176,4 +176,4 @@
                   </div>
                 )
             }
-          `}}}}},q={"Column Manager":L};exports.ColumnManager=T;exports.MANIFEST=q;exports.useColumnManager=I;
+          `}}}}},j={"Column Manager":q};exports.ColumnManager=y;exports.MANIFEST=j;exports.useColumnManager=L;

package/lib/index.es.js

@@ -1,73 +1,75 @@
 import * as e from "react";
-import { Metadata as y, I18nContext as O, useChildTestIdAttrBuilder as B } from "@sps-woodland/core";
-import { AddToList as R } from "@sps-woodland/add-to-list";
+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 I, SpsModalFooter as L, SpsButton as H } from "@spscommerce/ds-react";
-import { ModalKind as x, ModalSize as F, ButtonKind as P } from "@spscommerce/ds-shared";
-import { code as h } from "@spscommerce/utils";
-function T({
+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({
   isOpen: s,
-  title: C,
-  visibleColumnsHeader: b,
+  title: h,
+  visibleColumnsHeader: C,
   hiddenColumnsHeader: r,
   visibleColumns: a,
   hiddenColumns: i,
-  manualSort: t = !0,
-  showIcons: o = !0,
+  maxDisplayedItems: t,
+  manualSort: o = !0,
+  showIcons: b = !0,
   showCount: f = !0,
   showFilter: g = !0,
   showMoveAllLinks: v = !0,
   onSave: m,
-  onOpen: u,
-  onClose: n,
-  "data-testid": l
+  onOpen: n,
+  onClose: l,
+  "data-testid": d
 }) {
-  const [d, S] = e.useState(!!s), { t: c } = e.useContext(O), E = B({ "data-testid": l }), [p, M] = e.useState({
+  const [E, w] = e.useState(!!s), { t: u } = e.useContext(B), M = R({ "data-testid": d }), [c, k] = e.useState({
     visibleColumns: a,
     hiddenColumns: i
-  }), k = () => {
-    S(!1), n == null || n();
+  }), S = () => {
+    w(!1), l == null || l();
   };
   return e.useEffect(() => {
-    d && (M({ visibleColumns: a, hiddenColumns: i }), u == null || u());
-  }, [d]), e.useEffect(() => {
-    S(!!s);
-  }, [s]), d ? /* @__PURE__ */ e.createElement(I, {
-    title: C || c("design-system:columnManager.title"),
-    kind: x.GENERAL,
-    size: F.LARGE,
-    "data-testid": l,
-    onClose: k
-  }, /* @__PURE__ */ e.createElement(R, {
-    onHeader: b || c("design-system:columnManager.onListHeader"),
-    offHeader: r || c("design-system:columnManager.offListHeader"),
-    onList: p.visibleColumns,
-    offList: p.hiddenColumns,
-    onChange: (w) => {
-      M({ visibleColumns: w.onList, hiddenColumns: w.offList });
+    E && (k({ visibleColumns: a, hiddenColumns: i }), n == null || n());
+  }, [E]), e.useEffect(() => {
+    w(!!s);
+  }, [s]), E ? /* @__PURE__ */ e.createElement(L, {
+    title: h || u("design-system:columnManager.title"),
+    kind: F.GENERAL,
+    size: j.LARGE,
+    "data-testid": d,
+    onClose: S
+  }, /* @__PURE__ */ e.createElement(I, {
+    onHeader: C || u("design-system:columnManager.onListHeader"),
+    offHeader: r || u("design-system:columnManager.offListHeader"),
+    onList: c.visibleColumns,
+    offList: c.hiddenColumns,
+    onChange: (H) => {
+      k({ visibleColumns: H.onList, hiddenColumns: H.offList });
     },
-    manualSort: t,
-    showIcons: o,
+    manualSort: o,
+    maxDisplayedItems: t,
+    showIcons: b,
     showCount: f,
     showFilter: g,
     showMoveAllLinks: v,
-    ...E("add-to-list")
-  }), /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(H, {
-    kind: P.DEFAULT,
+    ...M("add-to-list")
+  }), /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(P, {
+    kind: T.DEFAULT,
     onClick: () => {
-      M({ visibleColumns: a, hiddenColumns: i }), k();
+      k({ visibleColumns: a, hiddenColumns: i }), S();
     },
     className: A({ mr: "sm" }),
-    ...E("cancel-button")
-  }, c("design-system:columnManager.cancelButton")), /* @__PURE__ */ e.createElement(H, {
-    kind: P.KEY,
+    ...M("cancel-button")
+  }, u("design-system:columnManager.cancelButton")), /* @__PURE__ */ e.createElement(P, {
+    kind: T.KEY,
     onClick: () => {
-      m == null || m(p.visibleColumns, p.hiddenColumns), k();
+      m == null || m(c.visibleColumns, c.hiddenColumns), S();
     },
-    ...E("save-button")
-  }, c("design-system:columnManager.saveButton")))) : null;
+    ...M("save-button")
+  }, u("design-system:columnManager.saveButton")))) : null;
 }
-y.set(T, {
+O.set(y, {
   name: "Column Manager",
   props: {
     isOpen: { type: "boolean", required: !0 },
@@ -77,6 +79,7 @@ y.set(T, {
     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" },
@@ -86,31 +89,31 @@ y.set(T, {
     onOpen: { type: "() => void" }
   }
 });
-const z = ({
+const D = ({
   isOpen: s,
-  visibleColumns: C,
-  hiddenColumns: b,
+  visibleColumns: h,
+  hiddenColumns: C,
   onClose: r,
   onOpen: a,
   onSave: i
 }) => {
   const [t, o] = e.useState({
     isOpen: !!s,
-    visibleColumns: C,
-    hiddenColumns: b
+    visibleColumns: h,
+    hiddenColumns: C
   });
   e.useEffect(() => {
     o((n) => ({ ...n, isOpen: !!s }));
   }, [s]);
-  const f = () => {
+  const b = () => {
     o((n) => ({ ...n, isOpen: !0 })), a == null || a();
-  }, g = () => {
+  }, f = () => {
     o((n) => ({ ...n, isOpen: !1 })), r == null || r();
-  }, v = (n, l) => {
+  }, g = (n, l) => {
     o({ isOpen: !1, visibleColumns: n, hiddenColumns: l }), i == null || i(n, l);
-  }, m = e.useCallback((n, l) => {
+  }, v = e.useCallback((n, l) => {
     o((d) => ({ ...d, visibleColumns: n, hiddenColumns: l }));
-  }, []), u = e.useCallback((n) => {
+  }, []), m = e.useCallback((n) => {
     o((l) => ({ ...l, isOpen: n }));
   }, []);
   return {
@@ -121,23 +124,23 @@ const z = ({
       visibleColumns: t.visibleColumns,
       hiddenColumns: t.hiddenColumns,
       isOpen: t.isOpen,
-      onClose: g,
-      onSave: v
+      onClose: f,
+      onSave: g
     },
     triggerProps: {
-      onClick: f
+      onClick: b
     },
-    setColumns: m,
-    setOpen: u
+    setColumns: v,
+    setOpen: m
   };
-}, j = {
-  components: [T],
+}, q = {
+  components: [y],
   examples: {
     basic: {
       label: "Basic Usage",
       examples: {
         basic: {
-          react: h`
+          react: p`
             import { ColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -202,7 +205,7 @@ const z = ({
       examples: {
         basic: {
           description: "Minimal API Reference",
-          react: h`
+          react: p`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -241,7 +244,7 @@ const z = ({
         },
         complete: {
           description: "Complete API Reference",
-          react: h`
+          react: p`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -301,7 +304,7 @@ const z = ({
       examples: {
         basic: {
           description: "This is the minimal visual interface for the ColumnManager component",
-          react: h`
+          react: p`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -347,10 +350,10 @@ const z = ({
     }
   }
 }, G = {
-  "Column Manager": j
+  "Column Manager": q
 };
 export {
-  T as ColumnManager,
+  y as ColumnManager,
   G as MANIFEST,
-  z as useColumnManager
+  D as useColumnManager
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/column-manager",
   "description": "SPS Woodland Design System column manager component",
-  "version": "7.11.3",
+  "version": "7.12.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/column-manager",
@@ -21,26 +21,26 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@sps-woodland/core": "7.11.3",
-    "@sps-woodland/add-to-list": "7.11.3",
-    "@sps-woodland/tokens": "7.11.3",
+    "@sps-woodland/core": "7.12.0",
+    "@sps-woodland/add-to-list": "7.12.0",
+    "@sps-woodland/tokens": "7.12.0",
     "@spscommerce/utils": "^6.12.1",
     "@vanilla-extract/css-utils": "^0.1.3",
-    "@spscommerce/ds-react": "7.11.3",
-    "@spscommerce/ds-shared": "7.11.3",
+    "@spscommerce/ds-react": "7.12.0",
+    "@spscommerce/ds-shared": "7.12.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
   "devDependencies": {
-    "@sps-woodland/core": "7.11.3",
-    "@sps-woodland/add-to-list": "7.11.3",
-    "@sps-woodland/tokens": "7.11.3",
+    "@sps-woodland/core": "7.12.0",
+    "@sps-woodland/add-to-list": "7.12.0",
+    "@sps-woodland/tokens": "7.12.0",
     "@spscommerce/utils": "^6.12.1",
     "@vanilla-extract/css": "^1.9.1",
     "@vanilla-extract/recipes": "^0.2.5",
     "@vanilla-extract/css-utils": "^0.1.3",
-    "@spscommerce/ds-react": "7.11.3",
-    "@spscommerce/ds-shared": "7.11.3",
+    "@spscommerce/ds-react": "7.12.0",
+    "@spscommerce/ds-shared": "7.12.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },