@sps-woodland/matrix 8.21.0 → 8.21.2

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),l=require("@sps-woodland/core"),o=require("@spscommerce/utils");function g(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(i,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return i.default=t,Object.freeze(i)}const e=g(a);var m="_67ajyb0",s="_67ajyb2",w="_67ajyb1",y="_67ajyb3";function d({title:t,children:i,"data-testid":r,...n}){return a.createElement("div",{className:l.cl(m),"data-testid":"matrix"},a.createElement(l.Title,{size:"lg"},t),a.createElement("table",{className:l.cl(m),"data-testid":`${r}`,...n},i))}l.Metadata.set(d,{name:"Matrix",props:{title:"string"}});function u({children:t,"data-testid":i,...r}){return a.createElement(a.Fragment,null,a.createElement("thead",{"data-testid":`${i}`,...r},t))}l.Metadata.set(u,{name:"Matrix Head"});function c({icon:t,tooltip:i,width:r,className:n,children:f,"data-testid":b,...p}){return a.createElement(a.Fragment,null,a.createElement("th",{className:l.cl(w),style:{width:`${r}`},"data-testid":`${b}`,...p},f,a.createElement("div",{className:l.cl(y)},t,i)))}l.Metadata.set(c,{name:"Matrix Header",props:{icon:"Icon",tooltip:"SpsTooltip",width:"string"}});function x({children:t,"data-testid":i,...r}){return a.createElement(a.Fragment,null,a.createElement("tbody",{"data-testid":`${i}`,...r},t))}l.Metadata.set(x,{name:"Matrix Body"});function h({children:t,"data-testid":i,...r}){return a.createElement(a.Fragment,null,a.createElement("tr",{"data-testid":`${i}`,...r},t))}l.Metadata.set(h,{name:"Matrix Row"});function M({className:t,children:i,"data-testid":r,...n}){return i!==void 0?i===null?a.createElement("td",{className:l.cl(s),"data-testid":`${r}`,...n},"null"):a.createElement("td",{className:l.cl(s),"data-testid":`${r}`,...n},i):a.createElement("td",{className:l.cl(s),"data-testid":`${r}`,...n},"—")}l.Metadata.set(M,{name:"Matrix Cell"});const H={components:[d,c],description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ",e.createElement(t,{to:"tables"},"Table")," or ",e.createElement(t,{to:"description-lists"},"Description List")," for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),examples:{general:{label:"General Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The decision to use a Matrix to visualize a grid of information, as opposed to a traditional Table or Description List, is largely subjective. The following guidelines provide a reliable framework for making the correct choice."),e.createElement("h5",null," When to Use "),e.createElement("ul",null,e.createElement("li",null," If the data set requires an identifier on both the X-axis and a Y-axis. "),e.createElement("li",null," If the data set requires six (6) or fewer columns (including the header column). "),e.createElement("li",null," If the data set is small, or if using a matrix is more aesthetically pleasing (without sacrificing functionality) than a table or description list. ")),e.createElement("h5",null," When Not to Use "),e.createElement("ul",null,e.createElement("li",null," If form elements are required, consider a ",e.createElement(t,{to:"tables"},"Table")," or ",e.createElement(t,{to:"description-lists"},"Description List"),". "),e.createElement("li",null," If the data set requires more than six (6) columns (including the header column), use a ",e.createElement(t,{to:"tables"},"Table")," instead. "),e.createElement("li",null," If the data needs to be searchable, filterable or sortable, use a ",e.createElement(t,{to:"tables"},"Table")," instead. ")),e.createElement("h5",null," Avoid Over-Crowding "),e.createElement("p",null," Use the following guidelines to determine the ideal maximum number of columns based on container width. Following these guidelines will preserve content readability. ")),examples:{general:{react:o.code`
+(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.Matrix={},l.React,l.core,l.utils))})(this,function(l,t,n,s){"use strict";function p(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(i,r,o.get?o:{enumerable:!0,get:()=>a[r]})}}return i.default=a,Object.freeze(i)}const e=p(t);var u="_67ajyb0",d="_67ajyb2",b="_67ajyb1",g="_67ajyb3";function c({title:a,children:i,"data-testid":r,...o}){return t.createElement("div",{className:n.cl(u),"data-testid":"matrix"},t.createElement(n.Title,{size:"lg"},a),t.createElement("table",{className:n.cl(u),"data-testid":`${r}`,...o},i))}n.Metadata.set(c,{name:"Matrix",props:{title:"string"}});function x({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("thead",{"data-testid":`${i}`,...r},a))}n.Metadata.set(x,{name:"Matrix Head"});function m({icon:a,tooltip:i,width:r,className:o,children:y,"data-testid":H,...E}){return t.createElement(t.Fragment,null,t.createElement("th",{className:n.cl(b),style:{width:`${r}`},"data-testid":`${H}`,...E},y,t.createElement("div",{className:n.cl(g)},a,i)))}n.Metadata.set(m,{name:"Matrix Header",props:{icon:"Icon",tooltip:"SpsTooltip",width:"string"}});function h({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("tbody",{"data-testid":`${i}`,...r},a))}n.Metadata.set(h,{name:"Matrix Body"});function M({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("tr",{"data-testid":`${i}`,...r},a))}n.Metadata.set(M,{name:"Matrix Row"});function f({className:a,children:i,"data-testid":r,...o}){return i!==void 0?i===null?t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},"null"):t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},i):t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},"—")}n.Metadata.set(f,{name:"Matrix Cell"});const w={Matrix:{components:[c,m],description:({NavigateTo:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ",e.createElement(a,{to:"tables"},"Table")," or ",e.createElement(a,{to:"description-lists"},"Description List")," for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),examples:{general:{label:"General Usage",description:({NavigateTo:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The decision to use a Matrix to visualize a grid of information, as opposed to a traditional Table or Description List, is largely subjective. The following guidelines provide a reliable framework for making the correct choice."),e.createElement("h5",null," When to Use "),e.createElement("ul",null,e.createElement("li",null," If the data set requires an identifier on both the X-axis and a Y-axis. "),e.createElement("li",null," If the data set requires six (6) or fewer columns (including the header column). "),e.createElement("li",null," If the data set is small, or if using a matrix is more aesthetically pleasing (without sacrificing functionality) than a table or description list. ")),e.createElement("h5",null," When Not to Use "),e.createElement("ul",null,e.createElement("li",null," If form elements are required, consider a ",e.createElement(a,{to:"tables"},"Table")," or ",e.createElement(a,{to:"description-lists"},"Description List"),". "),e.createElement("li",null," If the data set requires more than six (6) columns (including the header column), use a ",e.createElement(a,{to:"tables"},"Table")," instead. "),e.createElement("li",null," If the data needs to be searchable, filterable or sortable, use a ",e.createElement(a,{to:"tables"},"Table")," instead. ")),e.createElement("h5",null," Avoid Over-Crowding "),e.createElement("p",null," Use the following guidelines to determine the ideal maximum number of columns based on container width. Following these guidelines will preserve content readability. ")),examples:{general:{react:s.code`
             import { 
               Matrix,
               MatrixHead,
@@ -33,7 +33,7 @@
                 </Matrix>
               )
             }
-          `}}},basic:{label:"Basic Matrix",description:e.createElement(e.Fragment,null,e.createElement("h5",null,"Matrix Characteristics"),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "),e.createElement("li",null," A header “column” along the left-most vertical axis (Y-axis). "),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "))),e.createElement("h5",null,"Matrix Rules"),e.createElement("ul",null,e.createElement("li",null," Non-header cells can contain any type of content. "),e.createElement("li",null," Text and content should remain left-aligned. "),e.createElement("li",null," Column widths are evenly divided amongst the horizontal space. "),e.createElement("li",null," A title describing the contents of the matrix is suggested but not required. "),e.createElement("ul",null,e.createElement("li",null,e.createElement("i",null,"Note: for accessibility reasons, a Matrix without a visible title should still include an HTML description for identification."))))),examples:{basic:{react:o.code`
+          `}}},basic:{label:"Basic Matrix",description:e.createElement(e.Fragment,null,e.createElement("h5",null,"Matrix Characteristics"),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "),e.createElement("li",null," A header “column” along the left-most vertical axis (Y-axis). "),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "))),e.createElement("h5",null,"Matrix Rules"),e.createElement("ul",null,e.createElement("li",null," Non-header cells can contain any type of content. "),e.createElement("li",null," Text and content should remain left-aligned. "),e.createElement("li",null," Column widths are evenly divided amongst the horizontal space. "),e.createElement("li",null," A title describing the contents of the matrix is suggested but not required. "),e.createElement("ul",null,e.createElement("li",null,e.createElement("i",null,"Note: for accessibility reasons, a Matrix without a visible title should still include an HTML description for identification."))))),examples:{basic:{react:s.code`
           import { 
             Matrix,
             MatrixHead,
@@ -146,7 +146,7 @@
               </Matrix>
             );
           }
-        `}}},variations:{label:"Matrix Variations",examples:{customColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Customizable Column Widths "),e.createElement("p",null,"Individual columns can be set to custom widths if desired. This can be done to one or all columns in the Matrix. Any columns without a specified custom width will divide the remaining horizontal space evenly.")),react:o.code`
+        `}}},variations:{label:"Matrix Variations",examples:{customColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Customizable Column Widths "),e.createElement("p",null,"Individual columns can be set to custom widths if desired. This can be done to one or all columns in the Matrix. Any columns without a specified custom width will divide the remaining horizontal space evenly.")),react:s.code`
             import { 
               Matrix,
               MatrixHead,
@@ -202,7 +202,7 @@
                 </Matrix>
               );
             }
