@backstage/ui 0.12.1-next.0 → 0.13.0-next.2

package/dist/hooks/useBg.esm.js

@@ -15,6 +15,15 @@ function incrementNeutralBg(bg) {
 const BgProvider = ({ bg, children }) => {
   return /* @__PURE__ */ jsx(BgContext.Provider, { value: createVersionedValueMap({ 1: { bg } }), children });
 };
+const BgReset = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    BgContext.Provider,
+    {
+      value: createVersionedValueMap({ 1: { bg: void 0 } }),
+      children
+    }
+  );
+};
 function useBgConsumer() {
   const value = useContext(BgContext)?.atVersion(1);
   return value ?? { bg: void 0 };
@@ -26,11 +35,11 @@ function useBgProvider(bg) {
     return { bg: void 0 };
   }
   const resolved = resolveResponsiveValue(bg, breakpoint);
-  if (resolved === "neutral-auto") {
+  if (resolved === "neutral") {
     return { bg: incrementNeutralBg(context.bg) };
   }
   return { bg: resolved };
 }
 
-export { BgProvider, useBgConsumer, useBgProvider };
+export { BgProvider, BgReset, useBgConsumer, useBgProvider };
 //# sourceMappingURL=useBg.esm.js.map

package/dist/hooks/useBg.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBg.esm.js","sources":["../../src/hooks/useBg.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useContext, ReactNode } from 'react';\nimport {\n  createVersionedContext,\n  createVersionedValueMap,\n} from '@backstage/version-bridge';\nimport { ContainerBg, ProviderBg, Responsive } from '../types';\nimport { useBreakpoint } from './useBreakpoint';\nimport { resolveResponsiveValue } from './useDefinition/helpers';\n\n/** @public */\nexport interface BgContextValue {\n  bg: ContainerBg | undefined;\n}\n\n/** @public */\nexport interface BgProviderProps {\n  bg: ContainerBg;\n  children: ReactNode;\n}\n\nconst BgContext = createVersionedContext<{\n  1: BgContextValue;\n}>('bg-context');\n\n/**\n * Increments a neutral bg level by one, capping at 'neutral-3'.\n * Intent backgrounds (danger, warning, success) pass through unchanged.\n *\n * The 'neutral-4' level is reserved for consumer component CSS and is\n * never set on providers.\n *\n * @internal\n */\nfunction incrementNeutralBg(bg: ContainerBg | undefined): ContainerBg {\n  if (!bg) return 'neutral-1';\n  if (bg === 'neutral-1') return 'neutral-2';\n  if (bg === 'neutral-2') return 'neutral-3';\n  if (bg === 'neutral-3') return 'neutral-3'; // capped at neutral-3\n  // Intent values pass through unchanged\n  return bg;\n}\n\n/**\n * Provider component that establishes the bg context for child components.\n *\n * @public\n */\nexport const BgProvider = ({ bg, children }: BgProviderProps) => {\n  return (\n    <BgContext.Provider value={createVersionedValueMap({ 1: { bg } })}>\n      {children}\n    </BgContext.Provider>\n  );\n};\n\n/**\n * Hook for consumer components (e.g. Button) to read the parent bg context.\n *\n * Returns the parent container's bg unchanged. The consumer component's CSS\n * handles the visual step-up (e.g. on a neutral-1 surface, the consumer\n * uses neutral-2 tokens via `data-on-bg`).\n *\n * @public\n */\nexport function useBgConsumer(): BgContextValue {\n  const value = useContext(BgContext)?.atVersion(1);\n  return value ?? { bg: undefined };\n}\n\n/**\n * Hook for provider components (e.g. Box, Card) to resolve and provide bg context.\n *\n * **Resolution rules:**\n *\n * - `bg` is `undefined` -- transparent, no context change, returns `{ bg: undefined }`.\n *   This is the default for Box, Flex, and Grid (they do **not** auto-increment).\n * - `bg` is a `ContainerBg` value -- uses that value directly (e.g. `'neutral-1'`).\n * - `bg` is `'neutral-auto'` -- increments the neutral level from the parent context,\n *   capping at `neutral-3`. Only components that explicitly pass `'neutral-auto'`\n *   (e.g. Card) will auto-increment; it is never implicit.\n *\n * **Capping:**\n *\n * Provider components cap at `neutral-3`. The `neutral-4` level is **not** a valid\n * prop value -- it exists only in consumer component CSS (e.g. a Button on a\n * `neutral-3` surface renders with `neutral-4` tokens via `data-on-bg`).\n *\n * The caller is responsible for wrapping children with `BgProvider` when the\n * resolved bg is defined.\n *\n * @public\n */\nexport function useBgProvider(bg?: Responsive<ProviderBg>): BgContextValue {\n  const { breakpoint } = useBreakpoint();\n  const context = useBgConsumer();\n\n  if (bg === undefined) {\n    return { bg: undefined };\n  }\n\n  const resolved = resolveResponsiveValue(bg, breakpoint);\n\n  if (resolved === 'neutral-auto') {\n    return { bg: incrementNeutralBg(context.bg) };\n  }\n\n  return { bg: resolved };\n}\n"],"names":[],"mappings":";;;;;;AAoCA,MAAM,SAAA,GAAY,uBAEf,YAAY,CAAA;AAWf,SAAS,mBAAmB,EAAA,EAA0C;AACpE,EAAA,IAAI,CAAC,IAAI,OAAO,WAAA;AAChB,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAE/B,EAAA,OAAO,EAAA;AACT;AAOO,MAAM,UAAA,GAAa,CAAC,EAAE,EAAA,EAAI,UAAS,KAAuB;AAC/D,EAAA,uBACE,GAAA,CAAC,SAAA,CAAU,QAAA,EAAV,EAAmB,KAAA,EAAO,uBAAA,CAAwB,EAAE,CAAA,EAAG,EAAE,EAAA,EAAG,EAAG,GAC7D,QAAA,EACH,CAAA;AAEJ;AAWO,SAAS,aAAA,GAAgC;AAC9C,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,SAAS,CAAA,EAAG,UAAU,CAAC,CAAA;AAChD,EAAA,OAAO,KAAA,IAAS,EAAE,EAAA,EAAI,MAAA,EAAU;AAClC;AAyBO,SAAS,cAAc,EAAA,EAA6C;AACzE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,UAAU,aAAA,EAAc;AAE9B,EAAA,IAAI,OAAO,MAAA,EAAW;AACpB,IAAA,OAAO,EAAE,IAAI,MAAA,EAAU;AAAA,EACzB;AAEA,EAAA,MAAM,QAAA,GAAW,sBAAA,CAAuB,EAAA,EAAI,UAAU,CAAA;AAEtD,EAAA,IAAI,aAAa,cAAA,EAAgB;AAC/B,IAAA,OAAO,EAAE,EAAA,EAAI,kBAAA,CAAmB,OAAA,CAAQ,EAAE,CAAA,EAAE;AAAA,EAC9C;AAEA,EAAA,OAAO,EAAE,IAAI,QAAA,EAAS;AACxB;;;;"}
+{"version":3,"file":"useBg.esm.js","sources":["../../src/hooks/useBg.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useContext, ReactNode } from 'react';\nimport {\n  createVersionedContext,\n  createVersionedValueMap,\n} from '@backstage/version-bridge';\nimport { ContainerBg, ProviderBg, Responsive } from '../types';\nimport { useBreakpoint } from './useBreakpoint';\nimport { resolveResponsiveValue } from './useDefinition/helpers';\n\n/** @public */\nexport interface BgContextValue {\n  bg: ContainerBg | undefined;\n}\n\n/** @public */\nexport interface BgProviderProps {\n  bg: ContainerBg;\n  children: ReactNode;\n}\n\nconst BgContext = createVersionedContext<{\n  1: BgContextValue;\n}>('bg-context');\n\n/**\n * Increments a neutral bg level by one, capping at 'neutral-3'.\n * Intent backgrounds (danger, warning, success) pass through unchanged.\n *\n * The 'neutral-4' level is reserved for consumer component CSS and is\n * never set on providers.\n *\n * @internal\n */\nfunction incrementNeutralBg(bg: ContainerBg | undefined): ContainerBg {\n  if (!bg) return 'neutral-1';\n  if (bg === 'neutral-1') return 'neutral-2';\n  if (bg === 'neutral-2') return 'neutral-3';\n  if (bg === 'neutral-3') return 'neutral-3'; // capped at neutral-3\n  // Intent values pass through unchanged\n  return bg;\n}\n\n/**\n * Provider component that establishes the bg context for child components.\n *\n * @public\n */\nexport const BgProvider = ({ bg, children }: BgProviderProps) => {\n  return (\n    <BgContext.Provider value={createVersionedValueMap({ 1: { bg } })}>\n      {children}\n    </BgContext.Provider>\n  );\n};\n\n/**\n * Resets the bg context to undefined, cutting any inherited neutral chain.\n * Use this inside overlay components (Popover, Tooltip, Dialog, Menu) so\n * their content always starts from neutral-1 regardless of where the trigger\n * is placed in the tree.\n *\n * @internal\n */\nexport const BgReset = ({ children }: { children: ReactNode }) => {\n  return (\n    <BgContext.Provider\n      value={createVersionedValueMap({ 1: { bg: undefined } })}\n    >\n      {children}\n    </BgContext.Provider>\n  );\n};\n\n/**\n * Hook for consumer components (e.g. Button) to read the parent bg context.\n *\n * Returns the parent container's bg unchanged. The consumer component's CSS\n * handles the visual step-up (e.g. on a neutral-1 surface, the consumer\n * uses neutral-2 tokens via `data-on-bg`).\n *\n * @public\n */\nexport function useBgConsumer(): BgContextValue {\n  const value = useContext(BgContext)?.atVersion(1);\n  return value ?? { bg: undefined };\n}\n\n/**\n * Hook for provider components (e.g. Box, Card) to resolve and provide bg context.\n *\n * **Resolution rules:**\n *\n * - `bg` is `undefined` -- transparent, no context change, returns `{ bg: undefined }`.\n *   This is the default for Box, Flex, and Grid (they do **not** auto-increment).\n * - `bg` is `'neutral'` -- when the parent bg is neutral, increments the neutral\n *   level from the parent context, capping at `neutral-3`. When the parent bg is\n *   an intent (`'danger'` | `'warning'` | `'success'`), the intent passes through\n *   unchanged (i.e. `bg: 'neutral'` does not override the parent intent). The\n *   increment is always relative to the parent; it is not possible to pin a\n *   container to an explicit neutral level.\n * - `bg` is `'danger'` | `'warning'` | `'success'` -- sets the bg to that intent\n *   explicitly, regardless of the parent value.\n *\n * **Capping:**\n *\n * Provider components cap at `neutral-3`. The `neutral-4` level is **not** a valid\n * prop value -- it exists only in consumer component CSS (e.g. a Button on a\n * `neutral-3` surface renders with `neutral-4` tokens via `data-on-bg`).\n *\n * The caller is responsible for wrapping children with `BgProvider` when the\n * resolved bg is defined.\n *\n * @public\n */\nexport function useBgProvider(bg?: Responsive<ProviderBg>): BgContextValue {\n  const { breakpoint } = useBreakpoint();\n  const context = useBgConsumer();\n\n  if (bg === undefined) {\n    return { bg: undefined };\n  }\n\n  const resolved = resolveResponsiveValue(bg, breakpoint);\n\n  if (resolved === 'neutral') {\n    return { bg: incrementNeutralBg(context.bg) };\n  }\n\n  return { bg: resolved };\n}\n"],"names":[],"mappings":";;;;;;AAoCA,MAAM,SAAA,GAAY,uBAEf,YAAY,CAAA;AAWf,SAAS,mBAAmB,EAAA,EAA0C;AACpE,EAAA,IAAI,CAAC,IAAI,OAAO,WAAA;AAChB,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAE/B,EAAA,OAAO,EAAA;AACT;AAOO,MAAM,UAAA,GAAa,CAAC,EAAE,EAAA,EAAI,UAAS,KAAuB;AAC/D,EAAA,uBACE,GAAA,CAAC,SAAA,CAAU,QAAA,EAAV,EAAmB,KAAA,EAAO,uBAAA,CAAwB,EAAE,CAAA,EAAG,EAAE,EAAA,EAAG,EAAG,GAC7D,QAAA,EACH,CAAA;AAEJ;AAUO,MAAM,OAAA,GAAU,CAAC,EAAE,QAAA,EAAS,KAA+B;AAChE,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA,CAAU,QAAA;AAAA,IAAV;AAAA,MACC,KAAA,EAAO,wBAAwB,EAAE,CAAA,EAAG,EAAE,EAAA,EAAI,MAAA,IAAa,CAAA;AAAA,MAEtD;AAAA;AAAA,GACH;AAEJ;AAWO,SAAS,aAAA,GAAgC;AAC9C,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,SAAS,CAAA,EAAG,UAAU,CAAC,CAAA;AAChD,EAAA,OAAO,KAAA,IAAS,EAAE,EAAA,EAAI,MAAA,EAAU;AAClC;AA6BO,SAAS,cAAc,EAAA,EAA6C;AACzE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,UAAU,aAAA,EAAc;AAE9B,EAAA,IAAI,OAAO,MAAA,EAAW;AACpB,IAAA,OAAO,EAAE,IAAI,MAAA,EAAU;AAAA,EACzB;AAEA,EAAA,MAAM,QAAA,GAAW,sBAAA,CAAuB,EAAA,EAAI,UAAU,CAAA;AAEtD,EAAA,IAAI,aAAa,SAAA,EAAW;AAC1B,IAAA,OAAO,EAAE,EAAA,EAAI,kBAAA,CAAmB,OAAA,CAAQ,EAAE,CAAA,EAAE;AAAA,EAC9C;AAEA,EAAA,OAAO,EAAE,IAAI,QAAA,EAAS;AACxB;;;;"}

package/dist/hooks/useBreakpoint.esm.js

@@ -1,4 +1,5 @@
-import { useMediaQuery } from './useMediaQuery.esm.js';
+import { useMemo } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 const breakpoints = [
   { name: "Initial", id: "initial", value: 0 },
@@ -8,35 +9,74 @@ const breakpoints = [
   { name: "Large", id: "lg", value: 1280 },
   { name: "Extra Large", id: "xl", value: 1536 }
 ];
-const useBreakpoint = () => {
-  const matches = breakpoints.map((breakpoint2) => {
-    return useMediaQuery(`(min-width: ${breakpoint2.value}px)`);
-  });
-  const upMatches = new Map(
-    breakpoints.map((bp) => [bp.id, useMediaQuery(`(min-width: ${bp.value}px)`)])
-  );
-  const downMatches = new Map(
-    breakpoints.map((bp) => [
-      bp.id,
-      useMediaQuery(`(max-width: ${bp.value - 1}px)`)
-    ])
-  );
-  let breakpoint = breakpoints[0].id;
-  for (let i = matches.length - 1; i >= 0; i--) {
-    if (matches[i]) {
-      breakpoint = breakpoints[i].id;
-      break;
-    }
+const breakpointIndex = new Map(
+  breakpoints.map((bp, i) => [bp.id, i])
+);
+function bpIndex(key) {
+  return breakpointIndex.get(key) ?? 0;
+}
+const IS_SERVER = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+function computeBreakpoint() {
+  if (IS_SERVER) {
+    return "initial";
   }
-  return {
-    breakpoint,
-    up: (key) => {
-      return upMatches.get(key) ?? false;
-    },
-    down: (key) => {
-      return downMatches.get(key) ?? false;
+  for (let i = breakpoints.length - 1; i >= 0; i--) {
+    if (window.matchMedia(`(min-width: ${breakpoints[i].value}px)`).matches) {
+      return breakpoints[i].id;
     }
+  }
+  return "initial";
+}
+let current;
+const listeners = /* @__PURE__ */ new Set();
+let initialized = false;
+function ensureInitialized() {
+  if (initialized || IS_SERVER) {
+    return;
+  }
+  initialized = true;
+  current = computeBreakpoint();
+  for (const bp of breakpoints) {
+    const mql = window.matchMedia(`(min-width: ${bp.value}px)`);
+    mql.addEventListener("change", () => {
+      const next = computeBreakpoint();
+      if (next !== current) {
+        current = next;
+        for (const cb of listeners) {
+          cb();
+        }
+      }
+    });
+  }
+}
+function subscribe(callback) {
+  ensureInitialized();
+  listeners.add(callback);
+  return () => {
+    listeners.delete(callback);
   };
+}
+function getSnapshot() {
+  ensureInitialized();
+  return current ?? "initial";
+}
+function getServerSnapshot() {
+  return "initial";
+}
+const useBreakpoint = () => {
+  const breakpoint = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return useMemo(
+    () => ({
+      breakpoint,
+      up: (key) => bpIndex(breakpoint) >= bpIndex(key),
+      down: (key) => bpIndex(breakpoint) < bpIndex(key)
+    }),
+    [breakpoint]
+  );
 };
 
 export { breakpoints, useBreakpoint };

package/dist/hooks/useBreakpoint.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.esm.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useMediaQuery } from './useMediaQuery';\nimport type { Breakpoint } from '../types';\n\nexport const breakpoints: { name: string; id: Breakpoint; value: number }[] = [\n  { name: 'Initial', id: 'initial', value: 0 },\n  { name: 'Extra Small', id: 'xs', value: 640 },\n  { name: 'Small', id: 'sm', value: 768 },\n  { name: 'Medium', id: 'md', value: 1024 },\n  { name: 'Large', id: 'lg', value: 1280 },\n  { name: 'Extra Large', id: 'xl', value: 1536 },\n];\n\n/** @public */\nexport const useBreakpoint = () => {\n  // Call all media queries at the top level\n  const matches = breakpoints.map(breakpoint => {\n    return useMediaQuery(`(min-width: ${breakpoint.value}px)`);\n  });\n\n  // Pre-calculate all the up/down values we need\n  const upMatches = new Map(\n    breakpoints.map(bp => [bp.id, useMediaQuery(`(min-width: ${bp.value}px)`)]),\n  );\n\n  const downMatches = new Map(\n    breakpoints.map(bp => [\n      bp.id,\n      useMediaQuery(`(max-width: ${bp.value - 1}px)`),\n    ]),\n  );\n\n  let breakpoint: Breakpoint = breakpoints[0].id;\n  for (let i = matches.length - 1; i >= 0; i--) {\n    if (matches[i]) {\n      breakpoint = breakpoints[i].id;\n      break;\n    }\n  }\n\n  return {\n    breakpoint,\n    up: (key: Breakpoint): boolean => {\n      return upMatches.get(key) ?? false;\n    },\n    down: (key: Breakpoint): boolean => {\n      return downMatches.get(key) ?? false;\n    },\n  };\n};\n"],"names":["breakpoint"],"mappings":";;AAkBO,MAAM,WAAA,GAAiE;AAAA,EAC5E,EAAE,IAAA,EAAM,SAAA,EAAW,EAAA,EAAI,SAAA,EAAW,OAAO,CAAA,EAAE;AAAA,EAC3C,EAAE,IAAA,EAAM,aAAA,EAAe,EAAA,EAAI,IAAA,EAAM,OAAO,GAAA,EAAI;AAAA,EAC5C,EAAE,IAAA,EAAM,OAAA,EAAS,EAAA,EAAI,IAAA,EAAM,OAAO,GAAA,EAAI;AAAA,EACtC,EAAE,IAAA,EAAM,QAAA,EAAU,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA,EAAK;AAAA,EACxC,EAAE,IAAA,EAAM,OAAA,EAAS,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA,EAAK;AAAA,EACvC,EAAE,IAAA,EAAM,aAAA,EAAe,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA;AAC1C;AAGO,MAAM,gBAAgB,MAAM;AAEjC,EAAA,MAAM,OAAA,GAAU,WAAA,CAAY,GAAA,CAAI,CAAAA,WAAAA,KAAc;AAC5C,IAAA,OAAO,aAAA,CAAc,CAAA,YAAA,EAAeA,WAAAA,CAAW,KAAK,CAAA,GAAA,CAAK,CAAA;AAAA,EAC3D,CAAC,CAAA;AAGD,EAAA,MAAM,YAAY,IAAI,GAAA;AAAA,IACpB,WAAA,CAAY,GAAA,CAAI,CAAA,EAAA,KAAM,CAAC,EAAA,CAAG,EAAA,EAAI,aAAA,CAAc,CAAA,YAAA,EAAe,EAAA,CAAG,KAAK,CAAA,GAAA,CAAK,CAAC,CAAC;AAAA,GAC5E;AAEA,EAAA,MAAM,cAAc,IAAI,GAAA;AAAA,IACtB,WAAA,CAAY,IAAI,CAAA,EAAA,KAAM;AAAA,MACpB,EAAA,CAAG,EAAA;AAAA,MACH,aAAA,CAAc,CAAA,YAAA,EAAe,EAAA,CAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAK;AAAA,KAC/C;AAAA,GACH;AAEA,EAAA,IAAI,UAAA,GAAyB,WAAA,CAAY,CAAC,CAAA,CAAE,EAAA;AAC5C,EAAA,KAAA,IAAS,IAAI,OAAA,CAAQ,MAAA,GAAS,CAAA,EAAG,CAAA,IAAK,GAAG,CAAA,EAAA,EAAK;AAC5C,IAAA,IAAI,OAAA,CAAQ,CAAC,CAAA,EAAG;AACd,MAAA,UAAA,GAAa,WAAA,CAAY,CAAC,CAAA,CAAE,EAAA;AAC5B,MAAA;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,EAAA,EAAI,CAAC,GAAA,KAA6B;AAChC,MAAA,OAAO,SAAA,CAAU,GAAA,CAAI,GAAG,CAAA,IAAK,KAAA;AAAA,IAC/B,CAAA;AAAA,IACA,IAAA,EAAM,CAAC,GAAA,KAA6B;AAClC,MAAA,OAAO,WAAA,CAAY,GAAA,CAAI,GAAG,CAAA,IAAK,KAAA;AAAA,IACjC;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useBreakpoint.esm.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useMemo } from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\nimport type { Breakpoint } from '../types';\n\nexport const breakpoints: { name: string; id: Breakpoint; value: number }[] = [\n  { name: 'Initial', id: 'initial', value: 0 },\n  { name: 'Extra Small', id: 'xs', value: 640 },\n  { name: 'Small', id: 'sm', value: 768 },\n  { name: 'Medium', id: 'md', value: 1024 },\n  { name: 'Large', id: 'lg', value: 1280 },\n  { name: 'Extra Large', id: 'xl', value: 1536 },\n];\n\nconst breakpointIndex = new Map<Breakpoint, number>(\n  breakpoints.map((bp, i) => [bp.id, i]),\n);\n\nfunction bpIndex(key: Breakpoint): number {\n  return breakpointIndex.get(key) ?? 0;\n}\n\nconst IS_SERVER =\n  typeof window === 'undefined' || typeof window.matchMedia === 'undefined';\n\nfunction computeBreakpoint(): Breakpoint {\n  if (IS_SERVER) {\n    return 'initial';\n  }\n  for (let i = breakpoints.length - 1; i >= 0; i--) {\n    if (window.matchMedia(`(min-width: ${breakpoints[i].value}px)`).matches) {\n      return breakpoints[i].id;\n    }\n  }\n  return 'initial';\n}\n\n// --- Module-scoped singleton store ---\n// This is intentionally not a global singleton. Multiple copies of this module\n// (e.g. different package versions or module federation remotes) each get their\n// own store. This avoids cross-version coupling at the cost of a few extra\n// listeners, which is a fine trade-off.\n// `current` is initialized lazily on first client-side access.\n\nlet current: Breakpoint | undefined;\nconst listeners = new Set<() => void>();\nlet initialized = false;\n\nfunction ensureInitialized(): void {\n  if (initialized || IS_SERVER) {\n    return;\n  }\n  initialized = true;\n  current = computeBreakpoint();\n\n  // Register one listener per breakpoint. When any query fires, re-evaluate\n  // all breakpoints to find the new active one. Notify subscribers only if\n  // the active breakpoint actually changed.\n  for (const bp of breakpoints) {\n    const mql = window.matchMedia(`(min-width: ${bp.value}px)`);\n    mql.addEventListener('change', () => {\n      const next = computeBreakpoint();\n      if (next !== current) {\n        current = next;\n        for (const cb of listeners) {\n          cb();\n        }\n      }\n    });\n  }\n}\n\nfunction subscribe(callback: () => void): () => void {\n  ensureInitialized();\n  listeners.add(callback);\n  return () => {\n    listeners.delete(callback);\n  };\n}\n\nfunction getSnapshot(): Breakpoint {\n  ensureInitialized();\n  return current ?? 'initial';\n}\n\nfunction getServerSnapshot(): Breakpoint {\n  return 'initial';\n}\n\n/** @public */\nexport const useBreakpoint = () => {\n  const breakpoint = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getServerSnapshot,\n  );\n\n  return useMemo(\n    () => ({\n      breakpoint,\n      up: (key: Breakpoint): boolean => bpIndex(breakpoint) >= bpIndex(key),\n      down: (key: Breakpoint): boolean => bpIndex(breakpoint) < bpIndex(key),\n    }),\n    [breakpoint],\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/hooks/useDefinition/defineComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"defineComponent.esm.js","sources":["../../../src/hooks/useDefinition/defineComponent.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentConfig, BgPropsConstraint } from './types';\n\nexport function defineComponent<P extends Record<string, any>>() {\n  return <\n    const S extends Record<string, string>,\n    const C extends ComponentConfig<P, S>,\n  >(\n    config: C & BgPropsConstraint<P, C['bg']>,\n  ): C => config;\n}\n"],"names":[],"mappings":"AAkBO,SAAS,eAAA,GAAiD;AAC/D,EAAA,OAAO,CAIL,MAAA,KACM,MAAA;AACV;;;;"}
+{"version":3,"file":"defineComponent.esm.js","sources":["../../../src/hooks/useDefinition/defineComponent.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n  ComponentConfig,\n  BgPropsConstraint,\n  AnalyticsPropsConstraint,\n} from './types';\n\nexport function defineComponent<P extends Record<string, any>>() {\n  return <\n    const S extends Record<string, string>,\n    const C extends ComponentConfig<P, S>,\n  >(\n    config: C &\n      BgPropsConstraint<P, C['bg']> &\n      AnalyticsPropsConstraint<P, C['analytics']>,\n  ): C => config;\n}\n"],"names":[],"mappings":"AAsBO,SAAS,eAAA,GAAiD;AAC/D,EAAA,OAAO,CAIL,MAAA,KAGM,MAAA;AACV;;;;"}

package/dist/hooks/useDefinition/useDefinition.esm.js

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { useBreakpoint } from '../useBreakpoint.esm.js';
 import { useBgProvider, useBgConsumer, BgProvider } from '../useBg.esm.js';
 import { resolveDefinitionProps, processUtilityProps } from './helpers.esm.js';
+import { useAnalytics, noopTracker } from '../../analytics/useAnalytics.esm.js';
 
 function useDefinition(definition, props, options) {
   const { breakpoint } = useBreakpoint();
@@ -35,8 +36,13 @@ function useDefinition(definition, props, options) {
     props,
     definition.utilityProps ?? []
   );
-  const utilityTarget = "root";
-  const classNameTarget = "root";
+  let analytics = noopTracker;
+  if (definition.analytics) {
+    const tracker = useAnalytics();
+    analytics = ownPropsResolved.noTrack ? noopTracker : tracker;
+  }
+  const utilityTarget = options?.utilityTarget ?? "root";
+  const classNameTarget = options?.classNameTarget ?? "root";
   const classes = {};
   for (const [name, cssKey] of Object.entries(definition.classNames)) {
     classes[name] = clsx(
@@ -61,7 +67,8 @@ function useDefinition(definition, props, options) {
     },
     restProps,
     dataAttributes,
-    utilityStyle
+    utilityStyle,
+    ...definition.analytics ? { analytics } : {}
   };
 }
 

package/dist/hooks/useDefinition/useDefinition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  // Resolve all props centrally — applies responsive values and defaults\n  const { ownPropsResolved, restProps } = resolveDefinitionProps(\n    definition,\n    props,\n    breakpoint,\n  );\n\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const finalValue = ownPropsResolved[key];\n\n    if (finalValue !== undefined) {\n      // Skip data-bg for bg prop when the provider path handles it\n      if (key === 'bg' && definition.bg === 'provider') continue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Provider: resolve bg and provide context for children\n  const providerBg = useBgProvider(\n    definition.bg === 'provider' ? ownPropsResolved.bg : undefined,\n  );\n\n  // Consumer: read parent context bg\n  const consumerBg = useBgConsumer();\n\n  // Provider: set data-bg from the resolved provider bg\n  if (definition.bg === 'provider' && providerBg.bg !== undefined) {\n    dataAttributes['data-bg'] = String(providerBg.bg);\n  }\n\n  // Consumer: set data-on-bg from the parent context\n  if (definition.bg === 'consumer' && consumerBg.bg !== undefined) {\n    dataAttributes['data-on-bg'] = String(consumerBg.bg);\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  const utilityTarget = options?.utilityTarget ?? 'root';\n  const classNameTarget = options?.classNameTarget ?? 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      utilityTarget === name && utilityClasses,\n      classNameTarget === name && ownPropsResolved.className,\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let childrenWithBgProvider: ReactNode | undefined;\n\n  if (definition.bg === 'provider') {\n    childrenWithBgProvider = providerBg.bg ? (\n      <BgProvider bg={providerBg.bg}>{props.children}</BgProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.bg === 'provider'\n        ? { childrenWithBgProvider }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport { useAnalytics } from '../../analytics/useAnalytics';\nimport { noopTracker } from '../../analytics/useAnalytics';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  // Resolve all props centrally — applies responsive values and defaults\n  const { ownPropsResolved, restProps } = resolveDefinitionProps(\n    definition,\n    props,\n    breakpoint,\n  );\n\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const finalValue = ownPropsResolved[key];\n\n    if (finalValue !== undefined) {\n      // Skip data-bg for bg prop when the provider path handles it\n      if (key === 'bg' && definition.bg === 'provider') continue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Provider: resolve bg and provide context for children\n  const providerBg = useBgProvider(\n    definition.bg === 'provider' ? ownPropsResolved.bg : undefined,\n  );\n\n  // Consumer: read parent context bg\n  const consumerBg = useBgConsumer();\n\n  // Provider: set data-bg from the resolved provider bg\n  if (definition.bg === 'provider' && providerBg.bg !== undefined) {\n    dataAttributes['data-bg'] = String(providerBg.bg);\n  }\n\n  // Consumer: set data-on-bg from the parent context\n  if (definition.bg === 'consumer' && consumerBg.bg !== undefined) {\n    dataAttributes['data-on-bg'] = String(consumerBg.bg);\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  // Analytics: conditionally call useAnalytics based on definition flag\n  // Safe: definition is a module-level constant, condition never changes at runtime\n  let analytics = noopTracker;\n  if (definition.analytics) {\n    const tracker = useAnalytics();\n    analytics = ownPropsResolved.noTrack ? noopTracker : tracker;\n  }\n\n  const utilityTarget = options?.utilityTarget ?? 'root';\n  const classNameTarget = options?.classNameTarget ?? 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      utilityTarget === name && utilityClasses,\n      classNameTarget === name && ownPropsResolved.className,\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let childrenWithBgProvider: ReactNode | undefined;\n\n  if (definition.bg === 'provider') {\n    childrenWithBgProvider = providerBg.bg ? (\n      <BgProvider bg={providerBg.bg}>{props.children}</BgProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.bg === 'provider'\n        ? { childrenWithBgProvider }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n    ...(definition.analytics ? { analytics } : {}),\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}