@salt-ds/styles 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+# @salt-ds/styles
+
+## 0.3.0
+
+### Minor Changes
+
+- 27c4338: This feature is in-development, for exploration and feedback only.
+
+  Introduce a context‑driven API for injecting CSS class names into Salt components based on their props, and optionally stripping implementation‑only props before forwarding.
+
+  _Status_
+  Non‑breaking for existing Salt consumers
+  Experimental and incomplete — interfaces and behavior may change without notice
+
+  **Note to JPM employees**
+  Use only in non‑production codebases, or with prior permission from the Salt engineering team
+  What’s included
+
+  - `ClassNameInjectionProvider` — supplies a registry of class injectors via React context
+  - `useClassNameInjection(component, props)`
+    - computes additional classes via registered injectors
+    - merges them with any className provided at the call site
+    - removes internal/derived props (declared by each injector) before forwarding
+  - `registerClassInjector(registry, component, keys, injector)` — registers per‑component injection rules
+
+  _Documentation_
+  Full documentation will follow once the API is stabilized; for now, consider this API private and subject to change.
+
+## 0.2.1
+
+### Patch Changes
+
+- f7fcbd11: Fixed issue where components are not injecting their styles.
+
+## 0.2.0
+
+### Minor Changes
+
+- 02815995: Updated `useComponentCssInjection` to not inject styles when configured by the SaltProvider.
+
+## 0.1.2
+
+### Patch Changes
+
+- 45eaeeb5: Fix `useInsertionEffect` not found error bundled by Webpack
+
+## 0.1.1
+
+### Patch Changes
+
+- abfc4364: Corrected the minimum supported version of React. It has been updated to 16.14.0 due to the support for the new [JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
+
+## 0.1.0
+
+### Minor Changes
+
+- d78ff537: Added @salt-ds/styles and @salt-ds/window packages
+
+  These packages are introduced to support uses of Salt in a desktop application where pop-out elements such as tooltips are rendered into separate windows with no previously added CSS.
+
+  The insertion point where useComponentCssInjection inserts styles can be controlled via InsertionPointContext

package/dist-cjs/index.js

@@ -1,16 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var useStyleInjection = require('./use-style-injection/useStyleInjection.js');
-var InsertionPointProvider = require('./use-style-injection/InsertionPointProvider.js');
 var index = require('./style-injection-provider/index.js');
+var InsertionPointProvider = require('./use-style-injection/InsertionPointProvider.js');
+var useStyleInjection = require('./use-style-injection/useStyleInjection.js');
+var useClassNameInjection = require('./useClassNameInjection.js');
 
 
 
-exports.useComponentCssInjection = useStyleInjection.useComponentCssInjection;
-exports.InsertionPointProvider = InsertionPointProvider.InsertionPointProvider;
-exports.useInsertionPoint = InsertionPointProvider.useInsertionPoint;
 exports.StyleInjectionProvider = index.StyleInjectionProvider;
 exports.useStyleInjection = index.useStyleInjection;
+exports.InsertionPointProvider = InsertionPointProvider.InsertionPointProvider;
+exports.useInsertionPoint = InsertionPointProvider.useInsertionPoint;
+exports.useComponentCssInjection = useStyleInjection.useComponentCssInjection;
+exports.ClassNameInjectionProvider = useClassNameInjection.ClassNameInjectionProvider;
+exports.registerClassInjector = useClassNameInjection.registerClassInjector;
+exports.useClassNameInjection = useClassNameInjection.useClassNameInjection;
 //# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist-cjs/style-injection-provider/index.js

@@ -1,22 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
 const StyleInjectionContext = React.createContext(true);
 function useStyleInjection(enableStyleInjection) {
   const enableStyleInjectionFromContext = React.useContext(StyleInjectionContext);
-  return enableStyleInjection != null ? enableStyleInjection : enableStyleInjectionFromContext;
+  return enableStyleInjection ?? enableStyleInjectionFromContext;
 }
 function StyleInjectionProvider(props) {
   const { value: enableStyleInjectionProp, children } = props;
   const value = useStyleInjection(enableStyleInjectionProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyleInjectionContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyleInjectionContext.Provider, { value, children });
 }
 
 exports.StyleInjectionProvider = StyleInjectionProvider;

package/dist-cjs/style-injection-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/style-injection-provider/index.tsx"],"sourcesContent":["import React, { type ReactNode, createContext, useContext } from \"react\";\nexport interface StyleInjectionContextType {\n  value?: boolean;\n}\n\nconst StyleInjectionContext = createContext(true);\n\nexport function useStyleInjection(enableStyleInjection?: boolean): boolean {\n  const enableStyleInjectionFromContext = useContext(StyleInjectionContext);\n  return enableStyleInjection ?? enableStyleInjectionFromContext;\n}\n\nexport interface StyleInjectionProviderProps extends StyleInjectionContextType {\n  children: ReactNode;\n}\n\nexport function StyleInjectionProvider(props: StyleInjectionProviderProps) {\n  const { value: enableStyleInjectionProp, children } = props;\n  const value = useStyleInjection(enableStyleInjectionProp);\n\n  return (\n    <StyleInjectionContext.Provider value={value}>\n      {children}\n    </StyleInjectionContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;;;AAKA,MAAM,qBAAA,GAAwBA,oBAAc,IAAI,CAAA,CAAA;AAEzC,SAAS,kBAAkB,oBAAyC,EAAA;AACzE,EAAM,MAAA,+BAAA,GAAkCC,iBAAW,qBAAqB,CAAA,CAAA;AACxE,EAAA,OAAO,oBAAwB,IAAA,IAAA,GAAA,oBAAA,GAAA,+BAAA,CAAA;AACjC,CAAA;AAMO,SAAS,uBAAuB,KAAoC,EAAA;AACzE,EAAA,MAAM,EAAE,KAAA,EAAO,wBAA0B,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,kBAAkB,wBAAwB,CAAA,CAAA;AAExD,EACE,uBAAAC,cAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAA;AAAA,IAC7B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/style-injection-provider/index.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\nexport interface StyleInjectionContextType {\n  value?: boolean;\n}\n\nconst StyleInjectionContext = createContext(true);\n\nexport function useStyleInjection(enableStyleInjection?: boolean): boolean {\n  const enableStyleInjectionFromContext = useContext(StyleInjectionContext);\n  return enableStyleInjection ?? enableStyleInjectionFromContext;\n}\n\nexport interface StyleInjectionProviderProps extends StyleInjectionContextType {\n  children: ReactNode;\n}\n\nexport function StyleInjectionProvider(props: StyleInjectionProviderProps) {\n  const { value: enableStyleInjectionProp, children } = props;\n  const value = useStyleInjection(enableStyleInjectionProp);\n\n  return (\n    <StyleInjectionContext.Provider value={value}>\n      {children}\n    </StyleInjectionContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;AAKA,MAAM,qBAAA,GAAwBA,oBAAc,IAAI,CAAA;AAEzC,SAAS,kBAAkB,oBAAA,EAAyC;AACzE,EAAA,MAAM,+BAAA,GAAkCC,iBAAW,qBAAqB,CAAA;AACxE,EAAA,OAAO,oBAAA,IAAwB,+BAAA;AACjC;AAMO,SAAS,uBAAuB,KAAA,EAAoC;AACzE,EAAA,MAAM,EAAE,KAAA,EAAO,wBAAA,EAA0B,QAAA,EAAS,GAAI,KAAA;AACtD,EAAA,MAAM,KAAA,GAAQ,kBAAkB,wBAAwB,CAAA;AAExD,EAAA,uBACEC,cAAA,CAAC,qBAAA,CAAsB,QAAA,EAAtB,EAA+B,OAC7B,QAAA,EACH,CAAA;AAEJ;;;;;"}

