@backstage/ui 0.7.0-next.2 → 0.7.0
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 +35 -0
- package/css/styles.css +393 -196
- package/dist/components/Avatar/Avatar.esm.js.map +1 -1
- package/dist/components/Box/Box.esm.js.map +1 -1
- package/dist/components/Box/Box.props.esm.js.map +1 -1
- package/dist/components/Button/Button.esm.js.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
- package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -1
- package/dist/components/Card/Card.esm.js +4 -4
- package/dist/components/Card/Card.esm.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.esm.js +9 -9
- package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
- package/dist/components/Collapsible/Collapsible.esm.js.map +1 -1
- package/dist/components/Container/Container.esm.js.map +1 -1
- package/dist/components/FieldError/FieldError.esm.js.map +1 -1
- package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
- package/dist/components/Flex/Flex.esm.js.map +1 -1
- package/dist/components/Flex/Flex.props.esm.js.map +1 -1
- package/dist/components/Grid/Grid.esm.js.map +1 -1
- package/dist/components/Grid/Grid.props.esm.js.map +1 -1
- package/dist/components/Header/Header.esm.js +1 -12
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +5 -125
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/HeaderPage/HeaderPage.esm.js +21 -30
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/Icon/Icon.esm.js.map +1 -1
- package/dist/components/Icon/context.esm.js.map +1 -1
- package/dist/components/Icon/icons.esm.js +1 -1
- package/dist/components/Icon/icons.esm.js.map +1 -1
- package/dist/components/Icon/provider.esm.js.map +1 -1
- package/dist/components/Link/Link.esm.js +1 -13
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Menu/Menu.esm.js +144 -202
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.esm.js +27 -4
- package/dist/components/SearchField/SearchField.esm.js.map +1 -1
- package/dist/components/Select/Select.esm.js +0 -1
- package/dist/components/Select/Select.esm.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
- package/dist/components/Switch/Switch.esm.js.map +1 -1
- package/dist/components/Table/components/Cell.esm.js +30 -0
- package/dist/components/Table/components/Cell.esm.js.map +1 -0
- package/dist/components/Table/components/CellProfile.esm.js +41 -0
- package/dist/components/Table/components/CellProfile.esm.js.map +1 -0
- package/dist/components/Table/components/Column.esm.js +17 -0
- package/dist/components/Table/components/Column.esm.js.map +1 -0
- package/dist/components/Table/components/Row.esm.js +38 -0
- package/dist/components/Table/components/Row.esm.js.map +1 -0
- package/dist/components/Table/components/Table.esm.js +18 -0
- package/dist/components/Table/components/Table.esm.js.map +1 -0
- package/dist/components/Table/components/TableBody.esm.js +11 -0
- package/dist/components/Table/components/TableBody.esm.js.map +1 -0
- package/dist/components/Table/components/TableHeader.esm.js +20 -0
- package/dist/components/Table/components/TableHeader.esm.js.map +1 -0
- package/dist/components/Table/hooks/useTable.esm.js +116 -0
- package/dist/components/Table/hooks/useTable.esm.js.map +1 -0
- package/dist/components/TablePagination/TablePagination.esm.js +127 -0
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -0
- package/dist/components/Tabs/Tabs.esm.js.map +1 -1
- package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
- package/dist/components/TagGroup/TagGroup.esm.js +62 -0
- package/dist/components/TagGroup/TagGroup.esm.js.map +1 -0
- package/dist/components/Text/Text.esm.js.map +1 -1
- package/dist/components/TextField/TextField.esm.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.esm.js.map +1 -1
- package/dist/hooks/useBreakpoint.esm.js.map +1 -1
- package/dist/hooks/useIsomorphicLayoutEffect.esm.js.map +1 -1
- package/dist/hooks/useMediaQuery.esm.js.map +1 -1
- package/dist/hooks/useStyles.esm.js.map +1 -1
- package/dist/index.d.ts +289 -157
- package/dist/index.esm.js +12 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/props/display.props.esm.js.map +1 -1
- package/dist/props/gap-props.esm.js.map +1 -1
- package/dist/props/height.props.esm.js.map +1 -1
- package/dist/props/margin.props.esm.js.map +1 -1
- package/dist/props/padding.props.esm.js.map +1 -1
- package/dist/props/position.props.esm.js.map +1 -1
- package/dist/props/prop-def.esm.js.map +1 -1
- package/dist/props/spacing.props.esm.js.map +1 -1
- package/dist/props/width.props.esm.js.map +1 -1
- package/dist/utils/componentDefinitions.esm.js +32 -22
- package/dist/utils/componentDefinitions.esm.js.map +1 -1
- package/dist/utils/extractProps.esm.js.map +1 -1
- package/dist/utils/isExternalLink.esm.js +16 -0
- package/dist/utils/isExternalLink.esm.js.map +1 -0
- package/package.json +3 -15
- package/dist/components/DataTable/DataTable.esm.js +0 -26
- package/dist/components/DataTable/DataTable.esm.js.map +0 -1
- package/dist/components/DataTable/Pagination/DataTablePagination.esm.js +0 -84
- package/dist/components/DataTable/Pagination/DataTablePagination.esm.js.map +0 -1
- package/dist/components/DataTable/Root/DataTableRoot.esm.js +0 -24
- package/dist/components/DataTable/Root/DataTableRoot.esm.js.map +0 -1
- package/dist/components/DataTable/Table/DataTableTable.esm.js +0 -64
- package/dist/components/DataTable/Table/DataTableTable.esm.js.map +0 -1
- package/dist/components/Menu/Combobox.esm.js +0 -211
- package/dist/components/Menu/Combobox.esm.js.map +0 -1
- package/dist/components/Select/Select.styles.css.esm.js +0 -7
- package/dist/components/Select/Select.styles.css.esm.js.map +0 -1
- package/dist/components/Table/Table.esm.js +0 -68
- package/dist/components/Table/Table.esm.js.map +0 -1
- package/dist/components/Table/TableCell/TableCell.esm.js +0 -13
- package/dist/components/Table/TableCell/TableCell.esm.js.map +0 -1
- package/dist/components/Table/TableCellLink/TableCellLink.esm.js +0 -28
- package/dist/components/Table/TableCellLink/TableCellLink.esm.js.map +0 -1
- package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js +0 -40
- package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js.map +0 -1
- package/dist/components/Table/TableCellText/TableCellText.esm.js +0 -27
- package/dist/components/Table/TableCellText/TableCellText.esm.js.map +0 -1
- package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js +0 -29
- package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js.map +0 -1
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { Table } from '../../Table/Table.esm.js';
|
|
5
|
-
import { useDataTable } from '../Root/DataTableRoot.esm.js';
|
|
6
|
-
import { flexRender } from '@tanstack/react-table';
|
|
7
|
-
|
|
8
|
-
const DataTableTable = forwardRef(
|
|
9
|
-
(props, ref) => {
|
|
10
|
-
const { className, ...rest } = props;
|
|
11
|
-
const { table } = useDataTable();
|
|
12
|
-
return /* @__PURE__ */ jsxs(
|
|
13
|
-
Table.Root,
|
|
14
|
-
{
|
|
15
|
-
ref,
|
|
16
|
-
style: { minWidth: table.getTotalSize() },
|
|
17
|
-
className: clsx(className),
|
|
18
|
-
...rest,
|
|
19
|
-
children: [
|
|
20
|
-
/* @__PURE__ */ jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Row, { children: headerGroup.headers.map((header) => {
|
|
21
|
-
return /* @__PURE__ */ jsx(
|
|
22
|
-
Table.Head,
|
|
23
|
-
{
|
|
24
|
-
style: { width: header.getSize() },
|
|
25
|
-
children: header.isPlaceholder ? null : flexRender(
|
|
26
|
-
header.column.columnDef.header,
|
|
27
|
-
header.getContext()
|
|
28
|
-
)
|
|
29
|
-
},
|
|
30
|
-
header.id
|
|
31
|
-
);
|
|
32
|
-
}) }, headerGroup.id)) }),
|
|
33
|
-
/* @__PURE__ */ jsx(Table.Body, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
|
|
34
|
-
Table.Row,
|
|
35
|
-
{
|
|
36
|
-
"data-state": row.getIsSelected() && "selected",
|
|
37
|
-
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
|
|
38
|
-
Table.Cell,
|
|
39
|
-
{
|
|
40
|
-
style: { width: cell.column.getSize() },
|
|
41
|
-
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
42
|
-
},
|
|
43
|
-
cell.id
|
|
44
|
-
))
|
|
45
|
-
},
|
|
46
|
-
row.id
|
|
47
|
-
)) : /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(
|
|
48
|
-
Table.Cell,
|
|
49
|
-
{
|
|
50
|
-
colSpan: table.getAllColumns().length,
|
|
51
|
-
className: "h-24 text-center",
|
|
52
|
-
style: { width: table.getTotalSize() },
|
|
53
|
-
children: "No results."
|
|
54
|
-
}
|
|
55
|
-
) }) })
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
);
|
|
61
|
-
DataTableTable.displayName = "DataTableRoot";
|
|
62
|
-
|
|
63
|
-
export { DataTableTable };
|
|
64
|
-
//# sourceMappingURL=DataTableTable.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTable.esm.js","sources":["../../../../src/components/DataTable/Table/DataTableTable.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 clsx from 'clsx';\nimport { DataTableTableProps } from './types';\nimport { Table } from '../../Table';\nimport { useDataTable } from '../Root/DataTableRoot';\nimport { flexRender } from '@tanstack/react-table';\n\n/** @public */\nconst DataTableTable = forwardRef(\n (props: DataTableTableProps, ref: React.ForwardedRef<HTMLTableElement>) => {\n const { className, ...rest } = props;\n const { table } = useDataTable();\n\n return (\n <Table.Root\n ref={ref}\n style={{ minWidth: table.getTotalSize() }}\n className={clsx(className)}\n {...rest}\n >\n <Table.Header>\n {table.getHeaderGroups().map(headerGroup => (\n <Table.Row key={headerGroup.id}>\n {headerGroup.headers.map(header => {\n return (\n <Table.Head\n key={header.id}\n style={{ width: header.getSize() }}\n >\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n <Table.Body>\n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map(row => (\n <Table.Row\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n >\n {row.getVisibleCells().map(cell => (\n <Table.Cell\n key={cell.id}\n style={{ width: cell.column.getSize() }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Cell>\n ))}\n </Table.Row>\n ))\n ) : (\n <Table.Row>\n <Table.Cell\n colSpan={table.getAllColumns().length}\n className=\"h-24 text-center\"\n style={{ width: table.getTotalSize() }}\n >\n No results.\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table.Root>\n );\n },\n);\n\nDataTableTable.displayName = 'DataTableRoot';\n\nexport { DataTableTable };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,cAAiB,GAAA,UAAA;AAAA,EACrB,CAAC,OAA4B,GAA8C,KAAA;AACzE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,IAAM,MAAA,EAAE,KAAM,EAAA,GAAI,YAAa,EAAA;AAE/B,IACE,uBAAA,IAAA;AAAA,MAAC,KAAM,CAAA,IAAA;AAAA,MAAN;AAAA,QACC,GAAA;AAAA,QACA,KAAO,EAAA,EAAE,QAAU,EAAA,KAAA,CAAM,cAAe,EAAA;AAAA,QACxC,SAAA,EAAW,KAAK,SAAS,CAAA;AAAA,QACxB,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAM,CAAA,MAAA,EAAN,EACE,QAAA,EAAA,KAAA,CAAM,iBAAkB,CAAA,GAAA,CAAI,CAC3B,WAAA,qBAAA,GAAA,CAAC,MAAM,GAAN,EAAA,EACE,QAAY,EAAA,WAAA,CAAA,OAAA,CAAQ,IAAI,CAAU,MAAA,KAAA;AACjC,YACE,uBAAA,GAAA;AAAA,cAAC,KAAM,CAAA,IAAA;AAAA,cAAN;AAAA,gBAEC,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,SAAU,EAAA;AAAA,gBAEhC,QAAA,EAAA,MAAA,CAAO,gBACJ,IACA,GAAA,UAAA;AAAA,kBACE,MAAA,CAAO,OAAO,SAAU,CAAA,MAAA;AAAA,kBACxB,OAAO,UAAW;AAAA;AACpB,eAAA;AAAA,cARC,MAAO,CAAA;AAAA,aASd;AAAA,WAEH,CAAA,EAAA,EAfa,WAAY,CAAA,EAgB5B,CACD,CACH,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,CAAM,IAAN,EAAA,EACE,gBAAM,WAAY,EAAA,CAAE,IAAM,EAAA,MAAA,GACzB,KAAM,CAAA,WAAA,EAAc,CAAA,IAAA,CAAK,IAAI,CAC3B,GAAA,qBAAA,GAAA;AAAA,YAAC,KAAM,CAAA,GAAA;AAAA,YAAN;AAAA,cAEC,YAAA,EAAY,GAAI,CAAA,aAAA,EAAmB,IAAA,UAAA;AAAA,cAElC,QAAI,EAAA,GAAA,CAAA,eAAA,EAAkB,CAAA,GAAA,CAAI,CACzB,IAAA,qBAAA,GAAA;AAAA,gBAAC,KAAM,CAAA,IAAA;AAAA,gBAAN;AAAA,kBAEC,OAAO,EAAE,KAAA,EAAO,IAAK,CAAA,MAAA,CAAO,SAAU,EAAA;AAAA,kBAErC,qBAAW,IAAK,CAAA,MAAA,CAAO,UAAU,IAAM,EAAA,IAAA,CAAK,YAAY;AAAA,iBAAA;AAAA,gBAHpD,IAAK,CAAA;AAAA,eAKb;AAAA,aAAA;AAAA,YAVI,GAAI,CAAA;AAAA,WAYZ,CAAA,mBAEA,GAAA,CAAA,KAAA,CAAM,KAAN,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAM,CAAA,IAAA;AAAA,YAAN;AAAA,cACC,OAAA,EAAS,KAAM,CAAA,aAAA,EAAgB,CAAA,MAAA;AAAA,cAC/B,SAAU,EAAA,kBAAA;AAAA,cACV,KAAO,EAAA,EAAE,KAAO,EAAA,KAAA,CAAM,cAAe,EAAA;AAAA,cACtC,QAAA,EAAA;AAAA;AAAA,aAGH,CAEJ,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGN;AAEA,cAAA,CAAe,WAAc,GAAA,eAAA;;;;"}
|
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useState, useMemo, useCallback, useRef, useEffect } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import '../Icon/context.esm.js';
|
|
5
|
-
import '../Box/Box.esm.js';
|
|
6
|
-
import '../Grid/Grid.esm.js';
|
|
7
|
-
import '../Flex/Flex.esm.js';
|
|
8
|
-
import '../Container/Container.esm.js';
|
|
9
|
-
import '../Avatar/Avatar.esm.js';
|
|
10
|
-
import '../Button/Button.esm.js';
|
|
11
|
-
import '../Card/Card.esm.js';
|
|
12
|
-
import '../Collapsible/Collapsible.esm.js';
|
|
13
|
-
import '../DataTable/DataTable.esm.js';
|
|
14
|
-
import '../FieldLabel/FieldLabel.esm.js';
|
|
15
|
-
import '../Header/HeaderToolbar.esm.js';
|
|
16
|
-
import '../Tabs/Tabs.esm.js';
|
|
17
|
-
import './Menu.esm.js';
|
|
18
|
-
import '../Text/Text.esm.js';
|
|
19
|
-
import '../ButtonIcon/ButtonIcon.esm.js';
|
|
20
|
-
import '@remixicon/react';
|
|
21
|
-
import { Icon } from '../Icon/Icon.esm.js';
|
|
22
|
-
import '../ButtonLink/ButtonLink.esm.js';
|
|
23
|
-
import '../Checkbox/Checkbox.esm.js';
|
|
24
|
-
import '../RadioGroup/RadioGroup.esm.js';
|
|
25
|
-
import '../Table/Table.esm.js';
|
|
26
|
-
import '../TextField/TextField.esm.js';
|
|
27
|
-
import '../Tooltip/Tooltip.esm.js';
|
|
28
|
-
import '../ScrollArea/ScrollArea.esm.js';
|
|
29
|
-
import '../SearchField/SearchField.esm.js';
|
|
30
|
-
import '../Link/Link.esm.js';
|
|
31
|
-
import '../Select/Select.esm.js';
|
|
32
|
-
import '../Switch/Switch.esm.js';
|
|
33
|
-
import { useId } from 'react-aria';
|
|
34
|
-
|
|
35
|
-
const getListboxItemId = (listboxId, optionValue) => `${listboxId}-option-${optionValue}`;
|
|
36
|
-
function ComboboxItem({
|
|
37
|
-
option,
|
|
38
|
-
optionIndex,
|
|
39
|
-
value,
|
|
40
|
-
activeOptionIndex,
|
|
41
|
-
onItemActive,
|
|
42
|
-
onItemSelect,
|
|
43
|
-
listboxId
|
|
44
|
-
}) {
|
|
45
|
-
const isSelected = value?.includes(option.value) ?? false;
|
|
46
|
-
const isHighlighted = optionIndex === activeOptionIndex;
|
|
47
|
-
const itemId = getListboxItemId(listboxId, option.value);
|
|
48
|
-
const itemRef = useRef(null);
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
if (isHighlighted && itemRef.current) {
|
|
51
|
-
itemRef.current.scrollIntoView({ block: "nearest" });
|
|
52
|
-
}
|
|
53
|
-
}, [isHighlighted]);
|
|
54
|
-
return /* @__PURE__ */ jsxs(
|
|
55
|
-
"div",
|
|
56
|
-
{
|
|
57
|
-
ref: itemRef,
|
|
58
|
-
className: "bui-SubmenuComboboxItem",
|
|
59
|
-
id: itemId,
|
|
60
|
-
role: "option",
|
|
61
|
-
"aria-selected": isSelected,
|
|
62
|
-
"data-highlighted": isHighlighted ? true : void 0,
|
|
63
|
-
"data-selected": isSelected ? true : void 0,
|
|
64
|
-
"data-disabled": option.disabled ? true : void 0,
|
|
65
|
-
onMouseOver: () => !option.disabled && onItemActive(optionIndex),
|
|
66
|
-
onClick: () => !option.disabled && onItemSelect(option.value),
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxItemCheckbox", children: isSelected && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", name: "check", size: 12 }) }),
|
|
69
|
-
/* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxItemLabel", children: option.label })
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
const Combobox = forwardRef(
|
|
75
|
-
(props, ref) => {
|
|
76
|
-
const {
|
|
77
|
-
options,
|
|
78
|
-
value,
|
|
79
|
-
onValueChange,
|
|
80
|
-
multiselect = false,
|
|
81
|
-
className,
|
|
82
|
-
...rest
|
|
83
|
-
} = props;
|
|
84
|
-
const triggerId = useId();
|
|
85
|
-
const listboxId = `${triggerId}-listbox`;
|
|
86
|
-
const [filterString, setFilterString] = useState("");
|
|
87
|
-
const [activeOptionIndex, setActiveOptionIndex] = useState(0);
|
|
88
|
-
const filteredOptions = useMemo(() => {
|
|
89
|
-
if (!filterString) return options;
|
|
90
|
-
const lowerFilterString = filterString.toLocaleLowerCase("en-US");
|
|
91
|
-
return options.filter(
|
|
92
|
-
(option) => option.label.toLocaleLowerCase("en-US").includes(lowerFilterString)
|
|
93
|
-
);
|
|
94
|
-
}, [filterString, options]);
|
|
95
|
-
const activeDescendantId = activeOptionIndex >= 0 && filteredOptions.length > 0 ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value) : void 0;
|
|
96
|
-
const handleValueChange = useCallback(
|
|
97
|
-
(toggledValue) => {
|
|
98
|
-
let newValue;
|
|
99
|
-
if (multiselect) {
|
|
100
|
-
newValue = value?.includes(toggledValue) ? value.filter((v) => v !== toggledValue) : [...value ?? [], toggledValue];
|
|
101
|
-
} else {
|
|
102
|
-
newValue = value?.includes(toggledValue) ? [] : [toggledValue];
|
|
103
|
-
}
|
|
104
|
-
onValueChange?.(newValue);
|
|
105
|
-
},
|
|
106
|
-
[multiselect, onValueChange, value]
|
|
107
|
-
);
|
|
108
|
-
const handleSearchChange = useCallback(
|
|
109
|
-
(e) => {
|
|
110
|
-
setFilterString(e.target.value);
|
|
111
|
-
setActiveOptionIndex(0);
|
|
112
|
-
e.preventDefault();
|
|
113
|
-
},
|
|
114
|
-
[]
|
|
115
|
-
);
|
|
116
|
-
const handleKeyDown = useCallback(
|
|
117
|
-
(e) => {
|
|
118
|
-
let wasEscapeKey = false;
|
|
119
|
-
switch (e.key) {
|
|
120
|
-
case "ArrowDown":
|
|
121
|
-
e.preventDefault();
|
|
122
|
-
setActiveOptionIndex(
|
|
123
|
-
(prev) => Math.min(prev + 1, filteredOptions.length - 1)
|
|
124
|
-
);
|
|
125
|
-
break;
|
|
126
|
-
case "ArrowUp":
|
|
127
|
-
e.preventDefault();
|
|
128
|
-
setActiveOptionIndex((prev) => Math.max(prev - 1, 0));
|
|
129
|
-
break;
|
|
130
|
-
case "Home":
|
|
131
|
-
e.preventDefault();
|
|
132
|
-
setActiveOptionIndex(0);
|
|
133
|
-
break;
|
|
134
|
-
case "End":
|
|
135
|
-
e.preventDefault();
|
|
136
|
-
setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));
|
|
137
|
-
break;
|
|
138
|
-
case "Enter":
|
|
139
|
-
e.preventDefault();
|
|
140
|
-
if (activeOptionIndex >= 0 && !filteredOptions[activeOptionIndex].disabled) {
|
|
141
|
-
handleValueChange(filteredOptions[activeOptionIndex].value);
|
|
142
|
-
}
|
|
143
|
-
break;
|
|
144
|
-
case "Escape":
|
|
145
|
-
wasEscapeKey = true;
|
|
146
|
-
break;
|
|
147
|
-
}
|
|
148
|
-
if (!wasEscapeKey) {
|
|
149
|
-
e.stopPropagation();
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
[filteredOptions, activeOptionIndex, handleValueChange]
|
|
153
|
-
);
|
|
154
|
-
return /* @__PURE__ */ jsxs(
|
|
155
|
-
"div",
|
|
156
|
-
{
|
|
157
|
-
ref,
|
|
158
|
-
role: "combobox",
|
|
159
|
-
className: clsx("bui-MenuCombobox", className),
|
|
160
|
-
...rest,
|
|
161
|
-
children: [
|
|
162
|
-
/* @__PURE__ */ jsx(
|
|
163
|
-
"input",
|
|
164
|
-
{
|
|
165
|
-
className: "bui-SubmenuComboboxSearch",
|
|
166
|
-
type: "text",
|
|
167
|
-
role: "combobox",
|
|
168
|
-
placeholder: "Filter...",
|
|
169
|
-
"aria-labelledby": triggerId,
|
|
170
|
-
"aria-controls": listboxId,
|
|
171
|
-
"aria-autocomplete": "list",
|
|
172
|
-
"aria-activedescendant": activeDescendantId,
|
|
173
|
-
"aria-expanded": "true",
|
|
174
|
-
"aria-haspopup": "listbox",
|
|
175
|
-
value: filterString,
|
|
176
|
-
onKeyDown: handleKeyDown,
|
|
177
|
-
onChange: handleSearchChange
|
|
178
|
-
}
|
|
179
|
-
),
|
|
180
|
-
/* @__PURE__ */ jsx(
|
|
181
|
-
"div",
|
|
182
|
-
{
|
|
183
|
-
role: "listbox",
|
|
184
|
-
id: listboxId,
|
|
185
|
-
tabIndex: -1,
|
|
186
|
-
"aria-multiselectable": multiselect ? true : void 0,
|
|
187
|
-
className: "bui-SubmenuComboboxItems",
|
|
188
|
-
children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxNoResults", children: "No results found" }) : filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
|
|
189
|
-
ComboboxItem,
|
|
190
|
-
{
|
|
191
|
-
option,
|
|
192
|
-
optionIndex: index,
|
|
193
|
-
value,
|
|
194
|
-
activeOptionIndex,
|
|
195
|
-
onItemActive: setActiveOptionIndex,
|
|
196
|
-
onItemSelect: handleValueChange,
|
|
197
|
-
listboxId
|
|
198
|
-
},
|
|
199
|
-
option.value
|
|
200
|
-
))
|
|
201
|
-
}
|
|
202
|
-
)
|
|
203
|
-
]
|
|
204
|
-
}
|
|
205
|
-
);
|
|
206
|
-
}
|
|
207
|
-
);
|
|
208
|
-
Combobox.displayName = "Combobox";
|
|
209
|
-
|
|
210
|
-
export { Combobox };
|
|
211
|
-
//# sourceMappingURL=Combobox.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Menu/Combobox.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 forwardRef,\n useState,\n useMemo,\n useCallback,\n ChangeEvent,\n KeyboardEvent,\n useRef,\n useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\nimport { useId } from 'react-aria';\n\nconst getListboxItemId = (listboxId: string, optionValue: string): string =>\n `${listboxId}-option-${optionValue}`;\n\n// Internal component for rendering individual items\nfunction ComboboxItem({\n option,\n optionIndex,\n value,\n activeOptionIndex,\n onItemActive,\n onItemSelect,\n listboxId,\n}: {\n option: MenuComboboxOption;\n optionIndex: number;\n value?: string[];\n activeOptionIndex: number;\n onItemActive: (index: number) => void;\n onItemSelect: (value: string) => void;\n listboxId: string;\n}) {\n const isSelected = value?.includes(option.value) ?? false;\n const isHighlighted = optionIndex === activeOptionIndex;\n const itemId = getListboxItemId(listboxId, option.value);\n\n const itemRef = useRef<HTMLDivElement>(null);\n\n // Scroll the item into view when it becomes highlighted\n useEffect(() => {\n if (isHighlighted && itemRef.current) {\n itemRef.current.scrollIntoView({ block: 'nearest' });\n }\n }, [isHighlighted]);\n\n return (\n <div\n ref={itemRef}\n className=\"bui-SubmenuComboboxItem\"\n id={itemId}\n role=\"option\"\n aria-selected={isSelected}\n data-highlighted={isHighlighted ? true : undefined}\n data-selected={isSelected ? true : undefined}\n data-disabled={option.disabled ? true : undefined}\n onMouseOver={() => !option.disabled && onItemActive(optionIndex)}\n onClick={() => !option.disabled && onItemSelect(option.value)}\n >\n <div className=\"bui-SubmenuComboboxItemCheckbox\">\n {isSelected && <Icon aria-hidden=\"true\" name=\"check\" size={12} />}\n </div>\n <div className=\"bui-SubmenuComboboxItemLabel\">{option.label}</div>\n </div>\n );\n}\n\n/** @public */\nexport const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(\n (props, ref) => {\n const {\n options,\n value,\n onValueChange,\n multiselect = false,\n className,\n ...rest\n } = props;\n\n const triggerId = useId();\n const listboxId = `${triggerId}-listbox`;\n\n // State management\n const [filterString, setFilterString] = useState<string>('');\n const [activeOptionIndex, setActiveOptionIndex] = useState<number>(0);\n\n // Filter options based on input\n const filteredOptions = useMemo(() => {\n if (!filterString) return options;\n const lowerFilterString = filterString.toLocaleLowerCase('en-US');\n return options.filter(option =>\n option.label.toLocaleLowerCase('en-US').includes(lowerFilterString),\n );\n }, [filterString, options]);\n\n // Get the active descendant ID for accessibility\n const activeDescendantId =\n activeOptionIndex >= 0 && filteredOptions.length > 0\n ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value)\n : undefined;\n\n const handleValueChange = useCallback(\n (toggledValue: string) => {\n let newValue: string[];\n if (multiselect) {\n newValue = value?.includes(toggledValue)\n ? value.filter(v => v !== toggledValue)\n : [...(value ?? []), toggledValue];\n } else {\n newValue = value?.includes(toggledValue) ? [] : [toggledValue];\n }\n\n onValueChange?.(newValue);\n },\n [multiselect, onValueChange, value],\n );\n\n const handleSearchChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setFilterString(e.target.value);\n setActiveOptionIndex(0);\n e.preventDefault();\n },\n [],\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n let wasEscapeKey = false;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n setActiveOptionIndex(prev =>\n Math.min(prev + 1, filteredOptions.length - 1),\n );\n break;\n case 'ArrowUp':\n e.preventDefault();\n setActiveOptionIndex(prev => Math.max(prev - 1, 0));\n break;\n case 'Home':\n e.preventDefault();\n setActiveOptionIndex(0);\n break;\n case 'End':\n e.preventDefault();\n setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));\n break;\n case 'Enter':\n e.preventDefault();\n if (\n activeOptionIndex >= 0 &&\n !filteredOptions[activeOptionIndex].disabled\n ) {\n handleValueChange(filteredOptions[activeOptionIndex].value);\n }\n break;\n case 'Escape':\n // The Menu component should handle this\n wasEscapeKey = true;\n break;\n default:\n break;\n }\n\n if (!wasEscapeKey) {\n // Stop propagation so Menu components don't prevent the input from updating\n e.stopPropagation();\n }\n },\n [filteredOptions, activeOptionIndex, handleValueChange],\n );\n\n return (\n <div\n ref={ref}\n role=\"combobox\"\n className={clsx('bui-MenuCombobox', className)}\n {...rest}\n >\n <input\n className=\"bui-SubmenuComboboxSearch\"\n type=\"text\"\n role=\"combobox\"\n placeholder=\"Filter...\"\n aria-labelledby={triggerId}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendantId}\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n value={filterString}\n onKeyDown={handleKeyDown}\n onChange={handleSearchChange}\n />\n <div\n role=\"listbox\"\n id={listboxId}\n tabIndex={-1}\n aria-multiselectable={multiselect ? true : undefined}\n className=\"bui-SubmenuComboboxItems\"\n >\n {filteredOptions.length === 0 ? (\n <div className=\"bui-SubmenuComboboxNoResults\">No results found</div>\n ) : (\n filteredOptions.map((option, index) => (\n <ComboboxItem\n key={option.value}\n option={option}\n optionIndex={index}\n value={value}\n activeOptionIndex={activeOptionIndex}\n onItemActive={setActiveOptionIndex}\n onItemSelect={handleValueChange}\n listboxId={listboxId}\n />\n ))\n )}\n </div>\n </div>\n );\n },\n);\nCombobox.displayName = 'Combobox';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/*\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\n.bui-Select[data-invalid] {\n & .bui-SelectTrigger {\n border-color: var(--bui-fg-danger);\n }\n}\n\n.bui-SelectTrigger {\n box-sizing: border-box;\n border-radius: var(--bui-radius-3);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n gap: var(--bui-space-2);\n width: 100%;\n\n & svg {\n flex-shrink: 0;\n color: var(--bui-fg-secondary);\n }\n\n &[data-size='small'] {\n height: 2rem;\n padding-inline: var(--bui-space-3);\n }\n\n &[data-size='medium'] {\n height: 3rem;\n padding-inline: var(--bui-space-4);\n }\n\n &[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n &[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:hover {\n transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n border-color: var(--bui-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--bui-border-pressed);\n outline: 0;\n }\n\n &[data-invalid] {\n border-color: var(--bui-fg-danger);\n }\n &[data-invalid]:hover {\n border-width: 2px;\n }\n\n &[data-invalid]:focus-visible {\n border-width: 2px;\n }\n\n &[disabled] {\n cursor: not-allowed;\n border-color: var(--bui-border-disabled);\n color: var(--bui-fg-disabled);\n }\n\n &[disabled] .bui-SelectValue {\n color: var(--bui-fg-disabled);\n }\n\n &[data-popup-open] .bui-SelectIcon {\n transform: rotate(180deg);\n }\n}\n\n.bui-SelectValue {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\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 text-align: left;\n\n & .bui-SelectItemIndicator {\n display: none;\n }\n\n &[disabled] {\n color: var(--bui-fg-disabled);\n }\n}\n\n.bui-SelectItem {\n position: relative;\n width: var(--anchor-width);\n display: grid;\n grid-template-areas: 'icon text';\n grid-template-columns: 1rem 1fr;\n align-items: center;\n padding-block: var(--bui-space-2);\n padding-left: var(--bui-space-3);\n padding-right: var(--bui-space-4);\n color: var(--bui-fg-primary);\n border-radius: var(--bui-radius-3);\n cursor: pointer;\n user-select: none;\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-1);\n outline: none;\n\n &[data-focused] {\n z-index: 0;\n position: relative;\n color: var(--bui-fg-primary);\n }\n\n &[data-focused]::before {\n content: '';\n z-index: -1;\n position: absolute;\n inset-block: 0;\n inset-inline: 0.25rem;\n border-radius: 0.25rem;\n background-color: var(--bui-bg-tint-hover);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n\n &[data-selected] .bui-SelectItemIndicator {\n opacity: 1;\n }\n}\n\n.bui-SelectItemIndicator {\n grid-area: icon;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n}\n\n.bui-SelectItemLabel {\n flex: 1;\n grid-area: text;\n}\n";
|
|
4
|
-
styleInject(css_248z);
|
|
5
|
-
|
|
6
|
-
export { css_248z as default };
|
|
7
|
-
//# sourceMappingURL=Select.styles.css.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { TableCell } from './TableCell/TableCell.esm.js';
|
|
5
|
-
import { TableCellText } from './TableCellText/TableCellText.esm.js';
|
|
6
|
-
import { TableCellLink } from './TableCellLink/TableCellLink.esm.js';
|
|
7
|
-
import { TableCellProfile } from './TableCellProfile/TableCellProfile.esm.js';
|
|
8
|
-
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
9
|
-
|
|
10
|
-
const TableRoot = forwardRef(({ className, ...props }, ref) => {
|
|
11
|
-
const { classNames } = useStyles("Table");
|
|
12
|
-
return /* @__PURE__ */ jsx("table", { ref, className: clsx(classNames.root, className), ...props });
|
|
13
|
-
});
|
|
14
|
-
TableRoot.displayName = "TableRoot";
|
|
15
|
-
const TableHeader = forwardRef(({ className, ...props }, ref) => {
|
|
16
|
-
const { classNames } = useStyles("Table");
|
|
17
|
-
return /* @__PURE__ */ jsx(
|
|
18
|
-
"thead",
|
|
19
|
-
{
|
|
20
|
-
ref,
|
|
21
|
-
className: clsx(classNames.header, className),
|
|
22
|
-
...props
|
|
23
|
-
}
|
|
24
|
-
);
|
|
25
|
-
});
|
|
26
|
-
TableHeader.displayName = "TableHeader";
|
|
27
|
-
const TableBody = forwardRef(({ className, ...props }, ref) => {
|
|
28
|
-
const { classNames } = useStyles("Table");
|
|
29
|
-
return /* @__PURE__ */ jsx("tbody", { ref, className: clsx(classNames.body, className), ...props });
|
|
30
|
-
});
|
|
31
|
-
TableBody.displayName = "TableBody";
|
|
32
|
-
const TableRow = forwardRef(({ className, ...props }, ref) => {
|
|
33
|
-
const { classNames } = useStyles("Table");
|
|
34
|
-
return /* @__PURE__ */ jsx("tr", { ref, className: clsx(classNames.row, className), ...props, children: props.children });
|
|
35
|
-
});
|
|
36
|
-
TableRow.displayName = "TableRow";
|
|
37
|
-
const TableHead = forwardRef(({ className, ...props }, ref) => {
|
|
38
|
-
const { classNames } = useStyles("Table");
|
|
39
|
-
return /* @__PURE__ */ jsx("th", { ref, className: clsx(classNames.head, className), ...props });
|
|
40
|
-
});
|
|
41
|
-
TableHead.displayName = "TableHead";
|
|
42
|
-
const TableCaption = forwardRef(({ className, ...props }, ref) => {
|
|
43
|
-
const { classNames } = useStyles("Table");
|
|
44
|
-
return /* @__PURE__ */ jsx(
|
|
45
|
-
"caption",
|
|
46
|
-
{
|
|
47
|
-
ref,
|
|
48
|
-
className: clsx(classNames.caption, className),
|
|
49
|
-
...props
|
|
50
|
-
}
|
|
51
|
-
);
|
|
52
|
-
});
|
|
53
|
-
TableCaption.displayName = "TableCaption";
|
|
54
|
-
const Table = {
|
|
55
|
-
Root: TableRoot,
|
|
56
|
-
Header: TableHeader,
|
|
57
|
-
Body: TableBody,
|
|
58
|
-
Head: TableHead,
|
|
59
|
-
Row: TableRow,
|
|
60
|
-
Cell: TableCell,
|
|
61
|
-
CellText: TableCellText,
|
|
62
|
-
CellLink: TableCellLink,
|
|
63
|
-
CellProfile: TableCellProfile,
|
|
64
|
-
Caption: TableCaption
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
export { Table };
|
|
68
|
-
//# sourceMappingURL=Table.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.esm.js","sources":["../../../src/components/Table/Table.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 clsx from 'clsx';\nimport { TableCell } from './TableCell/TableCell';\nimport { TableCellText } from './TableCellText/TableCellText';\nimport { TableCellLink } from './TableCellLink/TableCellLink';\nimport { TableCellProfile } from './TableCellProfile/TableCellProfile';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TableRoot = forwardRef<\n HTMLTableElement,\n React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <table ref={ref} className={clsx(classNames.root, className)} {...props} />\n );\n});\nTableRoot.displayName = 'TableRoot';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <thead\n ref={ref}\n className={clsx(classNames.header, className)}\n {...props}\n />\n );\n});\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <tbody ref={ref} className={clsx(classNames.body, className)} {...props} />\n );\n});\nTableBody.displayName = 'TableBody';\n\nconst TableRow = forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <tr ref={ref} className={clsx(classNames.row, className)} {...props}>\n {props.children}\n </tr>\n );\n});\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <th ref={ref} className={clsx(classNames.head, className)} {...props} />\n );\n});\nTableHead.displayName = 'TableHead';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <caption\n ref={ref}\n className={clsx(classNames.caption, className)}\n {...props}\n />\n );\n});\nTableCaption.displayName = 'TableCaption';\n\n/**\n * Table component for displaying tabular data\n * @public\n */\nexport const Table = {\n Root: TableRoot,\n Header: TableHeader,\n Body: TableBody,\n Head: TableHead,\n Row: TableRow,\n Cell: TableCell,\n CellText: TableCellText,\n CellLink: TableCellLink,\n CellProfile: TableCellProfile,\n Caption: TableCaption,\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
5
|
-
|
|
6
|
-
const TableCell = forwardRef(({ className, ...props }, ref) => {
|
|
7
|
-
const { classNames } = useStyles("Table");
|
|
8
|
-
return /* @__PURE__ */ jsx("td", { ref, className: clsx(classNames.cell, className), ...props });
|
|
9
|
-
});
|
|
10
|
-
TableCell.displayName = "TableCell";
|
|
11
|
-
|
|
12
|
-
export { TableCell };
|
|
13
|
-
//# sourceMappingURL=TableCell.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.esm.js","sources":["../../../../src/components/Table/TableCell/TableCell.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 clsx from 'clsx';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <td ref={ref} className={clsx(classNames.cell, className)} {...props} />\n );\n});\nTableCell.displayName = 'TableCell';\n\nexport { TableCell };\n"],"names":[],"mappings":";;;;;AAqBM,MAAA,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,CAAA;AAE1E,CAAC;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { Text } from '../../Text/Text.esm.js';
|
|
5
|
-
import { Link } from '../../Link/Link.esm.js';
|
|
6
|
-
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
7
|
-
|
|
8
|
-
const TableCellLink = forwardRef(
|
|
9
|
-
({ className, title, description, href, render, ...props }, ref) => {
|
|
10
|
-
const { classNames } = useStyles("Table");
|
|
11
|
-
return /* @__PURE__ */ jsxs(
|
|
12
|
-
"div",
|
|
13
|
-
{
|
|
14
|
-
ref,
|
|
15
|
-
className: clsx(classNames.cellLink, className),
|
|
16
|
-
...props,
|
|
17
|
-
children: [
|
|
18
|
-
title && /* @__PURE__ */ jsx(Link, { href, children: title }),
|
|
19
|
-
description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
);
|
|
25
|
-
TableCellLink.displayName = "TableCellLink";
|
|
26
|
-
|
|
27
|
-
export { TableCellLink };
|
|
28
|
-
//# sourceMappingURL=TableCellLink.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellLink.esm.js","sources":["../../../../src/components/Table/TableCellLink/TableCellLink.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 clsx from 'clsx';\nimport { TableCellLinkProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellLink = forwardRef<HTMLDivElement, TableCellLinkProps>(\n ({ className, title, description, href, render, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.cellLink, className)}\n {...props}\n >\n {title && <Link href={href}>{title}</Link>}\n {description && (\n <Text variant=\"body-medium\" color=\"secondary\">\n {description}\n </Text>\n )}\n </div>\n );\n },\n);\nTableCellLink.displayName = 'TableCellLink';\n\nexport { TableCellLink };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAO,EAAA,WAAA,EAAa,MAAM,MAAQ,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAS,KAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAClC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { Text } from '../../Text/Text.esm.js';
|
|
5
|
-
import { Link } from '../../Link/Link.esm.js';
|
|
6
|
-
import { Avatar } from '@base-ui-components/react/avatar';
|
|
7
|
-
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
8
|
-
|
|
9
|
-
const TableCellProfile = forwardRef(
|
|
10
|
-
({ className, src, name, to, withImage = true, ...rest }, ref) => {
|
|
11
|
-
const { classNames } = useStyles("Table");
|
|
12
|
-
return /* @__PURE__ */ jsxs(
|
|
13
|
-
"div",
|
|
14
|
-
{
|
|
15
|
-
ref,
|
|
16
|
-
className: clsx(classNames.cellProfile, className),
|
|
17
|
-
...rest,
|
|
18
|
-
children: [
|
|
19
|
-
withImage && /* @__PURE__ */ jsxs(Avatar.Root, { className: classNames.cellProfileAvatar, children: [
|
|
20
|
-
/* @__PURE__ */ jsx(
|
|
21
|
-
Avatar.Image,
|
|
22
|
-
{
|
|
23
|
-
src,
|
|
24
|
-
width: "20",
|
|
25
|
-
height: "20",
|
|
26
|
-
className: classNames.cellProfileAvatarImage
|
|
27
|
-
}
|
|
28
|
-
),
|
|
29
|
-
/* @__PURE__ */ jsx(Avatar.Fallback, { className: classNames.cellProfileAvatarFallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1) })
|
|
30
|
-
] }),
|
|
31
|
-
name && to ? /* @__PURE__ */ jsx(Link, { href: to, children: name }) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: name })
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
TableCellProfile.displayName = "TableCellProfile";
|
|
38
|
-
|
|
39
|
-
export { TableCellProfile };
|
|
40
|
-
//# sourceMappingURL=TableCellProfile.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellProfile.esm.js","sources":["../../../../src/components/Table/TableCellProfile/TableCellProfile.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 clsx from 'clsx';\nimport { TableCellProfileProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellProfile = forwardRef<HTMLDivElement, TableCellProfileProps>(\n ({ className, src, name, to, withImage = true, ...rest }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.cellProfile, className)}\n {...rest}\n >\n {withImage && (\n <Avatar.Root className={classNames.cellProfileAvatar}>\n <Avatar.Image\n src={src}\n width=\"20\"\n height=\"20\"\n className={classNames.cellProfileAvatarImage}\n />\n <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>\n {(name || '')\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, 1)}\n </Avatar.Fallback>\n </Avatar.Root>\n )}\n {name && to ? (\n <Link href={to}>{name}</Link>\n ) : (\n <Text variant=\"body-medium\">{name}</Text>\n )}\n </div>\n );\n },\n);\nTableCellProfile.displayName = 'TableCellProfile';\n\nexport { TableCellProfile };\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAK,EAAA,IAAA,EAAM,EAAI,EAAA,SAAA,GAAY,IAAM,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA,yBACE,MAAO,CAAA,IAAA,EAAP,EAAY,SAAA,EAAW,WAAW,iBACjC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAO,CAAA,KAAA;AAAA,cAAP;AAAA,gBACC,GAAA;AAAA,gBACA,KAAM,EAAA,IAAA;AAAA,gBACN,MAAO,EAAA,IAAA;AAAA,gBACP,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,4BACA,GAAA,CAAC,MAAO,CAAA,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAW,CAAA,yBAAA,EACnC,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,UAED,IAAQ,IAAA,EAAA,mBACN,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA,mBAErB,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAEtC;AAAA;AAGN;AACA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { Text } from '../../Text/Text.esm.js';
|
|
5
|
-
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
6
|
-
|
|
7
|
-
const TableCellText = forwardRef(
|
|
8
|
-
({ className, title, description, ...props }, ref) => {
|
|
9
|
-
const { classNames } = useStyles("Table");
|
|
10
|
-
return /* @__PURE__ */ jsxs(
|
|
11
|
-
"div",
|
|
12
|
-
{
|
|
13
|
-
ref,
|
|
14
|
-
className: clsx(classNames.cellText, className),
|
|
15
|
-
...props,
|
|
16
|
-
children: [
|
|
17
|
-
title && /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title }),
|
|
18
|
-
description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
);
|
|
24
|
-
TableCellText.displayName = "TableCellText";
|
|
25
|
-
|
|
26
|
-
export { TableCellText };
|
|
27
|
-
//# sourceMappingURL=TableCellText.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellText.esm.js","sources":["../../../../src/components/Table/TableCellText/TableCellText.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 clsx from 'clsx';\nimport { TableCellTextProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellText = forwardRef<HTMLDivElement, TableCellTextProps>(\n ({ className, title, description, ...props }, ref) => {\n const { classNames } = useStyles('Table');\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.cellText, className)}\n {...props}\n >\n {title && <Text variant=\"body-medium\">{title}</Text>}\n {description && (\n <Text variant=\"body-medium\" color=\"secondary\">\n {description}\n </Text>\n )}\n </div>\n );\n },\n);\nTableCellText.displayName = 'TableCellText';\n\nexport { TableCellText };\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,aAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AACpD,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAU,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAC5C,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
function styleInject(css, ref) {
|
|
2
|
-
if ( ref === void 0 ) ref = {};
|
|
3
|
-
var insertAt = ref.insertAt;
|
|
4
|
-
|
|
5
|
-
if (typeof document === 'undefined') { return; }
|
|
6
|
-
|
|
7
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8
|
-
var style = document.createElement('style');
|
|
9
|
-
style.type = 'text/css';
|
|
10
|
-
|
|
11
|
-
if (insertAt === 'top') {
|
|
12
|
-
if (head.firstChild) {
|
|
13
|
-
head.insertBefore(style, head.firstChild);
|
|
14
|
-
} else {
|
|
15
|
-
head.appendChild(style);
|
|
16
|
-
}
|
|
17
|
-
} else {
|
|
18
|
-
head.appendChild(style);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
if (style.styleSheet) {
|
|
22
|
-
style.styleSheet.cssText = css;
|
|
23
|
-
} else {
|
|
24
|
-
style.appendChild(document.createTextNode(css));
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export { styleInject as default };
|
|
29
|
-
//# sourceMappingURL=style-inject.es.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style-inject.es.esm.js","sources":["../../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO;;AAExD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B;AACA,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B;;AAEA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD;AACA;;;;","x_google_ignoreList":[0]}
|