@sps-woodland/column-manager 7.5.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/column-manager](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/column-manager#readme)
+
+SPS Woodland Design System Column Manager

package/lib/ColumnManager.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const ColumnManagerExamples: ComponentManifestEntry;

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import type { ItemProps } from "@sps-woodland/add-to-list";
+export type ColumnmanagerProps = ComponentProps<{
+    isOpen?: boolean;
+    title?: string;
+    visibleColumnsHeader?: string;
+    hiddenColumnsHeader?: string;
+    visibleColumns: ItemProps[];
+    hiddenColumns: ItemProps[];
+    manualSort?: boolean;
+    showIcons?: boolean;
+    showCount?: boolean;
+    showFilter?: boolean;
+    showMoveAllLinks?: boolean;
+    onSave?: (visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void;
+    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;

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

@@ -0,0 +1,26 @@
+import type { ItemProps } from "@sps-woodland/add-to-list";
+export interface UseColumnManagerArgs {
+    visibleColumns: ItemProps[];
+    hiddenColumns: ItemProps[];
+    isOpen?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onSave?: (visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void;
+}
+export declare const useColumnManager: ({ isOpen: isOpenArg, visibleColumns, hiddenColumns, onClose, onOpen, onSave, }: UseColumnManagerArgs) => {
+    visibleColumns: ItemProps[];
+    hiddenColumns: ItemProps[];
+    isOpen: boolean;
+    columnManagerProps: {
+        visibleColumns: ItemProps[];
+        hiddenColumns: ItemProps[];
+        isOpen: boolean;
+        onClose: () => void;
+        onSave: (visible: ItemProps[], hidden: ItemProps[]) => void;
+    };
+    triggerProps: {
+        onClick: () => void;
+    };
+    setColumns: (visible: ItemProps[], hidden: ItemProps[]) => void;
+    setOpen: (open: boolean) => void;
+};

package/lib/index.cjs.js

@@ -0,0 +1,179 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=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(T);function O({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,y]=e.useState(!!n),{t:h}=e.useContext(P.I18nContext),k=P.useChildTestIdAttrBuilder({"data-testid":t}),[C,S]=e.useState({visibleColumns:u,hiddenColumns:d}),w=()=>{y(!1),l==null||l()};return e.useEffect(()=>{p&&(S({visibleColumns:u,hiddenColumns:d}),c==null||c())},[p]),e.useEffect(()=>{y(!!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:H=>{S({visibleColumns:H.onList,hiddenColumns:H.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(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"},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:[O],examples:{basic:{label:"Basic Usage",examples:{basic:{react:f.code`
+            import { ColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const [isOpen, setIsOpen] = React.useState(false);
+                const [visibleColumns, setVisibleColumns] = React.useState([
+                  {id: 1, label: "Phantom Menace"},
+                  {id: 2, label: "Attack of the Clones"},
+                  {id: 3, label: "Revenge of the Sith"},
+                  {id: 4, label: "A New Hope", required: true},
+                  {id: 5, label: "The Empire Strikes Back"},
+                  {id: 6, label: "Return of the Jedi"},
+                  {id: 7, label: "The Force Awakens"}
+                ]);
+                const [hiddenColumns, setHiddenColumns] = React.useState([
+                  {id: 8, label: "The Last Jedi"},
+                  {id: 9, label: "The Rise of Skywalker"}
+                ]);
+
+                function handleSave(visible, hidden) {
+                  setVisibleColumns(visible);
+                  setHiddenColumns(hidden);
+                  setIsOpen(false);
+                }
+
+                function handleClose() {
+                  setIsOpen(false);
+                }
+
+                function handleOpen() {
+                  setIsOpen(true);
+                }
+
+                return (
+                  <div>
+                    <SpsButton onClick={handleOpen}>Open Column Manager</SpsButton>
+                    <ColumnManager
+                        isOpen={isOpen}
+                        visibleColumns={visibleColumns}
+                        hiddenColumns={hiddenColumns}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                        onSave={handleSave}
+                        onClose={handleClose}
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </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`
+            import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
+                  visibleColumns: [
+                    {id: 1, label: "Phantom Menace"},
+                    {id: 2, label: "Attack of the Clones"},
+                    {id: 3, label: "Revenge of the Sith"},
+                    {id: 4, label: "A New Hope", required: true},
+                    {id: 5, label: "The Empire Strikes Back"},
+                    {id: 6, label: "Return of the Jedi"},
+                    {id: 7, label: "The Force Awakens"}
+                  ],
+                  hiddenColumns: [
+                    {id: 8, label: "The Last Jedi"},
+                    {id: 9, label: "The Rise of Skywalker"}
+                  ]
+                })
+
+                return (
+                  <div>
+                    <SpsButton {...triggerProps}>Open Column Manager</SpsButton>
+                    <ColumnManager
+                        {...columnManagerProps}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </div>
+                )
+            }
+          `},complete:{description:"Complete API Reference",react:f.code`
+            import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const initialVisibleColumns = [
+                  {id: 1, label: "Phantom Menace"},
+                  {id: 2, label: "Attack of the Clones"},
+                  {id: 3, label: "Revenge of the Sith"},
+                  {id: 4, label: "A New Hope", required: true},
+                  {id: 5, label: "The Empire Strikes Back"},
+                  {id: 6, label: "Return of the Jedi"},
+                  {id: 7, label: "The Force Awakens"}
+                ];
+                const initialHiddenColumns = [
+                  {id: 8, label: "The Last Jedi"},
+                  {id: 9, label: "The Rise of Skywalker"}
+                ]
+                const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps, setColumns } = useColumnManager({
+                  // this allows controlling the open state externally and providing an initial state
+                  isOpen: false,
+                  visibleColumns: initialVisibleColumns,
+                  hiddenColumns: initialHiddenColumns,
+                  // a callback when the column manager opens
+                  onOpen: () => { console.log("onOpen called"); },
+                  // a callback when the column manager closes
+                  onClose: () => { console.log("onClose called"); },
+                  // a callback when the user saves the columns
+                  onSave: (visible, hidden) => { console.log("onSave called", visible, hidden); },
+                });
+
+                // this allows resetting the columns to the initial state
+                const handleReset = () => {
+                  setColumns(initialVisibleColumns, initialHiddenColumns);
+                }
+
+                return (
+                  <div>
+                    <SpsButton {...triggerProps} className={sprinkles({ mr: "sm" })}>Open Column Manager</SpsButton>
+                    <SpsButton onClick={handleReset}>Reset Columns</SpsButton>
+                    <ColumnManager
+                        {...columnManagerProps}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </div>
+                )
+            }
+          `}}},minimalInterface:{label:"Minimal Interface",examples:{basic:{description:"This is the minimal visual interface for the ColumnManager component",react:f.code`
+            import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
+                  visibleColumns: [
+                    {id: 1, label: "Phantom Menace"},
+                    {id: 2, label: "Attack of the Clones"},
+                    {id: 3, label: "Revenge of the Sith"},
+                    {id: 4, label: "A New Hope", required: true},
+                    {id: 5, label: "The Empire Strikes Back"},
+                    {id: 6, label: "Return of the Jedi"},
+                    {id: 7, label: "The Force Awakens"}
+                  ],
+                  hiddenColumns: [
+                    {id: 8, label: "The Last Jedi"},
+                    {id: 9, label: "The Rise of Skywalker"}
+                  ]
+                })
+
+                return (
+                  <div>
+                    <SpsButton {...triggerProps}>Open Column Manager</SpsButton>
+                    <ColumnManager
+                        {...columnManagerProps}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                        showMoveAllLinks={false}
+                        showFilter={false}
+                        showCount={false}
+                        showIcons={false}
+                        manualSort={false}
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </div>
+                )
+            }
+          `}}}}},q={"Column Manager":L};exports.ColumnManager=O;exports.MANIFEST=q;exports.useColumnManager=I;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./column-manager/ColumnManager";
+export * from "./column-manager/useColumnManager";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,356 @@
+import * as e from "react";
+import { Metadata as O, I18nContext as T, useChildTestIdAttrBuilder as B } from "@sps-woodland/core";
+import { AddToList as R } 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 y({
+  isOpen: s,
+  title: C,
+  visibleColumnsHeader: b,
+  hiddenColumnsHeader: r,
+  visibleColumns: a,
+  hiddenColumns: i,
+  manualSort: t = !0,
+  showIcons: o = !0,
+  showCount: f = !0,
+  showFilter: g = !0,
+  showMoveAllLinks: v = !0,
+  onSave: m,
+  onOpen: u,
+  onClose: n,
+  "data-testid": l
+}) {
+  const [d, S] = e.useState(!!s), { t: c } = e.useContext(T), E = B({ "data-testid": l }), [p, M] = e.useState({
+    visibleColumns: a,
+    hiddenColumns: i
+  }), k = () => {
+    S(!1), n == null || n();
+  };
+  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 });
+    },
+    manualSort: t,
+    showIcons: o,
+    showCount: f,
+    showFilter: g,
+    showMoveAllLinks: v,
+    ...E("add-to-list")
+  }), /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(H, {
+    kind: P.DEFAULT,
+    onClick: () => {
+      M({ visibleColumns: a, hiddenColumns: i }), k();
+    },
+    className: A({ mr: "sm" }),
+    ...E("cancel-button")
+  }, c("design-system:columnManager.cancelButton")), /* @__PURE__ */ e.createElement(H, {
+    kind: P.KEY,
+    onClick: () => {
+      m == null || m(p.visibleColumns, p.hiddenColumns), k();
+    },
+    ...E("save-button")
+  }, c("design-system:columnManager.saveButton")))) : null;
+}
+O.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" },
+    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 z = ({
+  isOpen: s,
+  visibleColumns: C,
+  hiddenColumns: b,
+  onClose: r,
+  onOpen: a,
+  onSave: i
+}) => {
+  const [t, o] = e.useState({
+    isOpen: !!s,
+    visibleColumns: C,
+    hiddenColumns: b
+  });
+  e.useEffect(() => {
+    o((n) => ({ ...n, isOpen: !!s }));
+  }, [s]);
+  const f = () => {
+    o((n) => ({ ...n, isOpen: !0 })), a == null || a();
+  }, g = () => {
+    o((n) => ({ ...n, isOpen: !1 })), r == null || r();
+  }, v = (n, l) => {
+    o({ isOpen: !1, visibleColumns: n, hiddenColumns: l }), i == null || i(n, l);
+  }, m = e.useCallback((n, l) => {
+    o((d) => ({ ...d, visibleColumns: n, hiddenColumns: l }));
+  }, []), u = e.useCallback((n) => {
+    o((l) => ({ ...l, isOpen: n }));
+  }, []);
+  return {
+    visibleColumns: t.visibleColumns,
+    hiddenColumns: t.hiddenColumns,
+    isOpen: t.isOpen,
+    columnManagerProps: {
+      visibleColumns: t.visibleColumns,
+      hiddenColumns: t.hiddenColumns,
+      isOpen: t.isOpen,
+      onClose: g,
+      onSave: v
+    },
+    triggerProps: {
+      onClick: f
+    },
+    setColumns: m,
+    setOpen: u
+  };
+}, j = {
+  components: [y],
+  examples: {
+    basic: {
+      label: "Basic Usage",
+      examples: {
+        basic: {
+          react: h`
+            import { ColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const [isOpen, setIsOpen] = React.useState(false);
+                const [visibleColumns, setVisibleColumns] = React.useState([
+                  {id: 1, label: "Phantom Menace"},
+                  {id: 2, label: "Attack of the Clones"},
+                  {id: 3, label: "Revenge of the Sith"},
+                  {id: 4, label: "A New Hope", required: true},
+                  {id: 5, label: "The Empire Strikes Back"},
+                  {id: 6, label: "Return of the Jedi"},
+                  {id: 7, label: "The Force Awakens"}
+                ]);
+                const [hiddenColumns, setHiddenColumns] = React.useState([
+                  {id: 8, label: "The Last Jedi"},
+                  {id: 9, label: "The Rise of Skywalker"}
+                ]);
+
+                function handleSave(visible, hidden) {
+                  setVisibleColumns(visible);
+                  setHiddenColumns(hidden);
+                  setIsOpen(false);
+                }
+
+                function handleClose() {
+                  setIsOpen(false);
+                }
+
+                function handleOpen() {
+                  setIsOpen(true);
+                }
+
+                return (
+                  <div>
+                    <SpsButton onClick={handleOpen}>Open Column Manager</SpsButton>
+                    <ColumnManager
+                        isOpen={isOpen}
+                        visibleColumns={visibleColumns}
+                        hiddenColumns={hiddenColumns}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                        onSave={handleSave}
+                        onClose={handleClose}
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </div>
+                )
+            }
+          `
+        }
+      }
+    },
+    hooks: {
+      label: "useColumnManager hook",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Arguments"), /* @__PURE__ */ e.createElement("p", null, "The column manager comes with a ", /* @__PURE__ */ e.createElement("code", null, "useColumnManager"), " hook that implements the default behavior. Arguments for this hook include:"), /* @__PURE__ */ e.createElement("dl", null, /* @__PURE__ */ e.createElement("dt", null, /* @__PURE__ */ e.createElement("code", null, "visibleColumns"), ": ItemProps[] (required)"), /* @__PURE__ */ e.createElement("dd", null, "The initial visible columns state"), /* @__PURE__ */ e.createElement("dt", null, /* @__PURE__ */ e.createElement("code", null, "hiddenColumns"), ": ItemProps[] (required)"), /* @__PURE__ */ e.createElement("dd", null, "The initial hidden columns state"), /* @__PURE__ */ e.createElement("dt", null, /* @__PURE__ */ e.createElement("code", null, "isOpen"), ": boolean (optional)"), /* @__PURE__ */ e.createElement("dd", null, "Whether the column manager is open by default"), /* @__PURE__ */ e.createElement("dt", null, /* @__PURE__ */ e.createElement("code", null, "onOpen"), ": function (optional)"), /* @__PURE__ */ e.createElement("dd", null, "Handler that is called when the column manager opens", /* @__PURE__ */ e.createElement("code", null, "() => void")), /* @__PURE__ */ e.createElement("dt", null, /* @__PURE__ */ e.createElement("code", null, "onClose"), ": function (optional)"), /* @__PURE__ */ e.createElement("dd", null, "Handler that is called when the column manager closes", /* @__PURE__ */ e.createElement("code", null, "() => void")), /* @__PURE__ */ e.createElement("dt", null, /* @__PURE__ */ e.createElement("code", null, "onSave"), ": function (optional)"), /* @__PURE__ */ e.createElement("dd", null, "Handler that is called when the column manager saves", /* @__PURE__ */ e.createElement("code", null, "(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"))), /* @__PURE__ */ e.createElement("h5", null, "Return value"), /* @__PURE__ */ e.createElement("p", null, "The ", /* @__PURE__ */ e.createElement("code", null, "useColumnManager"), " hook returns an object with", " ", /* @__PURE__ */ e.createElement("code", null, "visibleColumns"), ", ", /* @__PURE__ */ e.createElement("code", null, "hiddenColumns"), ", ", /* @__PURE__ */ e.createElement("code", null, "columnManagerProps"), ", ", /* @__PURE__ */ e.createElement("code", null, "triggerProps"), " ,", /* @__PURE__ */ e.createElement("code", null, "setColumns"), " and ", /* @__PURE__ */ e.createElement("code", null, "setOpen")), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "triggerProps"), ": needs to be spread on the element that triggers the modal."), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "columnManagerProps"), ": needs to be spread on the ", /* @__PURE__ */ e.createElement("code", null, "ColumnManager"), " ", "component"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "visibleColumns"), ": the current state of the visible columns"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "hiddenColumns"), ": the current state of the hidden columns"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ 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."), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "setOpen"), ": function that allows programmatically setting the current isOpen state. This function is safe to use in effects."), /* @__PURE__ */ e.createElement("p", null, "Please refer to the examples to see its implementation"))
+    },
+    hooksExamples: {
+      label: "Hook Usage",
+      examples: {
+        basic: {
+          description: "Minimal API Reference",
+          react: h`
+            import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
+                  visibleColumns: [
+                    {id: 1, label: "Phantom Menace"},
+                    {id: 2, label: "Attack of the Clones"},
+                    {id: 3, label: "Revenge of the Sith"},
+                    {id: 4, label: "A New Hope", required: true},
+                    {id: 5, label: "The Empire Strikes Back"},
+                    {id: 6, label: "Return of the Jedi"},
+                    {id: 7, label: "The Force Awakens"}
+                  ],
+                  hiddenColumns: [
+                    {id: 8, label: "The Last Jedi"},
+                    {id: 9, label: "The Rise of Skywalker"}
+                  ]
+                })
+
+                return (
+                  <div>
+                    <SpsButton {...triggerProps}>Open Column Manager</SpsButton>
+                    <ColumnManager
+                        {...columnManagerProps}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </div>
+                )
+            }
+          `
+        },
+        complete: {
+          description: "Complete API Reference",
+          react: h`
+            import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const initialVisibleColumns = [
+                  {id: 1, label: "Phantom Menace"},
+                  {id: 2, label: "Attack of the Clones"},
+                  {id: 3, label: "Revenge of the Sith"},
+                  {id: 4, label: "A New Hope", required: true},
+                  {id: 5, label: "The Empire Strikes Back"},
+                  {id: 6, label: "Return of the Jedi"},
+                  {id: 7, label: "The Force Awakens"}
+                ];
+                const initialHiddenColumns = [
+                  {id: 8, label: "The Last Jedi"},
+                  {id: 9, label: "The Rise of Skywalker"}
+                ]
+                const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps, setColumns } = useColumnManager({
+                  // this allows controlling the open state externally and providing an initial state
+                  isOpen: false,
+                  visibleColumns: initialVisibleColumns,
+                  hiddenColumns: initialHiddenColumns,
+                  // a callback when the column manager opens
+                  onOpen: () => { console.log("onOpen called"); },
+                  // a callback when the column manager closes
+                  onClose: () => { console.log("onClose called"); },
+                  // a callback when the user saves the columns
+                  onSave: (visible, hidden) => { console.log("onSave called", visible, hidden); },
+                });
+
+                // this allows resetting the columns to the initial state
+                const handleReset = () => {
+                  setColumns(initialVisibleColumns, initialHiddenColumns);
+                }
+
+                return (
+                  <div>
+                    <SpsButton {...triggerProps} className={sprinkles({ mr: "sm" })}>Open Column Manager</SpsButton>
+                    <SpsButton onClick={handleReset}>Reset Columns</SpsButton>
+                    <ColumnManager
+                        {...columnManagerProps}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </div>
+                )
+            }
+          `
+        }
+      }
+    },
+    minimalInterface: {
+      label: "Minimal Interface",
+      examples: {
+        basic: {
+          description: "This is the minimal visual interface for the ColumnManager component",
+          react: h`
+            import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+                const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
+                  visibleColumns: [
+                    {id: 1, label: "Phantom Menace"},
+                    {id: 2, label: "Attack of the Clones"},
+                    {id: 3, label: "Revenge of the Sith"},
+                    {id: 4, label: "A New Hope", required: true},
+                    {id: 5, label: "The Empire Strikes Back"},
+                    {id: 6, label: "Return of the Jedi"},
+                    {id: 7, label: "The Force Awakens"}
+                  ],
+                  hiddenColumns: [
+                    {id: 8, label: "The Last Jedi"},
+                    {id: 9, label: "The Rise of Skywalker"}
+                  ]
+                })
+
+                return (
+                  <div>
+                    <SpsButton {...triggerProps}>Open Column Manager</SpsButton>
+                    <ColumnManager
+                        {...columnManagerProps}
+                        onHeader="Visible Columns" 
+                        offHeader="Hidden Columns"
+                        showMoveAllLinks={false}
+                        showFilter={false}
+                        showCount={false}
+                        showIcons={false}
+                        manualSort={false}
+                    />
+                    <br/>
+                    <div>visibleColumns: {visibleColumns.map(col => col.label).join(", ")}</div>
+                    <div>hiddenColumns: {hiddenColumns.map(col => col.label).join(", ")}</div>
+                  </div>
+                )
+            }
+          `
+        }
+      }
+    }
+  }
+}, G = {
+  "Column Manager": j
+};
+export {
+  y as ColumnManager,
+  G as MANIFEST,
+  z as useColumnManager
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sps-woodland/column-manager",
+  "description": "SPS Woodland Design System column manager component",
+  "version": "7.5.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/column-manager",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/column-manager#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@sps-woodland/core": "7.5.0",
+    "@sps-woodland/add-to-list": "7.5.0",
+    "@sps-woodland/tokens": "7.5.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@spscommerce/ds-react": "7.5.0",
+    "@spscommerce/ds-shared": "7.5.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@sps-woodland/core": "7.5.0",
+    "@sps-woodland/add-to-list": "7.5.0",
+    "@sps-woodland/tokens": "7.5.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.5.0",
+    "@spscommerce/ds-shared": "7.5.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "dependencies": {
+    "nanoid": "^3.3.4"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});