@sps-woodland/action-bar 8.51.2 → 8.52.0

package/README.md

@@ -1,27 +1,3 @@
 ## [@sps-woodland/action-bar](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/action-bar#readme)
 
-SPS Woodland Design System Action Bar component.
-
-> **Heads up — this is a wrapper package.** The component source now lives in
-> [`@sps-woodland/core`](../core). This package re-exports from core so existing
-> imports keep working, but new code should prefer the core paths.
-
-### Preferred imports (core)
-
-```ts
-import { ActionBar, ActionBarAdditionalContent } from "@sps-woodland/core/action-bar";
-// or, if you only need the additional-content slot:
-import { ActionBarAdditionalContent } from "@sps-woodland/core/action-bar-additional-content";
-
-import "@sps-woodland/core/action-bar/style.css";
-```
-
-`ActionBar` is barrel-only (the family name and the parent component share a
-name). `ActionBarAdditionalContent` additionally has its own flat subpath.
-
-### Legacy imports (still supported)
-
-```ts
-import { ActionBar, ActionBarAdditionalContent } from "@sps-woodland/action-bar";
-import "@sps-woodland/action-bar/style.css";
-```
+SPS Woodland Design System Action Bar component

package/lib/ActionBar.css.d.ts

@@ -0,0 +1,9 @@
+declare const root: string;
+declare const content: string;
+declare const contentMainBar: string;
+declare const itemsSelected: string;
+declare const itemsSelectedTag: string;
+declare const actionButtons: string;
+declare const clearSelected: string;
+declare const additionalContent: string;
+export { root, content, contentMainBar, itemsSelected, itemsSelectedTag, actionButtons, clearSelected, additionalContent, };

package/lib/ActionBar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function ActionBar({ className, children, clearSelected, itemsSelected, itemsSelectedLabel, clearSelectedLabel, ...rest }: ComponentProps<{
+    clearSelected: () => void;
+    itemsSelected: number | string;
+    itemsSelectedLabel?: string;
+    clearSelectedLabel?: string;
+}>): React.ReactElement;

package/lib/ActionBarAdditionalContent.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentProps, BoxProps } from "@sps-woodland/core";
+export declare function ActionBarAdditionalContent({ className, children, ...rest }: ComponentProps<Record<string, unknown>> & BoxProps): React.ReactElement;

package/lib/index.d.ts

@@ -1,2 +1,3 @@
-export * from "@sps-woodland/core/action-bar";
+export * from "./ActionBar";
+export * from "./ActionBarAdditionalContent";
 export * from "./manifest";

package/lib/index.js