package/dist-cjs/use-style-injection/InsertionPointProvider.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
@@ -12,10 +10,7 @@ if (process.env.NODE_ENV !== "production") {
 function InsertionPointProvider(props) {
   const { insertionPoint: insertionPointProp, children } = props;
   const value = React.useMemo(() => insertionPointProp, [insertionPointProp]);
-  return /* @__PURE__ */ jsxRuntime.jsx(InsertionPointContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(InsertionPointContext.Provider, { value, children });
 }
 function useInsertionPoint() {
   const value = React.useContext(InsertionPointContext);

package/dist-cjs/use-style-injection/InsertionPointProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsertionPointProvider.js","sources":["../src/use-style-injection/InsertionPointProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext, useMemo } from \"react\";\n\nexport interface InsertionPointContextType {\n  insertionPoint: ChildNode | null;\n}\n\nconst InsertionPointContext = createContext<ChildNode | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  InsertionPointContext.displayName = \"InsertionPointContext\";\n}\n\nexport interface InsertionPointProviderProps extends InsertionPointContextType {\n  children: ReactNode;\n}\n\nexport function InsertionPointProvider(props: InsertionPointProviderProps) {\n  const { insertionPoint: insertionPointProp, children } = props;\n  const value = useMemo(() => insertionPointProp, [insertionPointProp]);\n\n  return (\n    <InsertionPointContext.Provider value={value}>\n      {children}\n    </InsertionPointContext.Provider>\n  );\n}\n\nexport function useInsertionPoint() {\n  const value = useContext(InsertionPointContext);\n  return value;\n}\n"],"names":["createContext","useMemo","jsx","useContext"],"mappings":";;;;;;;AAMA,MAAM,qBAAA,GAAwBA,oBAAgC,IAAI,CAAA,CAAA;AAElE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,qBAAA,CAAsB,WAAc,GAAA,uBAAA,CAAA;AACtC,CAAA;AAMO,SAAS,uBAAuB,KAAoC,EAAA;AACzE,EAAA,MAAM,EAAE,cAAA,EAAgB,kBAAoB,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACzD,EAAA,MAAM,QAAQC,aAAQ,CAAA,MAAM,kBAAoB,EAAA,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEpE,EACE,uBAAAC,cAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAA;AAAA,IAC7B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,iBAAoB,GAAA;AAClC,EAAM,MAAA,KAAA,GAAQC,iBAAW,qBAAqB,CAAA,CAAA;AAC9C,EAAO,OAAA,KAAA,CAAA;AACT;;;;;"}
+{"version":3,"file":"InsertionPointProvider.js","sources":["../src/use-style-injection/InsertionPointProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useMemo } from \"react\";\n\nexport interface InsertionPointContextType {\n  insertionPoint: ChildNode | null;\n}\n\nconst InsertionPointContext = createContext<ChildNode | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  InsertionPointContext.displayName = \"InsertionPointContext\";\n}\n\nexport interface InsertionPointProviderProps extends InsertionPointContextType {\n  children: ReactNode;\n}\n\nexport function InsertionPointProvider(props: InsertionPointProviderProps) {\n  const { insertionPoint: insertionPointProp, children } = props;\n  const value = useMemo(() => insertionPointProp, [insertionPointProp]);\n\n  return (\n    <InsertionPointContext.Provider value={value}>\n      {children}\n    </InsertionPointContext.Provider>\n  );\n}\n\nexport function useInsertionPoint() {\n  const value = useContext(InsertionPointContext);\n  return value;\n}\n"],"names":["createContext","useMemo","jsx","useContext"],"mappings":";;;;;AAMA,MAAM,qBAAA,GAAwBA,oBAAgC,IAAI,CAAA;AAElE,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,EAAA,qBAAA,CAAsB,WAAA,GAAc,uBAAA;AACtC;AAMO,SAAS,uBAAuB,KAAA,EAAoC;AACzE,EAAA,MAAM,EAAE,cAAA,EAAgB,kBAAA,EAAoB,QAAA,EAAS,GAAI,KAAA;AACzD,EAAA,MAAM,QAAQC,aAAA,CAAQ,MAAM,kBAAA,EAAoB,CAAC,kBAAkB,CAAC,CAAA;AAEpE,EAAA,uBACEC,cAAA,CAAC,qBAAA,CAAsB,QAAA,EAAtB,EAA+B,OAC7B,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,KAAA,GAAQC,iBAAW,qBAAqB,CAAA;AAC9C,EAAA,OAAO,KAAA;AACT;;;;;"}

package/dist-cjs/use-style-injection/useStyleInjection.js

@@ -1,13 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
-var InsertionPointProvider = require('./InsertionPointProvider.js');
 var index = require('../style-injection-provider/index.js');
