@sps-woodland/column-manager 8.51.3 → 8.52.1

package/README.md

@@ -1,22 +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
-
-### Imports
-
-Prefer the mono-package subpath (single shared peer-dep declaration, deterministic tree-shaking):
-
-```ts
-import { ColumnManager, useColumnManager } from "@sps-woodland/core/column-manager";
-```
-
-`ColumnManager` styles come from `@sps-woodland/tokens` sprinkles — there is no separate
-`column-manager/style.css` to import. Make sure your app already loads `@sps-woodland/tokens`
-CSS, and you are set.
-
-The legacy wrapper import still works during the transition (it re-exports from
-`@sps-woodland/core/column-manager`):
-
-```ts
-import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
-```

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

@@ -0,0 +1,22 @@
+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;
+    maxDisplayedItems?: number;
+    showIcons?: boolean;
+    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, cancelButtonText, saveButtonText, 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.d.ts

@@ -1,2 +1,3 @@
-export * from "@sps-woodland/core/column-manager";
+export * from "./column-manager/ColumnManager";
+export * from "./column-manager/useColumnManager";
 export * from "./manifest";

package/lib/index.js

@@ -1,15 +1,167 @@
-import { ColumnManager as n } from "@sps-woodland/core/column-manager";
-export * from "@sps-woodland/core/column-manager";
 import * as e from "react";