@@ -1,10 +1,82 @@
-import { ActionBar as e, ActionBarAdditionalContent as o } from "@sps-woodland/core/action-bar";
-export * from "@sps-woodland/core/action-bar";
-import * as n from "react";
-import { code as t } from "@spscommerce/utils";
-const a = {
-  components: [e, o],
-  description: () => /* @__PURE__ */ n.createElement("p", null, "The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),
+import * as e from "react";
+import { Button as h } from "@sps-woodland/buttons";
+import { Metadata as r, Box as S, cl as l, selectChildren as f } from "@sps-woodland/core";
+import { Tag as b } from "@sps-woodland/tags";
+import { useWoodlandLanguage as A } from "@spscommerce/i18n";
+import { code as s } from "@spscommerce/utils";
+var w = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s90", v = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s91", g = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s92", k = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s93", C = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s94", x = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s95", E = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s96", I = "pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s97";
+function i({
+  className: t,
+  children: n,
+  ...a
+}) {
+  return /* @__PURE__ */ e.createElement(
+    S,
+    {
+      className: l(I, t),
+      ...a
+    },
+    n
+  );
+}
+r.set(i, {
+  name: "ActionBarAdditionalContent",
+  props: {}
+});
+function d({
+  className: t,
+  children: n,
+  clearSelected: a,
+  itemsSelected: c,
+  itemsSelectedLabel: m,
+  clearSelectedLabel: u,
+  ...p
+}) {
+  const { t: o } = A(), [_, B] = f(n, [
+    { type: i }
+  ]);
+  return Number(c) > 0 ? /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: l(w, t),
+      ...p
+    },
+    /* @__PURE__ */ e.createElement("div", { className: v }, _, /* @__PURE__ */ e.createElement("div", { className: g }, /* @__PURE__ */ e.createElement("div", { className: k }, /* @__PURE__ */ e.createElement(b, { kind: "info", className: C }, c), m ?? o("listActionBar.itemsSelected", { defaultValue: "Items Selected" })), /* @__PURE__ */ e.createElement("div", { className: x }, B), /* @__PURE__ */ e.createElement("div", { className: E }, /* @__PURE__ */ e.createElement(
+      h,
+      {
+        title: o("listActionBar.clearSelected", { defaultValue: "Clear Selected" }),
+        kind: "link",
+        icon: "x",
+        onPress: a
+      },
+      u ?? o("listActionBar.clearSelected", { defaultValue: "Clear Selected" })
+    ))))
+  ) : /* @__PURE__ */ e.createElement(e.Fragment, null);
+}
+r.set(d, {
+  name: "ActionBar",
+  props: {
+    clearSelected: {
+      type: "() => void",
+      required: !0
+    },
+    itemsSelected: {
+      type: "number | string",
+      required: !0
+    },
+    itemsSelectedLabel: {
+      type: "string",
+      required: !1
+    },
+    clearSelectedLabel: {
+      type: "string",
+      required: !1
+    }
+  }
+});
+const y = {
+  components: [d, i],
+  description: () => /* @__PURE__ */ e.createElement("p", null, "The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),
   examples: {
     general: {
       label: "General Usage",
@@ -16,7 +88,7 @@ const a = {
       description: "This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.",
       examples: {
         basic: {
-          react: t`
+          react: s`
             import { ActionBar } from "@sps-woodland/action-bar";
             import { Button } from "@sps-woodland/buttons";
             import { Vr } from "@sps-woodland/core";
@@ -71,7 +143,7 @@ const a = {
       description: "If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized, as well as the text for the Clear Selected button.",
       examples: {
         basic: {
-          react: t`
+          react: s`
             import { ActionBar } from "@sps-woodland/action-bar";
             import { Button } from "@sps-woodland/buttons";
             
@@ -120,7 +192,7 @@ const a = {
       description: "An Action Bar may contain additional content that is not part of the action buttons group, which is displayed above the main content.",
       examples: {
         basic: {
-          react: t`
+          react: s`
             import { ActionBar, ActionBarAdditionalContent } from "@sps-woodland/action-bar";
             import { Button } from "@sps-woodland/buttons";
             import { Card } from "@sps-woodland/cards";
@@ -158,9 +230,11 @@ const a = {
       }
     }
   }
-}, c = {
-  "Action Bar": a
+}, P = {
+  "Action Bar": y
 };
 export {
-  c as MANIFEST
+  d as ActionBar,
+  i as ActionBarAdditionalContent,
+  P as MANIFEST
 };

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(e,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("@sps-woodland/core/action-bar"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/action-bar","react","@spscommerce/utils"],n):(e=typeof globalThis<"u"?globalThis:e||self,n(e.ActionBar={},e.actionBar,e.React,e.utils))})(this,(function(e,n,s,a){"use strict";function r(t){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(c,o,i.get?i:{enumerable:!0,get:()=>t[o]})}}return c.default=t,Object.freeze(c)}const l=r(s),d={"Action Bar":{components:[n.ActionBar,n.ActionBarAdditionalContent],description:()=>l.createElement("p",null,"The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),examples:{general:{label:"General Usage",description:""},actionBar:{label:"Action Bar",description:"This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.",examples:{basic:{react:a.code`
+(function(e,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("@sps-woodland/buttons"),require("@sps-woodland/core"),require("@sps-woodland/tags"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/buttons","@sps-woodland/core","@sps-woodland/tags","@spscommerce/i18n","@spscommerce/utils"],i):(e=typeof globalThis<"u"?globalThis:e||self,i(e.ActionBar={},e.React,e.buttons,e.core,e.tags,e.i18n,e.utils))})(this,(function(e,i,u,s,p,_,l){"use strict";function B(n){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(a,o,c.get?c:{enumerable:!0,get:()=>n[o]})}}return a.default=n,Object.freeze(a)}const t=B(i);var h="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s90",f="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s91",S="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s92",b="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s93",A="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s94",w="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s95",g="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s96",v="pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s97";function r({className:n,children:a,...o}){return t.createElement(s.Box,{className:s.cl(v,n),...o},a)}s.Metadata.set(r,{name:"ActionBarAdditionalContent",props:{}});function d({className:n,children:a,clearSelected:o,itemsSelected:c,itemsSelectedLabel:C,clearSelectedLabel:x,...y}){const{t:m}=_.useWoodlandLanguage(),[E,I]=s.selectChildren(a,[{type:r}]);return Number(c)>0?t.createElement("div",{className:s.cl(h,n),...y},t.createElement("div",{className:f},E,t.createElement("div",{className:S},t.createElement("div",{className:b},t.createElement(p.Tag,{kind:"info",className:A},c),C??m("listActionBar.itemsSelected",{defaultValue:"Items Selected"})),t.createElement("div",{className:w},I),t.createElement("div",{className:g},t.createElement(u.Button,{title:m("listActionBar.clearSelected",{defaultValue:"Clear Selected"}),kind:"link",icon:"x",onPress:o},x??m("listActionBar.clearSelected",{defaultValue:"Clear Selected"})))))):t.createElement(t.Fragment,null)}s.Metadata.set(d,{name:"ActionBar",props:{clearSelected:{type:"() => void",required:!0},itemsSelected:{type:"number | string",required:!0},itemsSelectedLabel:{type:"string",required:!1},clearSelectedLabel:{type:"string",required:!1}}});const k={"Action Bar":{components:[d,r],description:()=>t.createElement("p",null,"The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),examples:{general:{label:"General Usage",description:""},actionBar:{label:"Action Bar",description:"This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.",examples:{basic:{react:l.code`
             import { ActionBar } from "@sps-woodland/action-bar";
             import { Button } from "@sps-woodland/buttons";
             import { Vr } from "@sps-woodland/core";
@@ -44,7 +44,7 @@
                 </ActionBar>
               </>
             }
-          `}}},customLabel:{label:"Custom Labels",description:"If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized, as well as the text for the Clear Selected button.",examples:{basic:{react:a.code`
+          `}}},customLabel:{label:"Custom Labels",description:"If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized, as well as the text for the Clear Selected button.",examples:{basic:{react:l.code`
             import { ActionBar } from "@sps-woodland/action-bar";
             import { Button } from "@sps-woodland/buttons";
             
@@ -84,7 +84,7 @@
                 </ActionBar>
               </>
             }
-          `}}},addlContent:{label:"Additional Content",description:"An Action Bar may contain additional content that is not part of the action buttons group, which is displayed above the main content.",examples:{basic:{react:a.code`
+          `}}},addlContent:{label:"Additional Content",description:"An Action Bar may contain additional content that is not part of the action buttons group, which is displayed above the main content.",examples:{basic:{react:l.code`
             import { ActionBar, ActionBarAdditionalContent } from "@sps-woodland/action-bar";
             import { Button } from "@sps-woodland/buttons";
             import { Card } from "@sps-woodland/cards";
@@ -117,4 +117,4 @@
                 </ActionBar>
               </>
             }
-          `}}}}}};e.MANIFEST=d,Object.keys(n).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:()=>n[t]})}),Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}}};e.ActionBar=d,e.ActionBarAdditionalContent=r,e.MANIFEST=k,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l0{background-color:#fff;display:flex;bottom:0;position:fixed;justify-content:center;left:0;right:0;padding:.5rem;box-shadow:0 0 .25rem .25rem #1f282c1a;z-index:99}.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l1{display:flex;flex-direction:column;max-width:1280px;padding-left:1.25rem;padding-right:1.25rem;width:100%}.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l2{height:2rem;display:flex;align-items:center;width:100%}.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l3{flex:1}.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l4{margin-right:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l5{display:flex;flex:2;align-items:center;justify-content:center}.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l6{flex:1;text-align:right}.pkg_sps-woodland_core__version_8_51_2__hash_nz1a1l7{margin-bottom:.5rem}
+.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s90{background-color:#fff;display:flex;bottom:0;position:fixed;justify-content:center;left:0;right:0;padding:.5rem;box-shadow:0 0 .25rem .25rem #1f282c1a;z-index:99}.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s91{display:flex;flex-direction:column;max-width:1280px;padding-left:1.25rem;padding-right:1.25rem;width:100%}.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s92{height:2rem;display:flex;align-items:center;width:100%}.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s93{flex:1}.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s94{margin-right:.25rem}.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s95{display:flex;flex:2;align-items:center;justify-content:center}.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s96{flex:1;text-align:right}.pkg_sps-woodland_action-bar__version_8_52_0__hash_9yu2s97{margin-bottom:.5rem}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/action-bar",
   "description": "SPS Woodland Design System Action Bar component",
-  "version": "8.51.2",
+  "version": "8.52.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/action-bar",
@@ -17,7 +17,6 @@
       "import": "./lib/index.js",
       "default": "./lib/index.js"
     },
-    "./style.css": "./lib/style.css",
     "./lib/style.css": {
       "import": "./lib/style.css",
       "require": "./lib/style.css"
@@ -30,19 +29,28 @@
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "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.2"
+    "@sps-woodland/buttons": "8.52.0",
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tags": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "9.0.3",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/recipes": "0.2.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/core": "8.51.2"
+    "@sps-woodland/buttons": "8.52.0",
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tags": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
+    "build": "pnpm run build:js && pnpm run build:types",
     "build:js": "vite build",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
-    "build:css": "cp ../core/lib/action-bar/style.css lib/style.css 2>/dev/null || echo 'action-bar style.css not found, skipping'",
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "node ../../../scripts/publish-package.mjs"

package/vite.config.mjs

@@ -1,24 +1,33 @@
 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";
 
-// Action-bar is now a wrapper package that re-exports from @sps-woodland/core.
-// No vanilla-extract needed - CSS is provided by the mono-package.
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
 
-const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
+console.log({ packageVersion });
 
 export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "ActionBar",
       fileName: "index",
+      cssFileName: "style",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,
     rollupOptions: {
-      // External must match subpath imports like @sps-woodland/core/action-bar
-      external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
     },
   },
 });