@backstage/ui 0.9.1-next.0 → 0.10.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +52 -0
- package/dist/components/ButtonIcon/ButtonIcon.esm.js +2 -4
- package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.esm.js +1 -1
- package/dist/components/Link/Link.esm.js +36 -10
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Table/Table.module.css.esm.js +2 -2
- package/dist/components/Table/components/Cell.esm.js +3 -35
- package/dist/components/Table/components/Cell.esm.js.map +1 -1
- package/dist/components/Table/components/CellText.esm.js +87 -0
- package/dist/components/Table/components/CellText.esm.js.map +1 -0
- package/dist/components/Table/components/Column.esm.js +2 -2
- package/dist/components/Table/components/Column.esm.js.map +1 -1
- package/dist/components/Table/components/Row.esm.js +15 -4
- package/dist/components/Table/components/Row.esm.js.map +1 -1
- package/dist/components/Table/components/TableHeader.esm.js +18 -5
- package/dist/components/Table/components/TableHeader.esm.js.map +1 -1
- package/dist/components/Table/definition.esm.js +3 -1
- package/dist/components/Table/definition.esm.js.map +1 -1
- package/dist/index.d.ts +14 -1
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,57 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.10.0-next.1
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 16543fa: **Breaking change** The `Cell` component has been refactored to be a generic wrapper component that accepts `children` for custom cell content. The text-specific functionality (previously part of `Cell`) has been moved to a new `CellText` component.
|
|
8
|
+
|
|
9
|
+
### Migration Guide
|
|
10
|
+
|
|
11
|
+
If you were using `Cell` with text-specific props (`title`, `description`, `leadingIcon`, `href`), you need to update your code to use `CellText` instead:
|
|
12
|
+
|
|
13
|
+
**Before:**
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Cell
|
|
17
|
+
title="My Title"
|
|
18
|
+
description="My description"
|
|
19
|
+
leadingIcon={<Icon />}
|
|
20
|
+
href="/path"
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
**After:**
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
<CellText
|
|
28
|
+
title="My Title"
|
|
29
|
+
description="My description"
|
|
30
|
+
leadingIcon={<Icon />}
|
|
31
|
+
href="/path"
|
|
32
|
+
/>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
For custom cell content, use the new generic `Cell` component:
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
<Cell>{/* Your custom content */}</Cell>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Patch Changes
|
|
42
|
+
|
|
43
|
+
- 50b7927: Fixed Checkbox indicator showing checkmark color when unchecked.
|
|
44
|
+
|
|
45
|
+
Affected components: Checkbox
|
|
46
|
+
|
|
47
|
+
- 5bacf55: Fixed `ButtonIcon` incorrectly applying `className` to inner elements instead of only the root element.
|
|
48
|
+
|
|
49
|
+
Affected components: ButtonIcon
|
|
50
|
+
|
|
51
|
+
- a20d317: Added row selection support with visual state styling for hover, selected, and pressed states. Fixed checkbox rendering to only show for multi-select toggle mode.
|
|
52
|
+
|
|
53
|
+
Affected components: Table, TableHeader, Row, Column
|
|
54
|
+
|
|
3
55
|
## 0.9.1-next.0
|
|
4
56
|
|
|
5
57
|
### Patch Changes
|
|
@@ -43,8 +43,7 @@ const ButtonIcon = forwardRef(
|
|
|
43
43
|
classNames.content,
|
|
44
44
|
classNamesButtonIcon.content,
|
|
45
45
|
stylesButton[classNames.content],
|
|
46
|
-
stylesButtonIcon[classNamesButtonIcon.content]
|
|
47
|
-
className
|
|
46
|
+
stylesButtonIcon[classNamesButtonIcon.content]
|
|
48
47
|
),
|
|
49
48
|
children: icon
|
|
50
49
|
}
|
|
@@ -58,8 +57,7 @@ const ButtonIcon = forwardRef(
|
|
|
58
57
|
classNames.spinner,
|
|
59
58
|
classNamesButtonIcon.spinner,
|
|
60
59
|
stylesButton[classNames.spinner],
|
|
61
|
-
stylesButtonIcon[classNamesButtonIcon.spinner]
|
|
62
|
-
className
|
|
60
|
+
stylesButtonIcon[classNamesButtonIcon.spinner]
|
|
63
61
|
),
|
|
64
62
|
children: /* @__PURE__ */ jsx(RiLoader4Line, { "aria-hidden": "true" })
|
|
65
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ButtonDefinition } from '../Button/definition';\nimport { ButtonIconDefinition } from './definition';\nimport stylesButtonIcon from './ButtonIcon.module.css';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ButtonDefinition,\n {\n size: 'small',\n variant: 'primary',\n ...props,\n },\n );\n\n const { classNames: classNamesButtonIcon } =\n useStyles(ButtonIconDefinition);\n\n const { className, icon, loading, ...rest } = cleanedProps;\n\n return (\n <RAButton\n className={clsx(\n classNames.root,\n classNamesButtonIcon.root,\n stylesButton[classNames.root],\n stylesButtonIcon[classNamesButtonIcon.root],\n className,\n )}\n ref={ref}\n isPending={loading}\n {...dataAttributes}\n {...rest}\n >\n {({ isPending }) => (\n <>\n <span\n className={clsx(\n classNames.content,\n classNamesButtonIcon.content,\n stylesButton[classNames.content],\n stylesButtonIcon[classNamesButtonIcon.content],\n
|
|
1
|
+
{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ButtonDefinition } from '../Button/definition';\nimport { ButtonIconDefinition } from './definition';\nimport stylesButtonIcon from './ButtonIcon.module.css';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ButtonDefinition,\n {\n size: 'small',\n variant: 'primary',\n ...props,\n },\n );\n\n const { classNames: classNamesButtonIcon } =\n useStyles(ButtonIconDefinition);\n\n const { className, icon, loading, ...rest } = cleanedProps;\n\n return (\n <RAButton\n className={clsx(\n classNames.root,\n classNamesButtonIcon.root,\n stylesButton[classNames.root],\n stylesButtonIcon[classNamesButtonIcon.root],\n className,\n )}\n ref={ref}\n isPending={loading}\n {...dataAttributes}\n {...rest}\n >\n {({ isPending }) => (\n <>\n <span\n className={clsx(\n classNames.content,\n classNamesButtonIcon.content,\n stylesButton[classNames.content],\n stylesButtonIcon[classNamesButtonIcon.content],\n )}\n >\n {icon}\n </span>\n\n {isPending && (\n <ProgressBar\n aria-label=\"Loading\"\n isIndeterminate\n className={clsx(\n classNames.spinner,\n classNamesButtonIcon.spinner,\n stylesButton[classNames.spinner],\n stylesButtonIcon[classNamesButtonIcon.spinner],\n )}\n >\n <RiLoader4Line aria-hidden=\"true\" />\n </ProgressBar>\n )}\n </>\n )}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;;;;;;AA4BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,gBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS,SAAA;AAAA,QACT,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GACvC,UAAU,oBAAoB,CAAA;AAEhC,IAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE9C,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B,gBAAA,CAAiB,qBAAqB,IAAI,CAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,OAAA;AAAA,gBACX,oBAAA,CAAqB,OAAA;AAAA,gBACrB,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,gBAC/B,gBAAA,CAAiB,qBAAqB,OAAO;AAAA,eAC/C;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAEC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,OAAA;AAAA,gBACX,oBAAA,CAAqB,OAAA;AAAA,gBACrB,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,gBAC/B,gBAAA,CAAiB,qBAAqB,OAAO;AAAA,eAC/C;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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 .Checkbox-module_bui-Checkbox__1Oiwl {\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-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n user-select: none;\n cursor: pointer;\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: 2px;\n transition: background-color 0.2s ease-in-out;\n background-color: var(--bui-bg-surface-1);\n padding: 0;\n flex-shrink: 0;\n color:
|
|
3
|
+
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 .Checkbox-module_bui-Checkbox__1Oiwl {\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-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n user-select: none;\n cursor: pointer;\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: 2px;\n transition: background-color 0.2s ease-in-out;\n background-color: var(--bui-bg-surface-1);\n padding: 0;\n flex-shrink: 0;\n color: transparent;\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-focus-visible] & {\n transition: none;\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-selected] & {\n background-color: var(--bui-bg-solid);\n box-shadow: none;\n color: var(--bui-fg-solid);\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-hovered]:not([data-selected]) & {\n box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n }\n\n @media (prefers-reduced-motion: reduce) {\n & {\n transition: none;\n }\n }\n }\n}\n";
|
|
4
4
|
var styles = {"bui-Checkbox":"Checkbox-module_bui-Checkbox__1Oiwl","bui-CheckboxIndicator":"Checkbox-module_bui-CheckboxIndicator__2ZJtl"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import { forwardRef, useRef } from 'react';
|
|
3
|
+
import { useLink } from 'react-aria';
|
|
4
|
+
import { RouterProvider } from 'react-aria-components';
|
|
4
5
|
import clsx from 'clsx';
|
|
5
6
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
7
|
import { LinkDefinition } from './definition.esm.js';
|
|
@@ -19,22 +20,47 @@ const Link = forwardRef((props, ref) => {
|
|
|
19
20
|
...props
|
|
20
21
|
}
|
|
21
22
|
);
|
|
22
|
-
const {
|
|
23
|
+
const {
|
|
24
|
+
className,
|
|
25
|
+
href,
|
|
26
|
+
title,
|
|
27
|
+
children,
|
|
28
|
+
onPress,
|
|
29
|
+
variant,
|
|
30
|
+
weight,
|
|
31
|
+
color,
|
|
32
|
+
truncate,
|
|
33
|
+
slot,
|
|
34
|
+
...restProps
|
|
35
|
+
} = cleanedProps;
|
|
23
36
|
const isExternal = isExternalLink(href);
|
|
24
|
-
const
|
|
25
|
-
|
|
37
|
+
const internalRef = useRef(null);
|
|
38
|
+
const linkRef = ref || internalRef;
|
|
39
|
+
const { linkProps } = useLink(
|
|
26
40
|
{
|
|
27
|
-
ref,
|
|
28
|
-
className: clsx(classNames.root, styles[classNames.root], className),
|
|
29
41
|
href,
|
|
30
|
-
|
|
42
|
+
onPress,
|
|
31
43
|
...restProps
|
|
44
|
+
},
|
|
45
|
+
linkRef
|
|
46
|
+
);
|
|
47
|
+
const anchorElement = /* @__PURE__ */ jsx(
|
|
48
|
+
"a",
|
|
49
|
+
{
|
|
50
|
+
...linkProps,
|
|
51
|
+
...dataAttributes,
|
|
52
|
+
...restProps,
|
|
53
|
+
ref: linkRef,
|
|
54
|
+
href,
|
|
55
|
+
title,
|
|
56
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
57
|
+
children
|
|
32
58
|
}
|
|
33
59
|
);
|
|
34
60
|
if (isExternal) {
|
|
35
|
-
return
|
|
61
|
+
return anchorElement;
|
|
36
62
|
}
|
|
37
|
-
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children:
|
|
63
|
+
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: anchorElement });
|
|
38
64
|
});
|
|
39
65
|
Link.displayName = "Link";
|
|
40
66
|
|
|
@@ -1 +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 } from 'react';\nimport {
|
|
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;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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 }\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-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 &[data-
|
|
4
|
-
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-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-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"};
|
|
3
|
+
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";
|
|
4
|
+
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"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { Text } from '../../Text/Text.esm.js';
|
|
4
|
-
import { Link } from '../../Link/Link.esm.js';
|
|
5
3
|
import { Cell as Cell$1 } from 'react-aria-components';
|
|
6
4
|
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
7
5
|
import { TableDefinition } from '../definition.esm.js';
|
|
@@ -12,43 +10,13 @@ const Cell = (props) => {
|
|
|
12
10
|
color: "primary",
|
|
13
11
|
...props
|
|
14
12
|
});
|
|
15
|
-
const { className,
|
|
13
|
+
const { className, children, ...rest } = cleanedProps;
|
|
16
14
|
return /* @__PURE__ */ jsx(
|
|
17
15
|
Cell$1,
|
|
18
16
|
{
|
|
19
17
|
className: clsx(classNames.cell, styles[classNames.cell], className),
|
|
20
18
|
...rest,
|
|
21
|
-
children
|
|
22
|
-
"div",
|
|
23
|
-
{
|
|
24
|
-
className: clsx(
|
|
25
|
-
classNames.cellContentWrapper,
|
|
26
|
-
styles[classNames.cellContentWrapper]
|
|
27
|
-
),
|
|
28
|
-
children: [
|
|
29
|
-
leadingIcon && /* @__PURE__ */ jsx(
|
|
30
|
-
"div",
|
|
31
|
-
{
|
|
32
|
-
className: clsx(classNames.cellIcon, styles[classNames.cellIcon]),
|
|
33
|
-
children: leadingIcon
|
|
34
|
-
}
|
|
35
|
-
),
|
|
36
|
-
/* @__PURE__ */ jsxs(
|
|
37
|
-
"div",
|
|
38
|
-
{
|
|
39
|
-
className: clsx(
|
|
40
|
-
classNames.cellContent,
|
|
41
|
-
styles[classNames.cellContent]
|
|
42
|
-
),
|
|
43
|
-
children: [
|
|
44
|
-
href ? /* @__PURE__ */ jsx(Link, { href, variant: "body-medium", color, children: title }) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", color, children: title }),
|
|
45
|
-
description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
)
|
|
49
|
-
]
|
|
50
|
-
}
|
|
51
|
-
)
|
|
19
|
+
children
|
|
52
20
|
}
|
|
53
21
|
);
|
|
54
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.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 clsx from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.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 clsx from 'clsx';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst Cell = (props: CellProps) => {\n const { classNames, cleanedProps } = useStyles(TableDefinition, {\n color: 'primary' as const,\n ...props,\n });\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <ReactAriaCell\n className={clsx(classNames.cell, styles[classNames.cell], className)}\n {...rest}\n >\n {children}\n </ReactAriaCell>\n );\n};\n\nCell.displayName = 'Cell';\n\nexport { Cell };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;AAwBA,MAAM,IAAA,GAAO,CAAC,KAAA,KAAqB;AACjC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { Text } from '../../Text/Text.esm.js';
|
|
4
|
+
import { Link } from '../../Link/Link.esm.js';
|
|
5
|
+
import { Cell } from 'react-aria-components';
|
|
6
|
+
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
7
|
+
import { TableDefinition } from '../definition.esm.js';
|
|
8
|
+
import styles from '../Table.module.css.esm.js';
|
|
9
|
+
|
|
10
|
+
const CellText = (props) => {
|
|
11
|
+
const { classNames, cleanedProps } = useStyles(TableDefinition, {
|
|
12
|
+
color: "primary",
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
const { className, title, description, color, leadingIcon, href, ...rest } = cleanedProps;
|
|
16
|
+
return /* @__PURE__ */ jsx(
|
|
17
|
+
Cell,
|
|
18
|
+
{
|
|
19
|
+
className: clsx(classNames.cell, styles[classNames.cell], className),
|
|
20
|
+
...rest,
|
|
21
|
+
children: /* @__PURE__ */ jsxs(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
className: clsx(
|
|
25
|
+
classNames.cellContentWrapper,
|
|
26
|
+
styles[classNames.cellContentWrapper]
|
|
27
|
+
),
|
|
28
|
+
children: [
|
|
29
|
+
leadingIcon && /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
className: clsx(classNames.cellIcon, styles[classNames.cellIcon]),
|
|
33
|
+
children: leadingIcon
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ jsxs(
|
|
37
|
+
"div",
|
|
38
|
+
{
|
|
39
|
+
className: clsx(
|
|
40
|
+
classNames.cellContent,
|
|
41
|
+
styles[classNames.cellContent]
|
|
42
|
+
),
|
|
43
|
+
children: [
|
|
44
|
+
href ? /* @__PURE__ */ jsx(
|
|
45
|
+
Link,
|
|
46
|
+
{
|
|
47
|
+
href,
|
|
48
|
+
variant: "body-medium",
|
|
49
|
+
color,
|
|
50
|
+
truncate: true,
|
|
51
|
+
title,
|
|
52
|
+
children: title
|
|
53
|
+
}
|
|
54
|
+
) : /* @__PURE__ */ jsx(
|
|
55
|
+
Text,
|
|
56
|
+
{
|
|
57
|
+
as: "p",
|
|
58
|
+
variant: "body-medium",
|
|
59
|
+
color,
|
|
60
|
+
truncate: true,
|
|
61
|
+
title,
|
|
62
|
+
children: title
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
description && /* @__PURE__ */ jsx(
|
|
66
|
+
Text,
|
|
67
|
+
{
|
|
68
|
+
variant: "body-medium",
|
|
69
|
+
color: "secondary",
|
|
70
|
+
truncate: true,
|
|
71
|
+
title: description,
|
|
72
|
+
children: description
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
CellText.displayName = "CellText";
|
|
85
|
+
|
|
86
|
+
export { CellText };
|
|
87
|
+
//# sourceMappingURL=CellText.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CellText.esm.js","sources":["../../../../src/components/Table/components/CellText.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 clsx from 'clsx';\nimport { Text } from '../../Text';\nimport { Link } from '../../Link';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellTextProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst CellText = (props: CellTextProps) => {\n const { classNames, cleanedProps } = useStyles(TableDefinition, {\n color: 'primary' as const,\n ...props,\n });\n const { className, title, description, color, leadingIcon, href, ...rest } =\n cleanedProps;\n\n return (\n <ReactAriaCell\n className={clsx(classNames.cell, styles[classNames.cell], className)}\n {...rest}\n >\n <div\n className={clsx(\n classNames.cellContentWrapper,\n styles[classNames.cellContentWrapper],\n )}\n >\n {leadingIcon && (\n <div\n className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}\n >\n {leadingIcon}\n </div>\n )}\n <div\n className={clsx(\n classNames.cellContent,\n styles[classNames.cellContent],\n )}\n >\n {href ? (\n <Link\n href={href}\n variant=\"body-medium\"\n color={color}\n truncate\n title={title}\n >\n {title}\n </Link>\n ) : (\n <Text\n as=\"p\"\n variant=\"body-medium\"\n color={color}\n truncate\n title={title}\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n variant=\"body-medium\"\n color=\"secondary\"\n truncate\n title={description}\n >\n {description}\n </Text>\n )}\n </div>\n </div>\n </ReactAriaCell>\n );\n};\n\nCellText.displayName = 'CellText';\n\nexport { CellText };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;;AA0BA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AACzC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,WAAA,EAAa,OAAO,WAAA,EAAa,IAAA,EAAM,GAAG,IAAA,EAAK,GACvE,YAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAACA,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,kBAAA;AAAA,YACX,MAAA,CAAO,WAAW,kBAAkB;AAAA,WACtC;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,WAAA,oBACC,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,gBAE/D,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BAEF,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,IAAA,mBACC,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,IAAA;AAAA,sBACA,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA;AAAA,sBACA,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA;AAAA,sBAEC,QAAA,EAAA;AAAA;AAAA,mBACH,mBAEA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAG,GAAA;AAAA,sBACH,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA;AAAA,sBACA,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA;AAAA,sBAEC,QAAA,EAAA;AAAA;AAAA,mBACH;AAAA,kBAED,WAAA,oBACC,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA,EAAM,WAAA;AAAA,sBACN,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA,EAAO,WAAA;AAAA,sBAEN,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AAEJ;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}
|
|
@@ -8,11 +8,11 @@ import { RiArrowDownLine, RiArrowUpLine } from '@remixicon/react';
|
|
|
8
8
|
|
|
9
9
|
const Column = (props) => {
|
|
10
10
|
const { classNames, cleanedProps } = useStyles(TableDefinition, props);
|
|
11
|
-
const { children, ...rest } = cleanedProps;
|
|
11
|
+
const { className, children, ...rest } = cleanedProps;
|
|
12
12
|
return /* @__PURE__ */ jsx(
|
|
13
13
|
Column$1,
|
|
14
14
|
{
|
|
15
|
-
className: clsx(classNames.head, styles[classNames.head]),
|
|
15
|
+
className: clsx(classNames.head, styles[classNames.head], className),
|
|
16
16
|
...rest,
|
|
17
17
|
children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs(
|
|
18
18
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Column.esm.js","sources":["../../../../src/components/Table/components/Column.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 { Column as ReactAriaColumn } from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { ColumnProps } from '../types';\nimport { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';\n\n/** @public */\nexport const Column = (props: ColumnProps) => {\n const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n const { children, ...rest } = cleanedProps;\n\n return (\n <ReactAriaColumn\n className={clsx(classNames.head, styles[classNames.head])}\n {...rest}\n >\n {({ allowsSorting, sortDirection }) => (\n <div\n className={clsx(\n classNames.headContent,\n styles[classNames.headContent],\n )}\n >\n {children}\n {allowsSorting && (\n <span\n aria-hidden=\"true\"\n className={clsx(\n classNames.headSortButton,\n styles[classNames.headSortButton],\n )}\n >\n {sortDirection === 'descending' ? (\n <RiArrowDownLine size={16} />\n ) : (\n <RiArrowUpLine size={16} />\n )}\n </span>\n )}\n </div>\n )}\n </ReactAriaColumn>\n );\n};\n"],"names":["ReactAriaColumn"],"mappings":";;;;;;;;AAyBO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"Column.esm.js","sources":["../../../../src/components/Table/components/Column.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 { Column as ReactAriaColumn } from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { ColumnProps } from '../types';\nimport { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';\n\n/** @public */\nexport const Column = (props: ColumnProps) => {\n const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <ReactAriaColumn\n className={clsx(classNames.head, styles[classNames.head], className)}\n {...rest}\n >\n {({ allowsSorting, sortDirection }) => (\n <div\n className={clsx(\n classNames.headContent,\n styles[classNames.headContent],\n )}\n >\n {children}\n {allowsSorting && (\n <span\n aria-hidden=\"true\"\n className={clsx(\n classNames.headSortButton,\n styles[classNames.headSortButton],\n )}\n >\n {sortDirection === 'descending' ? (\n <RiArrowDownLine size={16} />\n ) : (\n <RiArrowUpLine size={16} />\n )}\n </span>\n )}\n </div>\n )}\n </ReactAriaColumn>\n );\n};\n"],"names":["ReactAriaColumn"],"mappings":";;;;;;;;AAyBO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,aAAA,EAAe,aAAA,EAAc,qBAC/B,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,WAAA;AAAA,YACX,MAAA,CAAO,WAAW,WAAW;AAAA,WAC/B;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YACA,aAAA,oBACC,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,MAAA;AAAA,gBACZ,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBAEC,QAAA,EAAA,aAAA,KAAkB,YAAA,mBACjB,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAA,EAAM,IAAI,CAAA,mBAE3B,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAE7B;AAAA;AAAA;AAEJ;AAAA,GAEJ;AAEJ;;;;"}
|
|
@@ -1,20 +1,31 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useTableOptions, Row as Row$1, RouterProvider
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useTableOptions, Cell, Collection, Row as Row$1, RouterProvider } from 'react-aria-components';
|
|
3
|
+
import { Checkbox } from '../../Checkbox/Checkbox.esm.js';
|
|
3
4
|
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
4
5
|
import { TableDefinition } from '../definition.esm.js';
|
|
5
6
|
import { useNavigate, useHref } from 'react-router-dom';
|
|
6
7
|
import { isExternalLink } from '../../../utils/isExternalLink.esm.js';
|
|
7
8
|
import styles from '../Table.module.css.esm.js';
|
|
8
9
|
import clsx from 'clsx';
|
|
10
|
+
import { Flex } from '../../Flex/Flex.esm.js';
|
|
9
11
|
|
|
10
12
|
function Row(props) {
|
|
11
13
|
const { classNames, cleanedProps } = useStyles(TableDefinition, props);
|
|
12
14
|
const { id, columns, children, href, ...rest } = cleanedProps;
|
|
13
15
|
const navigate = useNavigate();
|
|
14
16
|
const isExternal = isExternalLink(href);
|
|
15
|
-
let { selectionBehavior } = useTableOptions();
|
|
17
|
+
let { selectionBehavior, selectionMode } = useTableOptions();
|
|
16
18
|
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17
|
-
selectionBehavior === "toggle" &&
|
|
19
|
+
selectionBehavior === "toggle" && selectionMode === "multiple" && /* @__PURE__ */ jsx(
|
|
20
|
+
Cell,
|
|
21
|
+
{
|
|
22
|
+
className: clsx(
|
|
23
|
+
classNames.cellSelection,
|
|
24
|
+
styles[classNames.cellSelection]
|
|
25
|
+
),
|
|
26
|
+
children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", children: /* @__PURE__ */ jsx(Fragment, {}) }) })
|
|
27
|
+
}
|
|
28
|
+
),
|
|
18
29
|
/* @__PURE__ */ jsx(Collection, { items: columns, children })
|
|
19
30
|
] });
|
|
20
31
|
if (!href || isExternal) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.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 {\n Row as ReactAriaRow,\n RowProps,\n useTableOptions,\n Cell,\n Collection,\n
|
|
1
|
+
{"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.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 {\n Row as ReactAriaRow,\n RowProps,\n useTableOptions,\n Cell as ReactAriaCell,\n Collection,\n RouterProvider,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n const { id, columns, children, href, ...rest } = cleanedProps;\n const navigate = useNavigate();\n const isExternal = isExternalLink(href);\n\n let { selectionBehavior, selectionMode } = useTableOptions();\n\n const content = (\n <>\n {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n <ReactAriaCell\n className={clsx(\n classNames.cellSelection,\n styles[classNames.cellSelection],\n )}\n >\n <Flex justify=\"center\" align=\"center\">\n <Checkbox slot=\"selection\">\n <></>\n </Checkbox>\n </Flex>\n </ReactAriaCell>\n )}\n <Collection items={columns}>{children}</Collection>\n </>\n );\n\n if (!href || isExternal) {\n return (\n <ReactAriaRow\n id={id}\n href={href}\n className={clsx(classNames.row, styles[classNames.row])}\n {...rest}\n >\n {content}\n </ReactAriaRow>\n );\n }\n\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n <ReactAriaRow\n id={id}\n href={href}\n className={clsx(classNames.row, styles[classNames.row])}\n data-react-aria-pressable=\"true\"\n {...rest}\n >\n {content}\n </ReactAriaRow>\n </RouterProvider>\n );\n}\n"],"names":["ReactAriaCell","ReactAriaRow"],"mappings":";;;;;;;;;;;AAmCO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,EAAA,EAAI,OAAA,EAAS,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AACjD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,EAAE,iBAAA,EAAmB,aAAA,EAAc,GAAI,eAAA,EAAgB;AAE3D,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,QAAA,IAAY,kBAAkB,UAAA,oBACnD,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,aAAA;AAAA,UACX,MAAA,CAAO,WAAW,aAAa;AAAA,SACjC;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,QAAA,EAAS,KAAA,EAAM,QAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,WAAA,EACb,QAAA,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAE,CAAA,EACJ,CAAA,EACF;AAAA;AAAA,KACF;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,IAAI,CAAC,QAAQ,UAAA,EAAY;AACvB,IAAA,uBACE,GAAA;AAAA,MAACC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,IAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,QACrD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,MACtD,2BAAA,EAA0B,MAAA;AAAA,MACzB,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useTableOptions, TableHeader as TableHeader$1,
|
|
1
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { useTableOptions, TableHeader as TableHeader$1, Collection } from 'react-aria-components';
|
|
3
|
+
import { Checkbox } from '../../Checkbox/Checkbox.esm.js';
|
|
3
4
|
import { Column } from './Column.esm.js';
|
|
4
5
|
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
5
6
|
import { TableDefinition } from '../definition.esm.js';
|
|
6
7
|
import styles from '../Table.module.css.esm.js';
|
|
7
8
|
import clsx from 'clsx';
|
|
9
|
+
import { Flex } from '../../Flex/Flex.esm.js';
|
|
8
10
|
|
|
9
11
|
const TableHeader = (props) => {
|
|
10
|
-
let { selectionBehavior, selectionMode
|
|
12
|
+
let { selectionBehavior, selectionMode } = useTableOptions();
|
|
11
13
|
const { classNames, cleanedProps } = useStyles(TableDefinition, props);
|
|
12
14
|
const { columns, children, ...rest } = cleanedProps;
|
|
13
15
|
return /* @__PURE__ */ jsxs(
|
|
@@ -16,8 +18,19 @@ const TableHeader = (props) => {
|
|
|
16
18
|
className: clsx(classNames.header, styles[classNames.header]),
|
|
17
19
|
...rest,
|
|
18
20
|
children: [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
selectionBehavior === "toggle" && selectionMode === "multiple" && /* @__PURE__ */ jsx(
|
|
22
|
+
Column,
|
|
23
|
+
{
|
|
24
|
+
width: 40,
|
|
25
|
+
minWidth: 40,
|
|
26
|
+
maxWidth: 40,
|
|
27
|
+
className: clsx(
|
|
28
|
+
classNames.headSelection,
|
|
29
|
+
styles[classNames.headSelection]
|
|
30
|
+
),
|
|
31
|
+
children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", children: /* @__PURE__ */ jsx(Fragment, {}) }) })
|
|
32
|
+
}
|
|
33
|
+
),
|
|
21
34
|
/* @__PURE__ */ jsx(Collection, { items: columns, children })
|
|
22
35
|
]
|
|
23
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.esm.js","sources":["../../../../src/components/Table/components/TableHeader.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 {\n TableHeader as ReactAriaTableHeader,\n type TableHeaderProps,\n
|
|
1
|
+
{"version":3,"file":"TableHeader.esm.js","sources":["../../../../src/components/Table/components/TableHeader.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 {\n TableHeader as ReactAriaTableHeader,\n type TableHeaderProps,\n Collection,\n useTableOptions,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { Column } from './Column';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {\n let { selectionBehavior, selectionMode } = useTableOptions();\n\n const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n const { columns, children, ...rest } = cleanedProps;\n\n return (\n <ReactAriaTableHeader\n className={clsx(classNames.header, styles[classNames.header])}\n {...rest}\n >\n {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n <Column\n width={40}\n minWidth={40}\n maxWidth={40}\n className={clsx(\n classNames.headSelection,\n styles[classNames.headSelection],\n )}\n >\n <Flex justify=\"center\" align=\"center\">\n <Checkbox slot=\"selection\">\n <></>\n </Checkbox>\n </Flex>\n </Column>\n )}\n <Collection items={columns}>{children}</Collection>\n </ReactAriaTableHeader>\n );\n};\n"],"names":["ReactAriaTableHeader"],"mappings":";;;;;;;;;;AA+BO,MAAM,WAAA,GAAc,CAAmB,KAAA,KAA+B;AAC3E,EAAA,IAAI,EAAE,iBAAA,EAAmB,aAAA,EAAc,GAAI,eAAA,EAAgB;AAE3D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAACA,aAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,QAAQ,MAAA,CAAO,UAAA,CAAW,MAAM,CAAC,CAAA;AAAA,MAC3D,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,iBAAA,KAAsB,QAAA,IAAY,kBAAkB,UAAA,oBACnD,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,EAAA;AAAA,YACP,QAAA,EAAU,EAAA;AAAA,YACV,QAAA,EAAU,EAAA;AAAA,YACV,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,aAAA;AAAA,cACX,MAAA,CAAO,WAAW,aAAa;AAAA,aACjC;AAAA,YAEA,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,QAAA,EAAS,KAAA,EAAM,QAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,WAAA,EACb,QAAA,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAE,CAAA,EACJ,CAAA,EACF;AAAA;AAAA,SACF;AAAA,wBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAAA,GACxC;AAEJ;;;;"}
|
|
@@ -16,7 +16,9 @@ const TableDefinition = {
|
|
|
16
16
|
cellProfileAvatarImage: "bui-TableCellProfileAvatarImage",
|
|
17
17
|
cellProfileAvatarFallback: "bui-TableCellProfileAvatarFallback",
|
|
18
18
|
cellProfileName: "bui-TableCellProfileName",
|
|
19
|
-
cellProfileLink: "bui-TableCellProfileLink"
|
|
19
|
+
cellProfileLink: "bui-TableCellProfileLink",
|
|
20
|
+
headSelection: "bui-TableHeadSelection",
|
|
21
|
+
cellSelection: "bui-TableCellSelection"
|
|
20
22
|
}
|
|
21
23
|
};
|
|
22
24
|
|
|
@@ -1 +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 },\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;AAAA;
|
|
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;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -824,6 +824,9 @@ declare const TableBody: <T extends object>(props: TableBodyProps<T>) => react_j
|
|
|
824
824
|
|
|
825
825
|
/** @public */
|
|
826
826
|
interface CellProps extends CellProps$1 {
|
|
827
|
+
}
|
|
828
|
+
/** @public */
|
|
829
|
+
interface CellTextProps extends CellProps$1 {
|
|
827
830
|
title: string;
|
|
828
831
|
description?: string;
|
|
829
832
|
color?: TextColors;
|
|
@@ -855,6 +858,12 @@ declare const Cell: {
|
|
|
855
858
|
displayName: string;
|
|
856
859
|
};
|
|
857
860
|
|
|
861
|
+
/** @public */
|
|
862
|
+
declare const CellText: {
|
|
863
|
+
(props: CellTextProps): react_jsx_runtime.JSX.Element;
|
|
864
|
+
displayName: string;
|
|
865
|
+
};
|
|
866
|
+
|
|
858
867
|
/** @public */
|
|
859
868
|
declare const CellProfile: (props: CellProfileProps) => react_jsx_runtime.JSX.Element;
|
|
860
869
|
|
|
@@ -961,6 +970,8 @@ declare const TableDefinition: {
|
|
|
961
970
|
readonly cellProfileAvatarFallback: "bui-TableCellProfileAvatarFallback";
|
|
962
971
|
readonly cellProfileName: "bui-TableCellProfileName";
|
|
963
972
|
readonly cellProfileLink: "bui-TableCellProfileLink";
|
|
973
|
+
readonly headSelection: "bui-TableHeadSelection";
|
|
974
|
+
readonly cellSelection: "bui-TableCellSelection";
|
|
964
975
|
};
|
|
965
976
|
};
|
|
966
977
|
|
|
@@ -1286,6 +1297,8 @@ interface LinkProps extends LinkProps$1 {
|
|
|
1286
1297
|
weight?: TextWeights | Partial<Record<Breakpoint, TextWeights>>;
|
|
1287
1298
|
color?: TextColors | TextColorStatus | Partial<Record<Breakpoint, TextColors | TextColorStatus>>;
|
|
1288
1299
|
truncate?: boolean;
|
|
1300
|
+
title?: string;
|
|
1301
|
+
children?: ReactNode;
|
|
1289
1302
|
}
|
|
1290
1303
|
|
|
1291
1304
|
/** @public */
|
|
@@ -1453,4 +1466,4 @@ declare const useBreakpoint: () => {
|
|
|
1453
1466
|
down: (key: Breakpoint) => boolean;
|
|
1454
1467
|
};
|
|
1455
1468
|
|
|
1456
|
-
export { Accordion, AccordionDefinition, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, AvatarDefinition, type AvatarProps, type Border, type BorderRadius, Box, BoxDefinition, type BoxProps, type Breakpoint, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, type ButtonIconProps, ButtonLink, ButtonLinkDefinition, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardDefinition, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, CheckboxDefinition, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentDefinition, Container, ContainerDefinition, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogDefinition, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, FieldLabelDefinition, type FieldLabelProps, Flex, FlexDefinition, type FlexDirection, type FlexProps, type FlexWrap, Grid, GridDefinition, GridItemDefinition, type GridItemProps, type GridProps, Header, HeaderDefinition, HeaderPage, type HeaderPageBreadcrumb, HeaderPageDefinition, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, LinkDefinition, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuDefinition, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type Option, Radio, RadioGroup, RadioGroupDefinition, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, SearchFieldDefinition, type SearchFieldProps, Select, SelectDefinition, type SelectProps, Skeleton, SkeletonDefinition, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, SwitchDefinition, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, type TablePaginationProps, Tabs, TabsDefinition, type TabsProps, Tag, TagGroup, TagGroupDefinition, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextDefinition, TextField, TextFieldDefinition, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, TooltipDefinition, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, VisuallyHiddenDefinition, type VisuallyHiddenProps, useBreakpoint, useTable };
|
|
1469
|
+
export { Accordion, AccordionDefinition, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, AvatarDefinition, type AvatarProps, type Border, type BorderRadius, Box, BoxDefinition, type BoxProps, type Breakpoint, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, type ButtonIconProps, ButtonLink, ButtonLinkDefinition, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardDefinition, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, CellText, type CellTextProps, Checkbox, CheckboxDefinition, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentDefinition, Container, ContainerDefinition, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogDefinition, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, FieldLabelDefinition, type FieldLabelProps, Flex, FlexDefinition, type FlexDirection, type FlexProps, type FlexWrap, Grid, GridDefinition, GridItemDefinition, type GridItemProps, type GridProps, Header, HeaderDefinition, HeaderPage, type HeaderPageBreadcrumb, HeaderPageDefinition, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, LinkDefinition, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuDefinition, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type Option, Radio, RadioGroup, RadioGroupDefinition, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, SearchFieldDefinition, type SearchFieldProps, Select, SelectDefinition, type SelectProps, Skeleton, SkeletonDefinition, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, SwitchDefinition, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, type TablePaginationProps, Tabs, TabsDefinition, type TabsProps, Tag, TagGroup, TagGroupDefinition, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextDefinition, TextField, TextFieldDefinition, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, TooltipDefinition, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, VisuallyHiddenDefinition, type VisuallyHiddenProps, useBreakpoint, useTable };
|
package/dist/index.esm.js
CHANGED
|
@@ -36,6 +36,7 @@ export { TableBody } from './components/Table/components/TableBody.esm.js';
|
|
|
36
36
|
export { Column } from './components/Table/components/Column.esm.js';
|
|
37
37
|
export { Row } from './components/Table/components/Row.esm.js';
|
|
38
38
|
export { Cell } from './components/Table/components/Cell.esm.js';
|
|
39
|
+
export { CellText } from './components/Table/components/CellText.esm.js';
|
|
39
40
|
export { CellProfile } from './components/Table/components/CellProfile.esm.js';
|
|
40
41
|
export { useTable } from './components/Table/hooks/useTable.esm.js';
|
|
41
42
|
export { TableDefinition } from './components/Table/definition.esm.js';
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0-next.1",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"react-aria-components": "^1.13.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@backstage/cli": "0.34.6-next.
|
|
49
|
+
"@backstage/cli": "0.34.6-next.1",
|
|
50
50
|
"@types/react": "^18.0.0",
|
|
51
51
|
"@types/react-dom": "^18.0.0",
|
|
52
52
|
"chalk": "^5.4.1",
|