-import { code as l } from "@spscommerce/utils";
-const o = {
-  components: [n],
+import { Metadata as R, useChildTestIdAttrBuilder as A } from "@sps-woodland/core";
+import { AddToList as I } from "@sps-woodland/add-to-list";
+import { sprinkles as L } from "@sps-woodland/tokens";
+import { SpsModal as V, SpsModalFooter as x, SpsButton as H } from "@spscommerce/ds-react";
+import { ModalSize as F, ModalKind as j, ButtonKind as P } from "@spscommerce/ds-shared";
+import { useWoodlandLanguage as q } from "@spscommerce/i18n";
+import { code as m } from "@spscommerce/utils";
+function y({
+  isOpen: a,
+  title: d,
+  visibleColumnsHeader: c,
+  hiddenColumnsHeader: p,
+  visibleColumns: s,
+  hiddenColumns: i,
+  maxDisplayedItems: l,
+  manualSort: t = !0,
+  showIcons: h = !0,
+  showCount: C = !0,
+  showFilter: b = !0,
+  showMoveAllLinks: f = !0,
+  cancelButtonText: g,
+  saveButtonText: n,
+  onSave: o,
+  onOpen: v,
+  onClose: B,
+  "data-testid": w
+}) {
+  const [E, O] = e.useState(!!a), { t: r } = q(), M = A({ "data-testid": w }), [u, S] = e.useState({
+    visibleColumns: s,
+    hiddenColumns: i
+  }), k = () => {
+    O(!1), B?.();
+  };
+  return e.useEffect(() => {
+    E && (S({ visibleColumns: s, hiddenColumns: i }), v?.());
+  }, [E]), e.useEffect(() => {
+    O(!!a);
+  }, [a]), E ? /* @__PURE__ */ e.createElement(
+    V,
+    {
+      title: d || r("columnManager.title", { defaultValue: "Manage Table Columns" }),
+      kind: j.GENERAL,
+      size: F.LARGE,
+      "data-testid": w,
+      onClose: k
+    },
+    /* @__PURE__ */ e.createElement(
+      I,
+      {
+        onHeader: c || r("columnManager.onListHeader", { defaultValue: "Visible Columns" }),
+        offHeader: p || r("columnManager.offListHeader", { defaultValue: "Hidden Columns" }),
+        onList: u.visibleColumns,
+        offList: u.hiddenColumns,
+        onChange: (T) => {
+          S({ visibleColumns: T.onList, hiddenColumns: T.offList });
+        },
+        manualSort: t,
+        maxDisplayedItems: l,
+        showIcons: h,
+        showCount: C,
+        showFilter: b,
+        showMoveAllLinks: f,
+        ...M("add-to-list")
+      }
+    ),
+    /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(
+      H,
+      {
+        kind: P.DEFAULT,
+        onClick: () => {
+          S({ visibleColumns: s, hiddenColumns: i }), k();
+        },
+        className: L({ mr: "sm" }),
+        ...M("cancel-button")
+      },
+      g || r("columnManager.cancelButton", { defaultValue: "Cancel" })
+    ), /* @__PURE__ */ e.createElement(
+      H,
+      {
+        kind: P.KEY,
+        onClick: () => {
+          o?.(u.visibleColumns, u.hiddenColumns), k();
+        },
+        ...M("save-button")
+      },
+      n || r("columnManager.saveButton", { defaultValue: "Save" })
+    ))
+  ) : null;
+}
+R.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" },
+    cancelButtonText: { type: "string" },
+    saveButtonText: { type: "string" },
+    onSave: { type: "(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void" },
+    onClose: { type: "() => void" },
+    onOpen: { type: "() => void" }
+  }
+});
+const Y = ({
+  isOpen: a,
+  visibleColumns: d,
+  hiddenColumns: c,
+  onClose: p,
+  onOpen: s,
+  onSave: i
+}) => {
+  const [l, t] = e.useState({
+    isOpen: !!a,
+    visibleColumns: d,
+    hiddenColumns: c
+  });
+  e.useEffect(() => {
+    t((n) => ({ ...n, isOpen: !!a }));
+  }, [a]);
+  const h = () => {
+    t((n) => ({ ...n, isOpen: !0 })), s?.();
+  }, C = () => {
+    t((n) => ({ ...n, isOpen: !1 })), p?.();
+  }, b = (n, o) => {
+    t({ isOpen: !1, visibleColumns: n, hiddenColumns: o }), i?.(n, o);
+  }, f = e.useCallback((n, o) => {
+    t((v) => ({ ...v, visibleColumns: n, hiddenColumns: o }));
+  }, []), g = e.useCallback((n) => {
+    t((o) => ({ ...o, isOpen: n }));
+  }, []);
+  return {
+    visibleColumns: l.visibleColumns,
+    hiddenColumns: l.hiddenColumns,
+    isOpen: l.isOpen,
+    columnManagerProps: {
+      visibleColumns: l.visibleColumns,
+      hiddenColumns: l.hiddenColumns,
+      isOpen: l.isOpen,
+      onClose: C,
+      onSave: b
+    },
+    triggerProps: {
+      onClick: h
+    },
+    setColumns: f,
+    setOpen: g
+  };
+}, J = {
+  components: [y],
   examples: {
     basic: {
       label: "Basic Usage",
       examples: {
         basic: {
-          react: l`
+          react: m`
             import { ColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -74,7 +226,7 @@ const o = {
       examples: {
         basic: {
           description: "Minimal API Reference",
-          react: l`
+          react: m`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -113,7 +265,7 @@ const o = {
         },
         complete: {
           description: "Complete API Reference",
-          react: l`
+          react: m`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -173,7 +325,7 @@ const o = {
       examples: {
         basic: {
           description: "This is the minimal visual interface for the ColumnManager component",
-          react: l`
+          react: m`
             import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
             import { SpsButton } from "@spscommerce/ds-react";
 
@@ -218,9 +370,11 @@ const o = {
       }
     }
   }
-}, i = {
-  "Column Manager": o
+}, Q = {
+  "Column Manager": J
 };
 export {
-  i as MANIFEST
+  y as ColumnManager,
+  Q as MANIFEST,
+  Y as useColumnManager
 };

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@sps-woodland/core/column-manager"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/column-manager","react","@spscommerce/utils"],o):(n=typeof globalThis<"u"?globalThis:n||self,o(n.ColumnManager={},n.columnManager,n.React,n.utils))})(this,(function(n,o,r,t){"use strict";function m(l){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const a in l)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(l,a);Object.defineProperty(i,a,s.get?s:{enumerable:!0,get:()=>l[a]})}}return i.default=l,Object.freeze(i)}const e=m(r),d={"Column Manager":{components:[o.ColumnManager],examples:{basic:{label:"Basic Usage",examples:{basic:{react:t.code`
+(function(n,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/add-to-list"),require("@sps-woodland/tokens"),require("@spscommerce/ds-react"),require("@spscommerce/ds-shared"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/add-to-list","@sps-woodland/tokens","@spscommerce/ds-react","@spscommerce/ds-shared","@spscommerce/i18n","@spscommerce/utils"],d):(n=typeof globalThis<"u"?globalThis:n||self,d(n.ColumnManager={},n.React,n.core,n.addToList,n.tokens,n.dsReact,n.dsShared,n.i18n,n.utils))})(this,(function(n,d,H,R,L,h,C,q,b){"use strict";function j(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const u=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(r,o,u.get?u:{enumerable:!0,get:()=>t[o]})}}return r.default=t,Object.freeze(r)}const e=j(d);function g({isOpen:t,title:r,visibleColumnsHeader:o,hiddenColumnsHeader:u,visibleColumns:m,hiddenColumns:c,maxDisplayedItems:s,manualSort:a=!0,showIcons:v=!0,showCount:E=!0,showFilter:M=!0,showMoveAllLinks:S=!0,cancelButtonText:k,saveButtonText:l,onSave:i,onOpen:w,onClose:F,"data-testid":B}){const[O,A]=e.useState(!!t),{t:p}=q.useWoodlandLanguage(),T=H.useChildTestIdAttrBuilder({"data-testid":B}),[f,P]=e.useState({visibleColumns:m,hiddenColumns:c}),y=()=>{A(!1),F?.()};return e.useEffect(()=>{O&&(P({visibleColumns:m,hiddenColumns:c}),w?.())},[O]),e.useEffect(()=>{A(!!t)},[t]),O?e.createElement(h.SpsModal,{title:r||p("columnManager.title",{defaultValue:"Manage Table Columns"}),kind:C.ModalKind.GENERAL,size:C.ModalSize.LARGE,"data-testid":B,onClose:y},e.createElement(R.AddToList,{onHeader:o||p("columnManager.onListHeader",{defaultValue:"Visible Columns"}),offHeader:u||p("columnManager.offListHeader",{defaultValue:"Hidden Columns"}),onList:f.visibleColumns,offList:f.hiddenColumns,onChange:I=>{P({visibleColumns:I.onList,hiddenColumns:I.offList})},manualSort:a,maxDisplayedItems:s,showIcons:v,showCount:E,showFilter:M,showMoveAllLinks:S,...T("add-to-list")}),e.createElement(h.SpsModalFooter,null,e.createElement(h.SpsButton,{kind:C.ButtonKind.DEFAULT,onClick:()=>{P({visibleColumns:m,hiddenColumns:c}),y()},className:L.sprinkles({mr:"sm"}),...T("cancel-button")},k||p("columnManager.cancelButton",{defaultValue:"Cancel"})),e.createElement(h.SpsButton,{kind:C.ButtonKind.KEY,onClick:()=>{i?.(f.visibleColumns,f.hiddenColumns),y()},...T("save-button")},l||p("columnManager.saveButton",{defaultValue:"Save"})))):null}H.Metadata.set(g,{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 V=({isOpen:t,visibleColumns:r,hiddenColumns:o,onClose:u,onOpen:m,onSave:c})=>{const[s,a]=e.useState({isOpen:!!t,visibleColumns:r,hiddenColumns:o});e.useEffect(()=>{a(l=>({...l,isOpen:!!t}))},[t]);const v=()=>{a(l=>({...l,isOpen:!0})),m?.()},E=()=>{a(l=>({...l,isOpen:!1})),u?.()},M=(l,i)=>{a({isOpen:!1,visibleColumns:l,hiddenColumns:i}),c?.(l,i)},S=e.useCallback((l,i)=>{a(w=>({...w,visibleColumns:l,hiddenColumns:i}))},[]),k=e.useCallback(l=>{a(i=>({...i,isOpen:l}))},[]);return{visibleColumns:s.visibleColumns,hiddenColumns:s.hiddenColumns,isOpen:s.isOpen,columnManagerProps:{visibleColumns:s.visibleColumns,hiddenColumns:s.hiddenColumns,isOpen:s.isOpen,onClose:E,onSave:M},triggerProps:{onClick:v},setColumns:S,setOpen:k}},x={"Column Manager":{components:[g],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:t.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:t.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:t.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>
                 )
             }
-          `}}}}}};n.MANIFEST=d,Object.keys(o).forEach(l=>{l!=="default"&&!Object.prototype.hasOwnProperty.call(n,l)&&Object.defineProperty(n,l,{enumerable:!0,get:()=>o[l]})}),Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}}};n.ColumnManager=g,n.MANIFEST=x,n.useColumnManager=V,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/column-manager",
   "description": "SPS Woodland Design System column manager component",
-  "version": "8.51.3",
+  "version": "8.52.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/column-manager",
@@ -23,17 +23,32 @@
   },
   "peerDependencies": {
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
+    "@vanilla-extract/css-utils": "^0.1.3",
     "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/core": "8.51.3",
-    "@spscommerce/ds-react": "8.51.3"
+    "@sps-woodland/add-to-list": "8.52.1",
+    "@sps-woodland/core": "8.52.1",
+    "@sps-woodland/tokens": "8.52.1",
+    "@spscommerce/ds-react": "8.52.1",
+    "@spscommerce/ds-shared": "8.52.1",
+    "@spscommerce/i18n": "8.52.1"
   },
   "devDependencies": {
     "@spscommerce/utils": "9.0.3",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/css-utils": "0.1.3",
+    "@vanilla-extract/recipes": "0.2.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/core": "8.51.3",
-    "@spscommerce/ds-react": "8.51.3"
+    "@sps-woodland/add-to-list": "8.52.1",
+    "@sps-woodland/core": "8.52.1",
+    "@sps-woodland/tokens": "8.52.1",
+    "@spscommerce/ds-react": "8.52.1",
+    "@spscommerce/ds-shared": "8.52.1",
+    "@spscommerce/i18n": "8.52.1"
+  },
+  "dependencies": {
+    "nanoid": "5.1.5"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",

package/vite.config.mjs

@@ -1,8 +1,20 @@
 import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
 export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
@@ -12,11 +24,7 @@ export default defineConfig({
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,
     rollupOptions: {
-      // External must match subpath imports like @sps-woodland/core/column-manager
-      external: (id) => {
-        const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
-        return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
-      },
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
     },
   },
 });