@backstage/ui 0.10.0 → 0.11.0-next.1

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

@@ -1,6 +1,6 @@
 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  .Header-module_bui-HeaderToolbar__1HcPN {\n    margin-bottom: var(--bui-space-6);\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0px;\n      right: 0px;\n      height: 16px;\n      background-color: var(--bui-bg);\n      z-index: 0;\n    }\n\n    &[data-has-tabs='true'] {\n      margin-bottom: 0;\n    }\n  }\n\n  .Header-module_bui-HeaderToolbarWrapper__1WJwf {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: var(--bui-bg-surface-1);\n    padding-inline: var(--bui-space-5);\n    border-bottom: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    height: 52px;\n  }\n\n  .Header-module_bui-HeaderToolbarContent__8b9nS {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header-module_bui-HeaderToolbarName__2E-_b {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    flex-shrink: 0;\n  }\n\n  .Header-module_bui-HeaderToolbarIcon__1JjN5 {\n    width: 16px;\n    height: 16px;\n    color: var(--bui-fg-primary);\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .Header-module_bui-HeaderToolbarControls__1EtQC {\n    position: absolute;\n    right: var(--bui-space-5);\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header-module_bui-HeaderTabsWrapper__19BXF {\n    margin-bottom: var(--bui-space-4);\n    padding-inline: var(--bui-space-3);\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n  }\n}\n";
+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  .Header-module_bui-HeaderToolbar__1HcPN {\n    margin-bottom: var(--bui-space-6);\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0px;\n      right: 0px;\n      height: 16px;\n      background-color: var(--bui-bg-surface-0);\n      z-index: 0;\n    }\n\n    &[data-has-tabs='true'] {\n      margin-bottom: 0;\n    }\n  }\n\n  .Header-module_bui-HeaderToolbarWrapper__1WJwf {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: var(--bui-bg-surface-1);\n    padding-inline: var(--bui-space-5);\n    border-bottom: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    height: 52px;\n  }\n\n  .Header-module_bui-HeaderToolbarContent__8b9nS {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header-module_bui-HeaderToolbarName__2E-_b {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    flex-shrink: 0;\n  }\n\n  .Header-module_bui-HeaderToolbarIcon__1JjN5 {\n    width: 16px;\n    height: 16px;\n    color: var(--bui-fg-primary);\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .Header-module_bui-HeaderToolbarControls__1EtQC {\n    position: absolute;\n    right: var(--bui-space-5);\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header-module_bui-HeaderTabsWrapper__19BXF {\n    margin-bottom: var(--bui-space-4);\n    padding-inline: var(--bui-space-3);\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n  }\n}\n";
 var styles = {"bui-HeaderToolbar":"Header-module_bui-HeaderToolbar__1HcPN","bui-HeaderToolbarWrapper":"Header-module_bui-HeaderToolbarWrapper__1WJwf","bui-HeaderToolbarContent":"Header-module_bui-HeaderToolbarContent__8b9nS","bui-HeaderToolbarName":"Header-module_bui-HeaderToolbarName__2E-_b","bui-HeaderToolbarIcon":"Header-module_bui-HeaderToolbarIcon__1JjN5","bui-HeaderToolbarControls":"Header-module_bui-HeaderToolbarControls__1EtQC","bui-HeaderTabsWrapper":"Header-module_bui-HeaderTabsWrapper__19BXF"};
 styleInject(css_248z);
 

package/dist/components/Link/Link.esm.js

@@ -9,8 +9,7 @@ import { useNavigate, useHref } from 'react-router-dom';
 import { isExternalLink } from '../../utils/isExternalLink.esm.js';
 import styles from './Link.module.css.esm.js';
 
-const Link = forwardRef((props, ref) => {
-  const navigate = useNavigate();
+const LinkInternal = forwardRef((props, ref) => {
   const { classNames, dataAttributes, cleanedProps } = useStyles(
     LinkDefinition,
     {
@@ -33,7 +32,6 @@ const Link = forwardRef((props, ref) => {
     slot,
     ...restProps
   } = cleanedProps;
-  const isExternal = isExternalLink(href);
   const internalRef = useRef(null);
   const linkRef = ref || internalRef;
   const { linkProps } = useLink(
@@ -44,7 +42,7 @@ const Link = forwardRef((props, ref) => {
     },
     linkRef
   );
-  const anchorElement = /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "a",
     {
       ...linkProps,
@@ -57,10 +55,15 @@ const Link = forwardRef((props, ref) => {
       children
     }
   );
+});
+LinkInternal.displayName = "LinkInternal";
+const Link = forwardRef((props, ref) => {
+  const navigate = useNavigate();
+  const isExternal = isExternalLink(props.href);
   if (isExternal) {
-    return anchorElement;
+    return /* @__PURE__ */ jsx(LinkInternal, { ...props, ref });
   }
-  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: anchorElement });
+  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(LinkInternal, { ...props, ref }) });
 });
 Link.displayName = "Link";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport { RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { LinkDefinition } from './definition';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport styles from './Link.module.css';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    LinkDefinition,\n    {\n      variant: 'body',\n      weight: 'regular',\n      color: 'primary',\n      ...props,\n    },\n  );\n\n  const {\n    className,\n    href,\n    title,\n    children,\n    onPress,\n    variant,\n    weight,\n    color,\n    truncate,\n    slot,\n    ...restProps\n  } = cleanedProps;\n\n  const isExternal = isExternalLink(href);\n  const internalRef = useRef<HTMLAnchorElement>(null);\n  const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n  // Use useLink hook to get link props\n  const { linkProps } = useLink(\n    {\n      href,\n      onPress,\n      ...restProps,\n    },\n    linkRef,\n  );\n\n  const anchorElement = (\n    <a\n      {...linkProps}\n      {...dataAttributes}\n      {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      ref={linkRef}\n      href={href}\n      title={title}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n    >\n      {children}\n    </a>\n  );\n\n  // If it's an external link, render without RouterProvider\n  if (isExternal) {\n    return anchorElement;\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      {anchorElement}\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;;;;AA4BO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AACtC,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAGxB,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAAA,IACpB;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,aAAA,mBACJ,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAIF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,aAAA;AAAA,EACT;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,aAAA,EACH,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport { RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { LinkDefinition } from './definition';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport styles from './Link.module.css';\n\nconst LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    LinkDefinition,\n    {\n      variant: 'body',\n      weight: 'regular',\n      color: 'primary',\n      ...props,\n    },\n  );\n\n  const {\n    className,\n    href,\n    title,\n    children,\n    onPress,\n    variant,\n    weight,\n    color,\n    truncate,\n    slot,\n    ...restProps\n  } = cleanedProps;\n\n  const internalRef = useRef<HTMLAnchorElement>(null);\n  const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n  // Use useLink hook to get link props\n  // For internal links, this will use the RouterProvider's navigate function\n  const { linkProps } = useLink(\n    {\n      href,\n      onPress,\n      ...restProps,\n    },\n    linkRef,\n  );\n\n  return (\n    <a\n      {...linkProps}\n      {...dataAttributes}\n      {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      ref={linkRef}\n      href={href}\n      title={title}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n    >\n      {children}\n    </a>\n  );\n});\n\nLinkInternal.displayName = 'LinkInternal';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const isExternal = isExternalLink(props.href);\n\n  // If it's an external link, render without RouterProvider\n  if (isExternal) {\n    return <LinkInternal {...props} ref={ref} />;\n  }\n\n  // For internal links, wrap in RouterProvider so useLink can access the router\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <LinkInternal {...props} ref={ref} />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAIxB,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAAA,IACpB;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,YAAA,CAAa,WAAA,GAAc,cAAA;AAGpB,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,cAAA,CAAe,KAAA,CAAM,IAAI,CAAA;AAG5C,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAAA,EAC5C;AAGA,EAAA,uBACE,GAAA,CAAC,kBAAe,QAAA,EAAoB,OAAA,EAClC,8BAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA,EACrC,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/components/SearchField/SearchField.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useEffect, useState, useRef } from 'react';
 import { SearchField as SearchField$1, Input, Button } from 'react-aria-components';
 import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
@@ -16,8 +16,6 @@ const SearchField = forwardRef(
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy
     } = props;
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    const [shouldCollapse, setShouldCollapse] = useState(true);
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {
         console.warn(
@@ -44,25 +42,19 @@ const SearchField = forwardRef(
       startCollapsed,
       ...rest
     } = cleanedProps;
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
     const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
-    const handleClick = (isFocused) => {
-      props.onFocusChange?.(isFocused);
-      if (shouldCollapse) {
-        if (isFocused) {
-          setIsCollapsed(true);
-        } else {
-          setIsCollapsed(false);
-        }
-      }
+    const handleFocusChange = (isFocused2) => {
+      props.onFocusChange?.(isFocused2);
+      setIsFocused(isFocused2);
     };
-    const handleChange = (value) => {
-      props.onChange?.(value);
-      if (value.length > 0) {
-        setShouldCollapse(false);
-      } else {
-        setShouldCollapse(true);
-      }
+    const handleContainerClick = () => {
+      inputRef.current?.focus();
     };
+    const hasInputRef = !!inputRef.current;
+    const hasValue = !!inputRef.current?.value;
+    const isCollapsed = hasInputRef ? startCollapsed && !hasValue && !isFocused : startCollapsed && !rest.value && !rest.defaultValue && !isFocused;
     return /* @__PURE__ */ jsxs(
       SearchField$1,
       {
@@ -71,10 +63,9 @@ const SearchField = forwardRef(
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "data-collapsed": isCollapsed,
-        onFocusChange: handleClick,
-        onChange: handleChange,
         style,
         ...rest,
+        onFocusChange: handleFocusChange,
         ref,
         children: [
           /* @__PURE__ */ jsx(
@@ -93,6 +84,7 @@ const SearchField = forwardRef(
                 styles[classNames.inputWrapper]
               ),
               "data-size": dataAttributes["data-size"],
+              onClick: handleContainerClick,
               children: [
                 icon !== false && /* @__PURE__ */ jsx(
                   "div",
@@ -109,6 +101,7 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Input,
                   {
+                    ref: inputRef,
                     className: clsx(classNames.input, styles[classNames.input]),
                     ...icon !== false && { "data-icon": true },
                     placeholder

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SearchFieldDefinition } from './definition';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n      SearchFieldDefinition,\n      {\n        size: 'small',\n        placeholder: 'Search',\n        startCollapsed: false,\n        ...props,\n      },\n    );\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      ...rest\n    } = cleanedProps;\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNames.inputWrapper,\n            styles[classNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                classNames.inputIcon,\n                styles[classNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={clsx(classNames.input, styles[classNames.input])}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(classNames.clear, styles[classNames.clear])}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef, useEffect, useState, useRef } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SearchFieldDefinition } from './definition';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n      SearchFieldDefinition,\n      {\n        size: 'small',\n        placeholder: 'Search',\n        startCollapsed: false,\n        ...props,\n      },\n    );\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      ...rest\n    } = cleanedProps;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleFocusChange = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      setIsFocused(isFocused);\n    };\n\n    const handleContainerClick = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasInputRef = !!inputRef.current;\n    const hasValue = !!inputRef.current?.value;\n\n    const isCollapsed = hasInputRef\n      ? startCollapsed && !hasValue && !isFocused\n      : startCollapsed && !rest.value && !rest.defaultValue && !isFocused;\n\n    return (\n      <AriaSearchField\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        style={style}\n        {...rest}\n        onFocusChange={handleFocusChange}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNames.inputWrapper,\n            styles[classNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n          onClick={handleContainerClick}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                classNames.inputIcon,\n                styles[classNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            ref={inputRef}\n            className={clsx(classNames.input, styles[classNames.input])}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(classNames.clear, styles[classNames.clear])}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["isFocused","AriaSearchField"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 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  .SearchField-module_bui-SearchField__2TyT_ {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField-module_bui-SearchFieldClear__1gJQc {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n          .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInput__3Opoj {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldClear__1gJQc {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+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  .SearchField-module_bui-SearchField__2TyT_ {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField-module_bui-SearchFieldClear__1gJQc {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,\n        max-width 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          width: 2.5rem;\n          max-width: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          width: 2rem;\n          max-width: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n          .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n\n      &[data-collapsed='false'] {\n        flex-basis: 200px;\n        width: 200px;\n        max-width: 200px;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInput__3Opoj {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldClear__1gJQc {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
 var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldInputWrapper":"SearchField-module_bui-SearchFieldInputWrapper__1JEG8","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
 styleInject(css_248z);
 

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

@@ -1,6 +1,6 @@
 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  .Table-module_bui-Table__BkcBL {\n    width: 100%;\n    caption-side: bottom;\n    border-collapse: collapse;\n    table-layout: fixed;\n  }\n\n  .Table-module_bui-TableHeader__3Lh_9 {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .Table-module_bui-TableHead__y-Yzm {\n    text-align: left;\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      .Table-module_bui-TableHeadSortButton__Slxp- {\n        opacity: 1;\n      }\n    }\n  }\n\n  .Table-module_bui-TableHeadSelection__2H6Yp {\n    width: 40px;\n  }\n\n  .Table-module_bui-TableHeadContent__1Buiu {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n\n  .Table-module_bui-TableHeadSortButton__Slxp- {\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bui-space-1);\n    opacity: 0;\n    transition: opacity 0.1s ease-in-out;\n    color: var(--bui-fg-secondary);\n\n    & svg {\n      transition: transform 0.1s ease-in-out;\n    }\n\n    &[data-sort-order='asc'] svg {\n      opacity: 1;\n      transform: rotate(0);\n    }\n\n    &[data-sort-order='desc'] svg {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n\n  .Table-module_bui-TableBody__2hcz_ {\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableRow__3S2EQ {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      background-color: var(--bui-bg-tint-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--bui-bg-tint-pressed);\n    }\n\n    &[data-pressed] {\n      background-color: var(--bui-bg-tint-pressed);\n    }\n\n    &[data-disabled] {\n      background-color: var(--bui-bg-tint-disabled);\n    }\n\n    &[data-react-aria-pressable='true'] {\n      cursor: pointer;\n    }\n  }\n\n  .Table-module_bui-TableCell__1C-Gr {\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .Table-module_bui-TableCellSelection__3g6Iz {\n    width: 40px;\n  }\n\n  .Table-module_bui-TableCellContentWrapper__2zDK3 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellIcon__118Vd,\n  .Table-module_bui-TableCellIcon__118Vd svg {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableCellContent__35knW {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-0_5);\n    min-width: 0;\n    flex: 1;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellContent__35knW > * {\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellProfile__34xxd {\n    display: flex;\n    flex-direction: row;\n    gap: var(--bui-space-2);\n    align-items: center;\n  }\n}\n";
+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  .Table-module_bui-Table__BkcBL {\n    width: 100%;\n    caption-side: bottom;\n    border-collapse: collapse;\n    table-layout: fixed;\n    transition: opacity 0.2s ease-in-out;\n\n    &[data-stale='true'] {\n      opacity: 0.6;\n    }\n  }\n\n  .Table-module_bui-TableHeader__3Lh_9 {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .Table-module_bui-TableHead__y-Yzm {\n    text-align: left;\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      .Table-module_bui-TableHeadSortButton__Slxp- {\n        opacity: 1;\n      }\n    }\n  }\n\n  .Table-module_bui-TableHeadSelection__2H6Yp {\n    width: 40px;\n  }\n\n  .Table-module_bui-TableHeadContent__1Buiu {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n\n  .Table-module_bui-TableHeadSortButton__Slxp- {\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bui-space-1);\n    opacity: 0;\n    transition: opacity 0.1s ease-in-out;\n    color: var(--bui-fg-secondary);\n\n    & svg {\n      transition: transform 0.1s ease-in-out;\n    }\n\n    &[data-sort-order='asc'] svg {\n      opacity: 1;\n      transform: rotate(0);\n    }\n\n    &[data-sort-order='desc'] svg {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n\n  .Table-module_bui-TableBody__2hcz_ {\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableRow__3S2EQ {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      background-color: var(--bui-bg-tint-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--bui-bg-tint-pressed);\n    }\n\n    &[data-pressed] {\n      background-color: var(--bui-bg-tint-pressed);\n    }\n\n    &[data-disabled] {\n      background-color: var(--bui-bg-tint-disabled);\n    }\n\n    &[data-react-aria-pressable='true'] {\n      cursor: pointer;\n    }\n  }\n\n  .Table-module_bui-TableCell__1C-Gr {\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .Table-module_bui-TableCellSelection__3g6Iz {\n    width: 40px;\n  }\n\n  .Table-module_bui-TableCellContentWrapper__2zDK3 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellIcon__118Vd,\n  .Table-module_bui-TableCellIcon__118Vd svg {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableCellContent__35knW {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-0_5);\n    min-width: 0;\n    flex: 1;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellContent__35knW > * {\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellProfile__34xxd {\n    display: flex;\n    flex-direction: row;\n    gap: var(--bui-space-2);\n    align-items: center;\n  }\n}\n";
 var styles = {"bui-Table":"Table-module_bui-Table__BkcBL","bui-TableHeader":"Table-module_bui-TableHeader__3Lh_9","bui-TableHead":"Table-module_bui-TableHead__y-Yzm","bui-TableHeadSortButton":"Table-module_bui-TableHeadSortButton__Slxp-","bui-TableHeadSelection":"Table-module_bui-TableHeadSelection__2H6Yp","bui-TableHeadContent":"Table-module_bui-TableHeadContent__1Buiu","bui-TableBody":"Table-module_bui-TableBody__2hcz_","bui-TableRow":"Table-module_bui-TableRow__3S2EQ","bui-TableCell":"Table-module_bui-TableCell__1C-Gr","bui-TableCellSelection":"Table-module_bui-TableCellSelection__3g6Iz","bui-TableCellContentWrapper":"Table-module_bui-TableCellContentWrapper__2zDK3","bui-TableCellIcon":"Table-module_bui-TableCellIcon__118Vd","bui-TableCellContent":"Table-module_bui-TableCellContent__35knW","bui-TableCellProfile":"Table-module_bui-TableCellProfile__34xxd"};
 styleInject(css_248z);
 

package/dist/components/Table/components/Table.esm.js

@@ -1,21 +1,160 @@
-import { jsx } from 'react/jsx-runtime';
-import { useStyles } from '../../../hooks/useStyles.esm.js';
-import { TableDefinition } from '../definition.esm.js';
-import { Table as Table$1 } from 'react-aria-components';
-import styles from '../Table.module.css.esm.js';
-import clsx from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TableRoot } from './TableRoot.esm.js';
+import { TableHeader } from './TableHeader.esm.js';
+import { TableBody } from './TableBody.esm.js';
+import { Row } from './Row.esm.js';
+import { Column } from './Column.esm.js';
+import { TablePagination } from '../../TablePagination/TablePagination.esm.js';
+import { useId, useMemo, Fragment as Fragment$1 } from 'react';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.esm.js';
+import { Flex } from '../../Flex/Flex.esm.js';
 
-const Table = (props) => {
-  const { classNames, cleanedProps } = useStyles(TableDefinition, props);
-  return /* @__PURE__ */ jsx(
-    Table$1,
-    {
-      className: clsx(classNames.table, styles[classNames.table]),
-      "aria-label": "Data table",
-      ...cleanedProps
+function isRowRenderFn(rowConfig) {
+  return typeof rowConfig === "function";
+}
+function useDisabledRows({
+  data,
+  rowConfig
+}) {
+  return useMemo(() => {
+    if (!data || typeof rowConfig === "function" || !rowConfig?.getIsDisabled) {
+      return;
     }
+    return data.reduce((set, item) => {
+      const isDisabled = rowConfig.getIsDisabled?.(item);
+      if (isDisabled) {
+        set.add(String(item.id));
+      }
+      return set;
+    }, /* @__PURE__ */ new Set());
+  }, [data, rowConfig]);
+}
+function useLiveRegionLabel(pagination, isStale, hasData) {
+  if (!hasData || pagination.type === "none") {
+    return "";
+  }
+  const { pageSize, offset, totalCount, getLabel } = pagination;
+  if (isStale) {
+    return "Loading table data.";
+  }
+  let liveRegionLabel = "Table page loaded. ";
+  if (getLabel) {
+    liveRegionLabel += getLabel({ pageSize, offset, totalCount });
+  } else if (offset !== void 0) {
+    const fromCount = offset + 1;
+    const toCount = Math.min(offset + pageSize, totalCount ?? 0);
+    liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;
+  }
+  return liveRegionLabel;
+}
+function Table({
+  columnConfig,
+  data,
+  loading = false,
+  isStale = false,
+  error,
+  pagination,
+  sort,
+  rowConfig,
+  selection,
+  emptyState
+}) {
+  const liveRegionId = useId();
+  const visibleColumns = useMemo(
+    () => columnConfig.filter((col) => !col.isHidden),
+    [columnConfig]
   );
-};
+  const disabledRows = useDisabledRows({ data, rowConfig });
+  const {
+    mode: selectionMode,
+    selected: selectedKeys,
+    behavior: selectionBehavior,
+    onSelectionChange
+  } = selection || {};
+  if (loading && !data) {
+    return /* @__PURE__ */ jsx("div", { children: "Loading..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      "Error: ",
+      error.message
+    ] });
+  }
+  const liveRegionLabel = useLiveRegionLabel(
+    pagination,
+    isStale,
+    data !== void 0
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", id: liveRegionId, children: liveRegionLabel }),
+    /* @__PURE__ */ jsxs(
+      TableRoot,
+      {
+        selectionMode,
+        selectionBehavior,
+        selectedKeys,
+        onSelectionChange,
+        sortDescriptor: sort?.descriptor ?? void 0,
+        onSortChange: sort?.onSortChange,
+        disabledKeys: disabledRows,
+        stale: isStale,
+        "aria-describedby": liveRegionId,
+        children: [
+          /* @__PURE__ */ jsx(TableHeader, { columns: visibleColumns, children: (column) => column.header ? /* @__PURE__ */ jsx(Fragment, { children: column.header() }) : /* @__PURE__ */ jsx(
+            Column,
+            {
+              id: column.id,
+              isRowHeader: column.isRowHeader,
+              allowsSorting: column.isSortable,
+              children: column.label
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TableBody,
+            {
+              items: data,
+              renderEmptyState: emptyState ? () => /* @__PURE__ */ jsx(Flex, { p: "3", children: emptyState }) : void 0,
+              children: (item) => {
+                const itemIndex = data?.indexOf(item) ?? -1;
+                if (isRowRenderFn(rowConfig)) {
+                  return rowConfig({
+                    item,
+                    index: itemIndex
+                  });
+                }
+                return /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    id: String(item.id),
+                    columns: visibleColumns,
+                    href: rowConfig?.getHref?.(item),
+                    onAction: rowConfig?.onClick ? () => rowConfig?.onClick?.(item) : void 0,
+                    children: (column) => /* @__PURE__ */ jsx(Fragment$1, { children: column.cell(item) }, column.id)
+                  }
+                );
+              }
+            }
+          )
+        ]
+      }
+    ),
+    pagination.type === "page" && /* @__PURE__ */ jsx(
+      TablePagination,
+      {
+        pageSize: pagination.pageSize,
+        offset: pagination.offset,
+        totalCount: pagination.totalCount,
+        hasNextPage: pagination.hasNextPage,
+        hasPreviousPage: pagination.hasPreviousPage,
+        onNextPage: pagination.onNextPage,
+        onPreviousPage: pagination.onPreviousPage,
+        onPageSizeChange: pagination.onPageSizeChange,
+        showPageSizeOptions: pagination.showPageSizeOptions,
+        getLabel: pagination.getLabel
+      }
+    )
+  ] });
+}
 
 export { Table };
 //# sourceMappingURL=Table.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport {\n  Table as ReactAriaTable,\n  type TableProps,\n} from 'react-aria-components';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Table = (props: TableProps) => {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n\n  return (\n    <ReactAriaTable\n      className={clsx(classNames.table, styles[classNames.table])}\n      aria-label=\"Data table\"\n      {...cleanedProps}\n    />\n  );\n};\n"],"names":["ReactAriaTable"],"mappings":";;;;;;;AA0BO,MAAM,KAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AAErE,EAAA,uBACE,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MAC1D,YAAA,EAAW,YAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 type { Key } from 'react-aria-components';\nimport { TableRoot } from './TableRoot';\nimport { TableHeader } from './TableHeader';\nimport { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Column } from './Column';\nimport { TablePagination } from '../../TablePagination';\nimport type {\n  TableProps,\n  TableItem,\n  RowConfig,\n  RowRenderFn,\n  TablePaginationType,\n} from '../types';\nimport { Fragment, useId, useMemo } from 'react';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { Flex } from '../../Flex';\n\nfunction isRowRenderFn<T extends TableItem>(\n  rowConfig: RowConfig<T> | RowRenderFn<T> | undefined,\n): rowConfig is RowRenderFn<T> {\n  return typeof rowConfig === 'function';\n}\n\nfunction useDisabledRows<T extends TableItem>({\n  data,\n  rowConfig,\n}: Pick<TableProps<T>, 'data' | 'rowConfig'>): Set<Key> | undefined {\n  return useMemo(() => {\n    if (!data || typeof rowConfig === 'function' || !rowConfig?.getIsDisabled) {\n      return;\n    }\n\n    return data.reduce<Set<Key>>((set, item) => {\n      const isDisabled = rowConfig.getIsDisabled?.(item);\n      if (isDisabled) {\n        set.add(String(item.id));\n      }\n      return set;\n    }, new Set<Key>());\n  }, [data, rowConfig]);\n}\n\nfunction useLiveRegionLabel(\n  pagination: TablePaginationType,\n  isStale: boolean,\n  hasData: boolean,\n): string {\n  if (!hasData || pagination.type === 'none') {\n    return '';\n  }\n\n  const { pageSize, offset, totalCount, getLabel } = pagination;\n\n  if (isStale) {\n    return 'Loading table data.';\n  }\n\n  let liveRegionLabel = 'Table page loaded. ';\n\n  if (getLabel) {\n    liveRegionLabel += getLabel({ pageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n    liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;\n  }\n  return liveRegionLabel;\n}\n\n/** @public */\nexport function Table<T extends TableItem>({\n  columnConfig,\n  data,\n  loading = false,\n  isStale = false,\n  error,\n  pagination,\n  sort,\n  rowConfig,\n  selection,\n  emptyState,\n}: TableProps<T>) {\n  const liveRegionId = useId();\n\n  const visibleColumns = useMemo(\n    () => columnConfig.filter(col => !col.isHidden),\n    [columnConfig],\n  );\n  const disabledRows = useDisabledRows({ data, rowConfig });\n\n  const {\n    mode: selectionMode,\n    selected: selectedKeys,\n    behavior: selectionBehavior,\n    onSelectionChange,\n  } = selection || {};\n\n  if (loading && !data) {\n    return <div>Loading...</div>;\n  }\n\n  if (error) {\n    return <div>Error: {error.message}</div>;\n  }\n\n  const liveRegionLabel = useLiveRegionLabel(\n    pagination,\n    isStale,\n    data !== undefined,\n  );\n\n  return (\n    <div>\n      <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n        {liveRegionLabel}\n      </VisuallyHidden>\n\n      <TableRoot\n        selectionMode={selectionMode}\n        selectionBehavior={selectionBehavior}\n        selectedKeys={selectedKeys}\n        onSelectionChange={onSelectionChange}\n        sortDescriptor={sort?.descriptor ?? undefined}\n        onSortChange={sort?.onSortChange}\n        disabledKeys={disabledRows}\n        stale={isStale}\n        aria-describedby={liveRegionId}\n      >\n        <TableHeader columns={visibleColumns}>\n          {column =>\n            column.header ? (\n              <>{column.header()}</>\n            ) : (\n              <Column\n                id={column.id}\n                isRowHeader={column.isRowHeader}\n                allowsSorting={column.isSortable}\n              >\n                {column.label}\n              </Column>\n            )\n          }\n        </TableHeader>\n        <TableBody\n          items={data}\n          renderEmptyState={\n            emptyState ? () => <Flex p=\"3\">{emptyState}</Flex> : undefined\n          }\n        >\n          {item => {\n            const itemIndex = data?.indexOf(item) ?? -1;\n\n            if (isRowRenderFn(rowConfig)) {\n              return rowConfig({\n                item,\n                index: itemIndex,\n              });\n            }\n\n            return (\n              <Row\n                id={String(item.id)}\n                columns={visibleColumns}\n                href={rowConfig?.getHref?.(item)}\n                onAction={\n                  rowConfig?.onClick\n                    ? () => rowConfig?.onClick?.(item)\n                    : undefined\n                }\n              >\n                {column => (\n                  <Fragment key={column.id}>{column.cell(item)}</Fragment>\n                )}\n              </Row>\n            );\n          }}\n        </TableBody>\n      </TableRoot>\n      {pagination.type === 'page' && (\n        <TablePagination\n          pageSize={pagination.pageSize}\n          offset={pagination.offset}\n          totalCount={pagination.totalCount}\n          hasNextPage={pagination.hasNextPage}\n          hasPreviousPage={pagination.hasPreviousPage}\n          onNextPage={pagination.onNextPage}\n          onPreviousPage={pagination.onPreviousPage}\n          onPageSizeChange={pagination.onPageSizeChange}\n          showPageSizeOptions={pagination.showPageSizeOptions}\n          getLabel={pagination.getLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/Table/components/TableRoot.esm.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+import { TableDefinition } from '../definition.esm.js';
+import { Table } from 'react-aria-components';
+import styles from '../Table.module.css.esm.js';
+import clsx from 'clsx';
+
+const TableRoot = (props) => {
+  const { classNames, dataAttributes, cleanedProps } = useStyles(
+    TableDefinition,
+    props
+  );
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      className: clsx(classNames.table, styles[classNames.table]),
+      "aria-label": "Data table",
+      "aria-busy": props.stale,
+      ...dataAttributes,
+      ...cleanedProps
+    }
+  );
+};
+
+export { TableRoot };
+//# sourceMappingURL=TableRoot.esm.js.map

package/dist/components/Table/components/TableRoot.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRoot.esm.js","sources":["../../../../src/components/Table/components/TableRoot.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 { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport { Table as ReactAriaTable } from 'react-aria-components';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { TableRootProps } from '../types';\n\n/** @public */\nexport const TableRoot = (props: TableRootProps) => {\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    TableDefinition,\n    props,\n  );\n\n  return (\n    <ReactAriaTable\n      className={clsx(classNames.table, styles[classNames.table])}\n      aria-label=\"Data table\"\n      aria-busy={props.stale}\n      {...dataAttributes}\n      {...cleanedProps}\n    />\n  );\n};\n"],"names":["ReactAriaTable"],"mappings":";;;;;;;AAwBO,MAAM,SAAA,GAAY,CAAC,KAAA,KAA0B;AAClD,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,eAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MAC1D,YAAA,EAAW,YAAA;AAAA,MACX,aAAW,KAAA,CAAM,KAAA;AAAA,MAChB,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -19,6 +19,9 @@ const TableDefinition = {
     cellProfileLink: "bui-TableCellProfileLink",
     headSelection: "bui-TableHeadSelection",
     cellSelection: "bui-TableCellSelection"
+  },
+  dataAttributes: {
+    stale: [true, false]
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Table/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 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 Table\n * @public\n */\nexport const TableDefinition = {\n  classNames: {\n    table: 'bui-Table',\n    header: 'bui-TableHeader',\n    body: 'bui-TableBody',\n    row: 'bui-TableRow',\n    head: 'bui-TableHead',\n    headContent: 'bui-TableHeadContent',\n    headSortButton: 'bui-TableHeadSortButton',\n    caption: 'bui-TableCaption',\n    cell: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n    cellIcon: 'bui-TableCellIcon',\n    cellProfileAvatar: 'bui-TableCellProfileAvatar',\n    cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n    cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n    cellProfileName: 'bui-TableCellProfileName',\n    cellProfileLink: 'bui-TableCellProfileLink',\n    headSelection: 'bui-TableHeadSelection',\n    cellSelection: 'bui-TableCellSelection',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,eAAA,GAAkB;AAAA,EAC7B,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,WAAA;AAAA,IACP,MAAA,EAAQ,iBAAA;AAAA,IACR,IAAA,EAAM,eAAA;AAAA,IACN,GAAA,EAAK,cAAA;AAAA,IACL,IAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAa,sBAAA;AAAA,IACb,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,IAAA,EAAM,eAAA;AAAA,IACN,kBAAA,EAAoB,6BAAA;AAAA,IACpB,WAAA,EAAa,sBAAA;AAAA,IACb,QAAA,EAAU,mBAAA;AAAA,IACV,iBAAA,EAAmB,4BAAA;AAAA,IACnB,sBAAA,EAAwB,iCAAA;AAAA,IACxB,yBAAA,EAA2B,oCAAA;AAAA,IAC3B,eAAA,EAAiB,0BAAA;AAAA,IACjB,eAAA,EAAiB,0BAAA;AAAA,IACjB,aAAA,EAAe,wBAAA;AAAA,IACf,aAAA,EAAe;AAAA;AAEnB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Table/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 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 Table\n * @public\n */\nexport const TableDefinition = {\n  classNames: {\n    table: 'bui-Table',\n    header: 'bui-TableHeader',\n    body: 'bui-TableBody',\n    row: 'bui-TableRow',\n    head: 'bui-TableHead',\n    headContent: 'bui-TableHeadContent',\n    headSortButton: 'bui-TableHeadSortButton',\n    caption: 'bui-TableCaption',\n    cell: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n    cellIcon: 'bui-TableCellIcon',\n    cellProfileAvatar: 'bui-TableCellProfileAvatar',\n    cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n    cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n    cellProfileName: 'bui-TableCellProfileName',\n    cellProfileLink: 'bui-TableCellProfileLink',\n    headSelection: 'bui-TableHeadSelection',\n    cellSelection: 'bui-TableCellSelection',\n  },\n  dataAttributes: {\n    stale: [true, false] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,eAAA,GAAkB;AAAA,EAC7B,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,WAAA;AAAA,IACP,MAAA,EAAQ,iBAAA;AAAA,IACR,IAAA,EAAM,eAAA;AAAA,IACN,GAAA,EAAK,cAAA;AAAA,IACL,IAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAa,sBAAA;AAAA,IACb,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,IAAA,EAAM,eAAA;AAAA,IACN,kBAAA,EAAoB,6BAAA;AAAA,IACpB,WAAA,EAAa,sBAAA;AAAA,IACb,QAAA,EAAU,mBAAA;AAAA,IACV,iBAAA,EAAmB,4BAAA;AAAA,IACnB,sBAAA,EAAwB,iCAAA;AAAA,IACxB,yBAAA,EAA2B,oCAAA;AAAA,IAC3B,eAAA,EAAiB,0BAAA;AAAA,IACjB,eAAA,EAAiB,0BAAA;AAAA,IACjB,aAAA,EAAe,wBAAA;AAAA,IACf,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,KAAA,EAAO,CAAC,IAAA,EAAM,KAAK;AAAA;AAEvB;;;;"}