@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.
Files changed (114) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/css/styles.css +393 -196
  3. package/dist/components/Avatar/Avatar.esm.js.map +1 -1
  4. package/dist/components/Box/Box.esm.js.map +1 -1
  5. package/dist/components/Box/Box.props.esm.js.map +1 -1
  6. package/dist/components/Button/Button.esm.js.map +1 -1
  7. package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
  8. package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -1
  9. package/dist/components/Card/Card.esm.js +4 -4
  10. package/dist/components/Card/Card.esm.js.map +1 -1
  11. package/dist/components/Checkbox/Checkbox.esm.js +9 -9
  12. package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
  13. package/dist/components/Collapsible/Collapsible.esm.js.map +1 -1
  14. package/dist/components/Container/Container.esm.js.map +1 -1
  15. package/dist/components/FieldError/FieldError.esm.js.map +1 -1
  16. package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
  17. package/dist/components/Flex/Flex.esm.js.map +1 -1
  18. package/dist/components/Flex/Flex.props.esm.js.map +1 -1
  19. package/dist/components/Grid/Grid.esm.js.map +1 -1
  20. package/dist/components/Grid/Grid.props.esm.js.map +1 -1
  21. package/dist/components/Header/Header.esm.js +1 -12
  22. package/dist/components/Header/Header.esm.js.map +1 -1
  23. package/dist/components/Header/HeaderToolbar.esm.js +5 -125
  24. package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
  25. package/dist/components/HeaderPage/HeaderPage.esm.js +21 -30
  26. package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
  27. package/dist/components/Icon/Icon.esm.js.map +1 -1
  28. package/dist/components/Icon/context.esm.js.map +1 -1
  29. package/dist/components/Icon/icons.esm.js +1 -1
  30. package/dist/components/Icon/icons.esm.js.map +1 -1
  31. package/dist/components/Icon/provider.esm.js.map +1 -1
  32. package/dist/components/Link/Link.esm.js +1 -13
  33. package/dist/components/Link/Link.esm.js.map +1 -1
  34. package/dist/components/Menu/Menu.esm.js +144 -202
  35. package/dist/components/Menu/Menu.esm.js.map +1 -1
  36. package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
  37. package/dist/components/ScrollArea/ScrollArea.esm.js.map +1 -1
  38. package/dist/components/SearchField/SearchField.esm.js +27 -4
  39. package/dist/components/SearchField/SearchField.esm.js.map +1 -1
  40. package/dist/components/Select/Select.esm.js +0 -1
  41. package/dist/components/Select/Select.esm.js.map +1 -1
  42. package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
  43. package/dist/components/Switch/Switch.esm.js.map +1 -1
  44. package/dist/components/Table/components/Cell.esm.js +30 -0
  45. package/dist/components/Table/components/Cell.esm.js.map +1 -0
  46. package/dist/components/Table/components/CellProfile.esm.js +41 -0
  47. package/dist/components/Table/components/CellProfile.esm.js.map +1 -0
  48. package/dist/components/Table/components/Column.esm.js +17 -0
  49. package/dist/components/Table/components/Column.esm.js.map +1 -0
  50. package/dist/components/Table/components/Row.esm.js +38 -0
  51. package/dist/components/Table/components/Row.esm.js.map +1 -0
  52. package/dist/components/Table/components/Table.esm.js +18 -0
  53. package/dist/components/Table/components/Table.esm.js.map +1 -0
  54. package/dist/components/Table/components/TableBody.esm.js +11 -0
  55. package/dist/components/Table/components/TableBody.esm.js.map +1 -0
  56. package/dist/components/Table/components/TableHeader.esm.js +20 -0
  57. package/dist/components/Table/components/TableHeader.esm.js.map +1 -0
  58. package/dist/components/Table/hooks/useTable.esm.js +116 -0
  59. package/dist/components/Table/hooks/useTable.esm.js.map +1 -0
  60. package/dist/components/TablePagination/TablePagination.esm.js +127 -0
  61. package/dist/components/TablePagination/TablePagination.esm.js.map +1 -0
  62. package/dist/components/Tabs/Tabs.esm.js.map +1 -1
  63. package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
  64. package/dist/components/TagGroup/TagGroup.esm.js +62 -0
  65. package/dist/components/TagGroup/TagGroup.esm.js.map +1 -0
  66. package/dist/components/Text/Text.esm.js.map +1 -1
  67. package/dist/components/TextField/TextField.esm.js.map +1 -1
  68. package/dist/components/Tooltip/Tooltip.esm.js.map +1 -1
  69. package/dist/hooks/useBreakpoint.esm.js.map +1 -1
  70. package/dist/hooks/useIsomorphicLayoutEffect.esm.js.map +1 -1
  71. package/dist/hooks/useMediaQuery.esm.js.map +1 -1
  72. package/dist/hooks/useStyles.esm.js.map +1 -1
  73. package/dist/index.d.ts +289 -157
  74. package/dist/index.esm.js +12 -4
  75. package/dist/index.esm.js.map +1 -1
  76. package/dist/props/display.props.esm.js.map +1 -1
  77. package/dist/props/gap-props.esm.js.map +1 -1
  78. package/dist/props/height.props.esm.js.map +1 -1
  79. package/dist/props/margin.props.esm.js.map +1 -1
  80. package/dist/props/padding.props.esm.js.map +1 -1
  81. package/dist/props/position.props.esm.js.map +1 -1
  82. package/dist/props/prop-def.esm.js.map +1 -1
  83. package/dist/props/spacing.props.esm.js.map +1 -1
  84. package/dist/props/width.props.esm.js.map +1 -1
  85. package/dist/utils/componentDefinitions.esm.js +32 -22
  86. package/dist/utils/componentDefinitions.esm.js.map +1 -1
  87. package/dist/utils/extractProps.esm.js.map +1 -1
  88. package/dist/utils/isExternalLink.esm.js +16 -0
  89. package/dist/utils/isExternalLink.esm.js.map +1 -0
  90. package/package.json +3 -15
  91. package/dist/components/DataTable/DataTable.esm.js +0 -26
  92. package/dist/components/DataTable/DataTable.esm.js.map +0 -1
  93. package/dist/components/DataTable/Pagination/DataTablePagination.esm.js +0 -84
  94. package/dist/components/DataTable/Pagination/DataTablePagination.esm.js.map +0 -1
  95. package/dist/components/DataTable/Root/DataTableRoot.esm.js +0 -24
  96. package/dist/components/DataTable/Root/DataTableRoot.esm.js.map +0 -1
  97. package/dist/components/DataTable/Table/DataTableTable.esm.js +0 -64
  98. package/dist/components/DataTable/Table/DataTableTable.esm.js.map +0 -1
  99. package/dist/components/Menu/Combobox.esm.js +0 -211
  100. package/dist/components/Menu/Combobox.esm.js.map +0 -1
  101. package/dist/components/Select/Select.styles.css.esm.js +0 -7
  102. package/dist/components/Select/Select.styles.css.esm.js.map +0 -1
  103. package/dist/components/Table/Table.esm.js +0 -68
  104. package/dist/components/Table/Table.esm.js.map +0 -1
  105. package/dist/components/Table/TableCell/TableCell.esm.js +0 -13
  106. package/dist/components/Table/TableCell/TableCell.esm.js.map +0 -1
  107. package/dist/components/Table/TableCellLink/TableCellLink.esm.js +0 -28
  108. package/dist/components/Table/TableCellLink/TableCellLink.esm.js.map +0 -1
  109. package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js +0 -40
  110. package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js.map +0 -1
  111. package/dist/components/Table/TableCellText/TableCellText.esm.js +0 -27
  112. package/dist/components/Table/TableCellText/TableCellText.esm.js.map +0 -1
  113. package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js +0 -29
  114. 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]}