@backstage/ui 0.12.0 → 0.12.1-next.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 +17 -0
- package/dist/components/Accordion/Accordion.esm.js +3 -2
- package/dist/components/Accordion/Accordion.esm.js.map +1 -1
- package/dist/components/Accordion/Accordion.module.css.esm.js +2 -2
- package/dist/components/Accordion/definition.esm.js +3 -1
- package/dist/components/Accordion/definition.esm.js.map +1 -1
- package/dist/components/Menu/Menu.module.css.esm.js +2 -2
- package/dist/components/RadioGroup/RadioGroup.module.css.esm.js +2 -2
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/hooks/useDefinition/helpers.esm.js +24 -1
- package/dist/hooks/useDefinition/helpers.esm.js.map +1 -1
- package/dist/hooks/useDefinition/useDefinition.esm.js +10 -20
- package/dist/hooks/useDefinition/useDefinition.esm.js.map +1 -1
- package/dist/index.d.ts +11 -4
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.12.1-next.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- a1f4bee: Made Accordion a `bg` provider so nested components like Button auto-increment their background level. Updated `useDefinition` to resolve `bg` `propDef` defaults for provider components.
|
|
8
|
+
- 8909359: Fixed focus-visible outline styles for Menu and Select components.
|
|
9
|
+
|
|
10
|
+
**Affected components:** Menu, Select
|
|
11
|
+
|
|
12
|
+
- 0f462f8: Improved type safety in `useDefinition` by centralizing prop resolution and strengthening the `BgPropsConstraint` to require that `bg` provider components declare `children` as a required prop in their OwnProps type.
|
|
13
|
+
- 8909359: Added proper cursor styles for RadioGroup items.
|
|
14
|
+
|
|
15
|
+
**Affected components:** RadioGroup
|
|
16
|
+
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
- @backstage/version-bridge@1.0.12
|
|
19
|
+
|
|
3
20
|
## 0.12.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
@@ -12,14 +12,15 @@ const Accordion = forwardRef(
|
|
|
12
12
|
AccordionDefinition,
|
|
13
13
|
props
|
|
14
14
|
);
|
|
15
|
-
const { classes } = ownProps;
|
|
15
|
+
const { classes, childrenWithBgProvider } = ownProps;
|
|
16
16
|
return /* @__PURE__ */ jsx(
|
|
17
17
|
Disclosure,
|
|
18
18
|
{
|
|
19
19
|
ref,
|
|
20
20
|
className: classes.root,
|
|
21
21
|
...dataAttributes,
|
|
22
|
-
...restProps
|
|
22
|
+
...restProps,
|
|
23
|
+
children: childrenWithBgProvider
|
|
23
24
|
}
|
|
24
25
|
);
|
|
25
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.esm.js","sources":["../../../src/components/Accordion/Accordion.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, Ref } from 'react';\nimport {\n Disclosure as RADisclosure,\n Button as RAButton,\n DisclosurePanel as RADisclosurePanel,\n DisclosureGroup as RADisclosureGroup,\n Heading as RAHeading,\n} from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport type {\n AccordionProps,\n AccordionTriggerProps,\n AccordionPanelProps,\n AccordionGroupProps,\n} from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n AccordionDefinition,\n AccordionTriggerDefinition,\n AccordionPanelDefinition,\n AccordionGroupDefinition,\n} from './definition';\nimport { Flex } from '../Flex';\n\n/** @public */\nexport const Accordion = forwardRef(\n (props: AccordionProps, ref: Ref<React.ElementRef<typeof RADisclosure>>) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n AccordionDefinition,\n props,\n );\n const { classes } = ownProps;\n\n return (\n <RADisclosure\n ref={ref}\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n
|
|
1
|
+
{"version":3,"file":"Accordion.esm.js","sources":["../../../src/components/Accordion/Accordion.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, Ref } from 'react';\nimport {\n Disclosure as RADisclosure,\n Button as RAButton,\n DisclosurePanel as RADisclosurePanel,\n DisclosureGroup as RADisclosureGroup,\n Heading as RAHeading,\n} from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport type {\n AccordionProps,\n AccordionTriggerProps,\n AccordionPanelProps,\n AccordionGroupProps,\n} from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n AccordionDefinition,\n AccordionTriggerDefinition,\n AccordionPanelDefinition,\n AccordionGroupDefinition,\n} from './definition';\nimport { Flex } from '../Flex';\n\n/** @public */\nexport const Accordion = forwardRef(\n (props: AccordionProps, ref: Ref<React.ElementRef<typeof RADisclosure>>) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n AccordionDefinition,\n props,\n );\n const { classes, childrenWithBgProvider } = ownProps;\n\n return (\n <RADisclosure\n ref={ref}\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n >\n {childrenWithBgProvider}\n </RADisclosure>\n );\n },\n);\n\nAccordion.displayName = 'Accordion';\n\n/** @public */\nexport const AccordionTrigger = forwardRef(\n (\n props: AccordionTriggerProps,\n ref: Ref<React.ElementRef<typeof RAHeading>>,\n ) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n AccordionTriggerDefinition,\n props,\n );\n const { classes, title, subtitle, children } = ownProps;\n\n return (\n <RAHeading\n ref={ref}\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n >\n <RAButton slot=\"trigger\" className={classes.button}>\n {children ? (\n children\n ) : (\n <Flex gap=\"2\" align=\"center\">\n <span className={classes.title}>{title}</span>\n {subtitle && <span className={classes.subtitle}>{subtitle}</span>}\n </Flex>\n )}\n\n <RiArrowDownSLine className={classes.icon} size={16} />\n </RAButton>\n </RAHeading>\n );\n },\n);\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\n/** @public */\nexport const AccordionPanel = forwardRef(\n (\n props: AccordionPanelProps,\n ref: Ref<React.ElementRef<typeof RADisclosurePanel>>,\n ) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n AccordionPanelDefinition,\n props,\n );\n const { classes } = ownProps;\n\n return (\n <RADisclosurePanel\n ref={ref}\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n />\n );\n },\n);\n\nAccordionPanel.displayName = 'AccordionPanel';\n\n/** @public */\nexport const AccordionGroup = forwardRef(\n (\n props: AccordionGroupProps,\n ref: Ref<React.ElementRef<typeof RADisclosureGroup>>,\n ) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n AccordionGroupDefinition,\n props,\n );\n const { classes, allowsMultiple } = ownProps;\n\n return (\n <RADisclosureGroup\n ref={ref}\n allowsMultipleExpanded={allowsMultiple}\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n />\n );\n },\n);\n\nAccordionGroup.displayName = 'AccordionGroup';\n"],"names":["RADisclosure","RAHeading","RAButton","RADisclosurePanel","RADisclosureGroup"],"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 .Accordion_bui-
|
|
4
|
-
var styles = {"bui-Accordion":"Accordion_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 .Accordion_bui-Accordion__9b8ddcbafb {\n width: 100%;\n border-radius: var(--bui-radius-3);\n padding: var(--bui-space-3);\n\n &[data-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n &[data-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n }\n\n .Accordion_bui-AccordionTrigger__9b8ddcbafb {\n all: unset;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .Accordion_bui-AccordionTriggerButton__9b8ddcbafb {\n all: unset;\n width: 100%;\n color: var(--bui-fg-primary);\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n text-align: left;\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .Accordion_bui-AccordionTriggerTitle__9b8ddcbafb {\n font-size: var(--bui-font-size-4);\n font-weight: var(--bui-font-weight-bold);\n line-height: 140%;\n }\n\n .Accordion_bui-AccordionTriggerSubtitle__9b8ddcbafb {\n font-size: var(--bui-font-size-2);\n line-height: 140%;\n color: var(--bui-fg-secondary);\n }\n\n .Accordion_bui-AccordionTriggerIcon__9b8ddcbafb {\n transition: transform 150ms ease-out;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n\n .Accordion_bui-Accordion__9b8ddcbafb[data-expanded='true'] > .Accordion_bui-AccordionTrigger__9b8ddcbafb & {\n transform: rotate(180deg);\n }\n }\n\n .Accordion_bui-AccordionPanel__9b8ddcbafb {\n .Accordion_bui-Accordion__9b8ddcbafb[data-expanded='true'] > & {\n padding-top: var(--bui-space-1);\n }\n }\n\n .Accordion_bui-AccordionGroup__9b8ddcbafb {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n width: 100%;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Accordion":"Accordion_bui-Accordion__9b8ddcbafb","bui-AccordionTrigger":"Accordion_bui-AccordionTrigger__9b8ddcbafb","bui-AccordionTriggerButton":"Accordion_bui-AccordionTriggerButton__9b8ddcbafb","bui-AccordionTriggerTitle":"Accordion_bui-AccordionTriggerTitle__9b8ddcbafb","bui-AccordionTriggerSubtitle":"Accordion_bui-AccordionTriggerSubtitle__9b8ddcbafb","bui-AccordionTriggerIcon":"Accordion_bui-AccordionTriggerIcon__9b8ddcbafb","bui-AccordionPanel":"Accordion_bui-AccordionPanel__9b8ddcbafb","bui-AccordionGroup":"Accordion_bui-AccordionGroup__9b8ddcbafb"};
|
|
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/Accordion/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 {\n AccordionOwnProps,\n AccordionTriggerOwnProps,\n AccordionPanelOwnProps,\n AccordionGroupOwnProps,\n} from './types';\nimport styles from './Accordion.module.css';\n\n/**\n * Component definition for Accordion\n * @public\n */\nexport const AccordionDefinition = defineComponent<AccordionOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Accordion',\n },\n bg: '
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Accordion/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 {\n AccordionOwnProps,\n AccordionTriggerOwnProps,\n AccordionPanelOwnProps,\n AccordionGroupOwnProps,\n} from './types';\nimport styles from './Accordion.module.css';\n\n/**\n * Component definition for Accordion\n * @public\n */\nexport const AccordionDefinition = defineComponent<AccordionOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Accordion',\n },\n bg: 'provider',\n propDefs: {\n bg: { dataAttribute: true, default: 'neutral-auto' },\n children: {},\n className: {},\n },\n});\n\n/**\n * Component definition for AccordionTrigger\n * @public\n */\nexport const AccordionTriggerDefinition =\n defineComponent<AccordionTriggerOwnProps>()({\n styles,\n classNames: {\n root: 'bui-AccordionTrigger',\n button: 'bui-AccordionTriggerButton',\n title: 'bui-AccordionTriggerTitle',\n subtitle: 'bui-AccordionTriggerSubtitle',\n icon: 'bui-AccordionTriggerIcon',\n },\n propDefs: {\n className: {},\n title: {},\n subtitle: {},\n children: {},\n },\n });\n\n/**\n * Component definition for AccordionPanel\n * @public\n */\nexport const AccordionPanelDefinition =\n defineComponent<AccordionPanelOwnProps>()({\n styles,\n classNames: {\n root: 'bui-AccordionPanel',\n },\n propDefs: {\n className: {},\n },\n });\n\n/**\n * Component definition for AccordionGroup\n * @public\n */\nexport const AccordionGroupDefinition =\n defineComponent<AccordionGroupOwnProps>()({\n styles,\n classNames: {\n root: 'bui-AccordionGroup',\n },\n propDefs: {\n className: {},\n allowsMultiple: { default: false },\n },\n });\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,mBAAA,GAAsB,iBAAmC,CAAE;AAAA,EACtE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,cAAA,EAAe;AAAA,IACnD,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,0BAAA,GACX,iBAA0C,CAAE;AAAA,EAC1C,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,sBAAA;AAAA,IACN,MAAA,EAAQ,4BAAA;AAAA,IACR,KAAA,EAAO,2BAAA;AAAA,IACP,QAAA,EAAU,8BAAA;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,UAAU,EAAC;AAAA,IACX,UAAU;AAAC;AAEf,CAAC;AAMI,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAMI,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,cAAA,EAAgB,EAAE,OAAA,EAAS,KAAA;AAAM;AAErC,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 .Menu_bui-
|
|
4
|
-
var styles = {"bui-MenuPopover":"Menu_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 .Menu_bui-MenuPopover__c297db21ba {\n display: flex;\n flex-direction: column;\n box-shadow: var(--bui-shadow);\n border: 1px solid var(--bui-border-1);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-popover);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu_bui-MenuContent__c297db21ba {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu_bui-MenuItem__c297db21ba {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:focus-visible {\n outline: none;\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: -2px;\n }\n\n &[data-focused] .Menu_bui-MenuItemWrapper__c297db21ba {\n background: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu_bui-MenuItemWrapper__c297db21ba {\n background: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu_bui-MenuItemWrapper__c297db21ba {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu_bui-MenuItemWrapper__c297db21ba {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu_bui-MenuItemWrapper__c297db21ba > .Menu_bui-MenuItemArrow__c297db21ba {\n display: block;\n }\n }\n }\n\n .Menu_bui-MenuItemWrapper__c297db21ba {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu_bui-MenuItemListBox__c297db21ba {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu_bui-MenuItemWrapper__c297db21ba {\n background: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu_bui-MenuItemListBoxCheck__c297db21ba {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu_bui-MenuItemListBoxCheck__c297db21ba {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuItemContent__c297db21ba {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuItemArrow__c297db21ba {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuSection__c297db21ba {\n &:first-child .Menu_bui-MenuSectionHeader__c297db21ba {\n padding-top: 0;\n }\n }\n\n .Menu_bui-MenuSectionHeader__c297db21ba {\n height: 2rem;\n display: flex;\n align-items: center;\n padding-top: var(--bui-space-3);\n padding-left: var(--bui-space-3);\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-1);\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Menu_bui-MenuSeparator__c297db21ba {\n height: 1px;\n background: var(--bui-border-1);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu_bui-MenuSearchField__c297db21ba {\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--bui-border-1);\n background-color: var(--bui-bg-neutral-1);\n height: 2rem;\n\n &[data-empty] {\n .Menu_bui-MenuSearchFieldClear__c297db21ba {\n visibility: hidden;\n }\n }\n }\n\n .Menu_bui-MenuSearchFieldInput__c297db21ba {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:first-child {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n\n .Menu_bui-MenuSearchFieldClear__c297db21ba {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: 2rem;\n height: 2rem;\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuEmptyState__c297db21ba {\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-MenuPopover":"Menu_bui-MenuPopover__c297db21ba","bui-MenuContent":"Menu_bui-MenuContent__c297db21ba","bui-MenuItem":"Menu_bui-MenuItem__c297db21ba","bui-MenuItemWrapper":"Menu_bui-MenuItemWrapper__c297db21ba","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__c297db21ba","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__c297db21ba","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__c297db21ba","bui-MenuItemContent":"Menu_bui-MenuItemContent__c297db21ba","bui-MenuSection":"Menu_bui-MenuSection__c297db21ba","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__c297db21ba","bui-MenuSeparator":"Menu_bui-MenuSeparator__c297db21ba","bui-MenuSearchField":"Menu_bui-MenuSearchField__c297db21ba","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__c297db21ba","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__c297db21ba","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__c297db21ba"};
|
|
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 .RadioGroup_bui-
|
|
4
|
-
var styles = {"bui-RadioGroup":"RadioGroup_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 .RadioGroup_bui-RadioGroup__5d12209cff {\n display: flex;\n flex-direction: column;\n color: var(--bui-fg-primary);\n }\n\n .RadioGroup_bui-RadioGroup__5d12209cff[data-orientation='horizontal'] .RadioGroup_bui-RadioGroupContent__5d12209cff {\n flex-direction: row;\n gap: var(--bui-space-4);\n }\n\n .RadioGroup_bui-RadioGroupContent__5d12209cff {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-2);\n }\n\n .RadioGroup_bui-Radio__5d12209cff {\n display: flex;\n /* This is needed so the HiddenInput is positioned correctly */\n position: relative;\n align-items: center;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-2);\n color: var(--bui-fg-primary);\n forced-color-adjust: none;\n cursor: pointer;\n\n &:before {\n content: '';\n display: block;\n width: 1rem;\n height: 1rem;\n box-sizing: border-box;\n border: 0.125rem solid var(--bui-border-2);\n background: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-full);\n transition: all 200ms;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n &[data-pressed]:before {\n border-color: var(--bui-border-2);\n }\n\n &[data-selected] {\n &:before {\n border-color: var(--bui-bg-solid);\n border-width: 0.25rem;\n }\n\n &[data-pressed]:before {\n border-color: var(--bui-bg-solid);\n }\n }\n\n &[data-focus-visible]:before {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n\n &:before {\n background: var(--bui-bg-disabled);\n }\n }\n\n &[data-invalid]:before {\n border-color: var(--bui-border-danger);\n }\n\n &[data-invalid][data-selected]:before {\n border-color: var(--bui-border-danger);\n }\n\n /* Ensure disabled state prevails over invalid state */\n &[data-disabled][data-invalid] {\n color: var(--bui-fg-disabled);\n\n &:before {\n background: var(--bui-bg-disabled);\n }\n }\n\n &[data-readonly] {\n cursor: not-allowed;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-RadioGroup":"RadioGroup_bui-RadioGroup__5d12209cff","bui-RadioGroupContent":"RadioGroup_bui-RadioGroupContent__5d12209cff","bui-Radio":"RadioGroup_bui-Radio__5d12209cff"};
|
|
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__6b6f40cb15,\n .Select_bui-SelectPopover__6b6f40cb15 {\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-SelectPopover__6b6f40cb15 {\n min-width: var(--trigger-width);\n }\n\n .Select_bui-SelectTrigger__6b6f40cb15 {\n box-sizing: border-box;\n border-radius: var(--bui-radius-3);\n border: 1px solid var(--bui-border-2);\n background-color: var(--bui-bg-neutral-1);\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n gap: var(--bui-space-2);\n width: 100%;\n height: var(--select-item-height);\n\n .Select_bui-Select__6b6f40cb15[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .Select_bui-Select__6b6f40cb15[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__6b6f40cb15[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .Select_bui-Select__6b6f40cb15[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__6b6f40cb15[data-invalid] & {\n border-color: var(--bui-fg-danger);\n\n &:focus-visible,\n &:hover {\n outline: 1px solid var(--bui-fg-danger);\n }\n }\n\n &[disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select_bui-SelectTriggerChevron__6b6f40cb15 {\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__6b6f40cb15 {\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__6b6f40cb15 {\n display: none;\n }\n\n &[disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select_bui-SelectList__6b6f40cb15: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 .Select_bui-SelectItem__6b6f40cb15 {\n box-sizing: border-box;\n position: relative;\n width: var(--anchor-width);\n display: grid;\n grid-template-areas: 'icon text';\n grid-template-columns: 1rem 1fr;\n align-items: center;\n 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\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-focused]::before {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline: var(--bui-space-1);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-neutral-2);\n z-index: -1;\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n\n &[data-selected] .Select_bui-SelectItemIndicator__6b6f40cb15 {\n opacity: 1;\n }\n }\n\n .Select_bui-SelectItemIndicator__6b6f40cb15 {\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__6b6f40cb15 {\n flex: 1;\n grid-area: text;\n }\n\n .Select_bui-SelectSearchWrapper__6b6f40cb15 {\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__6b6f40cb15 {\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__6b6f40cb15 {\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-SelectNoResults__6b6f40cb15 {\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__6b6f40cb15","bui-SelectPopover":"Select_bui-SelectPopover__6b6f40cb15","bui-SelectTrigger":"Select_bui-SelectTrigger__6b6f40cb15","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__6b6f40cb15","bui-SelectValue":"Select_bui-SelectValue__6b6f40cb15","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__6b6f40cb15","bui-SelectList":"Select_bui-SelectList__6b6f40cb15","bui-SelectItem":"Select_bui-SelectItem__6b6f40cb15","bui-SelectItemLabel":"Select_bui-SelectItemLabel__6b6f40cb15","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__6b6f40cb15","bui-SelectSearch":"Select_bui-SelectSearch__6b6f40cb15","bui-SelectSearchClear":"Select_bui-SelectSearchClear__6b6f40cb15","bui-SelectNoResults":"Select_bui-SelectNoResults__6b6f40cb15"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -24,6 +24,29 @@ function resolveResponsiveValue(value, breakpoint) {
|
|
|
24
24
|
}
|
|
25
25
|
return value;
|
|
26
26
|
}
|
|
27
|
+
function resolveDefinitionProps(definition, props, breakpoint) {
|
|
28
|
+
const ownPropKeys = new Set(Object.keys(definition.propDefs));
|
|
29
|
+
const utilityPropKeys = new Set(definition.utilityProps ?? []);
|
|
30
|
+
const ownPropsRaw = {};
|
|
31
|
+
const restProps = {};
|
|
32
|
+
for (const [key, value] of Object.entries(props)) {
|
|
33
|
+
if (ownPropKeys.has(key)) {
|
|
34
|
+
ownPropsRaw[key] = value;
|
|
35
|
+
} else if (!utilityPropKeys.has(key)) {
|
|
36
|
+
restProps[key] = value;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
const ownPropsResolved = {};
|
|
40
|
+
for (const [key, config] of Object.entries(definition.propDefs)) {
|
|
41
|
+
const rawValue = ownPropsRaw[key];
|
|
42
|
+
const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);
|
|
43
|
+
const finalValue = resolvedValue ?? config.default;
|
|
44
|
+
if (finalValue !== void 0) {
|
|
45
|
+
ownPropsResolved[key] = finalValue;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return { ownPropsResolved, restProps };
|
|
49
|
+
}
|
|
27
50
|
function processUtilityProps(props, utilityPropKeys) {
|
|
28
51
|
const utilityClassList = [];
|
|
29
52
|
const generatedStyle = {};
|
|
@@ -65,5 +88,5 @@ function processUtilityProps(props, utilityPropKeys) {
|
|
|
65
88
|
};
|
|
66
89
|
}
|
|
67
90
|
|
|
68
|
-
export { processUtilityProps, resolveResponsiveValue };
|
|
91
|
+
export { processUtilityProps, resolveDefinitionProps, resolveResponsiveValue };
|
|
69
92
|
//# sourceMappingURL=helpers.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.esm.js","sources":["../../../src/hooks/useDefinition/helpers.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 { breakpoints } from '../useBreakpoint';\nimport { utilityClassMap } from '../../utils/utilityClassMap';\nimport type { UnwrapResponsive, UtilityStyle } from './types';\n\nconst namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');\n\nfunction isResponsiveObject(value: unknown): value is Record<string, unknown> {\n return (\n typeof value === 'object' &&\n value !== null &&\n namedBreakpoints.some(b => b.id in value)\n );\n}\n\nexport function resolveResponsiveValue<T>(\n value: T,\n breakpoint: string,\n): UnwrapResponsive<T> {\n if (!isResponsiveObject(value)) {\n return value as UnwrapResponsive<T>;\n }\n\n const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n // Look for value at current breakpoint or smaller\n for (let i = index; i >= 0; i--) {\n const key = breakpoints[i].id;\n if (key in value && value[key] !== undefined) {\n return value[key] as UnwrapResponsive<T>;\n }\n }\n\n // If no value found, check from smallest breakpoint up\n for (let i = 0; i < breakpoints.length; i++) {\n const key = breakpoints[i].id;\n if (key in value && value[key] !== undefined) {\n return value[key] as UnwrapResponsive<T>;\n }\n }\n\n return value as UnwrapResponsive<T>;\n}\n\nexport function processUtilityProps<Keys extends string>(\n props: Record<string, any>,\n utilityPropKeys: readonly Keys[],\n): { utilityClasses: string; utilityStyle: UtilityStyle<Keys> } {\n const utilityClassList: string[] = [];\n const generatedStyle: Record<string, unknown> = {};\n\n const handleUtilityValue = (\n key: string,\n val: unknown,\n prefix: string = '',\n ) => {\n // Get utility class configuration for this key\n const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n if (!utilityConfig) {\n // Skip if no config found for this key\n return;\n }\n\n // Check if value is in the list of valid values for this utility\n const values = utilityConfig.values as readonly (string | number)[];\n if (values.length > 0 && values.includes(val as string | number)) {\n // Generate utility class with value suffix and optional breakpoint prefix\n const className = prefix\n ? `${prefix}${utilityConfig.class}-${val}`\n : `${utilityConfig.class}-${val}`;\n utilityClassList.push(className);\n } else if ('cssVar' in utilityConfig && utilityConfig.cssVar) {\n // Custom value - add CSS custom property AND utility class name\n // Only if cssVar is defined (properties with fixed values don't have cssVar)\n const cssVar = utilityConfig.cssVar;\n const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;\n // CSS custom properties need to be set on the style object\n generatedStyle[cssVarKey] = val;\n\n // Add utility class name (without value suffix) with optional breakpoint prefix\n const className = prefix\n ? `${prefix}${utilityConfig.class}`\n : utilityConfig.class;\n utilityClassList.push(className);\n }\n // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n };\n\n for (const key of utilityPropKeys) {\n const value = props[key];\n if (value === undefined || value === null) {\n continue;\n }\n\n // Check if value is a responsive object\n if (typeof value === 'object' && value !== null) {\n const breakpointValues = value as { [key: string]: unknown };\n // Handle responsive object values\n for (const bp in breakpointValues) {\n const prefix = bp === 'initial' ? '' : `${bp}:`;\n handleUtilityValue(key, breakpointValues[bp], prefix);\n }\n } else {\n // Handle simple value\n handleUtilityValue(key, value);\n }\n }\n\n return {\n utilityClasses: utilityClassList.join(' '),\n utilityStyle: generatedStyle as UtilityStyle<Keys>,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"helpers.esm.js","sources":["../../../src/hooks/useDefinition/helpers.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 { breakpoints } from '../useBreakpoint';\nimport { utilityClassMap } from '../../utils/utilityClassMap';\nimport type { ComponentConfig, UnwrapResponsive, UtilityStyle } from './types';\n\nconst namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');\n\nfunction isResponsiveObject(value: unknown): value is Record<string, unknown> {\n return (\n typeof value === 'object' &&\n value !== null &&\n namedBreakpoints.some(b => b.id in value)\n );\n}\n\nexport function resolveResponsiveValue<T>(\n value: T,\n breakpoint: string,\n): UnwrapResponsive<T> {\n if (!isResponsiveObject(value)) {\n return value as UnwrapResponsive<T>;\n }\n\n const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n // Look for value at current breakpoint or smaller\n for (let i = index; i >= 0; i--) {\n const key = breakpoints[i].id;\n if (key in value && value[key] !== undefined) {\n return value[key] as UnwrapResponsive<T>;\n }\n }\n\n // If no value found, check from smallest breakpoint up\n for (let i = 0; i < breakpoints.length; i++) {\n const key = breakpoints[i].id;\n if (key in value && value[key] !== undefined) {\n return value[key] as UnwrapResponsive<T>;\n }\n }\n\n return value as UnwrapResponsive<T>;\n}\n\nexport function resolveDefinitionProps<D extends ComponentConfig<any, any>>(\n definition: D,\n props: Record<string, any>,\n breakpoint: string,\n): {\n ownPropsResolved: Record<string, any>;\n restProps: Record<string, any>;\n} {\n const ownPropKeys = new Set(Object.keys(definition.propDefs));\n const utilityPropKeys = new Set(definition.utilityProps ?? []);\n\n const ownPropsRaw: Record<string, any> = {};\n const restProps: Record<string, any> = {};\n\n for (const [key, value] of Object.entries(props)) {\n if (ownPropKeys.has(key)) {\n ownPropsRaw[key] = value;\n } else if (!(utilityPropKeys as Set<string>).has(key)) {\n restProps[key] = value;\n }\n }\n\n const ownPropsResolved: Record<string, any> = {};\n\n for (const [key, config] of Object.entries(definition.propDefs)) {\n const rawValue = ownPropsRaw[key];\n const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);\n const finalValue = resolvedValue ?? (config as any).default;\n if (finalValue !== undefined) {\n ownPropsResolved[key] = finalValue;\n }\n }\n\n return { ownPropsResolved, restProps };\n}\n\nexport function processUtilityProps<Keys extends string>(\n props: Record<string, any>,\n utilityPropKeys: readonly Keys[],\n): { utilityClasses: string; utilityStyle: UtilityStyle<Keys> } {\n const utilityClassList: string[] = [];\n const generatedStyle: Record<string, unknown> = {};\n\n const handleUtilityValue = (\n key: string,\n val: unknown,\n prefix: string = '',\n ) => {\n // Get utility class configuration for this key\n const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n if (!utilityConfig) {\n // Skip if no config found for this key\n return;\n }\n\n // Check if value is in the list of valid values for this utility\n const values = utilityConfig.values as readonly (string | number)[];\n if (values.length > 0 && values.includes(val as string | number)) {\n // Generate utility class with value suffix and optional breakpoint prefix\n const className = prefix\n ? `${prefix}${utilityConfig.class}-${val}`\n : `${utilityConfig.class}-${val}`;\n utilityClassList.push(className);\n } else if ('cssVar' in utilityConfig && utilityConfig.cssVar) {\n // Custom value - add CSS custom property AND utility class name\n // Only if cssVar is defined (properties with fixed values don't have cssVar)\n const cssVar = utilityConfig.cssVar;\n const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;\n // CSS custom properties need to be set on the style object\n generatedStyle[cssVarKey] = val;\n\n // Add utility class name (without value suffix) with optional breakpoint prefix\n const className = prefix\n ? `${prefix}${utilityConfig.class}`\n : utilityConfig.class;\n utilityClassList.push(className);\n }\n // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n };\n\n for (const key of utilityPropKeys) {\n const value = props[key];\n if (value === undefined || value === null) {\n continue;\n }\n\n // Check if value is a responsive object\n if (typeof value === 'object' && value !== null) {\n const breakpointValues = value as { [key: string]: unknown };\n // Handle responsive object values\n for (const bp in breakpointValues) {\n const prefix = bp === 'initial' ? '' : `${bp}:`;\n handleUtilityValue(key, breakpointValues[bp], prefix);\n }\n } else {\n // Handle simple value\n handleUtilityValue(key, value);\n }\n }\n\n return {\n utilityClasses: utilityClassList.join(' '),\n utilityStyle: generatedStyle as UtilityStyle<Keys>,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -2,39 +2,29 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useBreakpoint } from '../useBreakpoint.esm.js';
|
|
4
4
|
import { useBgProvider, useBgConsumer, BgProvider } from '../useBg.esm.js';
|
|
5
|
-
import {
|
|
5
|
+
import { resolveDefinitionProps, processUtilityProps } from './helpers.esm.js';
|
|
6
6
|
|
|
7
7
|
function useDefinition(definition, props, options) {
|
|
8
8
|
const { breakpoint } = useBreakpoint();
|
|
9
|
-
const
|
|
10
|
-
definition
|
|
9
|
+
const { ownPropsResolved, restProps } = resolveDefinitionProps(
|
|
10
|
+
definition,
|
|
11
|
+
props,
|
|
12
|
+
breakpoint
|
|
11
13
|
);
|
|
12
|
-
const consumerBg = useBgConsumer();
|
|
13
|
-
const ownPropKeys = new Set(Object.keys(definition.propDefs));
|
|
14
|
-
const utilityPropKeys = new Set(definition.utilityProps ?? []);
|
|
15
|
-
const ownPropsRaw = {};
|
|
16
|
-
const restProps = {};
|
|
17
|
-
for (const [key, value] of Object.entries(props)) {
|
|
18
|
-
if (ownPropKeys.has(key)) {
|
|
19
|
-
ownPropsRaw[key] = value;
|
|
20
|
-
} else if (!utilityPropKeys.has(key)) {
|
|
21
|
-
restProps[key] = value;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
const ownPropsResolved = {};
|
|
25
14
|
const dataAttributes = {};
|
|
26
15
|
for (const [key, config] of Object.entries(definition.propDefs)) {
|
|
27
|
-
const
|
|
28
|
-
const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);
|
|
29
|
-
const finalValue = resolvedValue ?? config.default;
|
|
16
|
+
const finalValue = ownPropsResolved[key];
|
|
30
17
|
if (finalValue !== void 0) {
|
|
31
|
-
ownPropsResolved[key] = finalValue;
|
|
32
18
|
if (key === "bg" && definition.bg === "provider") continue;
|
|
33
19
|
if (config.dataAttribute) {
|
|
34
20
|
dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);
|
|
35
21
|
}
|
|
36
22
|
}
|
|
37
23
|
}
|
|
24
|
+
const providerBg = useBgProvider(
|
|
25
|
+
definition.bg === "provider" ? ownPropsResolved.bg : void 0
|
|
26
|
+
);
|
|
27
|
+
const consumerBg = useBgConsumer();
|
|
38
28
|
if (definition.bg === "provider" && providerBg.bg !== void 0) {
|
|
39
29
|
dataAttributes["data-bg"] = String(providerBg.bg);
|
|
40
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.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 { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport {
|
|
1
|
+
{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.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 { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport type {\n ComponentConfig,\n UseDefinitionOptions,\n UseDefinitionResult,\n UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n D extends ComponentConfig<any, any>,\n P extends Record<string, any>,\n>(\n definition: D,\n props: P,\n options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n const { breakpoint } = useBreakpoint();\n\n // Resolve all props centrally — applies responsive values and defaults\n const { ownPropsResolved, restProps } = resolveDefinitionProps(\n definition,\n props,\n breakpoint,\n );\n\n const dataAttributes: Record<string, string | undefined> = {};\n\n for (const [key, config] of Object.entries(definition.propDefs)) {\n const finalValue = ownPropsResolved[key];\n\n if (finalValue !== undefined) {\n // Skip data-bg for bg prop when the provider path handles it\n if (key === 'bg' && definition.bg === 'provider') continue;\n\n if ((config as any).dataAttribute) {\n // eslint-disable-next-line no-restricted-syntax\n dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n }\n }\n }\n\n // Provider: resolve bg and provide context for children\n const providerBg = useBgProvider(\n definition.bg === 'provider' ? ownPropsResolved.bg : undefined,\n );\n\n // Consumer: read parent context bg\n const consumerBg = useBgConsumer();\n\n // Provider: set data-bg from the resolved provider bg\n if (definition.bg === 'provider' && providerBg.bg !== undefined) {\n dataAttributes['data-bg'] = String(providerBg.bg);\n }\n\n // Consumer: set data-on-bg from the parent context\n if (definition.bg === 'consumer' && consumerBg.bg !== undefined) {\n dataAttributes['data-on-bg'] = String(consumerBg.bg);\n }\n\n const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n props,\n (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n );\n\n const utilityTarget = options?.utilityTarget ?? 'root';\n const classNameTarget = options?.classNameTarget ?? 'root';\n\n const classes: Record<string, string> = {};\n\n for (const [name, cssKey] of Object.entries(definition.classNames)) {\n classes[name] = clsx(\n cssKey as string,\n definition.styles[cssKey as keyof typeof definition.styles],\n utilityTarget === name && utilityClasses,\n classNameTarget === name && ownPropsResolved.className,\n );\n }\n\n let children: ReactNode | undefined;\n let childrenWithBgProvider: ReactNode | undefined;\n\n if (definition.bg === 'provider') {\n childrenWithBgProvider = providerBg.bg ? (\n <BgProvider bg={providerBg.bg}>{props.children}</BgProvider>\n ) : (\n props.children\n );\n } else {\n children = props.children;\n }\n\n return {\n ownProps: {\n classes,\n ...ownPropsResolved,\n ...(definition.bg === 'provider'\n ? { childrenWithBgProvider }\n : { children }),\n },\n restProps,\n dataAttributes,\n utilityStyle,\n } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -125,7 +125,7 @@ type ProviderBg = ContainerBg | 'neutral-auto';
|
|
|
125
125
|
type BoxOwnProps = {
|
|
126
126
|
as?: keyof JSX.IntrinsicElements;
|
|
127
127
|
bg?: Responsive<ProviderBg>;
|
|
128
|
-
children
|
|
128
|
+
children: ReactNode;
|
|
129
129
|
className?: string;
|
|
130
130
|
style?: CSSProperties;
|
|
131
131
|
};
|
|
@@ -141,7 +141,7 @@ type BoxUtilityProps = {
|
|
|
141
141
|
maxHeight?: Responsive<string>;
|
|
142
142
|
};
|
|
143
143
|
/** @public */
|
|
144
|
-
interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps, React.HTMLAttributes<HTMLDivElement> {
|
|
144
|
+
interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
/** @public */
|
|
@@ -318,13 +318,15 @@ declare const FullPageDefinition: {
|
|
|
318
318
|
* @public
|
|
319
319
|
*/
|
|
320
320
|
type AccordionOwnProps = {
|
|
321
|
+
bg?: ProviderBg;
|
|
322
|
+
children: ReactNode;
|
|
321
323
|
className?: string;
|
|
322
324
|
};
|
|
323
325
|
/**
|
|
324
326
|
* Props for the Accordion component.
|
|
325
327
|
* @public
|
|
326
328
|
*/
|
|
327
|
-
interface AccordionProps extends Omit<DisclosureProps, 'className'>, AccordionOwnProps {
|
|
329
|
+
interface AccordionProps extends Omit<DisclosureProps, 'children' | 'className'>, AccordionOwnProps {
|
|
328
330
|
}
|
|
329
331
|
/**
|
|
330
332
|
* Own props for the AccordionTrigger component.
|
|
@@ -394,8 +396,13 @@ declare const AccordionDefinition: {
|
|
|
394
396
|
readonly classNames: {
|
|
395
397
|
readonly root: "bui-Accordion";
|
|
396
398
|
};
|
|
397
|
-
readonly bg: "
|
|
399
|
+
readonly bg: "provider";
|
|
398
400
|
readonly propDefs: {
|
|
401
|
+
readonly bg: {
|
|
402
|
+
readonly dataAttribute: true;
|
|
403
|
+
readonly default: "neutral-auto";
|
|
404
|
+
};
|
|
405
|
+
readonly children: {};
|
|
399
406
|
readonly className: {};
|
|
400
407
|
};
|
|
401
408
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.12.0",
|
|
3
|
+
"version": "0.12.1-next.0",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
"test": "backstage-cli package test"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@backstage/version-bridge": "
|
|
53
|
+
"@backstage/version-bridge": "1.0.12",
|
|
54
54
|
"@remixicon/react": "^4.6.0",
|
|
55
55
|
"@tanstack/react-table": "^8.21.3",
|
|
56
56
|
"clsx": "^2.1.1",
|
|
57
57
|
"react-aria-components": "^1.14.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@backstage/cli": "
|
|
60
|
+
"@backstage/cli": "0.35.5-next.0",
|
|
61
61
|
"@types/react": "^18.0.0",
|
|
62
62
|
"@types/react-dom": "^18.0.0",
|
|
63
63
|
"eslint-plugin-storybook": "^10.3.0-alpha.1",
|