@backstage/ui 0.10.0 → 0.11.0-next.1

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.esm.js","sources":["../../../src/components/ToggleButtonGroup/ToggleButtonGroup.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';\nimport type { ToggleButtonGroupProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonGroupDefinition } from './definition';\nimport styles from './ToggleButtonGroup.module.css';\n\n/** @public */\nexport const ToggleButtonGroup = forwardRef(\n  (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonGroupDefinition,\n      {\n        ...props,\n      },\n    );\n\n    const { className, children, ...rest } = cleanedProps;\n\n    return (\n      <AriaToggleButtonGroup\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {children}\n      </AriaToggleButtonGroup>\n    );\n  },\n);\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n"],"names":["AriaToggleButtonGroup"],"mappings":";;;;;;;;AAyBO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,2BAAA;AAAA,MACA;AAAA,QACE,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAACA,mBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx {\n    display: inline-flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    border-radius: var(--bui-radius-2);\n    overflow: hidden;\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    width: fit-content;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n    width: fit-content;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx > .bui-ToggleButton {\n    border-radius: 0;\n    margin: 0;\n    box-shadow: none;\n    border: 0;\n  }\n\n  /* Horizontal radius rules (default orientation) */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton {\n    border-radius: 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton:first-child {\n    border-radius: var(--bui-radius-2) 0 0 var(--bui-radius-2);\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton:last-child {\n    border-radius: 0 var(--bui-radius-2) var(--bui-radius-2) 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton:only-child {\n    border-radius: var(--bui-radius-2);\n  }\n\n  /* Horizontal dividers */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    .bui-ToggleButton\n    + .bui-ToggleButton {\n    border-left: 1px solid var(--bui-border);\n  }\n\n  /* Vertical dividers */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    .bui-ToggleButton {\n    width: 100%;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    .bui-ToggleButton\n    + .bui-ToggleButton {\n    border-top: 1px solid var(--bui-border);\n  }\n\n  /* Vertical radius rules */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton {\n    border-radius: 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton:first-child {\n    border-radius: var(--bui-radius-2) var(--bui-radius-2) 0 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton:last-child {\n    border-radius: 0 0 var(--bui-radius-2) var(--bui-radius-2);\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton:only-child {\n    border-radius: var(--bui-radius-2);\n  }\n\n  /* Focus ring on group surface */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:focus-visible {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: 2px;\n  }\n}\n";
+var styles = {"bui-ToggleButtonGroup":"ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ToggleButtonGroup.module.css.esm.js.map

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ToggleButtonGroup/definition.esm.js

@@ -0,0 +1,11 @@
+const ToggleButtonGroupDefinition = {
+  classNames: {
+    root: "bui-ToggleButtonGroup"
+  },
+  dataAttributes: {
+    orientation: ["horizontal", "vertical"]
+  }
+};
+
+export { ToggleButtonGroupDefinition };
+//# sourceMappingURL=definition.esm.js.map

package/dist/components/ToggleButtonGroup/definition.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButtonGroup/definition.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 { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButtonGroup\n * @public\n */\nexport const ToggleButtonGroupDefinition = {\n  classNames: {\n    root: 'bui-ToggleButtonGroup',\n  },\n  dataAttributes: {\n    orientation: ['horizontal', 'vertical'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,2BAAA,GAA8B;AAAA,EACzC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,WAAA,EAAa,CAAC,YAAA,EAAc,UAAU;AAAA;AAE1C;;;;"}

package/dist/hooks/useSurface.esm.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
+
+const SurfaceContext = createVersionedContext("surface-context");
+function incrementSurface(surface) {
+  if (!surface) return "0";
+  if (surface === "0") return "1";
+  if (surface === "1") return "2";
+  if (surface === "2" || surface === "3") return "3";
+  if (surface === "danger") return "danger";
+  if (surface === "warning") return "warning";
+  if (surface === "success") return "success";
+  if (surface === "auto") return "1";
+  return surface;
+}
+function resolveSurfaceForProvider(contextSurface, requestedSurface) {
+  if (!requestedSurface) {
+    return contextSurface;
+  }
+  if (typeof requestedSurface === "object") {
+    return requestedSurface;
+  }
+  if (typeof contextSurface === "object") {
+    if (requestedSurface === "auto") {
+      return "0";
+    }
+    return requestedSurface;
+  }
+  if (requestedSurface === "auto") {
+    return incrementSurface(contextSurface);
+  }
+  return requestedSurface;
+}
+function resolveSurfaceForConsumer(contextSurface, requestedSurface) {
+  if (!requestedSurface) {
+    return contextSurface;
+  }
+  if (typeof requestedSurface === "object") {
+    return requestedSurface;
+  }
+  if (requestedSurface === "auto") {
+    if (typeof contextSurface === "object") {
+      return "0";
+    }
+    return contextSurface;
+  }
+  return requestedSurface;
+}
+const SurfaceProvider = ({
+  surface,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(
+    SurfaceContext.Provider,
+    {
+      value: createVersionedValueMap({ 1: { surface } }),
+      children
+    }
+  );
+};
+const useSurface = (options) => {
+  const value = useContext(SurfaceContext)?.atVersion(1);
+  const context = value ?? { surface: void 0 };
+  const isProvider = options?.surface !== void 0;
+  const requestedSurface = options?.surface ?? options?.onSurface;
+  const resolvedSurface = isProvider ? resolveSurfaceForProvider(context.surface, requestedSurface) : resolveSurfaceForConsumer(context.surface, requestedSurface);
+  return {
+    surface: resolvedSurface
+  };
+};
+
+export { SurfaceProvider, resolveSurfaceForProvider, useSurface };
+//# sourceMappingURL=useSurface.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSurface.esm.js","sources":["../../src/hooks/useSurface.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 { Surface, Responsive } from '../types';\n\n/** @public */\nexport interface SurfaceContextValue {\n  surface: Responsive<Surface> | undefined;\n}\n\n/** @public */\nexport interface SurfaceProviderProps {\n  surface: Responsive<Surface>;\n  children: ReactNode;\n}\n\n/** @public */\nexport interface UseSurfaceOptions {\n  /**\n   * The surface value this component CREATES for its children (container behavior).\n   * When 'auto', increments from parent surface.\n   *\n   * Use this for components like Box, Flex, Grid that establish surface context.\n   */\n  surface?: Responsive<Surface>;\n  /**\n   * The surface value this component is ON for styling (leaf behavior).\n   * When 'auto', inherits from current surface.\n   *\n   * Use this for leaf components like Button that consume surface for styling.\n   */\n  onSurface?: Responsive<Surface>;\n}\n\nconst SurfaceContext = createVersionedContext<{\n  1: SurfaceContextValue;\n}>('surface-context');\n\n/**\n * Increments a surface level by one, capping at '3'.\n * Intent surfaces (danger, warning, success) remain unchanged.\n *\n * @internal\n */\nfunction incrementSurface(surface: Surface | undefined): Surface {\n  if (!surface) return '0'; // no context = root level\n  if (surface === '0') return '1';\n  if (surface === '1') return '2';\n  if (surface === '2' || surface === '3') return '3'; // cap at max\n  // Intent surfaces remain unchanged\n  if (surface === 'danger') return 'danger';\n  if (surface === 'warning') return 'warning';\n  if (surface === 'success') return 'success';\n  // 'auto' should not appear here, but handle it defensively\n  if (surface === 'auto') return '1';\n  return surface;\n}\n\n/**\n * Resolves a surface value for containers (SurfaceProvider).\n * When 'auto' is used, increments from the parent surface.\n * For responsive surfaces (objects), returns them as-is without resolution.\n *\n * @param contextSurface - The surface from context\n * @param requestedSurface - The requested surface value (may be 'auto')\n * @returns The resolved surface value\n * @internal\n */\nexport function resolveSurfaceForProvider(\n  contextSurface: Responsive<Surface> | undefined,\n  requestedSurface: Responsive<Surface> | undefined,\n): Responsive<Surface> | undefined {\n  if (!requestedSurface) {\n    return contextSurface;\n  }\n\n  // If requestedSurface is a responsive object (breakpoint-based), return as-is\n  if (typeof requestedSurface === 'object') {\n    return requestedSurface;\n  }\n\n  // If contextSurface is a responsive object, we can't auto-increment from it\n  // Return the requested surface as-is or default to '0' for auto\n  if (typeof contextSurface === 'object') {\n    if (requestedSurface === 'auto') {\n      return '0'; // fallback to root when context is responsive\n    }\n    return requestedSurface;\n  }\n\n  // For containers, 'auto' means increment to create a new elevated context\n  if (requestedSurface === 'auto') {\n    return incrementSurface(contextSurface);\n  }\n\n  return requestedSurface;\n}\n\n/**\n * Resolves a surface value for leaf components (useSurface hook).\n * When 'auto' is used, inherits the current surface (doesn't increment).\n * For responsive surfaces (objects), returns them as-is without resolution.\n *\n * @param contextSurface - The surface from context\n * @param requestedSurface - The requested surface value (may be 'auto')\n * @returns The resolved surface value\n * @internal\n */\nfunction resolveSurfaceForConsumer(\n  contextSurface: Responsive<Surface> | undefined,\n  requestedSurface: Responsive<Surface> | undefined,\n): Responsive<Surface> | undefined {\n  if (!requestedSurface) {\n    return contextSurface;\n  }\n\n  // If requestedSurface is a responsive object (breakpoint-based), return as-is\n  if (typeof requestedSurface === 'object') {\n    return requestedSurface;\n  }\n\n  // For leaf components, 'auto' means inherit the current surface\n  if (requestedSurface === 'auto') {\n    // If context is responsive, fallback to '0'\n    if (typeof contextSurface === 'object') {\n      return '0';\n    }\n    return contextSurface;\n  }\n\n  return requestedSurface;\n}\n\n/**\n * Provider component that establishes the surface context for child components.\n * This allows components to adapt their styling based on their background surface.\n *\n * Note: The surface value should already be resolved before passing to this provider.\n * Container components should use useSurface with the surface parameter.\n *\n * @internal\n */\nexport const SurfaceProvider = ({\n  surface,\n  children,\n}: SurfaceProviderProps) => {\n  return (\n    <SurfaceContext.Provider\n      value={createVersionedValueMap({ 1: { surface } })}\n    >\n      {children}\n    </SurfaceContext.Provider>\n  );\n};\n\n/**\n * Hook to access the current surface context.\n * Returns the current surface level, or undefined if no provider is present.\n *\n * The parameter name determines the behavior:\n * - `surface`: Container behavior - 'auto' increments from parent\n * - `onSurface`: Leaf behavior - 'auto' inherits from parent\n *\n * @param options - Optional configuration for surface resolution\n * @internal\n */\nexport const useSurface = (\n  options?: UseSurfaceOptions,\n): SurfaceContextValue => {\n  const value = useContext(SurfaceContext)?.atVersion(1);\n  const context = value ?? { surface: undefined };\n\n  // Infer behavior from which parameter is provided\n  // 'surface' = provider behavior (increment)\n  // 'onSurface' = consumer behavior (inherit)\n  const isProvider = options?.surface !== undefined;\n  const requestedSurface = options?.surface ?? options?.onSurface;\n\n  const resolvedSurface = isProvider\n    ? resolveSurfaceForProvider(context.surface, requestedSurface)\n    : resolveSurfaceForConsumer(context.surface, requestedSurface);\n\n  return {\n    surface: resolvedSurface,\n  };\n};\n"],"names":[],"mappings":";;;;AAoDA,MAAM,cAAA,GAAiB,uBAEpB,iBAAiB,CAAA;AAQpB,SAAS,iBAAiB,OAAA,EAAuC;AAC/D,EAAA,IAAI,CAAC,SAAS,OAAO,GAAA;AACrB,EAAA,IAAI,OAAA,KAAY,KAAK,OAAO,GAAA;AAC5B,EAAA,IAAI,OAAA,KAAY,KAAK,OAAO,GAAA;AAC5B,EAAA,IAAI,OAAA,KAAY,GAAA,IAAO,OAAA,KAAY,GAAA,EAAK,OAAO,GAAA;AAE/C,EAAA,IAAI,OAAA,KAAY,UAAU,OAAO,QAAA;AACjC,EAAA,IAAI,OAAA,KAAY,WAAW,OAAO,SAAA;AAClC,EAAA,IAAI,OAAA,KAAY,WAAW,OAAO,SAAA;AAElC,EAAA,IAAI,OAAA,KAAY,QAAQ,OAAO,GAAA;AAC/B,EAAA,OAAO,OAAA;AACT;AAYO,SAAS,yBAAA,CACd,gBACA,gBAAA,EACiC;AACjC,EAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,IAAA,OAAO,cAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,qBAAqB,QAAA,EAAU;AACxC,IAAA,OAAO,gBAAA;AAAA,EACT;AAIA,EAAA,IAAI,OAAO,mBAAmB,QAAA,EAAU;AACtC,IAAA,IAAI,qBAAqB,MAAA,EAAQ;AAC/B,MAAA,OAAO,GAAA;AAAA,IACT;AACA,IAAA,OAAO,gBAAA;AAAA,EACT;AAGA,EAAA,IAAI,qBAAqB,MAAA,EAAQ;AAC/B,IAAA,OAAO,iBAAiB,cAAc,CAAA;AAAA,EACxC;AAEA,EAAA,OAAO,gBAAA;AACT;AAYA,SAAS,yBAAA,CACP,gBACA,gBAAA,EACiC;AACjC,EAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,IAAA,OAAO,cAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,qBAAqB,QAAA,EAAU;AACxC,IAAA,OAAO,gBAAA;AAAA,EACT;AAGA,EAAA,IAAI,qBAAqB,MAAA,EAAQ;AAE/B,IAAA,IAAI,OAAO,mBAAmB,QAAA,EAAU;AACtC,MAAA,OAAO,GAAA;AAAA,IACT;AACA,IAAA,OAAO,cAAA;AAAA,EACT;AAEA,EAAA,OAAO,gBAAA;AACT;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA;AACF,CAAA,KAA4B;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA,CAAe,QAAA;AAAA,IAAf;AAAA,MACC,OAAO,uBAAA,CAAwB,EAAE,GAAG,EAAE,OAAA,IAAW,CAAA;AAAA,MAEhD;AAAA;AAAA,GACH;AAEJ;AAaO,MAAM,UAAA,GAAa,CACxB,OAAA,KACwB;AACxB,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,cAAc,CAAA,EAAG,UAAU,CAAC,CAAA;AACrD,EAAA,MAAM,OAAA,GAAU,KAAA,IAAS,EAAE,OAAA,EAAS,MAAA,EAAU;AAK9C,EAAA,MAAM,UAAA,GAAa,SAAS,OAAA,KAAY,MAAA;AACxC,EAAA,MAAM,gBAAA,GAAmB,OAAA,EAAS,OAAA,IAAW,OAAA,EAAS,SAAA;AAEtD,EAAA,MAAM,eAAA,GAAkB,UAAA,GACpB,yBAAA,CAA0B,OAAA,CAAQ,OAAA,EAAS,gBAAgB,CAAA,GAC3D,yBAAA,CAA0B,OAAA,CAAQ,OAAA,EAAS,gBAAgB,CAAA;AAE/D,EAAA,OAAO;AAAA,IACL,OAAA,EAAS;AAAA,GACX;AACF;;;;"}