@backstage/ui 0.15.0-next.2 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +124 -0
- package/dist/components/Combobox/Combobox.module.css.esm.js +2 -2
- package/dist/components/DatePicker/DatePicker.esm.js +60 -0
- package/dist/components/DatePicker/DatePicker.esm.js.map +1 -0
- package/dist/components/DatePicker/DatePicker.module.css.esm.js +8 -0
- package/dist/components/DatePicker/DatePicker.module.css.esm.js.map +1 -0
- package/dist/components/DatePicker/DatePickerCalendar.esm.js +24 -0
- package/dist/components/DatePicker/DatePickerCalendar.esm.js.map +1 -0
- package/dist/components/DatePicker/DatePickerGroup.esm.js +28 -0
- package/dist/components/DatePicker/DatePickerGroup.esm.js.map +1 -0
- package/dist/components/DatePicker/definition.esm.js +52 -0
- package/dist/components/DatePicker/definition.esm.js.map +1 -0
- package/dist/components/DateRangePicker/DateRangePicker.module.css.esm.js +2 -2
- package/dist/components/Header/Header.esm.js +48 -32
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/Header.module.css.esm.js +2 -2
- package/dist/components/PasswordField/PasswordField.module.css.esm.js +2 -2
- package/dist/components/PasswordField/definition.esm.js +1 -0
- package/dist/components/PasswordField/definition.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/components/Table/Table.module.css.esm.js +2 -2
- package/dist/components/TextField/TextField.module.css.esm.js +2 -2
- package/dist/index.d.ts +90 -3
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,129 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.15.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- a281469: Add support for flex item props (`grow`, `shrink`, and `basis`) to `Box`, `Card`, `Grid`, and `Flex` itself.
|
|
8
|
+
|
|
9
|
+
**Affected components:** Box, Card, Grid, Flex
|
|
10
|
+
|
|
11
|
+
- 5351d8a: Added a `sticky` prop to the `Header` component. When `true`, the title-and-actions bar stays fixed to the top of its scroll container while the rest of the header (tags, description, metadata) scrolls away. The sticky bar background color automatically matches the container surface using the bg-consumer system.
|
|
12
|
+
|
|
13
|
+
**BREAKING**: Removed the main header class from the `Header` component. Custom styles that target this class should be updated to target the component sections that remain.
|
|
14
|
+
|
|
15
|
+
**Affected components:** Header
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- 3846774: Added missing dependencies that were previously only available transitively.
|
|
20
|
+
- e8a1a35: Added `isPending` prop to Alert, Button, ButtonIcon, Table, and TableRoot as a replacement for the `loading` prop, aligning with React Aria naming conventions. The `loading` prop is now deprecated but still supported as an alias. CSS selectors now use `data-ispending` instead of `data-loading` for styling pending states; `data-loading` is still emitted for backward compatibility but will be removed alongside the `loading` prop.
|
|
21
|
+
|
|
22
|
+
**Affected components:** Alert, Button, ButtonIcon, Table, TableRoot
|
|
23
|
+
|
|
24
|
+
- 37535b2: Added a public `--bui-bg-inherit` CSS variable that resolves to the background
|
|
25
|
+
color of the nearest enclosing bg provider (`Box`, `Flex`, `Grid`, `Card`,
|
|
26
|
+
`Accordion`, or any element with a `data-bg` attribute), falling back to
|
|
27
|
+
`--bui-bg-app`. Use it from CSS for sticky or fixed elements that need to match
|
|
28
|
+
their surrounding surface without hardcoding a specific level.
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
.searchBarContainer {
|
|
32
|
+
position: sticky;
|
|
33
|
+
top: 0;
|
|
34
|
+
background-color: var(--bui-bg-inherit);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
As part of this change, the `data-bg` painting rules previously duplicated in
|
|
39
|
+
`Box`, `Flex`, `Grid`, `Accordion`, and `Card` have been centralized into a
|
|
40
|
+
single source in `core.css`. Painting and component behavior are unchanged for
|
|
41
|
+
all existing usages, with one minor expansion: any element with a `data-bg`
|
|
42
|
+
attribute (including provider elements and any element that sets it directly)
|
|
43
|
+
is now painted, not only `Box`/`Flex`/`Grid`/`Card`/`Accordion` elements.
|
|
44
|
+
|
|
45
|
+
- e2d9831: Tightened React Aria dependency version ranges from `^` to `~` to prevent unintended minor version upgrades.
|
|
46
|
+
- e7fc79f: Added support for grouping options into sections in the Select component. You can now pass section objects with a `title` and a nested `options` array alongside (or instead of) regular options to render grouped dropdowns with section headers.
|
|
47
|
+
|
|
48
|
+
**Affected components:** Select
|
|
49
|
+
|
|
50
|
+
- 76635ae: Disabled `Card` scroll shadow in browsers that don't support `animation-timeline: scroll()`. Prevents the shadow from being always visible over the `CardBody` when there's nothing to scroll or the body is not scrolled.
|
|
51
|
+
|
|
52
|
+
**Affected components:** Card
|
|
53
|
+
|
|
54
|
+
- de75f7c: Fixed `CardBody` showing an unwanted scrollbar when constrained below the scroll shadow height.
|
|
55
|
+
|
|
56
|
+
**Affected components:** Card
|
|
57
|
+
|
|
58
|
+
- a42766e: Fixed dark mode background for Dialog component by correcting the theme attribute selector from `data-theme` to `data-theme-mode`.
|
|
59
|
+
|
|
60
|
+
**Affected components:** Dialog
|
|
61
|
+
|
|
62
|
+
- c6fc76f: Fixed an issue where the active tab indicator would disappear shortly after page load for uncontrolled Tabs.
|
|
63
|
+
|
|
64
|
+
**Affected components:** Tabs
|
|
65
|
+
|
|
66
|
+
- 5520e07: Updated field components to grow within flex layouts instead of forcing their width to remain fixed.
|
|
67
|
+
- 11699ac: Updated `PasswordField` to visually match `TextField`, including consistent focus rings, error states, disabled appearance, and background colour behaviour.
|
|
68
|
+
|
|
69
|
+
**Affected components:** PasswordField
|
|
70
|
+
|
|
71
|
+
- d1be10c: Updated React Aria dependencies to v1.17.0 and migrated imports from individual `@react-aria/*` and `@react-stately/*` packages to the monopackages (`react-aria`, `react-stately`). This fixes a type resolution error for `@react-types/table` that occurred in new app installations.
|
|
72
|
+
- c96e2b3: Added `description`, `tags`, and `metadata` props to the `Header` component. The `description` prop accepts a markdown string with support for inline links. The `tags` prop renders a row of text or link items above the title. The `metadata` prop renders key-value pairs below the description. The `breadcrumbs` prop has been deprecated and will be removed in a future release.
|
|
73
|
+
|
|
74
|
+
**Affected components:** Header
|
|
75
|
+
|
|
76
|
+
- 4bb649d: Fixed Table with row selection creating phantom scroll height on ancestor elements by establishing a containing block for visually-hidden checkbox inputs.
|
|
77
|
+
|
|
78
|
+
**Affected components:** Table, TableRoot
|
|
79
|
+
|
|
80
|
+
- f635139: Limited `@remixicon/react` dependency to versions below 4.9.0 due to a license change in that release.
|
|
81
|
+
- 5b85902: Fix `Card href=...` not showing a focus indicator on keyboard navigation. `Link` now composes `useFocusRing`, emits `data-focus-visible`, and renders a `--bui-ring` outline when keyboard-focused. The Card's existing focus-ring CSS matches when the trigger is focused.
|
|
82
|
+
|
|
83
|
+
_Affected components_: Card, Link
|
|
84
|
+
|
|
85
|
+
- 23ee789: Added invalid-state styling for Checkbox and corresponding Storybook variants for verification.
|
|
86
|
+
|
|
87
|
+
**Affected components:** Checkbox, CheckboxGroup
|
|
88
|
+
|
|
89
|
+
- 38bb056: Adjusted PluginHeader spacing and borders so headers with and without tabs align more consistently with surrounding page content, including when paired with page headers.
|
|
90
|
+
|
|
91
|
+
**Affected components:** PluginHeader, Header
|
|
92
|
+
|
|
93
|
+
- df705bb: Fixed external URLs in BUI link components being rewritten as in-app paths when the app is served under a non-root base path. Absolute URLs (`http://`, `https://`, `//`, `mailto:`, `tel:`) are now passed through unchanged. Internal `href` values are resolved against the current `basename` exactly once, which also fixes a latent issue where internal link clicks under a non-root base path could navigate to a URL with the `basename` prefix doubled.
|
|
94
|
+
|
|
95
|
+
**Affected components:** ButtonLink, Card, Link, Menu, Tab, Table, Tag
|
|
96
|
+
|
|
97
|
+
- 3e0ff6c: Added container alignment to `Header` sections so tags, title actions, descriptions, metadata, and tabs use the same width as surrounding page content.
|
|
98
|
+
|
|
99
|
+
**Affected components:** Header
|
|
100
|
+
|
|
101
|
+
- b67a862: Updated Storybook development tooling for `@backstage/ui` to version 10.4.
|
|
102
|
+
- d726bcd: Added new `DatePicker` component — combines a date field and a calendar popover for selecting a date, built on React Aria with full keyboard and screen reader accessibility. Uses BUI design tokens throughout, including auto-incremented backgrounds via the bg consumer pattern.
|
|
103
|
+
|
|
104
|
+
**Affected components:** DatePicker
|
|
105
|
+
|
|
106
|
+
- 401916d: Added new `DateRangePicker` component — combines two date fields and a calendar popover for selecting a date range, built on React Aria with full keyboard and screen reader accessibility. Uses BUI design tokens throughout, including auto-incremented backgrounds via the bg consumer pattern.
|
|
107
|
+
- 25909ba: Added `searchDebounceMs` and `filterDebounceMs` options to `useTable` in `complete` mode. Both default to `0` (no debounce, no observable change for existing consumers); set them to defer the client-side filter/search/sort pipeline on large datasets without reimplementing input-layer debouncing. The controlled `search` / `onSearchChange` and `filter` / `onFilterChange` callbacks continue to fire on every change.
|
|
108
|
+
|
|
109
|
+
**Affected components:** Table
|
|
110
|
+
|
|
111
|
+
- ddca41f: Added a new `Combobox` component. It pairs a text input with a filterable dropdown of options and supports single selection, sectioned options, icons, sizes, and custom typed values via `allowsCustomValue`.
|
|
112
|
+
|
|
113
|
+
**Affected components:** Combobox
|
|
114
|
+
|
|
115
|
+
## 0.15.0-next.3
|
|
116
|
+
|
|
117
|
+
### Patch Changes
|
|
118
|
+
|
|
119
|
+
- 4bb649d: Fixed Table with row selection creating phantom scroll height on ancestor elements by establishing a containing block for visually-hidden checkbox inputs.
|
|
120
|
+
|
|
121
|
+
**Affected components:** Table, TableRoot
|
|
122
|
+
|
|
123
|
+
- d726bcd: Added new `DatePicker` component — combines a date field and a calendar popover for selecting a date, built on React Aria with full keyboard and screen reader accessibility. Uses BUI design tokens throughout, including auto-incremented backgrounds via the bg consumer pattern.
|
|
124
|
+
|
|
125
|
+
**Affected components:** DatePicker
|
|
126
|
+
|
|
3
127
|
## 0.15.0-next.2
|
|
4
128
|
|
|
5
129
|
### Patch Changes
|
|
@@ -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 2026 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 .Combobox_bui-
|
|
4
|
-
var styles = {"bui-Combobox":"Combobox_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2026 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 .Combobox_bui-Combobox__38e006d509,\n .Combobox_bui-ComboboxPopover__38e006d509 {\n &[data-size='small'] {\n --combobox-item-height: 2rem;\n }\n\n &[data-size='medium'] {\n --combobox-item-height: 2.5rem;\n }\n }\n\n .Combobox_bui-Combobox__38e006d509 {\n display: flex;\n flex-direction: column;\n width: 100%;\n flex: 1;\n }\n\n .Combobox_bui-ComboboxPopover__38e006d509 {\n min-width: var(--trigger-width);\n\n .bui-PopoverContent {\n padding: 0;\n }\n }\n\n .Combobox_bui-ComboboxInput__38e006d509 {\n box-sizing: border-box;\n border-radius: var(--bui-radius-3);\n border: none;\n outline: none;\n background-color: var(--bui-bg-neutral-1);\n transition: box-shadow 0.2s ease-in-out;\n\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-4);\n }\n\n .Combobox_bui-Combobox__38e006d509[data-focus-within] & {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n .Combobox_bui-Combobox__38e006d509[data-invalid] & {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n width: 100%;\n height: var(--combobox-item-height);\n\n .Combobox_bui-Combobox__38e006d509[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .Combobox_bui-Combobox__38e006d509[data-size='medium'] & {\n padding-inline: var(--bui-space-4) 0;\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n }\n\n .Combobox_bui-ComboboxInputIcon__38e006d509 {\n display: grid;\n place-content: center;\n flex-shrink: 0;\n color: var(--bui-fg-secondary);\n pointer-events: none;\n\n .Combobox_bui-Combobox__38e006d509[data-size='small'] & svg {\n width: 1rem;\n height: 1rem;\n }\n\n .Combobox_bui-Combobox__38e006d509[data-size='medium'] & svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Combobox_bui-ComboboxInputField__38e006d509 {\n flex: 1;\n min-width: 0;\n width: 100%;\n border: none;\n outline: none;\n background-color: transparent;\n padding: 0;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n line-height: var(--combobox-item-height);\n height: 100%;\n text-overflow: ellipsis;\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Combobox_bui-ComboboxInputChevron__38e006d509 {\n flex-shrink: 0;\n flex-grow: 0;\n display: grid;\n place-content: center;\n width: var(--combobox-item-height);\n height: var(--combobox-item-height);\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n outline: none;\n transition: color 0.2s ease-in-out;\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & svg {\n .Combobox_bui-Combobox__38e006d509[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .Combobox_bui-Combobox__38e006d509[data-size='medium'] & {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Combobox_bui-ComboboxList__38e006d509 {\n overflow: auto;\n min-height: 0;\n padding-block: var(--bui-space-1);\n padding-inline: var(--bui-space-1);\n\n &[data-focus-visible] {\n outline: none;\n }\n }\n\n .Combobox_bui-ComboboxItem__38e006d509 {\n box-sizing: border-box;\n position: relative;\n display: grid;\n grid-template-areas: 'icon text';\n grid-template-columns: 1rem 1fr;\n align-items: center;\n min-height: var(--combobox-item-height);\n padding-block: var(--bui-space-1);\n padding-left: var(--bui-space-3);\n padding-right: var(--bui-space-4);\n color: var(--bui-fg-primary);\n cursor: pointer;\n user-select: none;\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-2);\n outline: none;\n border-radius: var(--bui-radius-2);\n\n &[data-focused] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n\n &[data-selected] .Combobox_bui-ComboboxItemIndicator__38e006d509 {\n opacity: 1;\n }\n }\n\n .Combobox_bui-ComboboxItemIndicator__38e006d509 {\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 .Combobox_bui-ComboboxItemLabel__38e006d509 {\n flex: 1;\n grid-area: text;\n }\n\n .Combobox_bui-ComboboxSection__38e006d509 {\n &:first-child .Combobox_bui-ComboboxSectionHeader__38e006d509 {\n padding-top: 0;\n }\n }\n\n .Combobox_bui-ComboboxSectionHeader__38e006d509 {\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 .Combobox_bui-ComboboxNoResults__38e006d509 {\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
|
+
var styles = {"bui-Combobox":"Combobox_bui-Combobox__38e006d509","bui-ComboboxPopover":"Combobox_bui-ComboboxPopover__38e006d509","bui-ComboboxInput":"Combobox_bui-ComboboxInput__38e006d509","bui-ComboboxInputIcon":"Combobox_bui-ComboboxInputIcon__38e006d509","bui-ComboboxInputField":"Combobox_bui-ComboboxInputField__38e006d509","bui-ComboboxInputChevron":"Combobox_bui-ComboboxInputChevron__38e006d509","bui-ComboboxList":"Combobox_bui-ComboboxList__38e006d509","bui-ComboboxItem":"Combobox_bui-ComboboxItem__38e006d509","bui-ComboboxItemIndicator":"Combobox_bui-ComboboxItemIndicator__38e006d509","bui-ComboboxItemLabel":"Combobox_bui-ComboboxItemLabel__38e006d509","bui-ComboboxSection":"Combobox_bui-ComboboxSection__38e006d509","bui-ComboboxSectionHeader":"Combobox_bui-ComboboxSectionHeader__38e006d509","bui-ComboboxNoResults":"Combobox_bui-ComboboxNoResults__38e006d509"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useEffect } from 'react';
|
|
3
|
+
import { DatePicker as DatePicker$1 } from 'react-aria-components';
|
|
4
|
+
import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
|
|
5
|
+
import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
|
|
6
|
+
import '../FieldLabel/FieldLabel.module.css.esm.js';
|
|
7
|
+
import { FieldError } from '../FieldError/FieldError.esm.js';
|
|
8
|
+
import '../FieldError/FieldError.module.css.esm.js';
|
|
9
|
+
import { Popover } from '../Popover/Popover.esm.js';
|
|
10
|
+
import '../Popover/Popover.module.css.esm.js';
|
|
11
|
+
import { DatePickerGroup } from './DatePickerGroup.esm.js';
|
|
12
|
+
import { DatePickerCalendar } from './DatePickerCalendar.esm.js';
|
|
13
|
+
import { DatePickerDefinition } from './definition.esm.js';
|
|
14
|
+
|
|
15
|
+
const DatePicker = forwardRef(
|
|
16
|
+
(props, ref) => {
|
|
17
|
+
const { ownProps, restProps, dataAttributes } = useDefinition(
|
|
18
|
+
DatePickerDefinition,
|
|
19
|
+
props
|
|
20
|
+
);
|
|
21
|
+
const { classes, label, description, secondaryLabel } = ownProps;
|
|
22
|
+
const ariaLabel = restProps["aria-label"];
|
|
23
|
+
const ariaLabelledBy = restProps["aria-labelledby"];
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
26
|
+
console.warn(
|
|
27
|
+
"DatePicker requires either a visible label, aria-label, or aria-labelledby for accessibility"
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
}, [label, ariaLabel, ariaLabelledBy]);
|
|
31
|
+
const secondaryLabelText = secondaryLabel || (restProps.isRequired ? "Required" : null);
|
|
32
|
+
return /* @__PURE__ */ jsxs(
|
|
33
|
+
DatePicker$1,
|
|
34
|
+
{
|
|
35
|
+
className: classes.root,
|
|
36
|
+
...dataAttributes,
|
|
37
|
+
...restProps,
|
|
38
|
+
ref,
|
|
39
|
+
children: [
|
|
40
|
+
/* @__PURE__ */ jsx(
|
|
41
|
+
FieldLabel,
|
|
42
|
+
{
|
|
43
|
+
label,
|
|
44
|
+
secondaryLabel: secondaryLabelText,
|
|
45
|
+
description,
|
|
46
|
+
descriptionSlot: "description"
|
|
47
|
+
}
|
|
48
|
+
),
|
|
49
|
+
/* @__PURE__ */ jsx(DatePickerGroup, { dataSize: dataAttributes["data-size"] }),
|
|
50
|
+
/* @__PURE__ */ jsx(FieldError, {}),
|
|
51
|
+
/* @__PURE__ */ jsx(Popover, { hideArrow: true, children: /* @__PURE__ */ jsx(DatePickerCalendar, {}) })
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
DatePicker.displayName = "DatePicker";
|
|
58
|
+
|
|
59
|
+
export { DatePicker };
|
|
60
|
+
//# sourceMappingURL=DatePicker.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.esm.js","sources":["../../../src/components/DatePicker/DatePicker.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, useEffect } from 'react';\nimport { DatePicker as AriaDatePicker } from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { Popover } from '../Popover';\nimport { DatePickerGroup } from './DatePickerGroup';\nimport { DatePickerCalendar } from './DatePickerCalendar';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { DatePickerDefinition } from './definition';\nimport type { DatePickerProps } from './types';\n\n/**\n * A date picker that combines a date field and a calendar popover, allowing\n * users to enter or select a date with full keyboard and screen reader\n * accessibility.\n *\n * @public\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n (props, ref) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n DatePickerDefinition,\n props,\n );\n\n const { classes, label, description, secondaryLabel } = ownProps;\n\n const ariaLabel = restProps['aria-label'];\n const ariaLabelledBy = restProps['aria-labelledby'];\n\n useEffect(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n 'DatePicker requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const secondaryLabelText =\n secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n return (\n <AriaDatePicker\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n descriptionSlot=\"description\"\n />\n <DatePickerGroup dataSize={dataAttributes['data-size']} />\n <FieldError />\n <Popover hideArrow>\n <DatePickerCalendar />\n </Popover>\n </AriaDatePicker>\n );\n },\n);\n\nDatePicker.displayName = 'DatePicker';\n"],"names":["AriaDatePicker"],"mappings":";;;;;;;;;;;;;;AAkCO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,oBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,WAAA,EAAa,gBAAe,GAAI,QAAA;AAExD,IAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,IAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,uBACE,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB,WAAA;AAAA,cACA,eAAA,EAAgB;AAAA;AAAA,WAClB;AAAA,0BACA,GAAA,CAAC,eAAA,EAAA,EAAgB,QAAA,EAAU,cAAA,CAAe,WAAW,CAAA,EAAG,CAAA;AAAA,8BACvD,UAAA,EAAA,EAAW,CAAA;AAAA,8BACX,OAAA,EAAA,EAAQ,SAAA,EAAS,IAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,sBAAmB,CAAA,EACtB;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|
|
@@ -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 /* ============================================================\n Root\n ============================================================ */\n\n .DatePicker_bui-DatePicker__9e29d67f28 {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n }\n\n /* ============================================================\n Field group — custom container (not reusing any BUI field)\n ============================================================ */\n\n .DatePicker_bui-DatePickerGroup__9e29d67f28 {\n display: flex;\n align-items: center;\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-2);\n padding: 0 var(--bui-space-1) 0 var(--bui-space-3);\n width: fit-content;\n min-width: 200px;\n max-width: 100%;\n overflow: clip;\n transition: box-shadow 0.2s ease-in-out;\n cursor: text;\n\n /* bg consumer — auto-increment background based on parent context */\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-4);\n }\n\n &[data-focus-within] {\n outline: none;\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &[data-invalid] {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* Sizes */\n &[data-size='small'] {\n height: 2rem;\n padding-inline-start: var(--bui-space-2);\n }\n\n &[data-size='medium'] {\n height: 2.5rem;\n min-width: 210px;\n padding-inline-end: var(--bui-space-1);\n\n & .DatePicker_bui-DatePickerButton__9e29d67f28 {\n width: 2rem;\n height: 2rem;\n }\n }\n }\n\n /* ============================================================\n Date input\n ============================================================ */\n\n .DatePicker_bui-DatePickerDateInput__9e29d67f28 {\n flex: 1;\n display: inline-flex;\n align-items: center;\n width: unset;\n min-width: unset;\n padding: unset;\n border: unset;\n box-shadow: none;\n background: none;\n height: auto;\n overflow-x: auto;\n overflow-y: clip;\n scrollbar-width: none;\n }\n\n /* ============================================================\n Date segments (month, day, year literals and placeholders)\n ============================================================ */\n\n .DatePicker_bui-DatePickerSegment__9e29d67f28 {\n display: inline-block;\n padding: var(--bui-space-0_5) var(--bui-space-1);\n border-radius: var(--bui-radius-1);\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 caret-color: transparent;\n outline: none;\n font-variant-numeric: tabular-nums;\n\n &[data-placeholder] {\n color: var(--bui-fg-secondary);\n }\n\n &[data-type='literal'] {\n color: var(--bui-fg-secondary);\n padding: 0;\n }\n\n &[data-focused] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n border-radius: var(--bui-radius-1);\n\n &[data-placeholder] {\n color: var(--bui-fg-solid);\n }\n }\n\n &[data-disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n /* ============================================================\n Calendar trigger button\n ============================================================ */\n\n .DatePicker_bui-DatePickerButton__9e29d67f28 {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n background: none;\n border: none;\n border-radius: var(--bui-radius-2);\n color: var(--bui-fg-secondary);\n cursor: pointer;\n margin-left: auto;\n transition: color 0.15s ease-in-out;\n outline: none;\n\n &[data-hovered] {\n color: var(--bui-fg-primary);\n }\n\n &[data-focus-visible] {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &[data-pressed] {\n color: var(--bui-fg-primary);\n }\n }\n\n /* ============================================================\n Calendar (inside Popover)\n ============================================================ */\n\n .DatePicker_bui-DatePickerCalendar__9e29d67f28 {\n width: fit-content;\n outline: none;\n }\n\n .DatePicker_bui-DatePickerCalendarHeader__9e29d67f28 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--bui-space-3);\n }\n\n .DatePicker_bui-DatePickerCalendarHeading__9e29d67f28 {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n font-family: var(--bui-font-regular);\n color: var(--bui-fg-primary);\n flex: 1;\n text-align: center;\n }\n\n .DatePicker_bui-DatePickerCalendarNavButton__9e29d67f28 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--bui-space-8);\n height: var(--bui-space-8);\n background: none;\n border: none;\n border-radius: var(--bui-radius-2);\n color: var(--bui-fg-secondary);\n cursor: pointer;\n transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\n &[data-hovered] {\n background-color: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 1px;\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-neutral-2);\n }\n }\n\n /* ============================================================\n Calendar grid\n ============================================================ */\n\n .DatePicker_bui-DatePickerCalendarGrid__9e29d67f28 {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n }\n\n .DatePicker_bui-DatePickerCalendarHeaderCell__9e29d67f28 {\n font-size: var(--bui-font-size-2);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-secondary);\n text-align: center;\n padding-bottom: var(--bui-space-2);\n width: 40px;\n }\n\n /* ============================================================\n Calendar cells\n ============================================================ */\n\n .DatePicker_bui-DatePickerCalendarCell__9e29d67f28 {\n position: relative;\n width: 40px;\n height: 40px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n cursor: default;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n color: var(--bui-fg-primary);\n border-radius: var(--bui-radius-full);\n\n &[data-outside-month] {\n color: var(--bui-fg-disabled);\n }\n\n &[data-disabled] {\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n }\n\n &[data-unavailable] {\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n text-decoration: line-through;\n }\n\n &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(\n [data-selected]\n ) {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: -2px;\n }\n\n /* Today marker */\n &[data-today]:not([data-selected]) {\n font-weight: var(--bui-font-weight-bold);\n }\n\n /* Selected day */\n &[data-selected] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-DatePicker":"DatePicker_bui-DatePicker__9e29d67f28","bui-DatePickerGroup":"DatePicker_bui-DatePickerGroup__9e29d67f28","bui-DatePickerButton":"DatePicker_bui-DatePickerButton__9e29d67f28","bui-DatePickerDateInput":"DatePicker_bui-DatePickerDateInput__9e29d67f28","bui-DatePickerSegment":"DatePicker_bui-DatePickerSegment__9e29d67f28","bui-DatePickerCalendar":"DatePicker_bui-DatePickerCalendar__9e29d67f28","bui-DatePickerCalendarHeader":"DatePicker_bui-DatePickerCalendarHeader__9e29d67f28","bui-DatePickerCalendarHeading":"DatePicker_bui-DatePickerCalendarHeading__9e29d67f28","bui-DatePickerCalendarNavButton":"DatePicker_bui-DatePickerCalendarNavButton__9e29d67f28","bui-DatePickerCalendarGrid":"DatePicker_bui-DatePickerCalendarGrid__9e29d67f28","bui-DatePickerCalendarHeaderCell":"DatePicker_bui-DatePickerCalendarHeaderCell__9e29d67f28","bui-DatePickerCalendarCell":"DatePicker_bui-DatePickerCalendarCell__9e29d67f28"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=DatePicker.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Calendar, Button, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
|
|
3
|
+
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
|
|
4
|
+
import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
|
|
5
|
+
import { DatePickerCalendarDefinition } from './definition.esm.js';
|
|
6
|
+
|
|
7
|
+
const DatePickerCalendar = () => {
|
|
8
|
+
const { ownProps } = useDefinition(DatePickerCalendarDefinition, {});
|
|
9
|
+
const { classes } = ownProps;
|
|
10
|
+
return /* @__PURE__ */ jsxs(Calendar, { className: classes.root, children: [
|
|
11
|
+
/* @__PURE__ */ jsxs("header", { className: classes.header, children: [
|
|
12
|
+
/* @__PURE__ */ jsx(Button, { slot: "previous", className: classes.navButton, children: /* @__PURE__ */ jsx(RiArrowLeftSLine, { size: 16, "aria-hidden": "true" }) }),
|
|
13
|
+
/* @__PURE__ */ jsx(Heading, { className: classes.heading }),
|
|
14
|
+
/* @__PURE__ */ jsx(Button, { slot: "next", className: classes.navButton, children: /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, "aria-hidden": "true" }) })
|
|
15
|
+
] }),
|
|
16
|
+
/* @__PURE__ */ jsxs(CalendarGrid, { className: classes.grid, children: [
|
|
17
|
+
/* @__PURE__ */ jsx(CalendarGridHeader, { className: classes.gridHeader, children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { className: classes.headerCell, children: day }) }),
|
|
18
|
+
/* @__PURE__ */ jsx(CalendarGridBody, { className: classes.gridBody, children: (date) => /* @__PURE__ */ jsx(CalendarCell, { className: classes.cell, date }) })
|
|
19
|
+
] })
|
|
20
|
+
] });
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { DatePickerCalendar };
|
|
24
|
+
//# sourceMappingURL=DatePickerCalendar.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerCalendar.esm.js","sources":["../../../src/components/DatePicker/DatePickerCalendar.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 Calendar,\n CalendarGrid,\n CalendarGridHeader,\n CalendarHeaderCell,\n CalendarGridBody,\n CalendarCell,\n Heading,\n Button,\n} from 'react-aria-components';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { DatePickerCalendarDefinition } from './definition';\n\n/**\n * Calendar popover content for DatePicker — renders the Calendar with\n * navigation and a full calendar grid.\n *\n * @internal\n */\nexport const DatePickerCalendar = () => {\n const { ownProps } = useDefinition(DatePickerCalendarDefinition, {});\n const { classes } = ownProps;\n\n return (\n <Calendar className={classes.root}>\n <header className={classes.header}>\n <Button slot=\"previous\" className={classes.navButton}>\n <RiArrowLeftSLine size={16} aria-hidden=\"true\" />\n </Button>\n <Heading className={classes.heading} />\n <Button slot=\"next\" className={classes.navButton}>\n <RiArrowRightSLine size={16} aria-hidden=\"true\" />\n </Button>\n </header>\n <CalendarGrid className={classes.grid}>\n <CalendarGridHeader className={classes.gridHeader}>\n {day => (\n <CalendarHeaderCell className={classes.headerCell}>\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody className={classes.gridBody}>\n {date => <CalendarCell className={classes.cell} date={date} />}\n </CalendarGridBody>\n </CalendarGrid>\n </Calendar>\n );\n};\n"],"names":[],"mappings":";;;;;;AAoCO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,4BAAA,EAA8B,EAAE,CAAA;AACnE,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,OAAA,CAAQ,IAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,MAAA,EACzB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,UAAA,EAAW,SAAA,EAAW,OAAA,CAAQ,SAAA,EACzC,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAM,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,CAAA,EACjD,CAAA;AAAA,sBACA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAS,CAAA;AAAA,sBACrC,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,MAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,SAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,aAAA,EAAY,QAAO,CAAA,EAClD;AAAA,KAAA,EACF,CAAA;AAAA,oBACA,IAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,OAAA,CAAQ,IAAA,EAC/B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAW,OAAA,CAAQ,UAAA,EACpC,QAAA,EAAA,CAAA,GAAA,qBACC,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAW,OAAA,CAAQ,UAAA,EACpC,QAAA,EAAA,GAAA,EACH,CAAA,EAEJ,CAAA;AAAA,sBACA,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAW,OAAA,CAAQ,QAAA,EAClC,QAAA,EAAA,CAAA,IAAA,qBAAQ,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAM,IAAA,EAAY,CAAA,EAC9D;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Group, DateInput, DateSegment, Button } from 'react-aria-components';
|
|
3
|
+
import { RiCalendarLine } from '@remixicon/react';
|
|
4
|
+
import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
|
|
5
|
+
import { DatePickerGroupDefinition } from './definition.esm.js';
|
|
6
|
+
|
|
7
|
+
const DatePickerGroup = ({ dataSize }) => {
|
|
8
|
+
const { ownProps, dataAttributes } = useDefinition(
|
|
9
|
+
DatePickerGroupDefinition,
|
|
10
|
+
{}
|
|
11
|
+
);
|
|
12
|
+
const { classes } = ownProps;
|
|
13
|
+
return /* @__PURE__ */ jsxs(
|
|
14
|
+
Group,
|
|
15
|
+
{
|
|
16
|
+
className: classes.root,
|
|
17
|
+
...dataAttributes,
|
|
18
|
+
...dataSize ? { "data-size": dataSize } : {},
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ jsx(DateInput, { className: classes.dateInput, children: (segment) => /* @__PURE__ */ jsx(DateSegment, { segment, className: classes.segment }) }),
|
|
21
|
+
/* @__PURE__ */ jsx(Button, { className: classes.button, "aria-label": "Open calendar", children: /* @__PURE__ */ jsx(RiCalendarLine, { size: 16, "aria-hidden": "true" }) })
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { DatePickerGroup };
|
|
28
|
+
//# sourceMappingURL=DatePickerGroup.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerGroup.esm.js","sources":["../../../src/components/DatePicker/DatePickerGroup.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 { Group, DateInput, DateSegment, Button } from 'react-aria-components';\nimport { RiCalendarLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { DatePickerGroupDefinition } from './definition';\n\n/**\n * Custom field group for DatePicker — renders a single DateInput field\n * and a calendar trigger button.\n *\n * @internal\n */\nexport const DatePickerGroup = ({ dataSize }: { dataSize?: string }) => {\n const { ownProps, dataAttributes } = useDefinition(\n DatePickerGroupDefinition,\n {},\n );\n const { classes } = ownProps;\n\n return (\n <Group\n className={classes.root}\n {...dataAttributes}\n {...(dataSize ? { 'data-size': dataSize } : {})}\n >\n <DateInput className={classes.dateInput}>\n {segment => (\n <DateSegment segment={segment} className={classes.segment} />\n )}\n </DateInput>\n <Button className={classes.button} aria-label=\"Open calendar\">\n <RiCalendarLine size={16} aria-hidden=\"true\" />\n </Button>\n </Group>\n );\n};\n"],"names":[],"mappings":";;;;;;AA2BO,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,KAA6B;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAe,GAAI,aAAA;AAAA,IACnC,yBAAA;AAAA,IACA;AAAC,GACH;AACA,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACH,GAAI,QAAA,GAAW,EAAE,WAAA,EAAa,QAAA,KAAa,EAAC;AAAA,MAE7C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,OAAA,CAAQ,SAAA,EAC3B,QAAA,EAAA,CAAA,OAAA,qBACC,GAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAkB,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAS,CAAA,EAE/D,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,MAAA,EAAQ,YAAA,EAAW,eAAA,EAC5C,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAM,EAAA,EAAI,aAAA,EAAY,QAAO,CAAA,EAC/C;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import 'react/jsx-runtime';
|
|
2
|
+
import 'clsx';
|
|
3
|
+
import '../../hooks/useBreakpoint.esm.js';
|
|
4
|
+
import '../../hooks/useBg.esm.js';
|
|
5
|
+
import '../../hooks/useDefinition/helpers.esm.js';
|
|
6
|
+
import '../../analytics/useAnalytics.esm.js';
|
|
7
|
+
import 'react-router-dom';
|
|
8
|
+
import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
|
|
9
|
+
import styles from './DatePicker.module.css.esm.js';
|
|
10
|
+
|
|
11
|
+
const DatePickerDefinition = defineComponent()({
|
|
12
|
+
styles,
|
|
13
|
+
classNames: {
|
|
14
|
+
root: "bui-DatePicker"
|
|
15
|
+
},
|
|
16
|
+
propDefs: {
|
|
17
|
+
size: { dataAttribute: true, default: "small" },
|
|
18
|
+
className: {},
|
|
19
|
+
label: {},
|
|
20
|
+
description: {},
|
|
21
|
+
secondaryLabel: {}
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
const DatePickerGroupDefinition = defineComponent()({
|
|
25
|
+
styles,
|
|
26
|
+
classNames: {
|
|
27
|
+
root: "bui-DatePickerGroup",
|
|
28
|
+
dateInput: "bui-DatePickerDateInput",
|
|
29
|
+
segment: "bui-DatePickerSegment",
|
|
30
|
+
button: "bui-DatePickerButton"
|
|
31
|
+
},
|
|
32
|
+
bg: "consumer",
|
|
33
|
+
propDefs: {}
|
|
34
|
+
});
|
|
35
|
+
const DatePickerCalendarDefinition = defineComponent()({
|
|
36
|
+
styles,
|
|
37
|
+
classNames: {
|
|
38
|
+
root: "bui-DatePickerCalendar",
|
|
39
|
+
header: "bui-DatePickerCalendarHeader",
|
|
40
|
+
heading: "bui-DatePickerCalendarHeading",
|
|
41
|
+
navButton: "bui-DatePickerCalendarNavButton",
|
|
42
|
+
grid: "bui-DatePickerCalendarGrid",
|
|
43
|
+
gridHeader: "bui-DatePickerCalendarGridHeader",
|
|
44
|
+
headerCell: "bui-DatePickerCalendarHeaderCell",
|
|
45
|
+
gridBody: "bui-DatePickerCalendarGridBody",
|
|
46
|
+
cell: "bui-DatePickerCalendarCell"
|
|
47
|
+
},
|
|
48
|
+
propDefs: {}
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
export { DatePickerCalendarDefinition, DatePickerDefinition, DatePickerGroupDefinition };
|
|
52
|
+
//# sourceMappingURL=definition.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/DatePicker/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 { defineComponent } from '../../hooks/useDefinition';\nimport type { DatePickerOwnProps } from './types';\nimport styles from './DatePicker.module.css';\n\n/**\n * Component definition for DatePicker\n * @public\n */\nexport const DatePickerDefinition = defineComponent<DatePickerOwnProps>()({\n styles,\n classNames: {\n root: 'bui-DatePicker',\n },\n propDefs: {\n size: { dataAttribute: true, default: 'small' },\n className: {},\n label: {},\n description: {},\n secondaryLabel: {},\n },\n});\n\n/**\n * Component definition for DatePickerGroup\n * @public\n */\nexport const DatePickerGroupDefinition = defineComponent<\n Record<string, never>\n>()({\n styles,\n classNames: {\n root: 'bui-DatePickerGroup',\n dateInput: 'bui-DatePickerDateInput',\n segment: 'bui-DatePickerSegment',\n button: 'bui-DatePickerButton',\n },\n bg: 'consumer',\n propDefs: {},\n});\n\n/**\n * Component definition for DatePickerCalendar\n * @public\n */\nexport const DatePickerCalendarDefinition = defineComponent<\n Record<string, never>\n>()({\n styles,\n classNames: {\n root: 'bui-DatePickerCalendar',\n header: 'bui-DatePickerCalendarHeader',\n heading: 'bui-DatePickerCalendarHeading',\n navButton: 'bui-DatePickerCalendarNavButton',\n grid: 'bui-DatePickerCalendarGrid',\n gridHeader: 'bui-DatePickerCalendarGridHeader',\n headerCell: 'bui-DatePickerCalendarHeaderCell',\n gridBody: 'bui-DatePickerCalendarGridBody',\n cell: 'bui-DatePickerCalendarCell',\n },\n propDefs: {},\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,WAAW,EAAC;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,gBAAgB;AAAC;AAErB,CAAC;AAMM,MAAM,yBAAA,GAA4B,iBAEvC,CAAE;AAAA,EACF,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,qBAAA;AAAA,IACN,SAAA,EAAW,yBAAA;AAAA,IACX,OAAA,EAAS,uBAAA;AAAA,IACT,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,UAAU;AACZ,CAAC;AAMM,MAAM,4BAAA,GAA+B,iBAE1C,CAAE;AAAA,EACF,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,wBAAA;AAAA,IACN,MAAA,EAAQ,8BAAA;AAAA,IACR,OAAA,EAAS,+BAAA;AAAA,IACT,SAAA,EAAW,iCAAA;AAAA,IACX,IAAA,EAAM,4BAAA;AAAA,IACN,UAAA,EAAY,kCAAA;AAAA,IACZ,UAAA,EAAY,kCAAA;AAAA,IACZ,QAAA,EAAU,gCAAA;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAU;AACZ,CAAC;;;;"}
|
|
@@ -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 /* ============================================================\n Root\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePicker__723456065f {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n }\n\n /* ============================================================\n Field group — custom container (not reusing any BUI field)\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerGroup__723456065f {\n display: flex;\n align-items: center;\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-2);\n padding: 0 var(--bui-space-1) 0 var(--bui-space-3);\n width: fit-content;\n min-width: 280px;\n max-width: 100%;\n overflow: clip;\n transition: box-shadow 0.2s ease-in-out;\n cursor: text;\n\n /* bg consumer — auto-increment background based on parent context */\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-4);\n }\n\n &[data-focus-within] {\n outline: none;\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &[data-invalid] {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* Sizes */\n &[data-size='small'] {\n height: 2rem;\n padding-inline-start: var(--bui-space-2);\n }\n\n &[data-size='medium'] {\n height: 2.5rem;\n min-width: 290px;\n padding-inline-end: var(--bui-space-1);\n\n & .DateRangePicker_bui-DateRangePickerButton__723456065f {\n width: 2rem;\n height: 2rem;\n }\n }\n }\n\n /* ============================================================\n Date fields wrapper — scrollable row of inputs + separator\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerDateFields__723456065f {\n flex: 1;\n display: flex;\n align-items: center;\n width: fit-content;\n overflow-x: auto;\n overflow-y: clip;\n scrollbar-width: none;\n }\n\n /* ============================================================\n Date inputs\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerDateInput__723456065f {\n display: inline-flex;\n align-items: center;\n width: unset;\n min-width: unset;\n padding: unset;\n border: unset;\n box-shadow: none;\n background: none;\n height: auto;\n\n &[slot='end'] {\n flex: 1;\n }\n }\n\n /* ============================================================\n Date segments (month, day, year literals and placeholders)\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerSegment__723456065f {\n display: inline-block;\n padding: var(--bui-space-0_5) var(--bui-space-1);\n border-radius: var(--bui-radius-1);\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 caret-color: transparent;\n outline: none;\n font-variant-numeric: tabular-nums;\n\n &[data-placeholder] {\n color: var(--bui-fg-secondary);\n }\n\n &[data-type='literal'] {\n color: var(--bui-fg-secondary);\n padding: 0;\n }\n\n &[data-focused] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n border-radius: var(--bui-radius-1);\n\n &[data-placeholder] {\n color: var(--bui-fg-solid);\n }\n }\n\n &[data-disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n /* ============================================================\n Separator between start and end\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerSeparator__723456065f {\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n flex-shrink: 0;\n user-select: none;\n padding: 0 var(--bui-space-1);\n }\n\n /* ============================================================\n Calendar trigger button\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerButton__723456065f {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n background: none;\n border: none;\n border-radius: var(--bui-radius-2);\n color: var(--bui-fg-secondary);\n cursor: pointer;\n margin-left: auto;\n transition: color 0.15s ease-in-out;\n outline: none;\n\n &[data-hovered] {\n color: var(--bui-fg-primary);\n }\n\n &[data-focus-visible] {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &[data-pressed] {\n color: var(--bui-fg-primary);\n }\n }\n\n /* ============================================================\n Calendar (inside Popover)\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerCalendar__723456065f {\n width: fit-content;\n outline: none;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeader__723456065f {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--bui-space-3);\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeading__723456065f {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n font-family: var(--bui-font-regular);\n color: var(--bui-fg-primary);\n flex: 1;\n text-align: center;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarNavButton__723456065f {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--bui-space-8);\n height: var(--bui-space-8);\n background: none;\n border: none;\n border-radius: var(--bui-radius-2);\n color: var(--bui-fg-secondary);\n cursor: pointer;\n transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\n &[data-hovered] {\n background-color: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 1px;\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-neutral-2);\n }\n }\n\n /* ============================================================\n Calendar grid\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerCalendarGrid__723456065f {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeaderCell__723456065f {\n font-size: var(--bui-font-size-2);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-secondary);\n text-align: center;\n padding-bottom: var(--bui-space-2);\n width: 40px;\n }\n\n /* ============================================================\n Calendar cells\n \n Technique: isolation: isolate creates a stacking context so\n that ::before (range fill, z-index: -2) and ::after (circle,\n z-index: -1) paint behind the cell's text content while still\n rendering on top of the page background.\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerCalendarCell__723456065f {\n isolation: isolate;\n position: relative;\n width: 40px;\n height: 40px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n cursor: default;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n color: var(--bui-fg-primary);\n\n &[data-outside-month] {\n color: var(--bui-fg-disabled);\n }\n\n &[data-disabled] {\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n }\n\n &[data-unavailable] {\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n text-decoration: line-through;\n }\n\n &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(\n [data-selected]\n ) {\n background-color: var(--bui-bg-neutral-2);\n border-radius: var(--bui-radius-full);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: -2px;\n border-radius: var(--bui-radius-full);\n }\n\n /* Today marker */\n &[data-today]:not([data-selected]):not([data-selection-start]):not(\n [data-selection-end]\n ) {\n font-weight: var(--bui-font-weight-bold);\n }\n\n /* ── Range fill via ::before ─────────────────────────────── */\n\n &[data-selected]::before {\n content: '';\n position: absolute;\n inset: 0;\n background: color-mix(in srgb, var(--bui-bg-solid) 15%, transparent);\n z-index: -2;\n }\n\n /* Start cell: fill only the right half to connect forward */\n &[data-selection-start]::before {\n left: 50%;\n }\n\n /* End cell: fill only the left half to connect backward */\n &[data-selection-end]::before {\n right: 50%;\n }\n\n /* Same-day selection: no range fill needed */\n &[data-selection-start][data-selection-end]::before {\n display: none;\n }\n\n /* ── Solid circle for start / end via ::after ────────────── */\n\n &[data-selection-start]::after,\n &[data-selection-end]::after {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--bui-bg-solid);\n border-radius: var(--bui-radius-full);\n z-index: -1;\n }\n\n /* Text color on top of the solid circle */\n &[data-selection-start],\n &[data-selection-end] {\n color: var(--bui-fg-solid);\n }\n }\n\n /* Round the left edge of ::before when the cell is the first in its row\n (our class is on an inner element inside <td>, hence td:first-child > *) */\n .DateRangePicker_bui-DateRangePickerCalendarCell__723456065f[data-selected]:not(\n [data-selection-start]\n ):is(td:first-child > *, [aria-disabled] + td > *)::before {\n border-start-start-radius: var(--bui-radius-full);\n border-end-start-radius: var(--bui-radius-full);\n }\n\n /* Round the right edge of ::before when the cell is the last in its row */\n .DateRangePicker_bui-DateRangePickerCalendarCell__723456065f[data-selected]:not([data-selection-end]):is(\n td:last-child > *\n )::before {\n border-start-end-radius: var(--bui-radius-full);\n border-end-end-radius: var(--bui-radius-full);\n }\n}\n";
|
|
4
|
-
var styles = {"bui-DateRangePicker":"DateRangePicker_bui-
|
|
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 /* ============================================================\n Root\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePicker__933437904e {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n }\n\n /* ============================================================\n Field group — custom container (not reusing any BUI field)\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerGroup__933437904e {\n display: flex;\n align-items: center;\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-2);\n padding: 0 var(--bui-space-1) 0 var(--bui-space-3);\n width: fit-content;\n min-width: 280px;\n max-width: 100%;\n overflow: clip;\n transition: box-shadow 0.2s ease-in-out;\n cursor: text;\n\n /* bg consumer — auto-increment background based on parent context */\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-4);\n }\n\n &[data-focus-within] {\n outline: none;\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &[data-invalid] {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* Sizes */\n &[data-size='small'] {\n height: 2rem;\n padding-inline-start: var(--bui-space-2);\n }\n\n &[data-size='medium'] {\n height: 2.5rem;\n min-width: 290px;\n padding-inline-end: var(--bui-space-1);\n\n & .DateRangePicker_bui-DateRangePickerButton__933437904e {\n width: 2rem;\n height: 2rem;\n }\n }\n }\n\n /* ============================================================\n Date fields wrapper — scrollable row of inputs + separator\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerDateFields__933437904e {\n flex: 1;\n display: flex;\n align-items: center;\n width: fit-content;\n overflow-x: auto;\n overflow-y: clip;\n scrollbar-width: none;\n }\n\n /* ============================================================\n Date inputs\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerDateInput__933437904e {\n display: inline-flex;\n align-items: center;\n width: unset;\n min-width: unset;\n padding: unset;\n border: unset;\n box-shadow: none;\n background: none;\n height: auto;\n\n &[slot='end'] {\n flex: 1;\n }\n }\n\n /* ============================================================\n Date segments (month, day, year literals and placeholders)\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerSegment__933437904e {\n display: inline-block;\n padding: var(--bui-space-0_5) var(--bui-space-1);\n border-radius: var(--bui-radius-1);\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 caret-color: transparent;\n outline: none;\n font-variant-numeric: tabular-nums;\n\n &[data-placeholder] {\n color: var(--bui-fg-secondary);\n }\n\n &[data-type='literal'] {\n color: var(--bui-fg-secondary);\n padding: 0;\n }\n\n &[data-focused] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n border-radius: var(--bui-radius-1);\n\n &[data-placeholder] {\n color: var(--bui-fg-solid);\n }\n }\n\n &[data-disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n /* ============================================================\n Separator between start and end\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerSeparator__933437904e {\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n flex-shrink: 0;\n user-select: none;\n padding: 0 var(--bui-space-1);\n }\n\n /* ============================================================\n Calendar trigger button\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerButton__933437904e {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n background: none;\n border: none;\n border-radius: var(--bui-radius-2);\n color: var(--bui-fg-secondary);\n cursor: pointer;\n margin-left: auto;\n transition: color 0.15s ease-in-out;\n outline: none;\n\n &[data-hovered] {\n color: var(--bui-fg-primary);\n }\n\n &[data-focus-visible] {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &[data-pressed] {\n color: var(--bui-fg-primary);\n }\n }\n\n /* ============================================================\n Calendar (inside Popover)\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerCalendar__933437904e {\n width: fit-content;\n outline: none;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeader__933437904e {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--bui-space-3);\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeading__933437904e {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n font-family: var(--bui-font-regular);\n color: var(--bui-fg-primary);\n flex: 1;\n text-align: center;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarNavButton__933437904e {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--bui-space-8);\n height: var(--bui-space-8);\n background: none;\n border: none;\n border-radius: var(--bui-radius-2);\n color: var(--bui-fg-secondary);\n cursor: pointer;\n transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\n &[data-hovered] {\n background-color: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 1px;\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-neutral-2);\n }\n }\n\n /* ============================================================\n Calendar grid\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerCalendarGrid__933437904e {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeaderCell__933437904e {\n font-size: var(--bui-font-size-2);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-secondary);\n text-align: center;\n padding-bottom: var(--bui-space-2);\n width: 40px;\n }\n\n /* ============================================================\n Calendar cells\n \n Technique: isolation: isolate creates a stacking context so\n that ::before (range fill, z-index: -2) and ::after (circle,\n z-index: -1) paint behind the cell's text content while still\n rendering on top of the page background.\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePickerCalendarCell__933437904e {\n isolation: isolate;\n position: relative;\n width: 40px;\n height: 40px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n cursor: default;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n color: var(--bui-fg-primary);\n\n &[data-outside-month] {\n color: var(--bui-fg-disabled);\n }\n\n &[data-disabled] {\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n }\n\n &[data-unavailable] {\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n text-decoration: line-through;\n }\n\n &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(\n [data-selected]\n ) {\n background-color: var(--bui-bg-neutral-2);\n border-radius: var(--bui-radius-full);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: -2px;\n border-radius: var(--bui-radius-full);\n }\n\n /* Today marker */\n &[data-today]:not([data-selected]):not([data-selection-start]):not(\n [data-selection-end]\n ) {\n font-weight: var(--bui-font-weight-bold);\n }\n\n /* ── Range fill via ::before ─────────────────────────────── */\n\n &[data-selected]::before {\n content: '';\n position: absolute;\n inset: 0;\n background: color-mix(in srgb, var(--bui-bg-solid) 15%, transparent);\n z-index: -2;\n }\n\n /* Start cell: fill only the right half to connect forward */\n &[data-selection-start]::before {\n left: 50%;\n }\n\n /* End cell: fill only the left half to connect backward */\n &[data-selection-end]::before {\n right: 50%;\n }\n\n /* Same-day selection: no range fill needed */\n &[data-selection-start][data-selection-end]::before {\n display: none;\n }\n\n /* ── Solid circle for start / end via ::after ────────────── */\n\n &[data-selection-start]::after,\n &[data-selection-end]::after {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--bui-bg-solid);\n border-radius: var(--bui-radius-full);\n z-index: -1;\n }\n\n /* Text color on top of the solid circle */\n &[data-selection-start],\n &[data-selection-end] {\n color: var(--bui-fg-solid);\n }\n }\n\n /* Round the left edge of ::before when the cell is the first in its row\n (our class is on an inner element inside <td>, hence td:first-child > *) */\n .DateRangePicker_bui-DateRangePickerCalendarCell__933437904e[data-selected]:not(\n [data-selection-start]\n ):is(td:first-child > *, [aria-disabled] + td > *)::before {\n border-start-start-radius: var(--bui-radius-full);\n border-end-start-radius: var(--bui-radius-full);\n }\n\n /* Round the right edge of ::before when the cell is the last in its row */\n .DateRangePicker_bui-DateRangePickerCalendarCell__933437904e[data-selected]:not([data-selection-end]):is(\n td:last-child > *\n )::before {\n border-start-end-radius: var(--bui-radius-full);\n border-end-end-radius: var(--bui-radius-full);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-DateRangePicker":"DateRangePicker_bui-DateRangePicker__933437904e","bui-DateRangePickerGroup":"DateRangePicker_bui-DateRangePickerGroup__933437904e","bui-DateRangePickerButton":"DateRangePicker_bui-DateRangePickerButton__933437904e","bui-DateRangePickerDateFields":"DateRangePicker_bui-DateRangePickerDateFields__933437904e","bui-DateRangePickerDateInput":"DateRangePicker_bui-DateRangePickerDateInput__933437904e","bui-DateRangePickerSegment":"DateRangePicker_bui-DateRangePickerSegment__933437904e","bui-DateRangePickerSeparator":"DateRangePicker_bui-DateRangePickerSeparator__933437904e","bui-DateRangePickerCalendar":"DateRangePicker_bui-DateRangePickerCalendar__933437904e","bui-DateRangePickerCalendarHeader":"DateRangePicker_bui-DateRangePickerCalendarHeader__933437904e","bui-DateRangePickerCalendarHeading":"DateRangePicker_bui-DateRangePickerCalendarHeading__933437904e","bui-DateRangePickerCalendarNavButton":"DateRangePicker_bui-DateRangePickerCalendarNavButton__933437904e","bui-DateRangePickerCalendarGrid":"DateRangePicker_bui-DateRangePickerCalendarGrid__933437904e","bui-DateRangePickerCalendarHeaderCell":"DateRangePicker_bui-DateRangePickerCalendarHeaderCell__933437904e","bui-DateRangePickerCalendarCell":"DateRangePicker_bui-DateRangePickerCalendarCell__933437904e"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -10,6 +10,8 @@ import { Lexer } from 'marked';
|
|
|
10
10
|
import { Link } from '../Link/Link.esm.js';
|
|
11
11
|
import '../Link/Link.module.css.esm.js';
|
|
12
12
|
import { useMemo, useRef, useState, useEffect, Fragment as Fragment$1 } from 'react';
|
|
13
|
+
import { Container } from '../Container/Container.esm.js';
|
|
14
|
+
import '../Container/Container.module.css.esm.js';
|
|
13
15
|
|
|
14
16
|
const getScrollParent = (element) => {
|
|
15
17
|
let parent = element?.parentElement;
|
|
@@ -96,23 +98,30 @@ const Header = (props) => {
|
|
|
96
98
|
};
|
|
97
99
|
}, [sticky]);
|
|
98
100
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
99
|
-
/* @__PURE__ */ jsx(
|
|
100
|
-
|
|
101
|
+
/* @__PURE__ */ jsx(
|
|
102
|
+
Container,
|
|
101
103
|
{
|
|
102
|
-
className: classes.
|
|
103
|
-
|
|
104
|
-
|
|
104
|
+
className: classes.headerTop,
|
|
105
|
+
"data-sticky": sticky || void 0,
|
|
106
|
+
children: tags && tags.length > 0 && /* @__PURE__ */ jsx("ul", { className: classes.tags, children: tags.map((tag, i) => /* @__PURE__ */ jsx(
|
|
107
|
+
"li",
|
|
105
108
|
{
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
109
|
+
className: classes.tag,
|
|
110
|
+
children: tag.href ? /* @__PURE__ */ jsx(
|
|
111
|
+
Link,
|
|
112
|
+
{
|
|
113
|
+
href: tag.href,
|
|
114
|
+
variant: "body-medium",
|
|
115
|
+
color: "secondary",
|
|
116
|
+
standalone: true,
|
|
117
|
+
children: tag.label
|
|
118
|
+
}
|
|
119
|
+
) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: tag.label })
|
|
120
|
+
},
|
|
121
|
+
`${i}:${tag.label}:${tag.href ?? ""}`
|
|
122
|
+
)) })
|
|
123
|
+
}
|
|
124
|
+
),
|
|
116
125
|
sticky && /* @__PURE__ */ jsx(
|
|
117
126
|
"div",
|
|
118
127
|
{
|
|
@@ -123,7 +132,7 @@ const Header = (props) => {
|
|
|
123
132
|
}
|
|
124
133
|
),
|
|
125
134
|
/* @__PURE__ */ jsxs(
|
|
126
|
-
|
|
135
|
+
Container,
|
|
127
136
|
{
|
|
128
137
|
className: classes.content,
|
|
129
138
|
"data-sticky": sticky || void 0,
|
|
@@ -180,22 +189,29 @@ const Header = (props) => {
|
|
|
180
189
|
]
|
|
181
190
|
}
|
|
182
191
|
),
|
|
183
|
-
/* @__PURE__ */ jsxs(
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
192
|
+
/* @__PURE__ */ jsxs(
|
|
193
|
+
Container,
|
|
194
|
+
{
|
|
195
|
+
className: classes.headerBottom,
|
|
196
|
+
"data-sticky": sticky || void 0,
|
|
197
|
+
children: [
|
|
198
|
+
description && /* @__PURE__ */ jsx(
|
|
199
|
+
Text,
|
|
200
|
+
{
|
|
201
|
+
variant: "body-medium",
|
|
202
|
+
color: "secondary",
|
|
203
|
+
className: classes.description,
|
|
204
|
+
children: descriptionNodes
|
|
205
|
+
}
|
|
206
|
+
),
|
|
207
|
+
metadata && metadata.length > 0 && /* @__PURE__ */ jsx("dl", { className: classes.metaRow, children: metadata.map((item, i) => /* @__PURE__ */ jsxs("div", { className: classes.metaItem, children: [
|
|
208
|
+
/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: item.label }) }),
|
|
209
|
+
/* @__PURE__ */ jsx("dd", { children: typeof item.value === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: item.value }) : item.value })
|
|
210
|
+
] }, `${i}:${item.label}`)) }),
|
|
211
|
+
tabs && /* @__PURE__ */ jsx("div", { className: classes.tabsWrapper, children: /* @__PURE__ */ jsx(HeaderNav, { tabs, activeTabId }) })
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
)
|
|
199
215
|
] });
|
|
200
216
|
};
|
|
201
217
|
const HeaderPage = Header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { HeaderNav } from './HeaderNav';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { HeaderDefinition } from './definition';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport { Lexer } from 'marked';\nimport { Link } from '../Link';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\n\nconst getScrollParent = (element: HTMLElement | null): Element | null => {\n let parent = element?.parentElement;\n\n while (parent) {\n const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);\n\n if (\n /(auto|scroll|overlay|hidden)/.test(`${overflow}${overflowX}${overflowY}`)\n ) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return null;\n};\n\nconst isStickySentinelOutOfView = (\n sentinel: HTMLElement,\n root: Element | null,\n) => {\n const sentinelRect = sentinel.getBoundingClientRect();\n const rootTop = root ? root.getBoundingClientRect().top : 0;\n\n return sentinelRect.bottom <= rootTop;\n};\n\n/**\n * Parses inline Markdown links in a string and returns an array of React nodes.\n * URLs are sanitized via `@braintree/sanitize-url`; unsafe URLs are rendered as\n * plain text. Uses `marked` instead of `react-markdown` to avoid ESM issues.\n */\nfunction renderInlineMarkdown(text: string): React.ReactNode[] {\n return Lexer.lexInline(text).map((token, i) => {\n if (token.type === 'link') {\n const href = sanitizeUrl(token.href);\n if (href === 'about:blank') return token.text;\n return (\n <Link key={i} href={href} standalone>\n {token.text}\n </Link>\n );\n }\n return token.raw;\n });\n}\n\n/**\n * A secondary header with title, breadcrumbs, tabs, and actions.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n const { ownProps, dataAttributes } = useDefinition(HeaderDefinition, props, {\n classNameTarget: 'content',\n });\n const {\n classes,\n title,\n tabs,\n activeTabId,\n customActions,\n breadcrumbs,\n description,\n tags,\n metadata,\n sticky,\n } = ownProps;\n\n const descriptionNodes = useMemo(\n () => (description ? renderInlineMarkdown(description) : null),\n [description],\n );\n\n // The sentinel sits directly before the sticky content and leaves the\n // viewport when the content becomes stuck, letting us toggle stuck styling.\n const stickySentinelRef = useRef<HTMLDivElement>(null);\n const [isStuck, setIsStuck] = useState(false);\n\n useEffect(() => {\n if (!sticky) {\n setIsStuck(false);\n return;\n }\n\n const sentinel = stickySentinelRef.current;\n if (!sentinel) {\n return;\n }\n\n const root = getScrollParent(sentinel);\n\n if (typeof IntersectionObserver === 'undefined') {\n const updateStuckState = () => {\n setIsStuck(isStickySentinelOutOfView(sentinel, root));\n };\n const scrollTarget = root ?? window;\n\n updateStuckState();\n scrollTarget.addEventListener('scroll', updateStuckState, {\n passive: true,\n });\n window.addEventListener('resize', updateStuckState);\n\n return () => {\n scrollTarget.removeEventListener('scroll', updateStuckState);\n window.removeEventListener('resize', updateStuckState);\n };\n }\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n setIsStuck(!entry.isIntersecting);\n },\n { root, threshold: 0 },\n );\n\n observer.observe(sentinel);\n\n return () => {\n observer.disconnect();\n };\n }, [sticky]);\n\n return (\n <>\n <div className={classes.headerTop} data-sticky={sticky || undefined}>\n {tags && tags.length > 0 && (\n <ul className={classes.tags}>\n {tags.map((tag, i) => (\n <li\n key={`${i}:${tag.label}:${tag.href ?? ''}`}\n className={classes.tag}\n >\n {tag.href ? (\n <Link\n href={tag.href}\n variant=\"body-medium\"\n color=\"secondary\"\n standalone\n >\n {tag.label}\n </Link>\n ) : (\n <Text variant=\"body-medium\" color=\"secondary\">\n {tag.label}\n </Text>\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n {sticky && (\n <div\n ref={stickySentinelRef}\n className={classes.stickySentinel}\n data-sticky=\"\"\n aria-hidden=\"true\"\n />\n )}\n <div\n className={classes.content}\n data-sticky={sticky || undefined}\n data-stuck={isStuck || undefined}\n data-has-tags={tags && tags.length > 0 ? '' : undefined}\n {...dataAttributes}\n >\n <div className={classes.titleStack}>\n {isStuck ? (\n <div className={classes.breadcrumbsSmall}>\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n color=\"secondary\"\n className={classes.breadcrumbLinkSmall}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine\n className={classes.breadcrumbSeparator}\n size={16}\n color=\"var(--bui-fg-secondary)\"\n />\n </Fragment>\n ))}\n <h2 className={classes.titleSmall}>{title}</h2>\n </div>\n ) : (\n <div className={classes.breadcrumbs}>\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n color=\"secondary\"\n className={classes.breadcrumbLink}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine\n className={classes.breadcrumbSeparator}\n size={16}\n color=\"var(--bui-fg-secondary)\"\n />\n </Fragment>\n ))}\n <h2 className={classes.title}>{title}</h2>\n </div>\n )}\n </div>\n <div className={classes.controls}>{customActions}</div>\n </div>\n <div className={classes.headerBottom} data-sticky={sticky || undefined}>\n {description && (\n <Text\n variant=\"body-medium\"\n color=\"secondary\"\n className={classes.description}\n >\n {descriptionNodes}\n </Text>\n )}\n {metadata && metadata.length > 0 && (\n <dl className={classes.metaRow}>\n {metadata.map((item, i) => (\n <div key={`${i}:${item.label}`} className={classes.metaItem}>\n <dt>\n <Text variant=\"body-medium\" color=\"secondary\">\n {item.label}\n </Text>\n </dt>\n <dd>\n {typeof item.value === 'string' ? (\n <Text variant=\"body-medium\">{item.value}</Text>\n ) : (\n item.value\n )}\n </dd>\n </div>\n ))}\n </dl>\n )}\n {tabs && (\n <div className={classes.tabsWrapper}>\n <HeaderNav tabs={tabs} activeTabId={activeTabId} />\n </div>\n )}\n </div>\n </>\n );\n};\n\n/**\n * @public\n * @deprecated Use {@link Header} instead.\n */\nexport const HeaderPage = Header;\n"],"names":["Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { HeaderNav } from './HeaderNav';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { HeaderDefinition } from './definition';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport { Lexer } from 'marked';\nimport { Link } from '../Link';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport { Container } from '../Container';\n\nconst getScrollParent = (element: HTMLElement | null): Element | null => {\n let parent = element?.parentElement;\n\n while (parent) {\n const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);\n\n if (\n /(auto|scroll|overlay|hidden)/.test(`${overflow}${overflowX}${overflowY}`)\n ) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return null;\n};\n\nconst isStickySentinelOutOfView = (\n sentinel: HTMLElement,\n root: Element | null,\n) => {\n const sentinelRect = sentinel.getBoundingClientRect();\n const rootTop = root ? root.getBoundingClientRect().top : 0;\n\n return sentinelRect.bottom <= rootTop;\n};\n\n/**\n * Parses inline Markdown links in a string and returns an array of React nodes.\n * URLs are sanitized via `@braintree/sanitize-url`; unsafe URLs are rendered as\n * plain text. Uses `marked` instead of `react-markdown` to avoid ESM issues.\n */\nfunction renderInlineMarkdown(text: string): React.ReactNode[] {\n return Lexer.lexInline(text).map((token, i) => {\n if (token.type === 'link') {\n const href = sanitizeUrl(token.href);\n if (href === 'about:blank') return token.text;\n return (\n <Link key={i} href={href} standalone>\n {token.text}\n </Link>\n );\n }\n return token.raw;\n });\n}\n\n/**\n * A secondary header with title, breadcrumbs, tabs, and actions.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n const { ownProps, dataAttributes } = useDefinition(HeaderDefinition, props, {\n classNameTarget: 'content',\n });\n const {\n classes,\n title,\n tabs,\n activeTabId,\n customActions,\n breadcrumbs,\n description,\n tags,\n metadata,\n sticky,\n } = ownProps;\n\n const descriptionNodes = useMemo(\n () => (description ? renderInlineMarkdown(description) : null),\n [description],\n );\n\n // The sentinel sits directly before the sticky content and leaves the\n // viewport when the content becomes stuck, letting us toggle stuck styling.\n const stickySentinelRef = useRef<HTMLDivElement>(null);\n const [isStuck, setIsStuck] = useState(false);\n\n useEffect(() => {\n if (!sticky) {\n setIsStuck(false);\n return;\n }\n\n const sentinel = stickySentinelRef.current;\n if (!sentinel) {\n return;\n }\n\n const root = getScrollParent(sentinel);\n\n if (typeof IntersectionObserver === 'undefined') {\n const updateStuckState = () => {\n setIsStuck(isStickySentinelOutOfView(sentinel, root));\n };\n const scrollTarget = root ?? window;\n\n updateStuckState();\n scrollTarget.addEventListener('scroll', updateStuckState, {\n passive: true,\n });\n window.addEventListener('resize', updateStuckState);\n\n return () => {\n scrollTarget.removeEventListener('scroll', updateStuckState);\n window.removeEventListener('resize', updateStuckState);\n };\n }\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n setIsStuck(!entry.isIntersecting);\n },\n { root, threshold: 0 },\n );\n\n observer.observe(sentinel);\n\n return () => {\n observer.disconnect();\n };\n }, [sticky]);\n\n return (\n <>\n <Container\n className={classes.headerTop}\n data-sticky={sticky || undefined}\n >\n {tags && tags.length > 0 && (\n <ul className={classes.tags}>\n {tags.map((tag, i) => (\n <li\n key={`${i}:${tag.label}:${tag.href ?? ''}`}\n className={classes.tag}\n >\n {tag.href ? (\n <Link\n href={tag.href}\n variant=\"body-medium\"\n color=\"secondary\"\n standalone\n >\n {tag.label}\n </Link>\n ) : (\n <Text variant=\"body-medium\" color=\"secondary\">\n {tag.label}\n </Text>\n )}\n </li>\n ))}\n </ul>\n )}\n </Container>\n {sticky && (\n <div\n ref={stickySentinelRef}\n className={classes.stickySentinel}\n data-sticky=\"\"\n aria-hidden=\"true\"\n />\n )}\n <Container\n className={classes.content}\n data-sticky={sticky || undefined}\n data-stuck={isStuck || undefined}\n data-has-tags={tags && tags.length > 0 ? '' : undefined}\n {...dataAttributes}\n >\n <div className={classes.titleStack}>\n {isStuck ? (\n <div className={classes.breadcrumbsSmall}>\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n color=\"secondary\"\n className={classes.breadcrumbLinkSmall}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine\n className={classes.breadcrumbSeparator}\n size={16}\n color=\"var(--bui-fg-secondary)\"\n />\n </Fragment>\n ))}\n <h2 className={classes.titleSmall}>{title}</h2>\n </div>\n ) : (\n <div className={classes.breadcrumbs}>\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n color=\"secondary\"\n className={classes.breadcrumbLink}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine\n className={classes.breadcrumbSeparator}\n size={16}\n color=\"var(--bui-fg-secondary)\"\n />\n </Fragment>\n ))}\n <h2 className={classes.title}>{title}</h2>\n </div>\n )}\n </div>\n <div className={classes.controls}>{customActions}</div>\n </Container>\n <Container\n className={classes.headerBottom}\n data-sticky={sticky || undefined}\n >\n {description && (\n <Text\n variant=\"body-medium\"\n color=\"secondary\"\n className={classes.description}\n >\n {descriptionNodes}\n </Text>\n )}\n {metadata && metadata.length > 0 && (\n <dl className={classes.metaRow}>\n {metadata.map((item, i) => (\n <div key={`${i}:${item.label}`} className={classes.metaItem}>\n <dt>\n <Text variant=\"body-medium\" color=\"secondary\">\n {item.label}\n </Text>\n </dt>\n <dd>\n {typeof item.value === 'string' ? (\n <Text variant=\"body-medium\">{item.value}</Text>\n ) : (\n item.value\n )}\n </dd>\n </div>\n ))}\n </dl>\n )}\n {tabs && (\n <div className={classes.tabsWrapper}>\n <HeaderNav tabs={tabs} activeTabId={activeTabId} />\n </div>\n )}\n </Container>\n </>\n );\n};\n\n/**\n * @public\n * @deprecated Use {@link Header} instead.\n */\nexport const HeaderPage = Header;\n"],"names":["Fragment"],"mappings":"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"}
|
|
@@ -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 .Header_bui-
|
|
4
|
-
var styles = {"bui-
|
|
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 .Header_bui-HeaderTop__e703821caf.Header_bui-HeaderTop__e703821caf,\n .Header_bui-HeaderContent__e703821caf.Header_bui-HeaderContent__e703821caf {\n flex: none;\n margin-bottom: 0;\n }\n\n .Header_bui-HeaderBottom__e703821caf {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n margin-bottom: var(--bui-space-5);\n }\n\n .Header_bui-HeaderBottom__e703821caf.Header_bui-HeaderBottom__e703821caf {\n flex: none;\n margin-bottom: var(--bui-space-5);\n }\n\n .Header_bui-HeaderStickySentinel__e703821caf {\n height: 1px;\n margin-bottom: -1px;\n pointer-events: none;\n }\n\n .Header_bui-HeaderContent__e703821caf {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--bui-space-3);\n padding-top: var(--bui-space-3);\n padding-bottom: var(--bui-space-3);\n }\n\n .Header_bui-HeaderContent__e703821caf[data-has-tags] {\n padding-top: var(--bui-space-2);\n }\n\n .Header_bui-HeaderContent__e703821caf[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--bui-bg-app);\n\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n }\n\n .Header_bui-HeaderContent__e703821caf[data-sticky]::after {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 1px;\n content: '';\n background-color: var(--bui-border-1);\n opacity: 0;\n transition: opacity 200ms ease;\n }\n\n .Header_bui-HeaderContent__e703821caf[data-stuck]::after {\n opacity: 1;\n }\n\n .Header_bui-HeaderTabsWrapper__e703821caf {\n margin-left: -8px;\n }\n\n .Header_bui-HeaderControls__e703821caf {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderTitleStack__e703821caf {\n position: relative;\n flex: 1 1 auto;\n height: 1lh;\n min-width: 0;\n font-size: var(--bui-font-size-6);\n line-height: 140%;\n overflow: hidden;\n }\n\n .Header_bui-HeaderBreadcrumbs__e703821caf,\n .Header_bui-HeaderBreadcrumbsSmall__e703821caf {\n position: absolute;\n inset-inline: 0;\n top: 50%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n min-width: 0;\n transform: translateY(-50%);\n }\n\n .Header_bui-HeaderBreadcrumbsSmall__e703821caf {\n gap: var(--bui-space-1);\n }\n\n .Header_bui-HeaderBreadcrumbs__e703821caf .Header_bui-HeaderBreadcrumbLink__e703821caf,\n .Header_bui-HeaderBreadcrumbsSmall__e703821caf .Header_bui-HeaderBreadcrumbLinkSmall__e703821caf {\n max-width: 240px;\n overflow: hidden;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n line-height: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .Header_bui-HeaderBreadcrumbs__e703821caf .Header_bui-HeaderBreadcrumbLink__e703821caf {\n font-size: inherit;\n }\n\n .Header_bui-HeaderBreadcrumbsSmall__e703821caf .Header_bui-HeaderBreadcrumbLinkSmall__e703821caf {\n font-size: var(--bui-font-size-4);\n }\n\n .Header_bui-HeaderBreadcrumbSeparator__e703821caf {\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderTitle__e703821caf,\n .Header_bui-HeaderTitleSmall__e703821caf {\n margin: 0;\n padding: 0;\n flex: 1 1 auto;\n min-width: 0;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n line-height: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .Header_bui-HeaderTitle__e703821caf {\n font-size: inherit;\n }\n\n .Header_bui-HeaderTitleSmall__e703821caf {\n font-size: var(--bui-font-size-4);\n }\n\n .Header_bui-HeaderTags__e703821caf {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .Header_bui-HeaderTag__e703821caf {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Header_bui-HeaderTag__e703821caf + .Header_bui-HeaderTag__e703821caf::before {\n content: '';\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background-color: var(--bui-fg-secondary);\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderMetaRow__e703821caf {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-5);\n flex-wrap: wrap;\n margin: 0;\n }\n\n .Header_bui-HeaderMetaItem__e703821caf {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n\n dd {\n margin: 0;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-HeaderTop":"Header_bui-HeaderTop__e703821caf","bui-HeaderContent":"Header_bui-HeaderContent__e703821caf","bui-HeaderBottom":"Header_bui-HeaderBottom__e703821caf","bui-HeaderStickySentinel":"Header_bui-HeaderStickySentinel__e703821caf","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__e703821caf","bui-HeaderControls":"Header_bui-HeaderControls__e703821caf","bui-HeaderTitleStack":"Header_bui-HeaderTitleStack__e703821caf","bui-HeaderBreadcrumbs":"Header_bui-HeaderBreadcrumbs__e703821caf","bui-HeaderBreadcrumbsSmall":"Header_bui-HeaderBreadcrumbsSmall__e703821caf","bui-HeaderBreadcrumbLink":"Header_bui-HeaderBreadcrumbLink__e703821caf","bui-HeaderBreadcrumbLinkSmall":"Header_bui-HeaderBreadcrumbLinkSmall__e703821caf","bui-HeaderBreadcrumbSeparator":"Header_bui-HeaderBreadcrumbSeparator__e703821caf","bui-HeaderTitle":"Header_bui-HeaderTitle__e703821caf","bui-HeaderTitleSmall":"Header_bui-HeaderTitleSmall__e703821caf","bui-HeaderTags":"Header_bui-HeaderTags__e703821caf","bui-HeaderTag":"Header_bui-HeaderTag__e703821caf","bui-HeaderMetaRow":"Header_bui-HeaderMetaRow__e703821caf","bui-HeaderMetaItem":"Header_bui-HeaderMetaItem__e703821caf"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -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 .PasswordField_bui-
|
|
4
|
-
var styles = {"bui-PasswordField":"PasswordField_bui-
|
|
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 .PasswordField_bui-PasswordField__ea6db47237 {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n\n &[data-on-bg='neutral-1'] .PasswordField_bui-PasswordFieldInput__ea6db47237 {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] .PasswordField_bui-PasswordFieldInput__ea6db47237 {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] .PasswordField_bui-PasswordFieldInput__ea6db47237 {\n background-color: var(--bui-bg-neutral-4);\n }\n }\n\n .PasswordField_bui-PasswordFieldInputWrapper__ea6db47237 {\n position: relative;\n\n &[data-size='small'] .PasswordField_bui-PasswordFieldInput__ea6db47237 {\n height: 2rem;\n padding-right: 2rem;\n }\n\n &[data-size='medium'] .PasswordField_bui-PasswordFieldInput__ea6db47237 {\n height: 2.5rem;\n padding-right: 2.5rem;\n }\n\n &[data-size='small'] .PasswordField_bui-PasswordFieldInput__ea6db47237[data-icon] {\n padding-left: var(--bui-space-8);\n }\n\n &[data-size='medium'] .PasswordField_bui-PasswordFieldInput__ea6db47237[data-icon] {\n padding-left: var(--bui-space-9);\n }\n\n &:has([data-disabled]) {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .PasswordField_bui-PasswordFieldIcon__ea6db47237 {\n position: absolute;\n left: var(--bui-space-3);\n top: 50%;\n transform: translateY(-50%);\n color: var(--bui-fg-primary);\n flex-shrink: 0;\n pointer-events: none;\n\n &[data-size='small'],\n &[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n &[data-size='medium'],\n &[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .PasswordField_bui-PasswordFieldInput__ea6db47237 {\n display: flex;\n align-items: center;\n padding: 0 var(--bui-space-3);\n border-radius: var(--bui-radius-2);\n border: none;\n background-color: var(--bui-bg-neutral-1);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n transition: box-shadow 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n cursor: inherit;\n\n &[data-focused] {\n outline: none;\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-invalid] {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n }\n\n .PasswordField_bui-PasswordFieldVisibility__ea6db47237 {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n display: grid;\n place-content: center;\n background-color: transparent;\n cursor: pointer;\n border: none;\n padding: 0;\n margin: 0;\n color: var(--bui-fg-primary);\n\n &[data-size='small'] {\n width: 2rem;\n height: 2rem;\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n &[data-size='medium'] {\n width: 2.5rem;\n height: 2.5rem;\n\n & svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-PasswordField":"PasswordField_bui-PasswordField__ea6db47237","bui-PasswordFieldInput":"PasswordField_bui-PasswordFieldInput__ea6db47237","bui-PasswordFieldInputWrapper":"PasswordField_bui-PasswordFieldInputWrapper__ea6db47237","bui-PasswordFieldIcon":"PasswordField_bui-PasswordFieldIcon__ea6db47237","bui-PasswordFieldVisibility":"PasswordField_bui-PasswordFieldVisibility__ea6db47237"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PasswordField/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 { defineComponent } from '../../hooks/useDefinition';\nimport type { PasswordFieldOwnProps } from './types';\nimport styles from './PasswordField.module.css';\n\n/**\n * Component definition for PasswordField\n * @public\n */\nexport const PasswordFieldDefinition = defineComponent<PasswordFieldOwnProps>()(\n {\n styles,\n classNames: {\n root: 'bui-PasswordField',\n inputWrapper: 'bui-PasswordFieldInputWrapper',\n input: 'bui-PasswordFieldInput',\n inputIcon: 'bui-PasswordFieldIcon',\n inputVisibility: 'bui-PasswordFieldVisibility',\n },\n propDefs: {\n size: { dataAttribute: true, default: 'small' },\n className: {},\n icon: {},\n placeholder: {},\n label: {},\n description: {},\n secondaryLabel: {},\n },\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,YAAA,EAAc,+BAAA;AAAA,MACd,KAAA,EAAO,wBAAA;AAAA,MACP,SAAA,EAAW,uBAAA;AAAA,MACX,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,MAC9C,WAAW,EAAC;AAAA,MACZ,MAAM,EAAC;AAAA,MACP,aAAa,EAAC;AAAA,MACd,OAAO,EAAC;AAAA,MACR,aAAa,EAAC;AAAA,MACd,gBAAgB;AAAC;AACnB;AAEJ;;;;"}
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PasswordField/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 { defineComponent } from '../../hooks/useDefinition';\nimport type { PasswordFieldOwnProps } from './types';\nimport styles from './PasswordField.module.css';\n\n/**\n * Component definition for PasswordField\n * @public\n */\nexport const PasswordFieldDefinition = defineComponent<PasswordFieldOwnProps>()(\n {\n styles,\n classNames: {\n root: 'bui-PasswordField',\n inputWrapper: 'bui-PasswordFieldInputWrapper',\n input: 'bui-PasswordFieldInput',\n inputIcon: 'bui-PasswordFieldIcon',\n inputVisibility: 'bui-PasswordFieldVisibility',\n },\n bg: 'consumer',\n propDefs: {\n size: { dataAttribute: true, default: 'small' },\n className: {},\n icon: {},\n placeholder: {},\n label: {},\n description: {},\n secondaryLabel: {},\n },\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,YAAA,EAAc,+BAAA;AAAA,MACd,KAAA,EAAO,wBAAA;AAAA,MACP,SAAA,EAAW,uBAAA;AAAA,MACX,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,EAAA,EAAI,UAAA;AAAA,IACJ,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,MAC9C,WAAW,EAAC;AAAA,MACZ,MAAM,EAAC;AAAA,MACP,aAAa,EAAC;AAAA,MACd,OAAO,EAAC;AAAA,MACR,aAAa,EAAC;AAAA,MACd,gBAAgB;AAAC;AACnB;AAEJ;;;;"}
|
|
@@ -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 .SearchField_bui-
|
|
4
|
-
var styles = {"bui-SearchField":"SearchField_bui-
|
|
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 .SearchField_bui-SearchField__50c7756e9a {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n\n &[data-size='small'] {\n --search-field-item-height: 2rem;\n }\n\n &[data-size='medium'] {\n --search-field-item-height: 2.5rem;\n }\n\n &[data-empty] {\n .SearchField_bui-SearchFieldClear__50c7756e9a {\n display: none;\n }\n }\n\n &[data-on-bg='neutral-1'] .SearchField_bui-SearchFieldInputWrapper__50c7756e9a {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] .SearchField_bui-SearchFieldInputWrapper__50c7756e9a {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] .SearchField_bui-SearchFieldInputWrapper__50c7756e9a {\n background-color: var(--bui-bg-neutral-4);\n }\n\n &[data-startcollapsed='true'] {\n transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,\n max-width 0.3s ease-in-out;\n padding: 0;\n flex: 0 1 auto;\n\n &[data-collapsed='true'] {\n cursor: pointer;\n\n &[data-size='medium'] {\n flex-basis: 2.5rem;\n width: 2.5rem;\n max-width: 2.5rem;\n height: 2.5rem;\n }\n\n &[data-size='small'] {\n flex-basis: 2rem;\n width: 2rem;\n max-width: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField_bui-SearchFieldInput__50c7756e9a {\n &::placeholder {\n opacity: 0;\n }\n }\n\n &[data-size='small'] .SearchField_bui-SearchFieldInput__50c7756e9a {\n &::placeholder {\n opacity: 0;\n }\n }\n\n .SearchField_bui-SearchFieldInputWrapper__50c7756e9a {\n .SearchField_bui-SearchFieldInput__50c7756e9a[data-icon] {\n padding-right: 0px;\n }\n }\n }\n\n &[data-collapsed='false'] {\n flex-basis: 200px;\n width: 200px;\n max-width: 200px;\n }\n }\n }\n\n .SearchField_bui-SearchFieldInputWrapper__50c7756e9a {\n display: flex;\n align-items: center;\n border-radius: var(--bui-radius-2);\n background-color: var(--bui-bg-neutral-1);\n transition: box-shadow 0.2s ease-in-out;\n\n &:has([data-focused]) {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &:has([data-invalid]) {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[data-size='small'] {\n height: 2rem;\n }\n\n &[data-size='medium'] {\n height: 2.5rem;\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .SearchField_bui-SearchFieldInputIcon__50c7756e9a {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n color: var(--bui-fg-primary);\n pointer-events: none;\n width: var(--search-field-item-height);\n height: var(--search-field-item-height);\n /* To animate the icon when the input is collapsed */\n transition: opacity 0.2s ease-in-out;\n\n & svg {\n .SearchField_bui-SearchField__50c7756e9a[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .SearchField_bui-SearchField__50c7756e9a[data-size='medium'] & {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n }\n\n .SearchField_bui-SearchFieldInput__50c7756e9a {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n transition: padding 0.3s ease-in-out;\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n\n &:first-child {\n .SearchField_bui-SearchField__50c7756e9a[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .SearchField_bui-SearchField__50c7756e9a[data-size='medium'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n }\n\n .SearchField_bui-SearchFieldClear__50c7756e9a {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: var(--search-field-item-height);\n height: var(--search-field-item-height);\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-SearchField":"SearchField_bui-SearchField__50c7756e9a","bui-SearchFieldClear":"SearchField_bui-SearchFieldClear__50c7756e9a","bui-SearchFieldInputWrapper":"SearchField_bui-SearchFieldInputWrapper__50c7756e9a","bui-SearchFieldInput":"SearchField_bui-SearchFieldInput__50c7756e9a","bui-SearchFieldInputIcon":"SearchField_bui-SearchFieldInputIcon__50c7756e9a"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -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 .Select_bui-
|
|
4
|
-
var styles = {"bui-Select":"Select_bui-
|
|
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 .Select_bui-Select__2bfd6c12b2,\n .Select_bui-SelectPopover__2bfd6c12b2 {\n &[data-size='small'] {\n --select-item-height: 2rem;\n }\n\n &[data-size='medium'] {\n --select-item-height: 2.5rem;\n }\n }\n\n .Select_bui-Select__2bfd6c12b2 {\n display: flex;\n flex-direction: column;\n width: 100%;\n flex: 1;\n }\n\n .Select_bui-SelectPopover__2bfd6c12b2 {\n min-width: var(--trigger-width);\n }\n\n .Select_bui-SelectTrigger__2bfd6c12b2 {\n box-sizing: border-box;\n border-radius: var(--bui-radius-3);\n border: none;\n outline: none;\n background-color: var(--bui-bg-neutral-1);\n transition: box-shadow 0.2s ease-in-out;\n\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-4);\n }\n\n .Select_bui-Select__2bfd6c12b2[data-focused] & {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\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 height: var(--select-item-height);\n\n .Select_bui-Select__2bfd6c12b2[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .Select_bui-Select__2bfd6c12b2[data-size='medium'] & {\n padding-inline: var(--bui-space-4) 0;\n }\n\n & svg {\n flex-shrink: 0;\n color: var(--bui-fg-secondary);\n\n .Select_bui-Select__2bfd6c12b2[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .Select_bui-Select__2bfd6c12b2[data-size='medium'] & {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n .Select_bui-Select__2bfd6c12b2[data-invalid] & {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select_bui-SelectTriggerChevron__2bfd6c12b2 {\n display: grid;\n place-content: center;\n width: var(--select-item-height);\n height: var(--select-item-height);\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n .Select_bui-SelectValue__2bfd6c12b2 {\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 & .Select_bui-SelectItemIndicator__2bfd6c12b2 {\n display: none;\n }\n\n &[disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select_bui-SelectList__2bfd6c12b2 {\n overflow: auto;\n min-height: 0;\n padding-block: var(--bui-space-1);\n padding-inline: var(--bui-space-1);\n\n &[data-focus-visible] {\n /* Remove default focus-visible outline because React Aria\n * triggers it on mouse click open of the list for some reason.\n * On keyboard use, the top item receives the focus style,\n * so it's not needed anyway. */\n outline: none;\n }\n }\n\n .Select_bui-SelectItem__2bfd6c12b2 {\n box-sizing: border-box;\n position: relative;\n display: grid;\n grid-template-areas: 'icon text';\n grid-template-columns: 1rem 1fr;\n align-items: center;\n min-height: var(--select-item-height);\n padding-block: var(--bui-space-1);\n padding-left: var(--bui-space-3);\n padding-right: var(--bui-space-4);\n color: var(--bui-fg-primary);\n cursor: pointer;\n user-select: none;\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-2);\n outline: none;\n border-radius: var(--bui-radius-2);\n\n &[data-focused] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n\n &[data-selected] .Select_bui-SelectItemIndicator__2bfd6c12b2 {\n opacity: 1;\n }\n }\n\n .Select_bui-SelectItemIndicator__2bfd6c12b2 {\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 .Select_bui-SelectItemLabel__2bfd6c12b2 {\n flex: 1;\n grid-area: text;\n }\n\n .Select_bui-SelectSearchWrapper__2bfd6c12b2 {\n flex-shrink: 0;\n margin-bottom: var(--bui-space-1);\n display: flex;\n align-items: center;\n padding-inline: var(--bui-space-3) 0;\n border-bottom: 1px solid var(--bui-border-2);\n }\n\n .Select_bui-SelectSearch__2bfd6c12b2 {\n border: none;\n background-color: transparent;\n padding: 0;\n color: var(--bui-fg-primary);\n flex: 1;\n outline: none;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n height: var(--select-item-height);\n line-height: var(--select-item-height);\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n /* Hide native browser clear button */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n }\n\n .Select_bui-SelectSearchClear__2bfd6c12b2 {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: var(--select-item-height);\n height: var(--select-item-height);\n\n input:placeholder-shown + & {\n display: none;\n }\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Select_bui-SelectSection__2bfd6c12b2 {\n &:first-child .Select_bui-SelectSectionHeader__2bfd6c12b2 {\n padding-top: 0;\n }\n }\n\n .Select_bui-SelectSectionHeader__2bfd6c12b2 {\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 .Select_bui-SelectNoResults__2bfd6c12b2 {\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
|
+
var styles = {"bui-Select":"Select_bui-Select__2bfd6c12b2","bui-SelectPopover":"Select_bui-SelectPopover__2bfd6c12b2","bui-SelectTrigger":"Select_bui-SelectTrigger__2bfd6c12b2","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__2bfd6c12b2","bui-SelectValue":"Select_bui-SelectValue__2bfd6c12b2","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__2bfd6c12b2","bui-SelectList":"Select_bui-SelectList__2bfd6c12b2","bui-SelectItem":"Select_bui-SelectItem__2bfd6c12b2","bui-SelectItemLabel":"Select_bui-SelectItemLabel__2bfd6c12b2","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__2bfd6c12b2","bui-SelectSearch":"Select_bui-SelectSearch__2bfd6c12b2","bui-SelectSearchClear":"Select_bui-SelectSearchClear__2bfd6c12b2","bui-SelectSection":"Select_bui-SelectSection__2bfd6c12b2","bui-SelectSectionHeader":"Select_bui-SelectSectionHeader__2bfd6c12b2","bui-SelectNoResults":"Select_bui-SelectNoResults__2bfd6c12b2"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Table_bui-
|
|
4
|
-
var styles = {"bui-TableWrapper":"Table_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Table_bui-TableWrapper__61510929c4 {\n display: flex;\n flex-direction: column;\n }\n\n .Table_bui-TableResizableContainer__61510929c4 {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n }\n\n .Table_bui-Table__61510929c4 {\n /* Establishes containing block for react-aria's absolutely positioned hidden checkbox inputs, preventing them from escaping to a distant ancestor and creating phantom scroll height. */\n position: relative;\n width: 100%;\n caption-side: bottom;\n border-collapse: collapse;\n table-layout: fixed;\n transition: opacity 0.2s ease-in-out;\n overflow: auto;\n flex: 1;\n min-height: 0;\n\n &[data-stale='true'],\n &[data-ispending='true'] {\n opacity: 0.6;\n }\n }\n\n .Table_bui-TableHeader__61510929c4 {\n border-bottom: 1px solid var(--bui-border-2);\n transition: color 0.2s ease-in-out;\n }\n\n .Table_bui-TableHead__61510929c4 {\n text-align: left;\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n color: var(--bui-fg-primary);\n }\n\n .Table_bui-TableHeadSelection__61510929c4 {\n width: 40px;\n }\n\n .Table_bui-TableHeadContent__61510929c4 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-1);\n }\n\n .Table_bui-TableHeadLabel__61510929c4 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n }\n\n .Table_bui-TableHeadSortButton__61510929c4 {\n cursor: pointer;\n user-select: none;\n display: inline-flex;\n align-items: center;\n gap: var(--bui-space-1);\n opacity: 0;\n transition: opacity 0.1s ease-in-out;\n color: var(--bui-fg-secondary);\n\n .Table_bui-TableHead__61510929c4:hover &,\n [data-sort-direction='ascending'] &,\n [data-sort-direction='descending'] & {\n opacity: 1;\n }\n\n & svg {\n transition: transform 0.1s ease-in-out;\n }\n [data-sort-direction='descending'] & svg {\n transform: rotate(180deg);\n }\n }\n\n .Table_bui-TableBody__61510929c4 {\n color: var(--bui-fg-primary);\n }\n\n .Table_bui-TableRow__61510929c4 {\n border-bottom: 1px solid var(--bui-border-2);\n transition: color 0.2s ease-in-out;\n cursor: default;\n\n &:hover {\n background-color: var(--bui-bg-neutral-1-hover);\n }\n\n &[data-selected] {\n background-color: var(--bui-bg-neutral-1-pressed);\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-neutral-1-pressed);\n }\n\n &[data-on-bg='neutral-1'] {\n &:hover {\n background-color: var(--bui-bg-neutral-2-hover);\n }\n\n &[data-selected] {\n background-color: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-disabled] {\n background-color: var(--bui-bg-neutral-2-disabled);\n }\n }\n\n &[data-on-bg='neutral-2'] {\n &:hover {\n background-color: var(--bui-bg-neutral-3-hover);\n }\n\n &[data-selected] {\n background-color: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-disabled] {\n background-color: var(--bui-bg-neutral-3-disabled);\n }\n }\n\n &[data-on-bg='neutral-3'] {\n &:hover {\n background-color: var(--bui-bg-neutral-4-hover);\n }\n\n &[data-selected] {\n background-color: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled] {\n background-color: var(--bui-bg-neutral-4-disabled);\n }\n }\n\n &[data-href],\n &[data-selection-mode],\n &[data-react-aria-pressable='true'] {\n cursor: pointer;\n }\n\n &[data-disabled] {\n background-color: var(--bui-bg-neutral-1-disabled);\n cursor: not-allowed;\n }\n }\n\n .Table_bui-TableCell__61510929c4 {\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n min-width: 0;\n overflow: hidden;\n }\n\n .Table_bui-TableCellSelection__61510929c4 {\n width: 40px;\n }\n\n .Table_bui-TableCellContentWrapper__61510929c4 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n min-width: 0;\n width: 100%;\n max-width: 100%;\n }\n\n .Table_bui-TableCellIcon__61510929c4,\n .Table_bui-TableCellIcon__61510929c4 svg {\n display: inline-flex;\n align-items: center;\n color: var(--bui-fg-primary);\n }\n\n .Table_bui-TableCellContent__61510929c4 {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-0_5);\n min-width: 0;\n flex: 1;\n overflow: hidden;\n max-width: 100%;\n }\n\n .Table_bui-TableCellContent__61510929c4 > * {\n min-width: 0;\n max-width: 100%;\n }\n\n .Table_bui-TableCellProfile__61510929c4 {\n display: flex;\n flex-direction: row;\n gap: var(--bui-space-2);\n align-items: center;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-TableWrapper":"Table_bui-TableWrapper__61510929c4","bui-TableResizableContainer":"Table_bui-TableResizableContainer__61510929c4","bui-Table":"Table_bui-Table__61510929c4","bui-TableHeader":"Table_bui-TableHeader__61510929c4","bui-TableHead":"Table_bui-TableHead__61510929c4","bui-TableHeadSelection":"Table_bui-TableHeadSelection__61510929c4","bui-TableHeadContent":"Table_bui-TableHeadContent__61510929c4","bui-TableHeadLabel":"Table_bui-TableHeadLabel__61510929c4","bui-TableHeadSortButton":"Table_bui-TableHeadSortButton__61510929c4","bui-TableBody":"Table_bui-TableBody__61510929c4","bui-TableRow":"Table_bui-TableRow__61510929c4","bui-TableCell":"Table_bui-TableCell__61510929c4","bui-TableCellSelection":"Table_bui-TableCellSelection__61510929c4","bui-TableCellContentWrapper":"Table_bui-TableCellContentWrapper__61510929c4","bui-TableCellIcon":"Table_bui-TableCellIcon__61510929c4","bui-TableCellContent":"Table_bui-TableCellContent__61510929c4","bui-TableCellProfile":"Table_bui-TableCellProfile__61510929c4"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -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 .TextField_bui-
|
|
4
|
-
var styles = {"bui-TextField":"TextField_bui-
|
|
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 .TextField_bui-TextField__4a2695a9f1 {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n\n &[data-on-bg='neutral-1'] .TextField_bui-Input__4a2695a9f1 {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] .TextField_bui-Input__4a2695a9f1 {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] .TextField_bui-Input__4a2695a9f1 {\n background-color: var(--bui-bg-neutral-4);\n }\n }\n\n .TextField_bui-InputWrapper__4a2695a9f1 {\n position: relative;\n\n &[data-size='small'] .TextField_bui-Input__4a2695a9f1 {\n height: 2rem;\n }\n\n &[data-size='medium'] .TextField_bui-Input__4a2695a9f1 {\n height: 2.5rem;\n }\n\n &[data-size='small'] .TextField_bui-Input__4a2695a9f1[data-icon] {\n padding-left: var(--bui-space-8);\n }\n\n &[data-size='medium'] .TextField_bui-Input__4a2695a9f1[data-icon] {\n padding-left: var(--bui-space-9);\n }\n }\n\n .TextField_bui-InputIcon__4a2695a9f1 {\n position: absolute;\n left: var(--bui-space-3);\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--bui-space-1);\n color: var(--bui-fg-primary);\n flex-shrink: 0;\n pointer-events: none;\n /* To animate the icon when the input is collapsed */\n transition: left 0.2s ease-in-out;\n\n &[data-size='small'],\n &[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n &[data-size='medium'],\n &[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .TextField_bui-Input__4a2695a9f1 {\n display: flex;\n align-items: center;\n padding: 0 var(--bui-space-3);\n border-radius: var(--bui-radius-2);\n border: none;\n background-color: var(--bui-bg-neutral-1);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n transition: box-shadow 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n cursor: inherit;\n\n &[data-focused] {\n outline: none;\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-invalid] {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-TextField":"TextField_bui-TextField__4a2695a9f1","bui-Input":"TextField_bui-Input__4a2695a9f1","bui-InputWrapper":"TextField_bui-InputWrapper__4a2695a9f1","bui-InputIcon":"TextField_bui-InputIcon__4a2695a9f1"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties, ReactNode, HTMLAttributes, ComponentPropsWithoutRef, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
|
|
3
|
-
import { DisclosureProps, DisclosureGroupProps, DisclosurePanelProps, HeadingProps, ButtonProps as ButtonProps$1, DateRangePickerProps as DateRangePickerProps$1, ModalOverlayProps, DialogTriggerProps as DialogTriggerProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, SelectProps as SelectProps$1, ComboBoxProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, TagProps as TagProps$1, TagListProps, TagGroupProps as TagGroupProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, PopoverProps as PopoverProps$1, MenuProps as MenuProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SearchFieldProps as SearchFieldProps$1, GridListProps, GridListItemProps, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
|
|
3
|
+
import { DisclosureProps, DisclosureGroupProps, DisclosurePanelProps, HeadingProps, ButtonProps as ButtonProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, ModalOverlayProps, DialogTriggerProps as DialogTriggerProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, SelectProps as SelectProps$1, ComboBoxProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, TagProps as TagProps$1, TagListProps, TagGroupProps as TagGroupProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, PopoverProps as PopoverProps$1, MenuProps as MenuProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SearchFieldProps as SearchFieldProps$1, GridListProps, GridListItemProps, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
|
|
4
4
|
import { DateValue } from '@internationalized/date';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
6
|
import { NavigateOptions } from 'react-router-dom';
|
|
@@ -1104,6 +1104,92 @@ type FieldLabelOwnProps = {
|
|
|
1104
1104
|
interface FieldLabelProps extends FieldLabelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FieldLabelOwnProps> {
|
|
1105
1105
|
}
|
|
1106
1106
|
|
|
1107
|
+
/** @public */
|
|
1108
|
+
type DatePickerOwnProps = {
|
|
1109
|
+
/**
|
|
1110
|
+
* The size of the date picker
|
|
1111
|
+
* @defaultValue 'small'
|
|
1112
|
+
*/
|
|
1113
|
+
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
|
|
1114
|
+
className?: string;
|
|
1115
|
+
label?: FieldLabelProps['label'];
|
|
1116
|
+
description?: FieldLabelProps['description'];
|
|
1117
|
+
secondaryLabel?: FieldLabelProps['secondaryLabel'];
|
|
1118
|
+
};
|
|
1119
|
+
/** @public */
|
|
1120
|
+
interface DatePickerProps extends Omit<DatePickerProps$1<DateValue>, 'className' | 'children'>, DatePickerOwnProps {
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
/**
|
|
1124
|
+
* A date picker that combines a date field and a calendar popover, allowing
|
|
1125
|
+
* users to enter or select a date with full keyboard and screen reader
|
|
1126
|
+
* accessibility.
|
|
1127
|
+
*
|
|
1128
|
+
* @public
|
|
1129
|
+
*/
|
|
1130
|
+
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
|
|
1131
|
+
|
|
1132
|
+
/**
|
|
1133
|
+
* Component definition for DatePicker
|
|
1134
|
+
* @public
|
|
1135
|
+
*/
|
|
1136
|
+
declare const DatePickerDefinition: {
|
|
1137
|
+
readonly styles: {
|
|
1138
|
+
readonly [key: string]: string;
|
|
1139
|
+
};
|
|
1140
|
+
readonly classNames: {
|
|
1141
|
+
readonly root: "bui-DatePicker";
|
|
1142
|
+
};
|
|
1143
|
+
readonly propDefs: {
|
|
1144
|
+
readonly size: {
|
|
1145
|
+
readonly dataAttribute: true;
|
|
1146
|
+
readonly default: "small";
|
|
1147
|
+
};
|
|
1148
|
+
readonly className: {};
|
|
1149
|
+
readonly label: {};
|
|
1150
|
+
readonly description: {};
|
|
1151
|
+
readonly secondaryLabel: {};
|
|
1152
|
+
};
|
|
1153
|
+
};
|
|
1154
|
+
/**
|
|
1155
|
+
* Component definition for DatePickerGroup
|
|
1156
|
+
* @public
|
|
1157
|
+
*/
|
|
1158
|
+
declare const DatePickerGroupDefinition: {
|
|
1159
|
+
readonly styles: {
|
|
1160
|
+
readonly [key: string]: string;
|
|
1161
|
+
};
|
|
1162
|
+
readonly classNames: {
|
|
1163
|
+
readonly root: "bui-DatePickerGroup";
|
|
1164
|
+
readonly dateInput: "bui-DatePickerDateInput";
|
|
1165
|
+
readonly segment: "bui-DatePickerSegment";
|
|
1166
|
+
readonly button: "bui-DatePickerButton";
|
|
1167
|
+
};
|
|
1168
|
+
readonly bg: "consumer";
|
|
1169
|
+
readonly propDefs: {};
|
|
1170
|
+
};
|
|
1171
|
+
/**
|
|
1172
|
+
* Component definition for DatePickerCalendar
|
|
1173
|
+
* @public
|
|
1174
|
+
*/
|
|
1175
|
+
declare const DatePickerCalendarDefinition: {
|
|
1176
|
+
readonly styles: {
|
|
1177
|
+
readonly [key: string]: string;
|
|
1178
|
+
};
|
|
1179
|
+
readonly classNames: {
|
|
1180
|
+
readonly root: "bui-DatePickerCalendar";
|
|
1181
|
+
readonly header: "bui-DatePickerCalendarHeader";
|
|
1182
|
+
readonly heading: "bui-DatePickerCalendarHeading";
|
|
1183
|
+
readonly navButton: "bui-DatePickerCalendarNavButton";
|
|
1184
|
+
readonly grid: "bui-DatePickerCalendarGrid";
|
|
1185
|
+
readonly gridHeader: "bui-DatePickerCalendarGridHeader";
|
|
1186
|
+
readonly headerCell: "bui-DatePickerCalendarHeaderCell";
|
|
1187
|
+
readonly gridBody: "bui-DatePickerCalendarGridBody";
|
|
1188
|
+
readonly cell: "bui-DatePickerCalendarCell";
|
|
1189
|
+
};
|
|
1190
|
+
readonly propDefs: {};
|
|
1191
|
+
};
|
|
1192
|
+
|
|
1107
1193
|
/** @public */
|
|
1108
1194
|
type DateRangePickerOwnProps = {
|
|
1109
1195
|
/**
|
|
@@ -3108,6 +3194,7 @@ declare const PasswordFieldDefinition: {
|
|
|
3108
3194
|
readonly inputIcon: "bui-PasswordFieldIcon";
|
|
3109
3195
|
readonly inputVisibility: "bui-PasswordFieldVisibility";
|
|
3110
3196
|
};
|
|
3197
|
+
readonly bg: "consumer";
|
|
3111
3198
|
readonly propDefs: {
|
|
3112
3199
|
readonly size: {
|
|
3113
3200
|
readonly dataAttribute: true;
|
|
@@ -4119,5 +4206,5 @@ declare function useAnalytics(): AnalyticsTracker;
|
|
|
4119
4206
|
*/
|
|
4120
4207
|
declare function getNodeText(node: ReactNode | ((...args: any[]) => ReactNode)): string | undefined;
|
|
4121
4208
|
|
|
4122
|
-
export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, Badge, BadgeDefinition, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, CheckboxGroup, CheckboxGroupDefinition, Column, Combobox, ComboboxDefinition, ComboboxInputDefinition, ComboboxListBoxDefinition, ComboboxListBoxItemDefinition, ComboboxSectionDefinition, Container, ContainerDefinition, DateRangePicker, DateRangePickerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderMetadataStatus, HeaderMetadataUsers, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, Slider, SliderDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableBodySkeleton, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
|
|
4123
|
-
export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BadgeOwnProps, BadgeProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxGroupOwnProps, CheckboxGroupProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ComboboxOwnProps, ComboboxProps, CompletePaginationOptions, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DateRangePickerOwnProps, DateRangePickerProps, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexItemProps, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderMetadataItem, HeaderMetadataStatusProps, HeaderMetadataUser, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, HeaderTag, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, OptionSection, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SliderOwnProps, SliderProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };
|
|
4209
|
+
export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, Badge, BadgeDefinition, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, CheckboxGroup, CheckboxGroupDefinition, Column, Combobox, ComboboxDefinition, ComboboxInputDefinition, ComboboxListBoxDefinition, ComboboxListBoxItemDefinition, ComboboxSectionDefinition, Container, ContainerDefinition, DatePicker, DatePickerCalendarDefinition, DatePickerDefinition, DatePickerGroupDefinition, DateRangePicker, DateRangePickerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderMetadataStatus, HeaderMetadataUsers, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, Slider, SliderDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableBodySkeleton, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
|
|
4210
|
+
export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BadgeOwnProps, BadgeProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxGroupOwnProps, CheckboxGroupProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ComboboxOwnProps, ComboboxProps, CompletePaginationOptions, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DatePickerOwnProps, DatePickerProps, DateRangePickerOwnProps, DateRangePickerProps, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexItemProps, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderMetadataItem, HeaderMetadataStatusProps, HeaderMetadataUser, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, HeaderTag, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, OptionSection, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SliderOwnProps, SliderProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };
|
package/dist/index.esm.js
CHANGED
|
@@ -20,6 +20,8 @@ export { Button } from './components/Button/Button.esm.js';
|
|
|
20
20
|
export { ButtonDefinition } from './components/Button/definition.esm.js';
|
|
21
21
|
export { Card, CardBody, CardFooter, CardHeader } from './components/Card/Card.esm.js';
|
|
22
22
|
export { CardBodyDefinition, CardDefinition, CardFooterDefinition, CardHeaderDefinition } from './components/Card/definition.esm.js';
|
|
23
|
+
export { DatePicker } from './components/DatePicker/DatePicker.esm.js';
|
|
24
|
+
export { DatePickerCalendarDefinition, DatePickerDefinition, DatePickerGroupDefinition } from './components/DatePicker/definition.esm.js';
|
|
23
25
|
export { DateRangePicker } from './components/DateRangePicker/DateRangePicker.esm.js';
|
|
24
26
|
export { DateRangePickerDefinition } from './components/DateRangePicker/definition.esm.js';
|
|
25
27
|
export { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTrigger } from './components/Dialog/Dialog.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.15.0
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"test": "backstage-cli package test"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@backstage/version-bridge": "1.0.12",
|
|
53
|
+
"@backstage/version-bridge": "^1.0.12",
|
|
54
54
|
"@braintree/sanitize-url": "^7.1.2",
|
|
55
55
|
"@internationalized/date": "^3.12.0",
|
|
56
56
|
"@remixicon/react": ">=4.6.0 <4.9.0",
|
|
@@ -63,21 +63,21 @@
|
|
|
63
63
|
"use-sync-external-store": "^1.4.0"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
|
-
"@backstage/cli": "0.36.2
|
|
67
|
-
"@backstage/core-components": "0.18.10
|
|
68
|
-
"@storybook/react-vite": "^10.
|
|
66
|
+
"@backstage/cli": "^0.36.2",
|
|
67
|
+
"@backstage/core-components": "^0.18.10",
|
|
68
|
+
"@storybook/react-vite": "^10.4.0",
|
|
69
69
|
"@testing-library/jest-dom": "^6.0.0",
|
|
70
70
|
"@testing-library/react": "^16.0.0",
|
|
71
71
|
"@types/react": "^18.0.0",
|
|
72
72
|
"@types/react-dom": "^18.0.0",
|
|
73
73
|
"@types/use-sync-external-store": "^1.0.0",
|
|
74
|
-
"eslint-plugin-storybook": "^10.
|
|
74
|
+
"eslint-plugin-storybook": "^10.4.0",
|
|
75
75
|
"glob": "^13.0.0",
|
|
76
76
|
"globals": "^17.0.0",
|
|
77
77
|
"react": "^18.0.2",
|
|
78
78
|
"react-dom": "^18.0.2",
|
|
79
79
|
"react-router-dom": "^6.30.2",
|
|
80
|
-
"storybook": "^10.
|
|
80
|
+
"storybook": "^10.4.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"@types/react": "^18.0.0",
|