@backstage/ui 0.0.0-nightly-20260113025009 → 0.0.0-nightly-20260115025113
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 +67 -1
- package/css/styles.css +6 -4
- package/dist/components/Button/Button.module.css.esm.js +1 -1
- package/dist/components/Menu/Menu.module.css.esm.js +1 -1
- package/dist/components/Popover/Popover.esm.js +45 -0
- package/dist/components/Popover/Popover.esm.js.map +1 -0
- package/dist/components/Popover/Popover.module.css.esm.js +2 -2
- package/dist/components/Popover/definition.esm.js +3 -1
- package/dist/components/Popover/definition.esm.js.map +1 -1
- package/dist/components/ToggleButton/ToggleButton.esm.js +51 -0
- package/dist/components/ToggleButton/ToggleButton.esm.js.map +1 -0
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js +8 -0
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js.map +1 -0
- package/dist/components/ToggleButton/definition.esm.js +12 -0
- package/dist/components/ToggleButton/definition.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js +33 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js +8 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/definition.esm.js +11 -0
- package/dist/components/ToggleButtonGroup/definition.esm.js.map +1 -0
- package/dist/components/Tooltip/Tooltip.module.css.esm.js +1 -1
- package/dist/index.d.ts +127 -7
- package/dist/index.esm.js +6 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
-
## 0.0.0-nightly-
|
|
3
|
+
## 0.0.0-nightly-20260115025113
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -56,12 +56,15 @@
|
|
|
56
56
|
- `--bui-bg-tint-pressed` can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
|
|
57
57
|
- `--bui-bg-tint-disabled` can be replaced by `--bui-bg-neutral-on-surface-0-disabled`
|
|
58
58
|
|
|
59
|
+
- ea0c6d8: Introduce new `ToggleButton` & `ToggleButtonGroup` components in Backstage UI
|
|
59
60
|
- 4ea1d15: **BREAKING**: Renamed CSS variable `--bui-bg` to `--bui-bg-surface-0` for consistency.
|
|
60
61
|
|
|
61
62
|
### Patch Changes
|
|
62
63
|
|
|
63
64
|
- 1880402: Fixes app background color on dark mode.
|
|
65
|
+
- 21c87cc: Fixes disabled state in primary and secondary buttons in Backstage UI.
|
|
64
66
|
- 9c76682: build(deps-dev): bump `storybook` from 10.1.9 to 10.1.10
|
|
67
|
+
- 133d5c6: Added new Popover component for Backstage UI with automatic overflow handling, and full placement support. Also introduced `--bui-shadow` token for consistent elevation styling across overlay components (Popover, Tooltip, Menu).
|
|
65
68
|
- b4a4911: Fixed SearchField `startCollapsed` prop not working correctly in Backstage UI. The field now properly starts in a collapsed state, expands when clicked and focused, and collapses back when unfocused with no input. Also fixed CSS logic to work correctly in all layout contexts (flex row, flex column, and regular containers).
|
|
66
69
|
|
|
67
70
|
Affected components: SearchField
|
|
@@ -70,6 +73,69 @@
|
|
|
70
73
|
- Updated dependencies
|
|
71
74
|
- @backstage/version-bridge@1.0.11
|
|
72
75
|
|
|
76
|
+
## 0.11.0-next.1
|
|
77
|
+
|
|
78
|
+
### Minor Changes
|
|
79
|
+
|
|
80
|
+
- 243e5e7: **BREAKING**: Redesigned Table component with new `useTable` hook API.
|
|
81
|
+
|
|
82
|
+
- The `Table` component (React Aria wrapper) is renamed to `TableRoot`
|
|
83
|
+
- New high-level `Table` component that handles data display, pagination, sorting, and selection
|
|
84
|
+
- The `useTable` hook is completely redesigned with a new API supporting three pagination modes (complete, offset, cursor)
|
|
85
|
+
- New types: `ColumnConfig`, `TableProps`, `TableItem`, `UseTableOptions`, `UseTableResult`
|
|
86
|
+
|
|
87
|
+
New features include unified pagination modes, debounced query changes, stale data preservation during reloads, and row selection with toggle/replace behaviors.
|
|
88
|
+
|
|
89
|
+
**Migration guide:**
|
|
90
|
+
|
|
91
|
+
1. Update imports and use the new `useTable` hook:
|
|
92
|
+
|
|
93
|
+
```diff
|
|
94
|
+
-import { Table, useTable } from '@backstage/ui';
|
|
95
|
+
-const { data, paginationProps } = useTable({ data: items, pagination: {...} });
|
|
96
|
+
+import { Table, useTable, type ColumnConfig } from '@backstage/ui';
|
|
97
|
+
+const { tableProps } = useTable({
|
|
98
|
+
+ mode: 'complete',
|
|
99
|
+
+ getData: () => items,
|
|
100
|
+
+});
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
2. Define columns and render with the new Table API:
|
|
104
|
+
|
|
105
|
+
```diff
|
|
106
|
+
-<Table aria-label="My table">
|
|
107
|
+
- <TableHeader>...</TableHeader>
|
|
108
|
+
- <TableBody items={data}>...</TableBody>
|
|
109
|
+
-</Table>
|
|
110
|
+
-<TablePagination {...paginationProps} />
|
|
111
|
+
+const columns: ColumnConfig<Item>[] = [
|
|
112
|
+
+ { id: 'name', label: 'Name', isRowHeader: true, cell: item => <CellText title={item.name} /> },
|
|
113
|
+
+ { id: 'type', label: 'Type', cell: item => <CellText title={item.type} /> },
|
|
114
|
+
+];
|
|
115
|
+
+
|
|
116
|
+
+<Table columnConfig={columns} {...tableProps} />
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Affected components: Table, TableRoot, TablePagination
|
|
120
|
+
|
|
121
|
+
- 95246eb: **Breaking** Updating color tokens to match the new neutral style on different surfaces.
|
|
122
|
+
|
|
123
|
+
## Migration notes
|
|
124
|
+
|
|
125
|
+
There's no direct replacement for the old tint tokens but you can use the new neutral set of color tokens on surface 0 or 1 as a replacement.
|
|
126
|
+
|
|
127
|
+
- `--bui-bg-tint` can be replaced by `--bui-bg-neutral-on-surface-0`
|
|
128
|
+
- `--bui-bg-tint-hover` can be replaced by `--bui-bg-neutral-on-surface-0-hover`
|
|
129
|
+
- `--bui-bg-tint-pressed` can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
|
|
130
|
+
- `--bui-bg-tint-disabled` can be replaced by `--bui-bg-neutral-on-surface-0-disabled`
|
|
131
|
+
|
|
132
|
+
- ea0c6d8: Introduce new `ToggleButton` & `ToggleButtonGroup` components in Backstage UI
|
|
133
|
+
|
|
134
|
+
### Patch Changes
|
|
135
|
+
|
|
136
|
+
- 21c87cc: Fixes disabled state in primary and secondary buttons in Backstage UI.
|
|
137
|
+
- b3253b6: Fixed `Link` component causing hard page refreshes for internal routes. The component now properly uses React Router's navigation instead of full page reloads.
|
|
138
|
+
|
|
73
139
|
## 0.11.0-next.0
|
|
74
140
|
|
|
75
141
|
### Minor Changes
|
package/css/styles.css
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
--bui-bg-solid: #1f5493;
|
|
59
59
|
--bui-bg-solid-hover: #163a66;
|
|
60
60
|
--bui-bg-solid-pressed: #0f2b4e;
|
|
61
|
-
--bui-bg-solid-disabled: #
|
|
61
|
+
--bui-bg-solid-disabled: #163a66;
|
|
62
62
|
--bui-bg-neutral-on-surface-0: oklch(0% 0 0 / .06);
|
|
63
63
|
--bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0 / .12);
|
|
64
64
|
--bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0 / .16);
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
--bui-fg-link-hover: #1f2d5c;
|
|
85
85
|
--bui-fg-disabled: #9e9e9e;
|
|
86
86
|
--bui-fg-solid: var(--bui-white);
|
|
87
|
-
--bui-fg-solid-disabled: #
|
|
87
|
+
--bui-fg-solid-disabled: #98a8bc;
|
|
88
88
|
--bui-fg-tint: #1f5493;
|
|
89
89
|
--bui-fg-tint-disabled: var(--bui-gray-5);
|
|
90
90
|
--bui-fg-danger: #e22b2b;
|
|
@@ -100,6 +100,7 @@
|
|
|
100
100
|
--bui-ring: #1f5493;
|
|
101
101
|
--bui-scrollbar: #a0a0a03b;
|
|
102
102
|
--bui-scrollbar-thumb: #a0a0a0;
|
|
103
|
+
--bui-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
|
|
103
104
|
--bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
|
|
104
105
|
}
|
|
105
106
|
|
|
@@ -119,7 +120,7 @@
|
|
|
119
120
|
--bui-bg-solid: #9cc9ff;
|
|
120
121
|
--bui-bg-solid-hover: #83b9fd;
|
|
121
122
|
--bui-bg-solid-pressed: #83b9fd;
|
|
122
|
-
--bui-bg-solid-disabled: #
|
|
123
|
+
--bui-bg-solid-disabled: #1b3d68;
|
|
123
124
|
--bui-bg-neutral-on-surface-0: oklch(100% 0 0 / .1);
|
|
124
125
|
--bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0 / .14);
|
|
125
126
|
--bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0 / .2);
|
|
@@ -145,7 +146,7 @@
|
|
|
145
146
|
--bui-fg-link-hover: #7eb5f7;
|
|
146
147
|
--bui-fg-disabled: var(--bui-gray-7);
|
|
147
148
|
--bui-fg-solid: #101821;
|
|
148
|
-
--bui-fg-solid-disabled:
|
|
149
|
+
--bui-fg-solid-disabled: #6191cc;
|
|
149
150
|
--bui-fg-tint: #9cc9ff;
|
|
150
151
|
--bui-fg-tint-disabled: var(--bui-gray-5);
|
|
151
152
|
--bui-fg-danger: #e22b2b;
|
|
@@ -161,6 +162,7 @@
|
|
|
161
162
|
--bui-ring: #1f5493;
|
|
162
163
|
--bui-scrollbar: #3636363a;
|
|
163
164
|
--bui-scrollbar-thumb: #575757;
|
|
165
|
+
--bui-shadow: none;
|
|
164
166
|
}
|
|
165
167
|
}
|
|
166
168
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 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@layer tokens, base, components, utilities;\n\n@layer components {\n .Button-module_bui-Button__1BvMm {\n --loading-duration: 200ms;\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n background-color: transparent;\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n\n &:hover {\n background-color: var(--bui-bg-solid-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-solid-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-on-surface-0);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n background-color: var(--bui-bg-neutral-on-surface-1);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n background-color: var(--bui-bg-neutral-on-surface-2);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n background-color: var(--bui-bg-neutral-on-surface-3);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n
|
|
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@layer tokens, base, components, utilities;\n\n@layer components {\n .Button-module_bui-Button__1BvMm {\n --loading-duration: 200ms;\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n background-color: transparent;\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n\n &:hover {\n background-color: var(--bui-bg-solid-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-solid-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-on-surface-0);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 150ms ease;\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n background-color: var(--bui-bg-neutral-on-surface-1);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n background-color: var(--bui-bg-neutral-on-surface-2);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n background-color: var(--bui-bg-neutral-on-surface-3);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='tertiary'] {\n background-color: transparent;\n color: var(--bui-fg-primary);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 200ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Button-module_bui-ButtonContent__2x-bP {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: Button-module_bui-spin__yALtH 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Button-module_bui-Button__1BvMm {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonContent__2x-bP {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK svg {\n animation: none;\n }\n }\n\n @keyframes Button-module_bui-spin__yALtH {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
4
|
var stylesButton = {"bui-Button":"Button-module_bui-Button__1BvMm","bui-ButtonContent":"Button-module_bui-ButtonContent__2x-bP","bui-ButtonSpinner":"Button-module_bui-ButtonSpinner__1MWbK","bui-spin":"Button-module_bui-spin__yALtH"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Menu-module_bui-MenuPopover__2_pRD {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu-module_bui-MenuContent__3DAPp {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuItem__2UbNh {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n display: block;\n }\n }\n }\n\n .Menu-module_bui-MenuItemWrapper__3SEGE {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu-module_bui-MenuItemListBox__3OVkY {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemContent__2jc-_ {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemArrow__2Gdal {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuSection__3OeyZ {\n &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n padding-top: 0;\n }\n }\n\n .Menu-module_bui-MenuSectionHeader__yFmfK {\n height: 2rem;\n display: flex;\n align-items: center;\n padding-top: var(--bui-space-3);\n padding-left: var(--bui-space-3);\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-1);\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Menu-module_bui-MenuSeparator__-EtU8 {\n height: 1px;\n background: var(--bui-border);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuSearchField__1sNMj {\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\n height: 2rem;\n\n &[data-empty] {\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n visibility: hidden;\n }\n }\n }\n\n .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:first-child {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: 2rem;\n height: 2rem;\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuEmptyState__wPwuq {\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-2);\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n }\n}\n";
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Menu-module_bui-MenuPopover__2_pRD {\n display: flex;\n flex-direction: column;\n box-shadow: var(--bui-shadow);\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu-module_bui-MenuContent__3DAPp {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuItem__2UbNh {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n display: block;\n }\n }\n }\n\n .Menu-module_bui-MenuItemWrapper__3SEGE {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu-module_bui-MenuItemListBox__3OVkY {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemContent__2jc-_ {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemArrow__2Gdal {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuSection__3OeyZ {\n &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n padding-top: 0;\n }\n }\n\n .Menu-module_bui-MenuSectionHeader__yFmfK {\n height: 2rem;\n display: flex;\n align-items: center;\n padding-top: var(--bui-space-3);\n padding-left: var(--bui-space-3);\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-1);\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Menu-module_bui-MenuSeparator__-EtU8 {\n height: 1px;\n background: var(--bui-border);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuSearchField__1sNMj {\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\n height: 2rem;\n\n &[data-empty] {\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n visibility: hidden;\n }\n }\n }\n\n .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:first-child {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: 2rem;\n height: 2rem;\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuEmptyState__wPwuq {\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-2);\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n }\n}\n";
|
|
4
4
|
var styles = {"bui-MenuPopover":"Menu-module_bui-MenuPopover__2_pRD","bui-MenuContent":"Menu-module_bui-MenuContent__3DAPp","bui-MenuItem":"Menu-module_bui-MenuItem__2UbNh","bui-MenuItemWrapper":"Menu-module_bui-MenuItemWrapper__3SEGE","bui-MenuItemArrow":"Menu-module_bui-MenuItemArrow__2Gdal","bui-MenuItemListBox":"Menu-module_bui-MenuItemListBox__3OVkY","bui-MenuItemListBoxCheck":"Menu-module_bui-MenuItemListBoxCheck__3flwX","bui-MenuItemContent":"Menu-module_bui-MenuItemContent__2jc-_","bui-MenuSection":"Menu-module_bui-MenuSection__3OeyZ","bui-MenuSectionHeader":"Menu-module_bui-MenuSectionHeader__yFmfK","bui-MenuSeparator":"Menu-module_bui-MenuSeparator__-EtU8","bui-MenuSearchField":"Menu-module_bui-MenuSearchField__1sNMj","bui-MenuSearchFieldClear":"Menu-module_bui-MenuSearchFieldClear__3bwIe","bui-MenuSearchFieldInput":"Menu-module_bui-MenuSearchFieldInput__2jPs5","bui-MenuEmptyState":"Menu-module_bui-MenuEmptyState__wPwuq"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { Popover as Popover$1, OverlayArrow } from 'react-aria-components';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
|
+
import { PopoverDefinition } from './definition.esm.js';
|
|
7
|
+
import stylesPopover from './Popover.module.css.esm.js';
|
|
8
|
+
|
|
9
|
+
const Popover = forwardRef(
|
|
10
|
+
(props, ref) => {
|
|
11
|
+
const { classNames, cleanedProps } = useStyles(PopoverDefinition, props);
|
|
12
|
+
const { className, children, hideArrow, ...rest } = cleanedProps;
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
14
|
+
Popover$1,
|
|
15
|
+
{
|
|
16
|
+
className: clsx(classNames.root, stylesPopover[classNames.root], className),
|
|
17
|
+
...rest,
|
|
18
|
+
ref,
|
|
19
|
+
children: ({ trigger }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
20
|
+
!hideArrow && trigger !== "MenuTrigger" && trigger !== "SubmenuTrigger" && /* @__PURE__ */ jsx(
|
|
21
|
+
OverlayArrow,
|
|
22
|
+
{
|
|
23
|
+
className: clsx(classNames.arrow, stylesPopover[classNames.arrow]),
|
|
24
|
+
children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
|
|
25
|
+
/* @__PURE__ */ jsx("path", { d: "M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" }),
|
|
26
|
+
/* @__PURE__ */ jsx("path", { d: "M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" })
|
|
27
|
+
] })
|
|
28
|
+
}
|
|
29
|
+
),
|
|
30
|
+
/* @__PURE__ */ jsx(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
className: clsx(classNames.content, stylesPopover[classNames.content]),
|
|
34
|
+
children
|
|
35
|
+
}
|
|
36
|
+
)
|
|
37
|
+
] })
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
Popover.displayName = "Popover";
|
|
43
|
+
|
|
44
|
+
export { Popover };
|
|
45
|
+
//# sourceMappingURL=Popover.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.esm.js","sources":["../../../src/components/Popover/Popover.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 { forwardRef } from 'react';\nimport { OverlayArrow, Popover as AriaPopover } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { PopoverProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { PopoverDefinition } from './definition';\nimport styles from './Popover.module.css';\n\n/**\n * A popover component built on React Aria Components that displays floating\n * content anchored to a trigger element.\n *\n * @remarks\n * The Popover component supports multiple placements (top, right, bottom, left),\n * automatic viewport-constrained scrolling, and conditional arrow rendering. It\n * automatically handles positioning, collision detection, and ARIA attributes for\n * accessibility. Content is automatically padded and scrollable when it exceeds\n * available space.\n *\n * @example\n * Basic usage with DialogTrigger:\n * ```tsx\n * <DialogTrigger>\n * <Button>Open Popover</Button>\n * <Popover>\n * <Text>Popover content</Text>\n * </Popover>\n * </DialogTrigger>\n * ```\n *\n * @example\n * With custom placement and no arrow:\n * ```tsx\n * <DialogTrigger>\n * <Button>Open</Button>\n * <Popover placement=\"right\" hideArrow>\n * <Text>Content without arrow</Text>\n * </Popover>\n * </DialogTrigger>\n * ```\n *\n * @public\n */\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(PopoverDefinition, props);\n const { className, children, hideArrow, ...rest } = cleanedProps;\n\n return (\n <AriaPopover\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n ref={ref}\n >\n {({ trigger }) => (\n <>\n {!hideArrow &&\n trigger !== 'MenuTrigger' &&\n trigger !== 'SubmenuTrigger' && (\n <OverlayArrow\n className={clsx(classNames.arrow, styles[classNames.arrow])}\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z\" />\n <path d=\"M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z\" />\n </svg>\n </OverlayArrow>\n )}\n <div\n className={clsx(classNames.content, styles[classNames.content])}\n >\n {children}\n </div>\n </>\n )}\n </AriaPopover>\n );\n },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["AriaPopover","styles"],"mappings":";;;;;;;;AA2DO,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,mBAAmB,KAAK,CAAA;AACvE,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAEpD,IAAA,uBACE,GAAA;AAAA,MAACA,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,cAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA,CAAC,EAAE,OAAA,EAAQ,qBACV,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAC,SAAA,IACA,OAAA,KAAY,aAAA,IACZ,OAAA,KAAY,gBAAA,oBACV,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAOA,aAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,cAE1D,QAAA,kBAAA,IAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EACnD,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,8NAAA,EAA+N,CAAA;AAAA,gCACvO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,qSAAA,EAAsS;AAAA,eAAA,EAChT;AAAA;AAAA,WACF;AAAA,0BAEJ,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,aAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Popover-module_bui-Popover__100-n {\n margin-right:
|
|
4
|
-
var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n"};
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Popover-module_bui-Popover__100-n {\n box-shadow: var(--bui-shadow);\n border-radius: var(--bui-radius-3);\n background: var(--bui-bg-surface-1);\n border: 1px solid var(--bui-gray-3);\n forced-color-adjust: none;\n outline: none;\n max-height: inherit;\n display: flex;\n flex-direction: column;\n /* fixes FF gap */\n transform: translate3d(0, 0, 0);\n transition: transform 200ms, opacity 200ms;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(4px);\n\n &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n margin-bottom: var(--bui-space-3);\n }\n }\n\n &[data-placement='right'] {\n --origin: translateX(-4px);\n\n &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n margin-left: var(--bui-space-3);\n }\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-4px);\n\n &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n margin-top: var(--bui-space-3);\n }\n }\n\n &[data-placement='left'] {\n --origin: translateX(4px);\n\n &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n margin-right: var(--bui-space-3);\n }\n }\n }\n\n .Popover-module_bui-PopoverContent__H3nrI {\n overflow-x: hidden;\n overflow-y: auto;\n padding: var(--bui-space-4);\n flex: 1 1 auto;\n min-height: 0;\n }\n\n .Popover-module_bui-PopoverArrow__BRh92 {\n & svg {\n display: block;\n\n /* The popover is rendered overlaying the main\n popover element by 1px. This causes the borders\n to overlap, which causes minor visual artifacts\n with transparent border colors. To mitigate this,\n we split the stroke and fill across separate\n elements in order to guarantee that the stroke is\n always overlaying a consistent color. */\n path:nth-child(1) {\n fill: var(--bui-bg-surface-1);\n }\n\n path:nth-child(2) {\n fill: var(--bui-gray-3);\n }\n\n /* The arrow svg overlaps the popover by 2px, so we\n need to adjust the margins accordingly. */\n --popover-arrow-overlap: -2px;\n }\n\n &[data-placement='top'] svg {\n margin-top: var(--popover-arrow-overlap);\n }\n\n &[data-placement='bottom'] svg {\n margin-bottom: var(--popover-arrow-overlap);\n transform: rotate(180deg);\n }\n\n &[data-placement='right'] svg {\n margin-right: var(--popover-arrow-overlap);\n transform: rotate(90deg);\n }\n\n &[data-placement='left'] svg {\n margin-left: var(--popover-arrow-overlap);\n transform: rotate(-90deg);\n }\n }\n\n [data-theme='dark'] {\n .Popover-module_bui-Popover__100-n {\n background: var(--bui-bg-surface-2);\n border: 1px solid var(--bui-gray-4);\n }\n\n .Popover-module_bui-PopoverArrow__BRh92 {\n svg path:nth-child(1) {\n fill: var(--bui-bg-surface-2);\n }\n\n svg path:nth-child(2) {\n fill: var(--bui-gray-4);\n }\n }\n }\n}\n";
|
|
4
|
+
var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n","bui-PopoverArrow":"Popover-module_bui-PopoverArrow__BRh92","bui-PopoverContent":"Popover-module_bui-PopoverContent__H3nrI"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { stylesPopover as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Popover/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Popover\n * @public\n */\nexport const PopoverDefinition = {\n classNames: {\n root: 'bui-Popover',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Popover/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Popover\n * @public\n */\nexport const PopoverDefinition = {\n classNames: {\n root: 'bui-Popover',\n arrow: 'bui-PopoverArrow',\n content: 'bui-PopoverContent',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,aAAA;AAAA,IACN,KAAA,EAAO,kBAAA;AAAA,IACP,OAAA,EAAS;AAAA;AAEb;;;;"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { ToggleButton as ToggleButton$1 } from 'react-aria-components';
|
|
5
|
+
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
|
+
import { ToggleButtonDefinition } from './definition.esm.js';
|
|
7
|
+
import styles from './ToggleButton.module.css.esm.js';
|
|
8
|
+
import { useSurface } from '../../hooks/useSurface.esm.js';
|
|
9
|
+
|
|
10
|
+
const ToggleButton = forwardRef(
|
|
11
|
+
(props, ref) => {
|
|
12
|
+
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
13
|
+
ToggleButtonDefinition,
|
|
14
|
+
{
|
|
15
|
+
size: "small",
|
|
16
|
+
...props
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
const { children, className, iconStart, iconEnd, onSurface, ...rest } = cleanedProps;
|
|
20
|
+
const { surface } = useSurface({ onSurface });
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
ToggleButton$1,
|
|
23
|
+
{
|
|
24
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
25
|
+
ref,
|
|
26
|
+
...dataAttributes,
|
|
27
|
+
...typeof surface === "string" ? { "data-on-surface": surface } : {},
|
|
28
|
+
...rest,
|
|
29
|
+
children: (renderProps) => {
|
|
30
|
+
const renderedChildren = typeof children === "function" ? children(renderProps) : children;
|
|
31
|
+
return /* @__PURE__ */ jsxs(
|
|
32
|
+
"span",
|
|
33
|
+
{
|
|
34
|
+
className: clsx(classNames.content, styles[classNames.content]),
|
|
35
|
+
"data-slot": "content",
|
|
36
|
+
children: [
|
|
37
|
+
iconStart,
|
|
38
|
+
renderedChildren,
|
|
39
|
+
iconEnd
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
ToggleButton.displayName = "ToggleButton";
|
|
49
|
+
|
|
50
|
+
export { ToggleButton };
|
|
51
|
+
//# sourceMappingURL=ToggleButton.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonDefinition } from './definition';\nimport styles from './ToggleButton.module.css';\nimport { useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ToggleButtonDefinition,\n {\n size: 'small',\n ...props,\n },\n );\n\n const { children, className, iconStart, iconEnd, onSurface, ...rest } =\n cleanedProps;\n\n const { surface } = useSurface({ onSurface });\n\n return (\n <AriaToggleButton\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n {...dataAttributes}\n {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}\n {...rest}\n >\n {renderProps => {\n // If children is a function, call it with render props; otherwise use children as-is\n const renderedChildren =\n typeof children === 'function' ? children(renderProps) : children;\n\n return (\n <span\n className={clsx(classNames.content, styles[classNames.content])}\n data-slot=\"content\"\n >\n {iconStart}\n {renderedChildren}\n {iconEnd}\n </span>\n );\n }}\n </AriaToggleButton>\n );\n },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;;;;AA0BO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,sBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,SAAA,EAAW,GAAG,MAAK,GAClE,YAAA;AAEF,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,UAAA,CAAW,EAAE,WAAW,CAAA;AAE5C,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAI,OAAO,OAAA,KAAY,QAAA,GAAW,EAAE,iBAAA,EAAmB,OAAA,KAAY,EAAC;AAAA,QACpE,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,uBACE,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAC9D,WAAA,EAAU,SAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,gBAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ToggleButton-module_bui-ToggleButton__1CL1A {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n border: none;\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0 var(--bui-space-2);\n cursor: pointer;\n transition: background-color 150ms ease, box-shadow 150ms ease,\n color 150ms ease, transform 100ms ease;\n\n &[data-selected],\n &[data-pressed] {\n background: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n }\n\n &:not([data-selected])[data-hovered] {\n background: var(--bui-bg-surface-2);\n }\n\n &[data-disabled] {\n background: var(--bui-bg-neutral-on-surface-0-disabled);\n color: var(--bui-fg-disabled);\n }\n\n &[data-disabled][data-hovered] {\n background: var(--bui-bg-neutral-on-surface-0-disabled);\n }\n\n &[data-disabled][data-selected] {\n background: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-disabled);\n }\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-focus-visible] {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled] {\n cursor: not-allowed;\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-pressed] {\n transform: scale(0.98);\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled][data-pressed] {\n transform: none;\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='small'] {\n height: 2rem;\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='medium'] {\n height: 2.5rem;\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ToggleButton-module_bui-ToggleButtonContent__1Pq3O {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ToggleButton":"ToggleButton-module_bui-ToggleButton__1CL1A","bui-ToggleButtonContent":"ToggleButton-module_bui-ToggleButtonContent__1Pq3O"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=ToggleButton.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButton.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const ToggleButtonDefinition = {
|
|
2
|
+
classNames: {
|
|
3
|
+
root: "bui-ToggleButton",
|
|
4
|
+
content: "bui-ToggleButtonContent"
|
|
5
|
+
},
|
|
6
|
+
dataAttributes: {
|
|
7
|
+
size: ["small", "medium"]
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { ToggleButtonDefinition };
|
|
12
|
+
//# sourceMappingURL=definition.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButton/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButton\n * @public\n */\nexport const ToggleButtonDefinition = {\n classNames: {\n root: 'bui-ToggleButton',\n content: 'bui-ToggleButtonContent',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,sBAAA,GAAyB;AAAA,EACpC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { ToggleButtonGroup as ToggleButtonGroup$1 } from 'react-aria-components';
|
|
5
|
+
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
|
+
import { ToggleButtonGroupDefinition } from './definition.esm.js';
|
|
7
|
+
import styles from './ToggleButtonGroup.module.css.esm.js';
|
|
8
|
+
|
|
9
|
+
const ToggleButtonGroup = forwardRef(
|
|
10
|
+
(props, ref) => {
|
|
11
|
+
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
12
|
+
ToggleButtonGroupDefinition,
|
|
13
|
+
{
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
const { className, children, ...rest } = cleanedProps;
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
ToggleButtonGroup$1,
|
|
20
|
+
{
|
|
21
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
22
|
+
ref,
|
|
23
|
+
...dataAttributes,
|
|
24
|
+
...rest,
|
|
25
|
+
children
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
ToggleButtonGroup.displayName = "ToggleButtonGroup";
|
|
31
|
+
|
|
32
|
+
export { ToggleButtonGroup };
|
|
33
|
+
//# sourceMappingURL=ToggleButtonGroup.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.esm.js","sources":["../../../src/components/ToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';\nimport type { ToggleButtonGroupProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonGroupDefinition } from './definition';\nimport styles from './ToggleButtonGroup.module.css';\n\n/** @public */\nexport const ToggleButtonGroup = forwardRef(\n (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ToggleButtonGroupDefinition,\n {\n ...props,\n },\n );\n\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <AriaToggleButtonGroup\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </AriaToggleButtonGroup>\n );\n },\n);\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n"],"names":["AriaToggleButtonGroup"],"mappings":";;;;;;;;AAyBO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,2BAAA;AAAA,MACA;AAAA,QACE,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAACA,mBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n border-radius: var(--bui-radius-2);\n overflow: hidden;\n box-shadow: inset 0 0 0 1px var(--bui-border);\n width: fit-content;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n width: fit-content;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx > .bui-ToggleButton {\n border-radius: 0;\n margin: 0;\n box-shadow: none;\n border: 0;\n }\n\n /* Horizontal radius rules (default orientation) */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton {\n border-radius: 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton:first-child {\n border-radius: var(--bui-radius-2) 0 0 var(--bui-radius-2);\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton:last-child {\n border-radius: 0 var(--bui-radius-2) var(--bui-radius-2) 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton:only-child {\n border-radius: var(--bui-radius-2);\n }\n\n /* Horizontal dividers */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n .bui-ToggleButton\n + .bui-ToggleButton {\n border-left: 1px solid var(--bui-border);\n }\n\n /* Vertical dividers */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n .bui-ToggleButton {\n width: 100%;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n .bui-ToggleButton\n + .bui-ToggleButton {\n border-top: 1px solid var(--bui-border);\n }\n\n /* Vertical radius rules */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton {\n border-radius: 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton:first-child {\n border-radius: var(--bui-radius-2) var(--bui-radius-2) 0 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton:last-child {\n border-radius: 0 0 var(--bui-radius-2) var(--bui-radius-2);\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton:only-child {\n border-radius: var(--bui-radius-2);\n }\n\n /* Focus ring on group surface */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ToggleButtonGroup":"ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=ToggleButtonGroup.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButtonGroup/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButtonGroup\n * @public\n */\nexport const ToggleButtonGroupDefinition = {\n classNames: {\n root: 'bui-ToggleButtonGroup',\n },\n dataAttributes: {\n orientation: ['horizontal', 'vertical'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,2BAAA,GAA8B;AAAA,EACzC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,WAAA,EAAa,CAAC,YAAA,EAAc,UAAU;AAAA;AAE1C;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Tooltip-module_bui-Tooltip__1xkDA {\n box-shadow:
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Tooltip-module_bui-Tooltip__1xkDA {\n box-shadow: var(--bui-shadow);\n border-radius: 4px;\n background: var(--bui-bg-surface-1);\n border: 1px solid var(--bui-gray-3);\n forced-color-adjust: none;\n outline: none;\n padding: var(--bui-space-2) var(--bui-space-3);\n max-width: 240px;\n /* fixes FF gap */\n transform: translate3d(0, 0, 0);\n transition: transform 200ms, opacity 200ms;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n color: var(--bui-fg-primary);\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n --tooltip-offset: var(--bui-space-3);\n\n &[data-placement='top'] {\n margin-bottom: var(--tooltip-offset);\n --origin: translateY(4px);\n }\n\n &[data-placement='right'] {\n margin-left: var(--tooltip-offset);\n --origin: translateX(-4px);\n }\n\n &[data-placement='bottom'] {\n margin-top: var(--tooltip-offset);\n --origin: translateY(-4px);\n }\n\n &[data-placement='left'] {\n margin-right: var(--tooltip-offset);\n --origin: translateX(4px);\n }\n }\n\n .Tooltip-module_bui-TooltipArrow__3lFI0 {\n & svg {\n display: block;\n\n /* The tooltip is rendered overlaying the main\n tooltip element by 1px. This causes the borders\n to overlap, which causes minor visual artifacts\n with transparent border colors. To mitigate this,\n we split the stroke and fill across separate\n elements in order to guarantee that the stroke is\n always overlaying a consistent color. */\n path:nth-child(1) {\n fill: var(--bui-bg-surface-1);\n }\n\n path:nth-child(2) {\n fill: var(--bui-gray-3);\n }\n\n /* The arrow svg overlaps the tooltip by 2px, so we\n need to adjust the margins accordingly. */\n --tooltip-arrow-overlap: -2px;\n }\n\n &[data-placement='top'] svg {\n margin-top: var(--tooltip-arrow-overlap);\n }\n\n &[data-placement='bottom'] svg {\n margin-bottom: var(--tooltip-arrow-overlap);\n transform: rotate(180deg);\n }\n\n &[data-placement='right'] svg {\n margin-right: var(--tooltip-arrow-overlap);\n transform: rotate(90deg);\n }\n\n &[data-placement='left'] svg {\n margin-left: var(--tooltip-arrow-overlap);\n transform: rotate(-90deg);\n }\n }\n\n [data-theme='dark'] {\n .Tooltip-module_bui-Tooltip__1xkDA {\n background: var(--bui-bg-surface-2);\n box-shadow: none;\n border: 1px solid var(--bui-gray-4);\n }\n\n .Tooltip-module_bui-TooltipArrow__3lFI0 {\n svg path:nth-child(1) {\n fill: var(--bui-bg-surface-2);\n }\n\n svg path:nth-child(2) {\n fill: var(--bui-gray-4);\n }\n }\n }\n}\n";
|
|
4
4
|
var styles = {"bui-Tooltip":"Tooltip-module_bui-Tooltip__1xkDA","bui-TooltipArrow":"Tooltip-module_bui-TooltipArrow__3lFI0"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
|
|
3
|
-
import { ButtonProps as ButtonProps$1, DisclosureProps, HeadingProps, DisclosurePanelProps, DisclosureGroupProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps as TableProps$1, ColumnProps as ColumnProps$1, CellProps as CellProps$1, TableHeaderProps, TableBodyProps, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
|
|
3
|
+
import { ButtonProps as ButtonProps$1, DisclosureProps, HeadingProps, DisclosurePanelProps, DisclosureGroupProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps as TableProps$1, ColumnProps as ColumnProps$1, CellProps as CellProps$1, TableHeaderProps, TableBodyProps, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps as PopoverProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
import { NavigateOptions } from 'react-router-dom';
|
|
6
6
|
import { SortDescriptor as SortDescriptor$1 } from 'react-stately';
|
|
@@ -1319,14 +1319,14 @@ interface SubmenuTriggerProps extends SubmenuTriggerProps$1 {
|
|
|
1319
1319
|
}
|
|
1320
1320
|
/** @public */
|
|
1321
1321
|
interface MenuProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>, 'children'> {
|
|
1322
|
-
placement?: PopoverProps['placement'];
|
|
1322
|
+
placement?: PopoverProps$1['placement'];
|
|
1323
1323
|
virtualized?: boolean;
|
|
1324
1324
|
maxWidth?: string;
|
|
1325
1325
|
maxHeight?: string;
|
|
1326
1326
|
}
|
|
1327
1327
|
/** @public */
|
|
1328
1328
|
interface MenuListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'children'> {
|
|
1329
|
-
placement?: PopoverProps['placement'];
|
|
1329
|
+
placement?: PopoverProps$1['placement'];
|
|
1330
1330
|
virtualized?: boolean;
|
|
1331
1331
|
maxWidth?: string;
|
|
1332
1332
|
maxHeight?: string;
|
|
@@ -1334,7 +1334,7 @@ interface MenuListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'ch
|
|
|
1334
1334
|
/** @public */
|
|
1335
1335
|
interface MenuAutocompleteProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>, 'children'> {
|
|
1336
1336
|
placeholder?: string;
|
|
1337
|
-
placement?: PopoverProps['placement'];
|
|
1337
|
+
placement?: PopoverProps$1['placement'];
|
|
1338
1338
|
virtualized?: boolean;
|
|
1339
1339
|
maxWidth?: string;
|
|
1340
1340
|
maxHeight?: string;
|
|
@@ -1342,7 +1342,7 @@ interface MenuAutocompleteProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>,
|
|
|
1342
1342
|
/** @public */
|
|
1343
1343
|
interface MenuAutocompleteListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'children'> {
|
|
1344
1344
|
placeholder?: string;
|
|
1345
|
-
placement?: PopoverProps['placement'];
|
|
1345
|
+
placement?: PopoverProps$1['placement'];
|
|
1346
1346
|
virtualized?: boolean;
|
|
1347
1347
|
maxWidth?: string;
|
|
1348
1348
|
maxHeight?: string;
|
|
@@ -1412,6 +1412,75 @@ declare const MenuDefinition: {
|
|
|
1412
1412
|
};
|
|
1413
1413
|
};
|
|
1414
1414
|
|
|
1415
|
+
/**
|
|
1416
|
+
* Properties for {@link Popover}
|
|
1417
|
+
*
|
|
1418
|
+
* @public
|
|
1419
|
+
*/
|
|
1420
|
+
interface PopoverProps extends Omit<PopoverProps$1, 'children'> {
|
|
1421
|
+
/**
|
|
1422
|
+
* The content to display inside the popover.
|
|
1423
|
+
* Content is automatically wrapped with padding and scroll behavior.
|
|
1424
|
+
*/
|
|
1425
|
+
children: React.ReactNode;
|
|
1426
|
+
/**
|
|
1427
|
+
* Whether to hide the arrow pointing to the trigger element.
|
|
1428
|
+
* Arrow is also automatically hidden for MenuTrigger and SubmenuTrigger contexts.
|
|
1429
|
+
*
|
|
1430
|
+
* @defaultValue false
|
|
1431
|
+
*/
|
|
1432
|
+
hideArrow?: boolean;
|
|
1433
|
+
}
|
|
1434
|
+
|
|
1435
|
+
/**
|
|
1436
|
+
* A popover component built on React Aria Components that displays floating
|
|
1437
|
+
* content anchored to a trigger element.
|
|
1438
|
+
*
|
|
1439
|
+
* @remarks
|
|
1440
|
+
* The Popover component supports multiple placements (top, right, bottom, left),
|
|
1441
|
+
* automatic viewport-constrained scrolling, and conditional arrow rendering. It
|
|
1442
|
+
* automatically handles positioning, collision detection, and ARIA attributes for
|
|
1443
|
+
* accessibility. Content is automatically padded and scrollable when it exceeds
|
|
1444
|
+
* available space.
|
|
1445
|
+
*
|
|
1446
|
+
* @example
|
|
1447
|
+
* Basic usage with DialogTrigger:
|
|
1448
|
+
* ```tsx
|
|
1449
|
+
* <DialogTrigger>
|
|
1450
|
+
* <Button>Open Popover</Button>
|
|
1451
|
+
* <Popover>
|
|
1452
|
+
* <Text>Popover content</Text>
|
|
1453
|
+
* </Popover>
|
|
1454
|
+
* </DialogTrigger>
|
|
1455
|
+
* ```
|
|
1456
|
+
*
|
|
1457
|
+
* @example
|
|
1458
|
+
* With custom placement and no arrow:
|
|
1459
|
+
* ```tsx
|
|
1460
|
+
* <DialogTrigger>
|
|
1461
|
+
* <Button>Open</Button>
|
|
1462
|
+
* <Popover placement="right" hideArrow>
|
|
1463
|
+
* <Text>Content without arrow</Text>
|
|
1464
|
+
* </Popover>
|
|
1465
|
+
* </DialogTrigger>
|
|
1466
|
+
* ```
|
|
1467
|
+
*
|
|
1468
|
+
* @public
|
|
1469
|
+
*/
|
|
1470
|
+
declare const Popover: react.ForwardRefExoticComponent<PopoverProps & react.RefAttributes<HTMLDivElement>>;
|
|
1471
|
+
|
|
1472
|
+
/**
|
|
1473
|
+
* Component definition for Popover
|
|
1474
|
+
* @public
|
|
1475
|
+
*/
|
|
1476
|
+
declare const PopoverDefinition: {
|
|
1477
|
+
readonly classNames: {
|
|
1478
|
+
readonly root: "bui-Popover";
|
|
1479
|
+
readonly arrow: "bui-PopoverArrow";
|
|
1480
|
+
readonly content: "bui-PopoverContent";
|
|
1481
|
+
};
|
|
1482
|
+
};
|
|
1483
|
+
|
|
1415
1484
|
/** @public */
|
|
1416
1485
|
interface SearchFieldProps extends SearchFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
|
|
1417
1486
|
/**
|
|
@@ -1592,6 +1661,57 @@ declare const SwitchDefinition: {
|
|
|
1592
1661
|
};
|
|
1593
1662
|
};
|
|
1594
1663
|
|
|
1664
|
+
/**
|
|
1665
|
+
* Properties for {@link ToggleButton}
|
|
1666
|
+
*
|
|
1667
|
+
* @public
|
|
1668
|
+
*/
|
|
1669
|
+
interface ToggleButtonProps extends ToggleButtonProps$1 {
|
|
1670
|
+
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
|
|
1671
|
+
iconStart?: ReactElement;
|
|
1672
|
+
iconEnd?: ReactElement;
|
|
1673
|
+
/** Surface the toggle button is placed on. Defaults to context surface if available */
|
|
1674
|
+
onSurface?: Responsive<Surface>;
|
|
1675
|
+
}
|
|
1676
|
+
|
|
1677
|
+
/** @public */
|
|
1678
|
+
declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1679
|
+
|
|
1680
|
+
/**
|
|
1681
|
+
* Component definition for ToggleButton
|
|
1682
|
+
* @public
|
|
1683
|
+
*/
|
|
1684
|
+
declare const ToggleButtonDefinition: {
|
|
1685
|
+
readonly classNames: {
|
|
1686
|
+
readonly root: "bui-ToggleButton";
|
|
1687
|
+
readonly content: "bui-ToggleButtonContent";
|
|
1688
|
+
};
|
|
1689
|
+
readonly dataAttributes: {
|
|
1690
|
+
readonly size: readonly ["small", "medium"];
|
|
1691
|
+
};
|
|
1692
|
+
};
|
|
1693
|
+
|
|
1694
|
+
/** @public */
|
|
1695
|
+
interface ToggleButtonGroupProps extends Omit<ToggleButtonGroupProps$1, 'orientation'> {
|
|
1696
|
+
orientation?: NonNullable<ToggleButtonGroupProps$1['orientation']>;
|
|
1697
|
+
}
|
|
1698
|
+
|
|
1699
|
+
/** @public */
|
|
1700
|
+
declare const ToggleButtonGroup: react.ForwardRefExoticComponent<ToggleButtonGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
1701
|
+
|
|
1702
|
+
/**
|
|
1703
|
+
* Component definition for ToggleButtonGroup
|
|
1704
|
+
* @public
|
|
1705
|
+
*/
|
|
1706
|
+
declare const ToggleButtonGroupDefinition: {
|
|
1707
|
+
readonly classNames: {
|
|
1708
|
+
readonly root: "bui-ToggleButtonGroup";
|
|
1709
|
+
};
|
|
1710
|
+
readonly dataAttributes: {
|
|
1711
|
+
readonly orientation: readonly ["horizontal", "vertical"];
|
|
1712
|
+
};
|
|
1713
|
+
};
|
|
1714
|
+
|
|
1595
1715
|
/**
|
|
1596
1716
|
* Properties for {@link VisuallyHidden}
|
|
1597
1717
|
*
|
|
@@ -1629,5 +1749,5 @@ declare const useBreakpoint: () => {
|
|
|
1629
1749
|
down: (key: Breakpoint) => boolean;
|
|
1630
1750
|
};
|
|
1631
1751
|
|
|
1632
|
-
export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
|
|
1633
|
-
export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnConfig, ColumnProps, Columns, ComponentDefinition, ContainerProps, CursorParams, CursorResponse, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FilterState, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PagePagination, PaginationOptions, QueryOptions, RadioGroupProps, RadioProps, Responsive, RowConfig, RowRenderFn, SearchFieldProps, SearchState, SelectProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, Surface, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TableItem, TablePaginationProps, TablePaginationType, TableProps, TableRootProps, TableSelection, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, TooltipProps, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VisuallyHiddenProps };
|
|
1752
|
+
export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Popover, PopoverDefinition, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
|
|
1753
|
+
export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnConfig, ColumnProps, Columns, ComponentDefinition, ContainerProps, CursorParams, CursorResponse, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FilterState, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PagePagination, PaginationOptions, PopoverProps, QueryOptions, RadioGroupProps, RadioProps, Responsive, RowConfig, RowRenderFn, SearchFieldProps, SearchState, SelectProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, Surface, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TableItem, TablePaginationProps, TablePaginationType, TableProps, TableRootProps, TableSelection, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupProps, ToggleButtonProps, TooltipProps, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VisuallyHiddenProps };
|
package/dist/index.esm.js
CHANGED
|
@@ -55,6 +55,8 @@ export { Tooltip, TooltipTrigger } from './components/Tooltip/Tooltip.esm.js';
|
|
|
55
55
|
export { TooltipDefinition } from './components/Tooltip/definition.esm.js';
|
|
56
56
|
export { Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, SubmenuTrigger } from './components/Menu/Menu.esm.js';
|
|
57
57
|
export { MenuDefinition } from './components/Menu/definition.esm.js';
|
|
58
|
+
export { Popover } from './components/Popover/Popover.esm.js';
|
|
59
|
+
export { PopoverDefinition } from './components/Popover/definition.esm.js';
|
|
58
60
|
export { SearchField } from './components/SearchField/SearchField.esm.js';
|
|
59
61
|
export { SearchFieldDefinition } from './components/SearchField/definition.esm.js';
|
|
60
62
|
export { Link } from './components/Link/Link.esm.js';
|
|
@@ -65,6 +67,10 @@ export { Skeleton } from './components/Skeleton/Skeleton.esm.js';
|
|
|
65
67
|
export { SkeletonDefinition } from './components/Skeleton/definition.esm.js';
|
|
66
68
|
export { Switch } from './components/Switch/Switch.esm.js';
|
|
67
69
|
export { SwitchDefinition } from './components/Switch/definition.esm.js';
|
|
70
|
+
export { ToggleButton } from './components/ToggleButton/ToggleButton.esm.js';
|
|
71
|
+
export { ToggleButtonDefinition } from './components/ToggleButton/definition.esm.js';
|
|
72
|
+
export { ToggleButtonGroup } from './components/ToggleButtonGroup/ToggleButtonGroup.esm.js';
|
|
73
|
+
export { ToggleButtonGroupDefinition } from './components/ToggleButtonGroup/definition.esm.js';
|
|
68
74
|
export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.esm.js';
|
|
69
75
|
export { VisuallyHiddenDefinition } from './components/VisuallyHidden/definition.esm.js';
|
|
70
76
|
export { useBreakpoint } from './hooks/useBreakpoint.esm.js';
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20260115025113",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"react-aria-components": "^1.13.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@backstage/cli": "0.0.0-nightly-
|
|
50
|
+
"@backstage/cli": "0.0.0-nightly-20260115025113",
|
|
51
51
|
"@types/react": "^18.0.0",
|
|
52
52
|
"@types/react-dom": "^18.0.0",
|
|
53
53
|
"chalk": "^5.4.1",
|