@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.esm.js","sources":["../../../src/hooks/useDefinition/helpers.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 { breakpoints } from '../useBreakpoint';\nimport { utilityClassMap } from '../../utils/utilityClassMap';\nimport type { UnwrapResponsive, UtilityStyle } from './types';\n\nconst namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');\n\nfunction isResponsiveObject(value: unknown): value is Record<string, unknown> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    namedBreakpoints.some(b => b.id in value)\n  );\n}\n\nexport function resolveResponsiveValue<T>(\n  value: T,\n  breakpoint: string,\n): UnwrapResponsive<T> {\n  if (!isResponsiveObject(value)) {\n    return value as UnwrapResponsive<T>;\n  }\n\n  const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n  // Look for value at current breakpoint or smaller\n  for (let i = index; i >= 0; i--) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  // If no value found, check from smallest breakpoint up\n  for (let i = 0; i < breakpoints.length; i++) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  return value as UnwrapResponsive<T>;\n}\n\nexport function processUtilityProps<Keys extends string>(\n  props: Record<string, any>,\n  utilityPropKeys: readonly Keys[],\n): { utilityClasses: string; utilityStyle: UtilityStyle<Keys> } {\n  const utilityClassList: string[] = [];\n  const generatedStyle: Record<string, unknown> = {};\n\n  const handleUtilityValue = (\n    key: string,\n    val: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    // Check if value is in the list of valid values for this utility\n    const values = utilityConfig.values as readonly (string | number)[];\n    if (values.length > 0 && values.includes(val as string | number)) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if ('cssVar' in utilityConfig && utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVar = utilityConfig.cssVar;\n      const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;\n      // CSS custom properties need to be set on the style object\n      generatedStyle[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropKeys) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  return {\n    utilityClasses: utilityClassList.join(' '),\n    utilityStyle: generatedStyle as UtilityStyle<Keys>,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"helpers.esm.js","sources":["../../../src/hooks/useDefinition/helpers.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 { breakpoints } from '../useBreakpoint';\nimport { utilityClassMap } from '../../utils/utilityClassMap';\nimport type { ComponentConfig, UnwrapResponsive, UtilityStyle } from './types';\n\nconst namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');\n\nfunction isResponsiveObject(value: unknown): value is Record<string, unknown> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    namedBreakpoints.some(b => b.id in value)\n  );\n}\n\nexport function resolveResponsiveValue<T>(\n  value: T,\n  breakpoint: string,\n): UnwrapResponsive<T> {\n  if (!isResponsiveObject(value)) {\n    return value as UnwrapResponsive<T>;\n  }\n\n  const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n  // Look for value at current breakpoint or smaller\n  for (let i = index; i >= 0; i--) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  // If no value found, check from smallest breakpoint up\n  for (let i = 0; i < breakpoints.length; i++) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  return value as UnwrapResponsive<T>;\n}\n\nexport function resolveDefinitionProps<D extends ComponentConfig<any, any>>(\n  definition: D,\n  props: Record<string, any>,\n  breakpoint: string,\n): {\n  ownPropsResolved: Record<string, any>;\n  restProps: Record<string, any>;\n} {\n  const ownPropKeys = new Set(Object.keys(definition.propDefs));\n  const utilityPropKeys = new Set(definition.utilityProps ?? []);\n\n  const ownPropsRaw: Record<string, any> = {};\n  const restProps: Record<string, any> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (ownPropKeys.has(key)) {\n      ownPropsRaw[key] = value;\n    } else if (!(utilityPropKeys as Set<string>).has(key)) {\n      restProps[key] = value;\n    }\n  }\n\n  const ownPropsResolved: Record<string, any> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const rawValue = ownPropsRaw[key];\n    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);\n    const finalValue = resolvedValue ?? (config as any).default;\n    if (finalValue !== undefined) {\n      ownPropsResolved[key] = finalValue;\n    }\n  }\n\n  return { ownPropsResolved, restProps };\n}\n\nexport function processUtilityProps<Keys extends string>(\n  props: Record<string, any>,\n  utilityPropKeys: readonly Keys[],\n): { utilityClasses: string; utilityStyle: UtilityStyle<Keys> } {\n  const utilityClassList: string[] = [];\n  const generatedStyle: Record<string, unknown> = {};\n\n  const handleUtilityValue = (\n    key: string,\n    val: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    // Check if value is in the list of valid values for this utility\n    const values = utilityConfig.values as readonly (string | number)[];\n    if (values.length > 0 && values.includes(val as string | number)) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if ('cssVar' in utilityConfig && utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVar = utilityConfig.cssVar;\n      const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;\n      // CSS custom properties need to be set on the style object\n      generatedStyle[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropKeys) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  return {\n    utilityClasses: utilityClassList.join(' '),\n    utilityStyle: generatedStyle as UtilityStyle<Keys>,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -2,39 +2,29 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useBreakpoint } from '../useBreakpoint.esm.js';
 import { useBgProvider, useBgConsumer, BgProvider } from '../useBg.esm.js';
-import { resolveResponsiveValue, processUtilityProps } from './helpers.esm.js';
+import { resolveDefinitionProps, processUtilityProps } from './helpers.esm.js';
 
 function useDefinition(definition, props, options) {
   const { breakpoint } = useBreakpoint();
-  const providerBg = useBgProvider(
-    definition.bg === "provider" ? props.bg : void 0
+  const { ownPropsResolved, restProps } = resolveDefinitionProps(
+    definition,
+    props,
+    breakpoint
   );
-  const consumerBg = useBgConsumer();
-  const ownPropKeys = new Set(Object.keys(definition.propDefs));
-  const utilityPropKeys = new Set(definition.utilityProps ?? []);
-  const ownPropsRaw = {};
-  const restProps = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (ownPropKeys.has(key)) {
-      ownPropsRaw[key] = value;
-    } else if (!utilityPropKeys.has(key)) {
-      restProps[key] = value;
-    }
-  }
-  const ownPropsResolved = {};
   const dataAttributes = {};
   for (const [key, config] of Object.entries(definition.propDefs)) {
-    const rawValue = ownPropsRaw[key];
-    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);
-    const finalValue = resolvedValue ?? config.default;
+    const finalValue = ownPropsResolved[key];
     if (finalValue !== void 0) {
-      ownPropsResolved[key] = finalValue;
       if (key === "bg" && definition.bg === "provider") continue;
       if (config.dataAttribute) {
         dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);
       }
     }
   }
