@sps-woodland/column-manager 7.17.13 → 7.19.0

package/lib/{index.cjs.js → index.umd.cjs}

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

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@sps-woodland/column-manager",
   "description": "SPS Woodland Design System column manager component",
-  "version": "7.17.13",
+  "version": "7.19.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.cjs.js",
-  "module": "./lib/index.es.js",
+  "type": "module",
+  "module": "./lib/index.js",
+  "main": "./lib/index.umd.cjs",
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js",
-      "default": "./lib/index.cjs.js",
+      "require": "./lib/index.umd.cjs",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js",
       "types": "./lib/index.d.ts"
     }
   },
@@ -25,11 +26,11 @@
     "@vanilla-extract/css-utils": "^0.1.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "7.17.13",
-    "@sps-woodland/add-to-list": "7.17.13",
-    "@sps-woodland/tokens": "7.17.13",
-    "@spscommerce/ds-react": "7.17.13",
-    "@spscommerce/ds-shared": "7.17.13"
+    "@sps-woodland/add-to-list": "7.19.0",
+    "@sps-woodland/core": "7.19.0",
+    "@sps-woodland/tokens": "7.19.0",
+    "@spscommerce/ds-react": "7.19.0",
+    "@spscommerce/ds-shared": "7.19.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -38,11 +39,11 @@
     "@vanilla-extract/css-utils": "^0.1.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "7.17.13",
-    "@sps-woodland/add-to-list": "7.17.13",
-    "@sps-woodland/tokens": "7.17.13",
-    "@spscommerce/ds-react": "7.17.13",
-    "@spscommerce/ds-shared": "7.17.13"
+    "@sps-woodland/core": "7.19.0",
+    "@sps-woodland/tokens": "7.19.0",
+    "@spscommerce/ds-react": "7.19.0",
+    "@spscommerce/ds-shared": "7.19.0",
+    "@sps-woodland/add-to-list": "7.19.0"
   },
   "dependencies": {
     "nanoid": "^3.3.4"

package/vite.config.js

@@ -1,16 +1,25 @@
 import path from "path";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
-
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.js";
 import pkg from "./package.json";
 
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
 export default defineConfig({
-  plugins: [vanillaExtractPlugin()],
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
-      formats: ["es", "cjs"],
-      fileName: (format) => `index.${format}.js`,
+      name: "ColumnManager",
+      fileName: "index",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,