-          `},omitHeaderColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Optional Left-hand Header Column "),e.createElement("p",null,"The left-hand Header Column can be omitted if desired. This option can apply to default- or customizable-width Matrix components.")),react:o.code`
+          `},omitHeaderColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Optional Left-hand Header Column "),e.createElement("p",null,"The left-hand Header Column can be omitted if desired. This option can apply to default- or customizable-width Matrix components.")),react:s.code`
             import { 
               Matrix,
               MatrixHead,
@@ -258,4 +258,4 @@
                 </Matrix>
               );
             }
-          `}}}}},E={Matrix:H};exports.MANIFEST=E;exports.Matrix=d;exports.MatrixBody=x;exports.MatrixCell=M;exports.MatrixHead=u;exports.MatrixHeader=c;exports.MatrixRow=h;
+          `}}}}}};l.MANIFEST=w,l.Matrix=c,l.MatrixBody=h,l.MatrixCell=f,l.MatrixHead=x,l.MatrixHeader=m,l.MatrixRow=M,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@sps-woodland/matrix",
   "description": "SPS Woodland Design System Matrix component",
-  "version": "8.21.0",
+  "version": "8.21.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/matrix",
   "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/matrix#readme",
   "type": "module",
-  "module": "./lib/index.es.js",
-  "main": "./lib/index.cjs.js",
+  "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"
     },
     "./lib/style.css": {
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^7.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.21.0",
-    "@sps-woodland/tokens": "8.21.0"
+    "@sps-woodland/core": "8.21.2",
+    "@sps-woodland/tokens": "8.21.2"
   },
   "devDependencies": {
     "@react-stately/collections": "^3.6.0",
@@ -38,9 +38,9 @@
     "@vanilla-extract/css": "^1.9.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.21.0",
-    "@sps-woodland/tabs": "8.21.0",
-    "@sps-woodland/tokens": "8.21.0"
+    "@sps-woodland/core": "8.21.2",
+    "@sps-woodland/tabs": "8.21.2",
+    "@sps-woodland/tokens": "8.21.2"
   },
   "dependencies": {
     "@spscommerce/ds-react": "^8.16.1",

package/vite.config.mjs

@@ -9,8 +9,8 @@ export default defineConfig({
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
-      formats: ["es", "cjs"],
-      fileName: (format) => `index.${format}.js`,
+      name: "Matrix",
+      fileName: "index",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,