+  const providerBg = useBgProvider(
+    definition.bg === "provider" ? ownPropsResolved.bg : void 0
+  );
+  const consumerBg = useBgConsumer();
   if (definition.bg === "provider" && providerBg.bg !== void 0) {
     dataAttributes["data-bg"] = String(providerBg.bg);
   }
@@ -45,8 +35,8 @@ function useDefinition(definition, props, options) {
     props,
     definition.utilityProps ?? []
   );
-  const utilityTarget = "root";
-  const classNameTarget = "root";
+  const utilityTarget = options?.utilityTarget ?? "root";
+  const classNameTarget = options?.classNameTarget ?? "root";
   const classes = {};
   for (const [name, cssKey] of Object.entries(definition.classNames)) {
     classes[name] = clsx(

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 { resolveResponsiveValue, 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  // Provider: resolve bg and provide context for children\n  const providerBg = useBgProvider(\n    definition.bg === 'provider' ? props.bg : undefined,\n  );\n\n  // Consumer: read parent context bg\n  const consumerBg = useBgConsumer();\n\n  const ownPropKeys = new Set(Object.keys(definition.propDefs));\n  const utilityPropKeys = new Set(definition.utilityProps ?? []);\n\n  const ownPropsRaw: Record<string, any> = {};\n  const restProps: Record<string, any> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (ownPropKeys.has(key)) {\n      ownPropsRaw[key] = value;\n    } else if (!(utilityPropKeys as Set<string>).has(key)) {\n      restProps[key] = value;\n    }\n  }\n\n  const ownPropsResolved: Record<string, any> = {};\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const rawValue = ownPropsRaw[key];\n    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);\n    const finalValue = resolvedValue ?? (config as any).default;\n\n    if (finalValue !== undefined) {\n      ownPropsResolved[key] = finalValue;\n\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: 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 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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"}