+var InsertionPointProvider = require('./InsertionPointProvider.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -20,14 +17,16 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return n;
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-var _a;
-const maybeUseInsertionEffect = (_a = React__namespace["useInsertionEffect".toString()]) != null ? _a : React__namespace.useLayoutEffect;
+const maybeUseInsertionEffect = (
+  // biome-ignore lint/suspicious/noExplicitAny: see comment above
+  React__namespace["useInsertionEffect".toString()] ?? React__namespace.useLayoutEffect
+);
 const windowSheetsMap = /* @__PURE__ */ new WeakMap();
 function useComponentCssInjection({
   testId,
@@ -37,12 +36,11 @@ function useComponentCssInjection({
   const styleInjectionEnabled = index.useStyleInjection();
   const insertionPoint = InsertionPointProvider.useInsertionPoint();
   maybeUseInsertionEffect(() => {
-    var _a2, _b;
     if (!targetWindow || !styleInjectionEnabled) {
       return;
     }
-    const sheetsMap = (_a2 = windowSheetsMap.get(targetWindow)) != null ? _a2 : /* @__PURE__ */ new Map();
-    const styleMap = (_b = sheetsMap.get(css)) != null ? _b : { styleElement: null, count: 0 };
+    const sheetsMap = windowSheetsMap.get(targetWindow) ?? /* @__PURE__ */ new Map();
+    const styleMap = sheetsMap.get(css) ?? { styleElement: null, count: 0 };
     if (styleMap.styleElement == null) {
       styleMap.styleElement = targetWindow.document.createElement("style");
       styleMap.styleElement.setAttribute("type", "text/css");

package/dist-cjs/use-style-injection/useStyleInjection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyleInjection.js","sources":["../src/use-style-injection/useStyleInjection.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useInsertionPoint } from \"./InsertionPointProvider\";\nimport { useStyleInjection } from \"../style-injection-provider\";\n\n/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any -- Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985 */\nconst maybeUseInsertionEffect: typeof React.useLayoutEffect =\n  (React as any)[\"useInsertionEffect\".toString()] ?? React.useLayoutEffect;\n/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\n\nexport interface UseComponentCssInjection {\n  testId?: string;\n  css: string;\n  window?: Window | null;\n}\n\ntype StyleElementMap = Map<\n  string,\n  { styleElement: HTMLStyleElement | null; count: number }\n>;\n\n// windowSheetsMap maps window objects to StyleElementMaps\n// A StyleElementMap maps css strings to style element tags\nconst windowSheetsMap = new WeakMap<Window, StyleElementMap>();\n\nexport function useComponentCssInjection({\n  testId,\n  css,\n  window: targetWindow,\n}: UseComponentCssInjection): void {\n  const styleInjectionEnabled = useStyleInjection();\n  const insertionPoint = useInsertionPoint();\n\n  maybeUseInsertionEffect(() => {\n    if (!targetWindow || !styleInjectionEnabled) {\n      return;\n    }\n\n    const sheetsMap =\n      windowSheetsMap.get(targetWindow) ??\n      new Map<\n        string,\n        { styleElement: HTMLStyleElement | null; count: number }\n      >();\n    const styleMap = sheetsMap.get(css) ?? { styleElement: null, count: 0 };\n\n    if (styleMap.styleElement == null) {\n      styleMap.styleElement = targetWindow.document.createElement(\"style\");\n      styleMap.styleElement.setAttribute(\"type\", \"text/css\");\n      styleMap.styleElement.setAttribute(\"data-salt-style\", testId || \"\");\n      styleMap.styleElement.textContent = css;\n\n      styleMap.count = 1;\n\n      targetWindow.document.head.insertBefore(\n        styleMap.styleElement,\n        insertionPoint || targetWindow.document.head.firstChild\n      );\n    } else {\n      styleMap.styleElement.textContent = css;\n      styleMap.count++;\n    }\n    sheetsMap.set(css, styleMap);\n    windowSheetsMap.set(targetWindow, sheetsMap);\n\n    return () => {\n      const sheetsMap = windowSheetsMap.get(targetWindow);\n      const styleMap = sheetsMap?.get(css);\n      if (styleMap?.styleElement) {\n        styleMap.count--;\n        if (styleMap.count < 1) {\n          targetWindow.document.head.removeChild(styleMap.styleElement);\n          styleMap.styleElement = null;\n          sheetsMap?.delete(css);\n        }\n      }\n    };\n  }, [testId, css, targetWindow]);\n}\n"],"names":["React","useStyleInjection","useInsertionPoint","_a","sheetsMap","styleMap"],"mappings":"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"}
+{"version":3,"file":"useStyleInjection.js","sources":["../src/use-style-injection/useStyleInjection.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useStyleInjection } from \"../style-injection-provider\";\nimport { useInsertionPoint } from \"./InsertionPointProvider\";\n\n/* Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985 */\nconst maybeUseInsertionEffect: typeof React.useLayoutEffect =\n  // biome-ignore lint/suspicious/noExplicitAny: see comment above\n  (React as any)[\"useInsertionEffect\".toString()] ?? React.useLayoutEffect;\n\nexport interface UseComponentCssInjection {\n  testId?: string;\n  css: string;\n  window?: Window | null;\n}\n\ntype StyleElementMap = Map<\n  string,\n  { styleElement: HTMLStyleElement | null; count: number }\n>;\n\n// windowSheetsMap maps window objects to StyleElementMaps\n// A StyleElementMap maps css strings to style element tags\nconst windowSheetsMap = new WeakMap<Window, StyleElementMap>();\n\nexport function useComponentCssInjection({\n  testId,\n  css,\n  window: targetWindow,\n}: UseComponentCssInjection): void {\n  const styleInjectionEnabled = useStyleInjection();\n  const insertionPoint = useInsertionPoint();\n\n  maybeUseInsertionEffect(() => {\n    if (!targetWindow || !styleInjectionEnabled) {\n      return;\n    }\n\n    const sheetsMap =\n      windowSheetsMap.get(targetWindow) ??\n      new Map<\n        string,\n        { styleElement: HTMLStyleElement | null; count: number }\n      >();\n    const styleMap = sheetsMap.get(css) ?? { styleElement: null, count: 0 };\n\n    if (styleMap.styleElement == null) {\n      styleMap.styleElement = targetWindow.document.createElement(\"style\");\n      styleMap.styleElement.setAttribute(\"type\", \"text/css\");\n      styleMap.styleElement.setAttribute(\"data-salt-style\", testId || \"\");\n      styleMap.styleElement.textContent = css;\n\n      styleMap.count = 1;\n\n      targetWindow.document.head.insertBefore(\n        styleMap.styleElement,\n        insertionPoint || targetWindow.document.head.firstChild,\n      );\n    } else {\n      styleMap.styleElement.textContent = css;\n      styleMap.count++;\n    }\n    sheetsMap.set(css, styleMap);\n    windowSheetsMap.set(targetWindow, sheetsMap);\n\n    return () => {\n      const sheetsMap = windowSheetsMap.get(targetWindow);\n      const styleMap = sheetsMap?.get(css);\n      if (styleMap?.styleElement) {\n        styleMap.count--;\n        if (styleMap.count < 1) {\n          targetWindow.document.head.removeChild(styleMap.styleElement);\n          styleMap.styleElement = null;\n          sheetsMap?.delete(css);\n        }\n      }\n    };\n  }, [testId, css, targetWindow]);\n}\n"],"names":["React","useStyleInjection","useInsertionPoint","sheetsMap","styleMap"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,uBAAA;AAAA;AAAA,EAEHA,gBAAA,CAAc,oBAAA,CAAqB,QAAA,EAAU,KAAKA,gBAAA,CAAM;AAAA,CAAA;AAe3D,MAAM,eAAA,uBAAsB,OAAA,EAAiC;AAEtD,SAAS,wBAAA,CAAyB;AAAA,EACvC,MAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA,EAAQ;AACV,CAAA,EAAmC;AACjC,EAAA,MAAM,wBAAwBC,uBAAA,EAAkB;AAChD,EAAA,MAAM,iBAAiBC,wCAAA,EAAkB;AAEzC,EAAA,uBAAA,CAAwB,MAAM;AAC5B,IAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,qBAAA,EAAuB;AAC3C,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,YACJ,eAAA,CAAgB,GAAA,CAAI,YAAY,CAAA,wBAC5B,GAAA,EAGF;AACJ,IAAA,MAAM,QAAA,GAAW,UAAU,GAAA,CAAI,GAAG,KAAK,EAAE,YAAA,EAAc,IAAA,EAAM,KAAA,EAAO,CAAA,EAAE;AAEtE,IAAA,IAAI,QAAA,CAAS,gBAAgB,IAAA,EAAM;AACjC,MAAA,QAAA,CAAS,YAAA,GAAe,YAAA,CAAa,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AACnE,MAAA,QAAA,CAAS,YAAA,CAAa,YAAA,CAAa,MAAA,EAAQ,UAAU,CAAA;AACrD,MAAA,QAAA,CAAS,YAAA,CAAa,YAAA,CAAa,iBAAA,EAAmB,MAAA,IAAU,EAAE,CAAA;AAClE,MAAA,QAAA,CAAS,aAAa,WAAA,GAAc,GAAA;AAEpC,MAAA,QAAA,CAAS,KAAA,GAAQ,CAAA;AAEjB,MAAA,YAAA,CAAa,SAAS,IAAA,CAAK,YAAA;AAAA,QACzB,QAAA,CAAS,YAAA;AAAA,QACT,cAAA,IAAkB,YAAA,CAAa,QAAA,CAAS,IAAA,CAAK;AAAA,OAC/C;AAAA,IACF,CAAA,MAAO;AACL,MAAA,QAAA,CAAS,aAAa,WAAA,GAAc,GAAA;AACpC,MAAA,QAAA,CAAS,KAAA,EAAA;AAAA,IACX;AACA,IAAA,SAAA,CAAU,GAAA,CAAI,KAAK,QAAQ,CAAA;AAC3B,IAAA,eAAA,CAAgB,GAAA,CAAI,cAAc,SAAS,CAAA;AAE3C,IAAA,OAAO,MAAM;AACX,MAAA,MAAMC,UAAAA,GAAY,eAAA,CAAgB,GAAA,CAAI,YAAY,CAAA;AAClD,MAAA,MAAMC,SAAAA,GAAWD,UAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,UAAAA,CAAW,GAAA,CAAI,GAAA,CAAA;AAChC,MAAA,IAAIC,SAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,SAAAA,CAAU,YAAA,EAAc;AAC1B,QAAAA,SAAAA,CAAS,KAAA,EAAA;AACT,QAAA,IAAIA,SAAAA,CAAS,QAAQ,CAAA,EAAG;AACtB,UAAA,YAAA,CAAa,QAAA,CAAS,IAAA,CAAK,WAAA,CAAYA,SAAAA,CAAS,YAAY,CAAA;AAC5D,UAAAA,UAAS,YAAA,GAAe,IAAA;AACxB,UAAAD,UAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,UAAAA,CAAW,MAAA,CAAO,GAAA,CAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,GAAA,EAAK,YAAY,CAAC,CAAA;AAChC;;;;"}

package/dist-cjs/useClassNameInjection.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+
+const EMPTY_REGISTRY = /* @__PURE__ */ new Map();
+const InjectionContext = React.createContext(EMPTY_REGISTRY);
+let hasWarnedExperimentalOnce = false;
+function ClassNameInjectionProvider({
+  children,
+  value
+}) {
+  const registry = React.useMemo(() => value ?? EMPTY_REGISTRY, [value]);
+  React.useEffect(() => {
+    if (!hasWarnedExperimentalOnce && process.env.NODE_ENV !== "production") {
+      console.warn(
+        "Salt ClassNameInjectionProvider is experimental and subject to change. JPM users: only recommended in non-production environments or with prior permission from the Salt team."
+      );
+      hasWarnedExperimentalOnce = true;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(InjectionContext.Provider, { value: registry, children });
+}
+function useClassNameInjection(component, props) {
+  const registry = React.useContext(InjectionContext);
+  const entries = registry.get(component) ?? [];
+  const deps = React.useMemo(
+    () => entries.length ? entries.flatMap((e) => e.keys.map((k) => props[k])) : [],
+    [entries, props]
+  );
+  const injected = React.useMemo(() => {
+    const { className: _ignore, ...restProps } = props;
+    if (!entries.length) return [];
+    return entries.map((e) => e.fn(restProps)).filter((v) => v != null);
+  }, [entries, deps, props]);
+  const className = React.useMemo(
+    () => clsx.clsx(props.className, injected) || void 0,
+    [props, injected]
+  );
+  const cleanProps = React.useMemo(() => {
+    const { className: _ignore, ...restProps } = props;
+    if (!entries.length) {
+      return restProps;
+    }
+    const copy = { ...restProps };
+    for (const entry of entries) {
+      for (const key of entry.keys) {
+        if (Object.hasOwn(copy, key)) {
+          delete copy[key];
+        }
+      }
+    }
+    return copy;
+  }, [entries, deps, props]);
+  return { className, props: cleanProps };
+}
+function registerClassInjector(registry, component, keys, injector) {
+  if (!registry.has(component)) {
+    registry.set(component, []);
+  }
+  const wrapped = (props) => {
+    const picked = Object.fromEntries(keys.map((k) => [k, props[k]]));
+    return injector(picked);
+  };
+  registry.get(component).push({
+    fn: wrapped,
+    keys
+  });
+}
+
+exports.ClassNameInjectionProvider = ClassNameInjectionProvider;
+exports.registerClassInjector = registerClassInjector;
+exports.useClassNameInjection = useClassNameInjection;
+//# sourceMappingURL=useClassNameInjection.js.map

package/dist-cjs/useClassNameInjection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassNameInjection.js","sources":["../src/useClassNameInjection.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from \"react\";\n\n/**\n * Extensible map of supported components → their props.\n * @salt-ds/core must augment this with the components that support the API,\n * using the same key string that the component passes to useClassNameInjection,\n * e.g., \"saltButton\": ButtonProps.\n */\nexport interface ComponentPropsMap {}\n\ntype SupportedComponent = keyof ComponentPropsMap extends never\n  ? \"ComponentPropsMap must be augmented to define the components that support useClassNameInjection\"\n  : keyof ComponentPropsMap;\n\nexport type ClassNameInjector<Props, Keys extends keyof Props> = (\n  props: Pick<Props, Keys>,\n) => string | undefined;\n\ninterface ClassNameInjectorEntry {\n  fn: (props: unknown) => string | undefined;\n  keys: string[];\n}\n\nexport type ClassNameInjectionRegistry<\n  ComponentName extends SupportedComponent = SupportedComponent,\n> = Map<ComponentName, ClassNameInjectorEntry[]>;\n\nconst EMPTY_REGISTRY: ClassNameInjectionRegistry = new Map();\nconst InjectionContext =\n  createContext<ClassNameInjectionRegistry>(EMPTY_REGISTRY);\n\nexport type ClassNameInjectionProviderProps = {\n  children: ReactNode;\n  value?: ClassNameInjectionRegistry;\n};\n\nlet hasWarnedExperimentalOnce = false;\n\nexport function ClassNameInjectionProvider({\n  children,\n  value,\n}: ClassNameInjectionProviderProps) {\n  const registry = useMemo(() => value ?? EMPTY_REGISTRY, [value]);\n\n  useEffect(() => {\n    if (!hasWarnedExperimentalOnce && process.env.NODE_ENV !== \"production\") {\n      console.warn(\n        \"Salt ClassNameInjectionProvider is experimental and subject to change. JPM users: only recommended in non-production environments or with prior permission from the Salt team.\",\n      );\n      hasWarnedExperimentalOnce = true;\n    }\n  }, []);\n\n  return (\n    <InjectionContext.Provider value={registry}>\n      {children}\n    </InjectionContext.Provider>\n  );\n}\n\ntype PropsWithClassName = { className?: string } & Record<string, any>;\n\n/**\n * Return the className created by the registry and a props object with injector keys stripped.\n * Only components declared in ComponentPropsMap can call this at compile time.\n */\nexport function useClassNameInjection<Props extends PropsWithClassName>(\n  component: SupportedComponent,\n  props: Props,\n): { className: string | undefined; props: Omit<Props, \"className\"> } {\n  const registry = useContext(InjectionContext);\n  const entries = registry.get(component) ?? [];\n\n  const deps = useMemo(\n    () =>\n      entries.length\n        ? entries.flatMap((e) => e.keys.map((k) => (props as any)[k]))\n        : [],\n    [entries, props],\n  );\n\n  // Compute injected classes provided through ClassNameInjectionRegistry\n  const injected = useMemo(() => {\n    const { className: _ignore, ...restProps } = props as any;\n    if (!entries.length) return [];\n    return entries\n      .map((e) => e.fn(restProps))\n      .filter((v): v is string => v != null);\n  }, [entries, deps, props]);\n\n  // Merge original className with injected classes\n  const className = useMemo(\n    () => clsx((props as any).className, injected) || undefined,\n    [props, injected],\n  );\n\n  // Create a cleaned props object by stripping keys used by injectors, to avoid DOM errors with unknown attributes\n  const cleanProps = useMemo(() => {\n    const { className: _ignore, ...restProps } = props as any;\n    if (!entries.length) {\n      return restProps as Omit<Props, \"className\">;\n    }\n    const copy = { ...restProps } as Omit<Props, \"className\">;\n    for (const entry of entries) {\n      for (const key of entry.keys) {\n        if (Object.hasOwn(copy, key)) {\n          delete (copy as any)[key];\n        }\n      }\n    }\n    return copy;\n  }, [entries, deps, props]);\n\n  return { className, props: cleanProps };\n}\n\n/**\n * Register a class injector for a supported component name.\n * - Keys must be valid string keys for that component’s props (as declared in ComponentPropsMap).\n * - Injector receives only the declared keys (Pick<PropsOf<C>, Keys>).\n */\nexport function registerClassInjector<\n  Props extends Record<string, any>,\n  Keys extends Extract<keyof Props, string>,\n>(\n  registry: ClassNameInjectionRegistry,\n  component: SupportedComponent,\n  keys: Keys[],\n  injector: ClassNameInjector<Props, Keys>,\n) {\n  if (!registry.has(component)) {\n    registry.set(component, []);\n  }\n\n  const wrapped = (props: Record<string, any>) => {\n    const picked = Object.fromEntries(keys.map((k) => [k, props[k]])) as Pick<\n      Props,\n      Keys\n    >;\n    return injector(picked);\n  };\n\n  registry.get(component)!.push({\n    fn: wrapped as (props: unknown) => string | undefined,\n    keys: keys as string[],\n  });\n}\n"],"names":["createContext","useMemo","useEffect","useContext","clsx"],"mappings":"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"}

package/dist-es/index.js

@@ -1,4 +1,5 @@
-export { useComponentCssInjection } from './use-style-injection/useStyleInjection.js';
-export { InsertionPointProvider, useInsertionPoint } from './use-style-injection/InsertionPointProvider.js';
 export { StyleInjectionProvider, useStyleInjection } from './style-injection-provider/index.js';
+export { InsertionPointProvider, useInsertionPoint } from './use-style-injection/InsertionPointProvider.js';
+export { useComponentCssInjection } from './use-style-injection/useStyleInjection.js';
+export { ClassNameInjectionProvider, registerClassInjector, useClassNameInjection } from './useClassNameInjection.js';
 //# sourceMappingURL=index.js.map

package/dist-es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist-es/style-injection-provider/index.js

@@ -4,15 +4,12 @@ import { createContext, useContext } from 'react';
 const StyleInjectionContext = createContext(true);
 function useStyleInjection(enableStyleInjection) {
   const enableStyleInjectionFromContext = useContext(StyleInjectionContext);
-  return enableStyleInjection != null ? enableStyleInjection : enableStyleInjectionFromContext;
+  return enableStyleInjection ?? enableStyleInjectionFromContext;
 }
 function StyleInjectionProvider(props) {
   const { value: enableStyleInjectionProp, children } = props;
   const value = useStyleInjection(enableStyleInjectionProp);
-  return /* @__PURE__ */ jsx(StyleInjectionContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsx(StyleInjectionContext.Provider, { value, children });
 }
 
 export { StyleInjectionProvider, useStyleInjection };

package/dist-es/style-injection-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/style-injection-provider/index.tsx"],"sourcesContent":["import React, { type ReactNode, createContext, useContext } from \"react\";\nexport interface StyleInjectionContextType {\n  value?: boolean;\n}\n\nconst StyleInjectionContext = createContext(true);\n\nexport function useStyleInjection(enableStyleInjection?: boolean): boolean {\n  const enableStyleInjectionFromContext = useContext(StyleInjectionContext);\n  return enableStyleInjection ?? enableStyleInjectionFromContext;\n}\n\nexport interface StyleInjectionProviderProps extends StyleInjectionContextType {\n  children: ReactNode;\n}\n\nexport function StyleInjectionProvider(props: StyleInjectionProviderProps) {\n  const { value: enableStyleInjectionProp, children } = props;\n  const value = useStyleInjection(enableStyleInjectionProp);\n\n  return (\n    <StyleInjectionContext.Provider value={value}>\n      {children}\n    </StyleInjectionContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,qBAAA,GAAwB,cAAc,IAAI,CAAA,CAAA;AAEzC,SAAS,kBAAkB,oBAAyC,EAAA;AACzE,EAAM,MAAA,+BAAA,GAAkC,WAAW,qBAAqB,CAAA,CAAA;AACxE,EAAA,OAAO,oBAAwB,IAAA,IAAA,GAAA,oBAAA,GAAA,+BAAA,CAAA;AACjC,CAAA;AAMO,SAAS,uBAAuB,KAAoC,EAAA;AACzE,EAAA,MAAM,EAAE,KAAA,EAAO,wBAA0B,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,kBAAkB,wBAAwB,CAAA,CAAA;AAExD,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAA;AAAA,IAC7B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../src/style-injection-provider/index.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\nexport interface StyleInjectionContextType {\n  value?: boolean;\n}\n\nconst StyleInjectionContext = createContext(true);\n\nexport function useStyleInjection(enableStyleInjection?: boolean): boolean {\n  const enableStyleInjectionFromContext = useContext(StyleInjectionContext);\n  return enableStyleInjection ?? enableStyleInjectionFromContext;\n}\n\nexport interface StyleInjectionProviderProps extends StyleInjectionContextType {\n  children: ReactNode;\n}\n\nexport function StyleInjectionProvider(props: StyleInjectionProviderProps) {\n  const { value: enableStyleInjectionProp, children } = props;\n  const value = useStyleInjection(enableStyleInjectionProp);\n\n  return (\n    <StyleInjectionContext.Provider value={value}>\n      {children}\n    </StyleInjectionContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,qBAAA,GAAwB,cAAc,IAAI,CAAA;AAEzC,SAAS,kBAAkB,oBAAA,EAAyC;AACzE,EAAA,MAAM,+BAAA,GAAkC,WAAW,qBAAqB,CAAA;AACxE,EAAA,OAAO,oBAAA,IAAwB,+BAAA;AACjC;AAMO,SAAS,uBAAuB,KAAA,EAAoC;AACzE,EAAA,MAAM,EAAE,KAAA,EAAO,wBAAA,EAA0B,QAAA,EAAS,GAAI,KAAA;AACtD,EAAA,MAAM,KAAA,GAAQ,kBAAkB,wBAAwB,CAAA;AAExD,EAAA,uBACE,GAAA,CAAC,qBAAA,CAAsB,QAAA,EAAtB,EAA+B,OAC7B,QAAA,EACH,CAAA;AAEJ;;;;"}

package/dist-es/use-style-injection/InsertionPointProvider.js

@@ -8,10 +8,7 @@ if (process.env.NODE_ENV !== "production") {
 function InsertionPointProvider(props) {
   const { insertionPoint: insertionPointProp, children } = props;
   const value = useMemo(() => insertionPointProp, [insertionPointProp]);
-  return /* @__PURE__ */ jsx(InsertionPointContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsx(InsertionPointContext.Provider, { value, children });
 }
 function useInsertionPoint() {
   const value = useContext(InsertionPointContext);

package/dist-es/use-style-injection/InsertionPointProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsertionPointProvider.js","sources":["../src/use-style-injection/InsertionPointProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext, useMemo } from \"react\";\n\nexport interface InsertionPointContextType {\n  insertionPoint: ChildNode | null;\n}\n\nconst InsertionPointContext = createContext<ChildNode | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  InsertionPointContext.displayName = \"InsertionPointContext\";\n}\n\nexport interface InsertionPointProviderProps extends InsertionPointContextType {\n  children: ReactNode;\n}\n\nexport function InsertionPointProvider(props: InsertionPointProviderProps) {\n  const { insertionPoint: insertionPointProp, children } = props;\n  const value = useMemo(() => insertionPointProp, [insertionPointProp]);\n\n  return (\n    <InsertionPointContext.Provider value={value}>\n      {children}\n    </InsertionPointContext.Provider>\n  );\n}\n\nexport function useInsertionPoint() {\n  const value = useContext(InsertionPointContext);\n  return value;\n}\n"],"names":[],"mappings":";;;AAMA,MAAM,qBAAA,GAAwB,cAAgC,IAAI,CAAA,CAAA;AAElE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,qBAAA,CAAsB,WAAc,GAAA,uBAAA,CAAA;AACtC,CAAA;AAMO,SAAS,uBAAuB,KAAoC,EAAA;AACzE,EAAA,MAAM,EAAE,cAAA,EAAgB,kBAAoB,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACzD,EAAA,MAAM,QAAQ,OAAQ,CAAA,MAAM,kBAAoB,EAAA,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEpE,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAA;AAAA,IAC7B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,iBAAoB,GAAA;AAClC,EAAM,MAAA,KAAA,GAAQ,WAAW,qBAAqB,CAAA,CAAA;AAC9C,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"InsertionPointProvider.js","sources":["../src/use-style-injection/InsertionPointProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useMemo } from \"react\";\n\nexport interface InsertionPointContextType {\n  insertionPoint: ChildNode | null;\n}\n\nconst InsertionPointContext = createContext<ChildNode | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  InsertionPointContext.displayName = \"InsertionPointContext\";\n}\n\nexport interface InsertionPointProviderProps extends InsertionPointContextType {\n  children: ReactNode;\n}\n\nexport function InsertionPointProvider(props: InsertionPointProviderProps) {\n  const { insertionPoint: insertionPointProp, children } = props;\n  const value = useMemo(() => insertionPointProp, [insertionPointProp]);\n\n  return (\n    <InsertionPointContext.Provider value={value}>\n      {children}\n    </InsertionPointContext.Provider>\n  );\n}\n\nexport function useInsertionPoint() {\n  const value = useContext(InsertionPointContext);\n  return value;\n}\n"],"names":[],"mappings":";;;AAMA,MAAM,qBAAA,GAAwB,cAAgC,IAAI,CAAA;AAElE,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,EAAA,qBAAA,CAAsB,WAAA,GAAc,uBAAA;AACtC;AAMO,SAAS,uBAAuB,KAAA,EAAoC;AACzE,EAAA,MAAM,EAAE,cAAA,EAAgB,kBAAA,EAAoB,QAAA,EAAS,GAAI,KAAA;AACzD,EAAA,MAAM,QAAQ,OAAA,CAAQ,MAAM,kBAAA,EAAoB,CAAC,kBAAkB,CAAC,CAAA;AAEpE,EAAA,uBACE,GAAA,CAAC,qBAAA,CAAsB,QAAA,EAAtB,EAA+B,OAC7B,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,KAAA,GAAQ,WAAW,qBAAqB,CAAA;AAC9C,EAAA,OAAO,KAAA;AACT;;;;"}

package/dist-es/use-style-injection/useStyleInjection.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { useInsertionPoint } from './InsertionPointProvider.js';
 import { useStyleInjection } from '../style-injection-provider/index.js';
+import { useInsertionPoint } from './InsertionPointProvider.js';
 
-var _a;
-const maybeUseInsertionEffect = (_a = React["useInsertionEffect".toString()]) != null ? _a : React.useLayoutEffect;
+const maybeUseInsertionEffect = (
+  // biome-ignore lint/suspicious/noExplicitAny: see comment above
+  React["useInsertionEffect".toString()] ?? React.useLayoutEffect
+);
 const windowSheetsMap = /* @__PURE__ */ new WeakMap();
 function useComponentCssInjection({
   testId,
@@ -13,12 +15,11 @@ function useComponentCssInjection({
   const styleInjectionEnabled = useStyleInjection();
   const insertionPoint = useInsertionPoint();
   maybeUseInsertionEffect(() => {
-    var _a2, _b;
     if (!targetWindow || !styleInjectionEnabled) {
       return;
     }
-    const sheetsMap = (_a2 = windowSheetsMap.get(targetWindow)) != null ? _a2 : /* @__PURE__ */ new Map();
-    const styleMap = (_b = sheetsMap.get(css)) != null ? _b : { styleElement: null, count: 0 };
+    const sheetsMap = windowSheetsMap.get(targetWindow) ?? /* @__PURE__ */ new Map();
+    const styleMap = sheetsMap.get(css) ?? { styleElement: null, count: 0 };
     if (styleMap.styleElement == null) {
       styleMap.styleElement = targetWindow.document.createElement("style");
       styleMap.styleElement.setAttribute("type", "text/css");

package/dist-es/use-style-injection/useStyleInjection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyleInjection.js","sources":["../src/use-style-injection/useStyleInjection.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useInsertionPoint } from \"./InsertionPointProvider\";\nimport { useStyleInjection } from \"../style-injection-provider\";\n\n/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any -- Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985 */\nconst maybeUseInsertionEffect: typeof React.useLayoutEffect =\n  (React as any)[\"useInsertionEffect\".toString()] ?? React.useLayoutEffect;\n/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\n\nexport interface UseComponentCssInjection {\n  testId?: string;\n  css: string;\n  window?: Window | null;\n}\n\ntype StyleElementMap = Map<\n  string,\n  { styleElement: HTMLStyleElement | null; count: number }\n>;\n\n// windowSheetsMap maps window objects to StyleElementMaps\n// A StyleElementMap maps css strings to style element tags\nconst windowSheetsMap = new WeakMap<Window, StyleElementMap>();\n\nexport function useComponentCssInjection({\n  testId,\n  css,\n  window: targetWindow,\n}: UseComponentCssInjection): void {\n  const styleInjectionEnabled = useStyleInjection();\n  const insertionPoint = useInsertionPoint();\n\n  maybeUseInsertionEffect(() => {\n    if (!targetWindow || !styleInjectionEnabled) {\n      return;\n    }\n\n    const sheetsMap =\n      windowSheetsMap.get(targetWindow) ??\n      new Map<\n        string,\n        { styleElement: HTMLStyleElement | null; count: number }\n      >();\n    const styleMap = sheetsMap.get(css) ?? { styleElement: null, count: 0 };\n\n    if (styleMap.styleElement == null) {\n      styleMap.styleElement = targetWindow.document.createElement(\"style\");\n      styleMap.styleElement.setAttribute(\"type\", \"text/css\");\n      styleMap.styleElement.setAttribute(\"data-salt-style\", testId || \"\");\n      styleMap.styleElement.textContent = css;\n\n      styleMap.count = 1;\n\n      targetWindow.document.head.insertBefore(\n        styleMap.styleElement,\n        insertionPoint || targetWindow.document.head.firstChild\n      );\n    } else {\n      styleMap.styleElement.textContent = css;\n      styleMap.count++;\n    }\n    sheetsMap.set(css, styleMap);\n    windowSheetsMap.set(targetWindow, sheetsMap);\n\n    return () => {\n      const sheetsMap = windowSheetsMap.get(targetWindow);\n      const styleMap = sheetsMap?.get(css);\n      if (styleMap?.styleElement) {\n        styleMap.count--;\n        if (styleMap.count < 1) {\n          targetWindow.document.head.removeChild(styleMap.styleElement);\n          styleMap.styleElement = null;\n          sheetsMap?.delete(css);\n        }\n      }\n    };\n  }, [testId, css, targetWindow]);\n}\n"],"names":["_a","sheetsMap","styleMap"],"mappings":"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"}
+{"version":3,"file":"useStyleInjection.js","sources":["../src/use-style-injection/useStyleInjection.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useStyleInjection } from \"../style-injection-provider\";\nimport { useInsertionPoint } from \"./InsertionPointProvider\";\n\n/* Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985 */\nconst maybeUseInsertionEffect: typeof React.useLayoutEffect =\n  // biome-ignore lint/suspicious/noExplicitAny: see comment above\n  (React as any)[\"useInsertionEffect\".toString()] ?? React.useLayoutEffect;\n\nexport interface UseComponentCssInjection {\n  testId?: string;\n  css: string;\n  window?: Window | null;\n}\n\ntype StyleElementMap = Map<\n  string,\n  { styleElement: HTMLStyleElement | null; count: number }\n>;\n\n// windowSheetsMap maps window objects to StyleElementMaps\n// A StyleElementMap maps css strings to style element tags\nconst windowSheetsMap = new WeakMap<Window, StyleElementMap>();\n\nexport function useComponentCssInjection({\n  testId,\n  css,\n  window: targetWindow,\n}: UseComponentCssInjection): void {\n  const styleInjectionEnabled = useStyleInjection();\n  const insertionPoint = useInsertionPoint();\n\n  maybeUseInsertionEffect(() => {\n    if (!targetWindow || !styleInjectionEnabled) {\n      return;\n    }\n\n    const sheetsMap =\n      windowSheetsMap.get(targetWindow) ??\n      new Map<\n        string,\n        { styleElement: HTMLStyleElement | null; count: number }\n      >();\n    const styleMap = sheetsMap.get(css) ?? { styleElement: null, count: 0 };\n\n    if (styleMap.styleElement == null) {\n      styleMap.styleElement = targetWindow.document.createElement(\"style\");\n      styleMap.styleElement.setAttribute(\"type\", \"text/css\");\n      styleMap.styleElement.setAttribute(\"data-salt-style\", testId || \"\");\n      styleMap.styleElement.textContent = css;\n\n      styleMap.count = 1;\n\n      targetWindow.document.head.insertBefore(\n        styleMap.styleElement,\n        insertionPoint || targetWindow.document.head.firstChild,\n      );\n    } else {\n      styleMap.styleElement.textContent = css;\n      styleMap.count++;\n    }\n    sheetsMap.set(css, styleMap);\n    windowSheetsMap.set(targetWindow, sheetsMap);\n\n    return () => {\n      const sheetsMap = windowSheetsMap.get(targetWindow);\n      const styleMap = sheetsMap?.get(css);\n      if (styleMap?.styleElement) {\n        styleMap.count--;\n        if (styleMap.count < 1) {\n          targetWindow.document.head.removeChild(styleMap.styleElement);\n          styleMap.styleElement = null;\n          sheetsMap?.delete(css);\n        }\n      }\n    };\n  }, [testId, css, targetWindow]);\n}\n"],"names":["sheetsMap","styleMap"],"mappings":";;;;AAKA,MAAM,uBAAA;AAAA;AAAA,EAEH,KAAA,CAAc,oBAAA,CAAqB,QAAA,EAAU,KAAK,KAAA,CAAM;AAAA,CAAA;AAe3D,MAAM,eAAA,uBAAsB,OAAA,EAAiC;AAEtD,SAAS,wBAAA,CAAyB;AAAA,EACvC,MAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA,EAAQ;AACV,CAAA,EAAmC;AACjC,EAAA,MAAM,wBAAwB,iBAAA,EAAkB;AAChD,EAAA,MAAM,iBAAiB,iBAAA,EAAkB;AAEzC,EAAA,uBAAA,CAAwB,MAAM;AAC5B,IAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,qBAAA,EAAuB;AAC3C,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,YACJ,eAAA,CAAgB,GAAA,CAAI,YAAY,CAAA,wBAC5B,GAAA,EAGF;AACJ,IAAA,MAAM,QAAA,GAAW,UAAU,GAAA,CAAI,GAAG,KAAK,EAAE,YAAA,EAAc,IAAA,EAAM,KAAA,EAAO,CAAA,EAAE;AAEtE,IAAA,IAAI,QAAA,CAAS,gBAAgB,IAAA,EAAM;AACjC,MAAA,QAAA,CAAS,YAAA,GAAe,YAAA,CAAa,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AACnE,MAAA,QAAA,CAAS,YAAA,CAAa,YAAA,CAAa,MAAA,EAAQ,UAAU,CAAA;AACrD,MAAA,QAAA,CAAS,YAAA,CAAa,YAAA,CAAa,iBAAA,EAAmB,MAAA,IAAU,EAAE,CAAA;AAClE,MAAA,QAAA,CAAS,aAAa,WAAA,GAAc,GAAA;AAEpC,MAAA,QAAA,CAAS,KAAA,GAAQ,CAAA;AAEjB,MAAA,YAAA,CAAa,SAAS,IAAA,CAAK,YAAA;AAAA,QACzB,QAAA,CAAS,YAAA;AAAA,QACT,cAAA,IAAkB,YAAA,CAAa,QAAA,CAAS,IAAA,CAAK;AAAA,OAC/C;AAAA,IACF,CAAA,MAAO;AACL,MAAA,QAAA,CAAS,aAAa,WAAA,GAAc,GAAA;AACpC,MAAA,QAAA,CAAS,KAAA,EAAA;AAAA,IACX;AACA,IAAA,SAAA,CAAU,GAAA,CAAI,KAAK,QAAQ,CAAA;AAC3B,IAAA,eAAA,CAAgB,GAAA,CAAI,cAAc,SAAS,CAAA;AAE3C,IAAA,OAAO,MAAM;AACX,MAAA,MAAMA,UAAAA,GAAY,eAAA,CAAgB,GAAA,CAAI,YAAY,CAAA;AAClD,MAAA,MAAMC,SAAAA,GAAWD,UAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,UAAAA,CAAW,GAAA,CAAI,GAAA,CAAA;AAChC,MAAA,IAAIC,SAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,SAAAA,CAAU,YAAA,EAAc;AAC1B,QAAAA,SAAAA,CAAS,KAAA,EAAA;AACT,QAAA,IAAIA,SAAAA,CAAS,QAAQ,CAAA,EAAG;AACtB,UAAA,YAAA,CAAa,QAAA,CAAS,IAAA,CAAK,WAAA,CAAYA,SAAAA,CAAS,YAAY,CAAA;AAC5D,UAAAA,UAAS,YAAA,GAAe,IAAA;AACxB,UAAAD,UAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,UAAAA,CAAW,MAAA,CAAO,GAAA,CAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,GAAA,EAAK,YAAY,CAAC,CAAA;AAChC;;;;"}

package/dist-es/useClassNameInjection.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { createContext, useMemo, useEffect, useContext } from 'react';
+
+const EMPTY_REGISTRY = /* @__PURE__ */ new Map();
+const InjectionContext = createContext(EMPTY_REGISTRY);
+let hasWarnedExperimentalOnce = false;
+function ClassNameInjectionProvider({
+  children,
+  value
+}) {
+  const registry = useMemo(() => value ?? EMPTY_REGISTRY, [value]);
+  useEffect(() => {
+    if (!hasWarnedExperimentalOnce && process.env.NODE_ENV !== "production") {
+      console.warn(
+        "Salt ClassNameInjectionProvider is experimental and subject to change. JPM users: only recommended in non-production environments or with prior permission from the Salt team."
+      );
+      hasWarnedExperimentalOnce = true;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(InjectionContext.Provider, { value: registry, children });
+}
+function useClassNameInjection(component, props) {
+  const registry = useContext(InjectionContext);
+  const entries = registry.get(component) ?? [];
+  const deps = useMemo(
+    () => entries.length ? entries.flatMap((e) => e.keys.map((k) => props[k])) : [],
+    [entries, props]
+  );
+  const injected = useMemo(() => {
+    const { className: _ignore, ...restProps } = props;
+    if (!entries.length) return [];
+    return entries.map((e) => e.fn(restProps)).filter((v) => v != null);
+  }, [entries, deps, props]);
+  const className = useMemo(
+    () => clsx(props.className, injected) || void 0,
+    [props, injected]
+  );
+  const cleanProps = useMemo(() => {
+    const { className: _ignore, ...restProps } = props;
+    if (!entries.length) {
+      return restProps;
+    }
+    const copy = { ...restProps };
+    for (const entry of entries) {
+      for (const key of entry.keys) {
+        if (Object.hasOwn(copy, key)) {
+          delete copy[key];
+        }
+      }
+    }
+    return copy;
+  }, [entries, deps, props]);
+  return { className, props: cleanProps };
+}
+function registerClassInjector(registry, component, keys, injector) {
+  if (!registry.has(component)) {
+    registry.set(component, []);
+  }
+  const wrapped = (props) => {
+    const picked = Object.fromEntries(keys.map((k) => [k, props[k]]));
+    return injector(picked);
+  };
+  registry.get(component).push({
+    fn: wrapped,
+    keys
+  });
+}
+
+export { ClassNameInjectionProvider, registerClassInjector, useClassNameInjection };
+//# sourceMappingURL=useClassNameInjection.js.map

package/dist-es/useClassNameInjection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassNameInjection.js","sources":["../src/useClassNameInjection.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from \"react\";\n\n/**\n * Extensible map of supported components → their props.\n * @salt-ds/core must augment this with the components that support the API,\n * using the same key string that the component passes to useClassNameInjection,\n * e.g., \"saltButton\": ButtonProps.\n */\nexport interface ComponentPropsMap {}\n\ntype SupportedComponent = keyof ComponentPropsMap extends never\n  ? \"ComponentPropsMap must be augmented to define the components that support useClassNameInjection\"\n  : keyof ComponentPropsMap;\n\nexport type ClassNameInjector<Props, Keys extends keyof Props> = (\n  props: Pick<Props, Keys>,\n) => string | undefined;\n\ninterface ClassNameInjectorEntry {\n  fn: (props: unknown) => string | undefined;\n  keys: string[];\n}\n\nexport type ClassNameInjectionRegistry<\n  ComponentName extends SupportedComponent = SupportedComponent,\n> = Map<ComponentName, ClassNameInjectorEntry[]>;\n\nconst EMPTY_REGISTRY: ClassNameInjectionRegistry = new Map();\nconst InjectionContext =\n  createContext<ClassNameInjectionRegistry>(EMPTY_REGISTRY);\n\nexport type ClassNameInjectionProviderProps = {\n  children: ReactNode;\n  value?: ClassNameInjectionRegistry;\n};\n\nlet hasWarnedExperimentalOnce = false;\n\nexport function ClassNameInjectionProvider({\n  children,\n  value,\n}: ClassNameInjectionProviderProps) {\n  const registry = useMemo(() => value ?? EMPTY_REGISTRY, [value]);\n\n  useEffect(() => {\n    if (!hasWarnedExperimentalOnce && process.env.NODE_ENV !== \"production\") {\n      console.warn(\n        \"Salt ClassNameInjectionProvider is experimental and subject to change. JPM users: only recommended in non-production environments or with prior permission from the Salt team.\",\n      );\n      hasWarnedExperimentalOnce = true;\n    }\n  }, []);\n\n  return (\n    <InjectionContext.Provider value={registry}>\n      {children}\n    </InjectionContext.Provider>\n  );\n}\n\ntype PropsWithClassName = { className?: string } & Record<string, any>;\n\n/**\n * Return the className created by the registry and a props object with injector keys stripped.\n * Only components declared in ComponentPropsMap can call this at compile time.\n */\nexport function useClassNameInjection<Props extends PropsWithClassName>(\n  component: SupportedComponent,\n  props: Props,\n): { className: string | undefined; props: Omit<Props, \"className\"> } {\n  const registry = useContext(InjectionContext);\n  const entries = registry.get(component) ?? [];\n\n  const deps = useMemo(\n    () =>\n      entries.length\n        ? entries.flatMap((e) => e.keys.map((k) => (props as any)[k]))\n        : [],\n    [entries, props],\n  );\n\n  // Compute injected classes provided through ClassNameInjectionRegistry\n  const injected = useMemo(() => {\n    const { className: _ignore, ...restProps } = props as any;\n    if (!entries.length) return [];\n    return entries\n      .map((e) => e.fn(restProps))\n      .filter((v): v is string => v != null);\n  }, [entries, deps, props]);\n\n  // Merge original className with injected classes\n  const className = useMemo(\n    () => clsx((props as any).className, injected) || undefined,\n    [props, injected],\n  );\n\n  // Create a cleaned props object by stripping keys used by injectors, to avoid DOM errors with unknown attributes\n  const cleanProps = useMemo(() => {\n    const { className: _ignore, ...restProps } = props as any;\n    if (!entries.length) {\n      return restProps as Omit<Props, \"className\">;\n    }\n    const copy = { ...restProps } as Omit<Props, \"className\">;\n    for (const entry of entries) {\n      for (const key of entry.keys) {\n        if (Object.hasOwn(copy, key)) {\n          delete (copy as any)[key];\n        }\n      }\n    }\n    return copy;\n  }, [entries, deps, props]);\n\n  return { className, props: cleanProps };\n}\n\n/**\n * Register a class injector for a supported component name.\n * - Keys must be valid string keys for that component’s props (as declared in ComponentPropsMap).\n * - Injector receives only the declared keys (Pick<PropsOf<C>, Keys>).\n */\nexport function registerClassInjector<\n  Props extends Record<string, any>,\n  Keys extends Extract<keyof Props, string>,\n>(\n  registry: ClassNameInjectionRegistry,\n  component: SupportedComponent,\n  keys: Keys[],\n  injector: ClassNameInjector<Props, Keys>,\n) {\n  if (!registry.has(component)) {\n    registry.set(component, []);\n  }\n\n  const wrapped = (props: Record<string, any>) => {\n    const picked = Object.fromEntries(keys.map((k) => [k, props[k]])) as Pick<\n      Props,\n      Keys\n    >;\n    return injector(picked);\n  };\n\n  registry.get(component)!.push({\n    fn: wrapped as (props: unknown) => string | undefined,\n    keys: keys as string[],\n  });\n}\n"],"names":[],"mappings":"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"}

package/dist-types/index.d.ts

@@ -1,2 +1,3 @@
-export * from "./use-style-injection";
 export * from "./style-injection-provider";
+export * from "./use-style-injection";
+export * from "./useClassNameInjection";

package/dist-types/style-injection-provider/index.d.ts

@@ -6,4 +6,4 @@ export declare function useStyleInjection(enableStyleInjection?: boolean): boole
 export interface StyleInjectionProviderProps extends StyleInjectionContextType {
     children: ReactNode;
 }
-export declare function StyleInjectionProvider(props: StyleInjectionProviderProps): JSX.Element;
+export declare function StyleInjectionProvider(props: StyleInjectionProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist-types/use-style-injection/InsertionPointProvider.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export interface InsertionPointContextType {
     insertionPoint: ChildNode | null;
 }
 export interface InsertionPointProviderProps extends InsertionPointContextType {
     children: ReactNode;
 }
-export declare function InsertionPointProvider(props: InsertionPointProviderProps): JSX.Element;
+export declare function InsertionPointProvider(props: InsertionPointProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useInsertionPoint(): ChildNode | null;

package/dist-types/use-style-injection/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./useStyleInjection";
 export * from "./InsertionPointProvider";
+export * from "./useStyleInjection";

package/dist-types/useClassNameInjection.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+/**
+ * Extensible map of supported components → their props.
+ * @salt-ds/core must augment this with the components that support the API,
+ * using the same key string that the component passes to useClassNameInjection,
+ * e.g., "saltButton": ButtonProps.
+ */
+export interface ComponentPropsMap {
+}
+type SupportedComponent = keyof ComponentPropsMap extends never ? "ComponentPropsMap must be augmented to define the components that support useClassNameInjection" : keyof ComponentPropsMap;
+export type ClassNameInjector<Props, Keys extends keyof Props> = (props: Pick<Props, Keys>) => string | undefined;
+interface ClassNameInjectorEntry {
+    fn: (props: unknown) => string | undefined;
+    keys: string[];
+}
+export type ClassNameInjectionRegistry<ComponentName extends SupportedComponent = SupportedComponent> = Map<ComponentName, ClassNameInjectorEntry[]>;
+export type ClassNameInjectionProviderProps = {
+    children: ReactNode;
+    value?: ClassNameInjectionRegistry;
+};
+export declare function ClassNameInjectionProvider({ children, value, }: ClassNameInjectionProviderProps): import("react/jsx-runtime").JSX.Element;
+type PropsWithClassName = {
+    className?: string;
+} & Record<string, any>;
+/**
+ * Return the className created by the registry and a props object with injector keys stripped.
+ * Only components declared in ComponentPropsMap can call this at compile time.
+ */
+export declare function useClassNameInjection<Props extends PropsWithClassName>(component: SupportedComponent, props: Props): {
+    className: string | undefined;
+    props: Omit<Props, "className">;
+};
+/**
+ * Register a class injector for a supported component name.
+ * - Keys must be valid string keys for that component’s props (as declared in ComponentPropsMap).
+ * - Injector receives only the declared keys (Pick<PropsOf<C>, Keys>).
+ */
+export declare function registerClassInjector<Props extends Record<string, any>, Keys extends Extract<keyof Props, string>>(registry: ClassNameInjectionRegistry, component: SupportedComponent, keys: Keys[], injector: ClassNameInjector<Props, Keys>): void;
+export {};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@salt-ds/styles",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/jpmorganchase/salt-ds.git",
+    "url": "git+https://github.com/jpmorganchase/salt-ds.git",
     "directory": "packages/styles"
   },
   "bugs": "https://github.com/jpmorganchase/salt-ds/issues",
@@ -24,13 +24,16 @@
     "directory": "../../dist/salt-ds-styles",
     "provenance": true
   },
+  "scripts": {
+    "build": "yarn node ../../scripts/build.mjs"
+  },
+  "dependencies": {},
   "module": "dist-es/index.js",
   "typings": "dist-types/index.d.ts",
-  "dependencies": {},
   "files": [
     "dist-cjs",
     "dist-es",
     "dist-types",
-    "README.md"
+    "CHANGELOG.md"
   ]
 }