@backstage/ui 0.14.0-next.2 → 0.14.1
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 +118 -0
- package/dist/components/ButtonLink/definition.esm.js +0 -1
- package/dist/components/ButtonLink/definition.esm.js.map +1 -1
- package/dist/components/Card/definition.esm.js +0 -1
- package/dist/components/Card/definition.esm.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.esm.js +2 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.esm.js.map +1 -1
- package/dist/components/Dialog/Dialog.esm.js +7 -7
- package/dist/components/Dialog/Dialog.esm.js.map +1 -1
- package/dist/components/Dialog/Dialog.module.css.esm.js +2 -2
- package/dist/components/Dialog/definition.esm.js +2 -1
- package/dist/components/Dialog/definition.esm.js.map +1 -1
- package/dist/components/FieldLabel/FieldLabel.esm.js +13 -3
- package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
- package/dist/components/FieldLabel/definition.esm.js +1 -0
- package/dist/components/FieldLabel/definition.esm.js.map +1 -1
- package/dist/components/Header/HeaderNavDefinition.esm.js +0 -1
- package/dist/components/Header/HeaderNavDefinition.esm.js.map +1 -1
- package/dist/components/Link/definition.esm.js +0 -1
- package/dist/components/Link/definition.esm.js.map +1 -1
- package/dist/components/List/definition.esm.js +0 -1
- package/dist/components/List/definition.esm.js.map +1 -1
- package/dist/components/Menu/definition.esm.js +0 -2
- package/dist/components/Menu/definition.esm.js.map +1 -1
- package/dist/components/PasswordField/PasswordField.esm.js +2 -1
- package/dist/components/PasswordField/PasswordField.esm.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.esm.js +2 -1
- package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
- package/dist/components/SearchAutocomplete/SearchAutocomplete.esm.js +2 -2
- package/dist/components/SearchAutocomplete/SearchAutocomplete.esm.js.map +1 -1
- package/dist/components/SearchAutocomplete/definition.esm.js +0 -1
- package/dist/components/SearchAutocomplete/definition.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.esm.js +2 -1
- package/dist/components/SearchField/SearchField.esm.js.map +1 -1
- package/dist/components/Select/Select.esm.js +2 -1
- package/dist/components/Select/Select.esm.js.map +1 -1
- package/dist/components/Table/components/Table.esm.js +1 -1
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/components/TableBodySkeleton.esm.js +3 -2
- package/dist/components/Table/components/TableBodySkeleton.esm.js.map +1 -1
- package/dist/components/Table/definition.esm.js +0 -3
- package/dist/components/Table/definition.esm.js.map +1 -1
- package/dist/components/Tabs/definition.esm.js +0 -1
- package/dist/components/Tabs/definition.esm.js.map +1 -1
- package/dist/components/TagGroup/definition.esm.js +0 -1
- package/dist/components/TagGroup/definition.esm.js.map +1 -1
- package/dist/components/Text/Text.esm.js.map +1 -1
- package/dist/components/TextField/TextField.esm.js +2 -1
- package/dist/components/TextField/TextField.esm.js.map +1 -1
- package/dist/hooks/useDefinition/useDefinition.esm.js +5 -7
- package/dist/hooks/useDefinition/useDefinition.esm.js.map +1 -1
- package/dist/index.d.ts +24 -9
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +6 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport {\n RadioGroup as AriaRadioGroup,\n Radio as AriaRadio,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { RadioGroupDefinition, RadioDefinition } from './definition';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/**\n * A group of radio buttons for selecting a single option from a set, with an integrated label, description, and error display.\n *\n * @public\n */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (props, ref) => {\n const { ownProps, restProps } = useDefinition(RadioGroupDefinition, props);\n const {\n classes,\n label,\n secondaryLabel,\n description,\n isRequired,\n children,\n } = 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 'RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (isRequired ? 'Required' : null);\n\n return (\n <AriaRadioGroup className={classes.root} {...restProps} ref={ref}>\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <div className={classes.content}>{children}</div>\n <FieldError />\n </AriaRadioGroup>\n );\n },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * A single radio button for use within a RadioGroup.\n *\n * @public\n */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n const { ownProps, restProps } = useDefinition(RadioDefinition, props);\n\n return (\n <AriaRadio className={ownProps.classes.root} {...restProps} ref={ref} />\n );\n});\n\nRadio.displayName = 'Radio';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;;AAiCO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,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;AAGrC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,4BACGA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EACtD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,cAAA,EAAgB,kBAAA;AAAA,UAChB;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport {\n RadioGroup as AriaRadioGroup,\n Radio as AriaRadio,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { RadioGroupDefinition, RadioDefinition } from './definition';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/**\n * A group of radio buttons for selecting a single option from a set, with an integrated label, description, and error display.\n *\n * @public\n */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (props, ref) => {\n const { ownProps, restProps } = useDefinition(RadioGroupDefinition, props);\n const {\n classes,\n label,\n secondaryLabel,\n description,\n isRequired,\n children,\n } = 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 'RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (isRequired ? 'Required' : null);\n\n return (\n <AriaRadioGroup className={classes.root} {...restProps} ref={ref}>\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n descriptionSlot=\"description\"\n />\n <div className={classes.content}>{children}</div>\n <FieldError />\n </AriaRadioGroup>\n );\n },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * A single radio button for use within a RadioGroup.\n *\n * @public\n */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n const { ownProps, restProps } = useDefinition(RadioDefinition, props);\n\n return (\n <AriaRadio className={ownProps.classes.root} {...restProps} ref={ref} />\n );\n});\n\nRadio.displayName = 'Radio';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;;AAiCO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,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;AAGrC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,4BACGA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EACtD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,cAAA,EAAgB,kBAAA;AAAA,UAChB,WAAA;AAAA,UACA,eAAA,EAAgB;AAAA;AAAA,OAClB;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAU,QAAA,EAAS,CAAA;AAAA,0BAC1C,UAAA,EAAA,EAAW;AAAA,KAAA,EACd,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAOlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,iBAAiB,KAAK,CAAA;AAEpE,EAAA,uBACE,GAAA,CAACC,WAAU,SAAA,EAAW,QAAA,CAAS,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EAAU,CAAA;AAE1E,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { useRef, Children } from 'react';
|
|
3
|
-
import { useInteractOutside } from '
|
|
3
|
+
import { useInteractOutside } from 'react-aria';
|
|
4
4
|
import { OverlayTriggerStateContext, Autocomplete, SearchField, Input, Button, Popover, ListBox, ListBoxItem } from 'react-aria-components';
|
|
5
|
-
import { useOverlayTriggerState } from '
|
|
5
|
+
import { useOverlayTriggerState } from 'react-stately';
|
|
6
6
|
import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
|
|
7
7
|
import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
|
|
8
8
|
import { SearchAutocompleteDefinition, SearchAutocompleteItemDefinition } from './definition.esm.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchAutocomplete.esm.js","sources":["../../../src/components/SearchAutocomplete/SearchAutocomplete.tsx"],"sourcesContent":["/*\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\nimport { Children, useRef } from 'react';\nimport { useInteractOutside } from '@react-aria/interactions';\nimport {\n Autocomplete,\n SearchField as RASearchField,\n Input,\n Button as RAButton,\n Popover as RAPopover,\n ListBox,\n ListBoxItem,\n OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n SearchAutocompleteDefinition,\n SearchAutocompleteItemDefinition,\n} from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nimport type {\n SearchAutocompleteProps,\n SearchAutocompleteItemProps,\n} from './types';\n\nconst SearchAutocompleteEmptyState = () => {\n const { ownProps } = useDefinition(SearchAutocompleteDefinition, {});\n return <div className={ownProps.classes.emptyState}>No results found.</div>;\n};\n\n/**\n * A search input that shows a dropdown list of suggestions as the user types, with loading and empty states.\n *\n * @public\n */\nexport function SearchAutocomplete(props: SearchAutocompleteProps) {\n const { ownProps, dataAttributes } = useDefinition(\n SearchAutocompleteDefinition,\n props,\n );\n const {\n classes,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n inputValue,\n onInputChange,\n placeholder,\n popoverWidth,\n popoverPlacement = 'bottom start',\n children,\n isLoading,\n defaultOpen,\n style,\n } = ownProps;\n\n const triggerRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLElement | null>(null);\n const hasValue = !!inputValue;\n const hasChildren = Children.count(children) > 0;\n\n let liveMessage = '';\n if (isLoading) {\n liveMessage = 'Searching';\n } else if (hasValue && !hasChildren) {\n liveMessage = 'No results found';\n }\n const overlayState = useOverlayTriggerState({ defaultOpen });\n\n // Close on interact outside — same pattern as ComboBox.\n // isNonModal disables useOverlay's built-in useInteractOutside,\n // so we add our own that filters out clicks on the trigger.\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: e => {\n const target = e.target as Element;\n if (triggerRef.current?.contains(target)) {\n return;\n }\n overlayState.close();\n },\n isDisabled: !overlayState.isOpen,\n });\n\n return (\n <OverlayTriggerStateContext.Provider value={overlayState}>\n <Autocomplete\n inputValue={inputValue}\n onInputChange={value => {\n onInputChange?.(value);\n if (value) {\n overlayState.open();\n } else {\n overlayState.close();\n }\n }}\n >\n <RASearchField\n className={classes.searchField}\n aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : placeholder)}\n aria-labelledby={ariaLabelledBy}\n data-size={dataAttributes['data-size']}\n onKeyDown={e => {\n if (e.key === 'Enter' && !overlayState.isOpen && hasValue) {\n e.preventDefault();\n overlayState.open();\n }\n }}\n >\n <div\n ref={triggerRef}\n className={classes.root}\n {...dataAttributes}\n style={style}\n >\n <div aria-hidden=\"true\">\n <RiSearch2Line />\n </div>\n <Input\n className={classes.searchFieldInput}\n placeholder={placeholder}\n />\n <RAButton\n className={classes.searchFieldClear}\n style={{ visibility: hasValue ? 'visible' : 'hidden' }}\n >\n <RiCloseCircleLine />\n </RAButton>\n </div>\n </RASearchField>\n {/* isNonModal keeps the page interactive while the popover is open,\n required for virtual focus (aria-activedescendant) to work correctly */}\n <RAPopover\n ref={popoverRef}\n className={classes.popover}\n triggerRef={triggerRef}\n isNonModal\n placement={popoverPlacement}\n {...(popoverWidth ? { style: { width: popoverWidth } } : {})}\n >\n <BgReset>\n <Box bg=\"neutral\" className={classes.inner}>\n <ListBox\n className={classes.listBox}\n autoFocus=\"first\"\n shouldFocusOnHover\n aria-busy={isLoading || undefined}\n data-stale={isLoading || undefined}\n renderEmptyState={() =>\n isLoading ? (\n <div className={classes.loadingState}>Searching...</div>\n ) : (\n <SearchAutocompleteEmptyState />\n )\n }\n onAction={() => {\n overlayState.close();\n }}\n >\n {children}\n </ListBox>\n </Box>\n </BgReset>\n </RAPopover>\n <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n {liveMessage}\n </VisuallyHidden>\n </Autocomplete>\n </OverlayTriggerStateContext.Provider>\n );\n}\n\n/**\n * An individual option item within a SearchAutocomplete dropdown.\n *\n * @public\n */\nexport function SearchAutocompleteItem(props: SearchAutocompleteItemProps) {\n const { ownProps, restProps } = useDefinition(\n SearchAutocompleteItemDefinition,\n props,\n );\n const { classes, children } = ownProps;\n\n return (\n <ListBoxItem\n textValue={typeof children === 'string' ? children : undefined}\n className={classes.root}\n {...restProps}\n >\n <div className={classes.itemContent}>{children}</div>\n </ListBoxItem>\n );\n}\n"],"names":["RASearchField","RAButton","RAPopover"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchAutocomplete.esm.js","sources":["../../../src/components/SearchAutocomplete/SearchAutocomplete.tsx"],"sourcesContent":["/*\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\nimport { Children, useRef } from 'react';\nimport { useInteractOutside } from 'react-aria';\nimport {\n Autocomplete,\n SearchField as RASearchField,\n Input,\n Button as RAButton,\n Popover as RAPopover,\n ListBox,\n ListBoxItem,\n OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport { useOverlayTriggerState } from 'react-stately';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n SearchAutocompleteDefinition,\n SearchAutocompleteItemDefinition,\n} from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nimport type {\n SearchAutocompleteProps,\n SearchAutocompleteItemProps,\n} from './types';\n\nconst SearchAutocompleteEmptyState = () => {\n const { ownProps } = useDefinition(SearchAutocompleteDefinition, {});\n return <div className={ownProps.classes.emptyState}>No results found.</div>;\n};\n\n/**\n * A search input that shows a dropdown list of suggestions as the user types, with loading and empty states.\n *\n * @public\n */\nexport function SearchAutocomplete(props: SearchAutocompleteProps) {\n const { ownProps, dataAttributes } = useDefinition(\n SearchAutocompleteDefinition,\n props,\n );\n const {\n classes,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n inputValue,\n onInputChange,\n placeholder,\n popoverWidth,\n popoverPlacement = 'bottom start',\n children,\n isLoading,\n defaultOpen,\n style,\n } = ownProps;\n\n const triggerRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLElement | null>(null);\n const hasValue = !!inputValue;\n const hasChildren = Children.count(children) > 0;\n\n let liveMessage = '';\n if (isLoading) {\n liveMessage = 'Searching';\n } else if (hasValue && !hasChildren) {\n liveMessage = 'No results found';\n }\n const overlayState = useOverlayTriggerState({ defaultOpen });\n\n // Close on interact outside — same pattern as ComboBox.\n // isNonModal disables useOverlay's built-in useInteractOutside,\n // so we add our own that filters out clicks on the trigger.\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: e => {\n const target = e.target as Element;\n if (triggerRef.current?.contains(target)) {\n return;\n }\n overlayState.close();\n },\n isDisabled: !overlayState.isOpen,\n });\n\n return (\n <OverlayTriggerStateContext.Provider value={overlayState}>\n <Autocomplete\n inputValue={inputValue}\n onInputChange={value => {\n onInputChange?.(value);\n if (value) {\n overlayState.open();\n } else {\n overlayState.close();\n }\n }}\n >\n <RASearchField\n className={classes.searchField}\n aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : placeholder)}\n aria-labelledby={ariaLabelledBy}\n data-size={dataAttributes['data-size']}\n onKeyDown={e => {\n if (e.key === 'Enter' && !overlayState.isOpen && hasValue) {\n e.preventDefault();\n overlayState.open();\n }\n }}\n >\n <div\n ref={triggerRef}\n className={classes.root}\n {...dataAttributes}\n style={style}\n >\n <div aria-hidden=\"true\">\n <RiSearch2Line />\n </div>\n <Input\n className={classes.searchFieldInput}\n placeholder={placeholder}\n />\n <RAButton\n className={classes.searchFieldClear}\n style={{ visibility: hasValue ? 'visible' : 'hidden' }}\n >\n <RiCloseCircleLine />\n </RAButton>\n </div>\n </RASearchField>\n {/* isNonModal keeps the page interactive while the popover is open,\n required for virtual focus (aria-activedescendant) to work correctly */}\n <RAPopover\n ref={popoverRef}\n className={classes.popover}\n triggerRef={triggerRef}\n isNonModal\n placement={popoverPlacement}\n {...(popoverWidth ? { style: { width: popoverWidth } } : {})}\n >\n <BgReset>\n <Box bg=\"neutral\" className={classes.inner}>\n <ListBox\n className={classes.listBox}\n autoFocus=\"first\"\n shouldFocusOnHover\n aria-busy={isLoading || undefined}\n data-stale={isLoading || undefined}\n renderEmptyState={() =>\n isLoading ? (\n <div className={classes.loadingState}>Searching...</div>\n ) : (\n <SearchAutocompleteEmptyState />\n )\n }\n onAction={() => {\n overlayState.close();\n }}\n >\n {children}\n </ListBox>\n </Box>\n </BgReset>\n </RAPopover>\n <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n {liveMessage}\n </VisuallyHidden>\n </Autocomplete>\n </OverlayTriggerStateContext.Provider>\n );\n}\n\n/**\n * An individual option item within a SearchAutocomplete dropdown.\n *\n * @public\n */\nexport function SearchAutocompleteItem(props: SearchAutocompleteItemProps) {\n const { ownProps, restProps } = useDefinition(\n SearchAutocompleteItemDefinition,\n props,\n );\n const { classes, children } = ownProps;\n\n return (\n <ListBoxItem\n textValue={typeof children === 'string' ? children : undefined}\n className={classes.root}\n {...restProps}\n >\n <div className={classes.itemContent}>{children}</div>\n </ListBoxItem>\n );\n}\n"],"names":["RASearchField","RAButton","RAPopover"],"mappings":"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"}
|
|
@@ -40,7 +40,6 @@ const SearchAutocompleteDefinition = defineComponent()({
|
|
|
40
40
|
});
|
|
41
41
|
const SearchAutocompleteItemDefinition = defineComponent()({
|
|
42
42
|
styles,
|
|
43
|
-
resolveHref: true,
|
|
44
43
|
classNames: {
|
|
45
44
|
root: "bui-SearchAutocompleteItem",
|
|
46
45
|
itemContent: "bui-SearchAutocompleteItemContent"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/SearchAutocomplete/definition.ts"],"sourcesContent":["/*\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\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type {\n SearchAutocompleteOwnProps,\n SearchAutocompleteItemOwnProps,\n} from './types';\nimport styles from './SearchAutocomplete.module.css';\n\n/**\n * Component definition for SearchAutocomplete.\n * @public\n */\nexport const SearchAutocompleteDefinition =\n defineComponent<SearchAutocompleteOwnProps>()({\n styles,\n bg: 'consumer',\n classNames: {\n root: 'bui-SearchAutocomplete',\n searchField: 'bui-SearchAutocompleteSearchField',\n searchFieldInput: 'bui-SearchAutocompleteInput',\n searchFieldClear: 'bui-SearchAutocompleteClear',\n popover: 'bui-SearchAutocompletePopover',\n inner: 'bui-SearchAutocompleteInner',\n listBox: 'bui-SearchAutocompleteListBox',\n loadingState: 'bui-SearchAutocompleteLoadingState',\n emptyState: 'bui-SearchAutocompleteEmptyState',\n },\n propDefs: {\n 'aria-label': {},\n 'aria-labelledby': {},\n size: { dataAttribute: true, default: 'small' },\n placeholder: { default: 'Search' },\n inputValue: {},\n onInputChange: {},\n popoverWidth: {},\n popoverPlacement: {},\n children: {},\n isLoading: {},\n defaultOpen: {},\n className: {},\n style: {},\n },\n });\n\n/** @internal */\nexport const SearchAutocompleteItemDefinition =\n defineComponent<SearchAutocompleteItemOwnProps>()({\n styles,\n
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/SearchAutocomplete/definition.ts"],"sourcesContent":["/*\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\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type {\n SearchAutocompleteOwnProps,\n SearchAutocompleteItemOwnProps,\n} from './types';\nimport styles from './SearchAutocomplete.module.css';\n\n/**\n * Component definition for SearchAutocomplete.\n * @public\n */\nexport const SearchAutocompleteDefinition =\n defineComponent<SearchAutocompleteOwnProps>()({\n styles,\n bg: 'consumer',\n classNames: {\n root: 'bui-SearchAutocomplete',\n searchField: 'bui-SearchAutocompleteSearchField',\n searchFieldInput: 'bui-SearchAutocompleteInput',\n searchFieldClear: 'bui-SearchAutocompleteClear',\n popover: 'bui-SearchAutocompletePopover',\n inner: 'bui-SearchAutocompleteInner',\n listBox: 'bui-SearchAutocompleteListBox',\n loadingState: 'bui-SearchAutocompleteLoadingState',\n emptyState: 'bui-SearchAutocompleteEmptyState',\n },\n propDefs: {\n 'aria-label': {},\n 'aria-labelledby': {},\n size: { dataAttribute: true, default: 'small' },\n placeholder: { default: 'Search' },\n inputValue: {},\n onInputChange: {},\n popoverWidth: {},\n popoverPlacement: {},\n children: {},\n isLoading: {},\n defaultOpen: {},\n className: {},\n style: {},\n },\n });\n\n/** @internal */\nexport const SearchAutocompleteItemDefinition =\n defineComponent<SearchAutocompleteItemOwnProps>()({\n styles,\n classNames: {\n root: 'bui-SearchAutocompleteItem',\n itemContent: 'bui-SearchAutocompleteItemContent',\n },\n propDefs: {\n children: {},\n className: {},\n },\n });\n"],"names":[],"mappings":";;;;;;;;;;AA2BO,MAAM,4BAAA,GACX,iBAA4C,CAAE;AAAA,EAC5C,MAAA;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,wBAAA;AAAA,IACN,WAAA,EAAa,mCAAA;AAAA,IACb,gBAAA,EAAkB,6BAAA;AAAA,IAClB,gBAAA,EAAkB,6BAAA;AAAA,IAClB,OAAA,EAAS,+BAAA;AAAA,IACT,KAAA,EAAO,6BAAA;AAAA,IACP,OAAA,EAAS,+BAAA;AAAA,IACT,YAAA,EAAc,oCAAA;AAAA,IACd,UAAA,EAAY;AAAA,GACd;AAAA,EACA,QAAA,EAAU;AAAA,IACR,cAAc,EAAC;AAAA,IACf,mBAAmB,EAAC;AAAA,IACpB,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,WAAA,EAAa,EAAE,OAAA,EAAS,QAAA,EAAS;AAAA,IACjC,YAAY,EAAC;AAAA,IACb,eAAe,EAAC;AAAA,IAChB,cAAc,EAAC;AAAA,IACf,kBAAkB,EAAC;AAAA,IACnB,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,aAAa,EAAC;AAAA,IACd,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;AAGI,MAAM,gCAAA,GACX,iBAAgD,CAAE;AAAA,EAChD,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,4BAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect, useState, useRef } from 'react';\nimport {\n Input,\n SearchField as AriaSearchField,\n Button,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SearchFieldDefinition } from './definition';\n\nimport type { SearchFieldProps } from './types';\n\n/**\n * A text input optimized for search queries, with a built-in clear button, optional icon, and support for a collapsible mode.\n *\n * @public\n */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n (props, ref) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n SearchFieldDefinition,\n props,\n );\n const {\n classes,\n label,\n icon,\n secondaryLabel,\n placeholder,\n startCollapsed,\n description,\n } = ownProps;\n\n useEffect(() => {\n if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n console.warn(\n 'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n const [isFocused, setIsFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n const handleFocusChange = (isFocused: boolean) => {\n restProps.onFocusChange?.(isFocused);\n setIsFocused(isFocused);\n };\n\n const handleContainerClick = () => {\n inputRef.current?.focus();\n };\n\n const hasInputRef = !!inputRef.current;\n const hasValue = !!inputRef.current?.value;\n\n const isCollapsed = hasInputRef\n ? startCollapsed && !hasValue && !isFocused\n : startCollapsed &&\n !restProps.value &&\n !restProps.defaultValue &&\n !isFocused;\n\n return (\n <AriaSearchField\n className={classes.root}\n {...dataAttributes}\n data-collapsed={isCollapsed}\n {...restProps}\n onFocusChange={handleFocusChange}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <div\n className={classes.inputWrapper}\n data-size={dataAttributes['data-size']}\n onClick={handleContainerClick}\n >\n {icon !== false && (\n <div\n className={classes.inputIcon}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon || <RiSearch2Line />}\n </div>\n )}\n <Input\n ref={inputRef}\n className={classes.input}\n {...(icon !== false && { 'data-icon': true })}\n placeholder={placeholder}\n />\n <Button\n className={classes.clear}\n data-size={dataAttributes['data-size']}\n >\n <RiCloseCircleLine />\n </Button>\n </div>\n <FieldError />\n </AriaSearchField>\n );\n },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["isFocused","AriaSearchField"],"mappings":";;;;;;;;;;;AAmCO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,qBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,CAAC,SAAA,CAAU,YAAY,CAAA,IAAK,CAAC,SAAA,CAAU,iBAAiB,CAAA,EAAG;AACvE,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,CAAU,YAAY,CAAA,EAAG,SAAA,CAAU,iBAAiB,CAAC,CAAC,CAAA;AAEjE,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,IAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAG9C,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,MAAM,iBAAA,GAAoB,CAACA,UAAAA,KAAuB;AAChD,MAAA,SAAA,CAAU,gBAAgBA,UAAS,CAAA;AACnC,MAAA,YAAA,CAAaA,UAAS,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,IAC1B,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,CAAC,QAAA,CAAS,OAAA;AAC/B,IAAA,MAAM,QAAA,GAAW,CAAC,CAAC,QAAA,CAAS,OAAA,EAAS,KAAA;AAErC,IAAA,MAAM,WAAA,GAAc,WAAA,GAChB,cAAA,IAAkB,CAAC,YAAY,CAAC,SAAA,GAChC,cAAA,IACA,CAAC,SAAA,CAAU,KAAA,IACX,CAAC,SAAA,CAAU,gBACX,CAAC,SAAA;AAEL,IAAA,uBACE,IAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACJ,gBAAA,EAAgB,WAAA;AAAA,QACf,GAAG,SAAA;AAAA,QACJ,aAAA,EAAe,iBAAA;AAAA,QACf,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect, useState, useRef } from 'react';\nimport {\n Input,\n SearchField as AriaSearchField,\n Button,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SearchFieldDefinition } from './definition';\n\nimport type { SearchFieldProps } from './types';\n\n/**\n * A text input optimized for search queries, with a built-in clear button, optional icon, and support for a collapsible mode.\n *\n * @public\n */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n (props, ref) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n SearchFieldDefinition,\n props,\n );\n const {\n classes,\n label,\n icon,\n secondaryLabel,\n placeholder,\n startCollapsed,\n description,\n } = ownProps;\n\n useEffect(() => {\n if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n console.warn(\n 'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n const [isFocused, setIsFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n const handleFocusChange = (isFocused: boolean) => {\n restProps.onFocusChange?.(isFocused);\n setIsFocused(isFocused);\n };\n\n const handleContainerClick = () => {\n inputRef.current?.focus();\n };\n\n const hasInputRef = !!inputRef.current;\n const hasValue = !!inputRef.current?.value;\n\n const isCollapsed = hasInputRef\n ? startCollapsed && !hasValue && !isFocused\n : startCollapsed &&\n !restProps.value &&\n !restProps.defaultValue &&\n !isFocused;\n\n return (\n <AriaSearchField\n className={classes.root}\n {...dataAttributes}\n data-collapsed={isCollapsed}\n {...restProps}\n onFocusChange={handleFocusChange}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n descriptionSlot=\"description\"\n />\n <div\n className={classes.inputWrapper}\n data-size={dataAttributes['data-size']}\n onClick={handleContainerClick}\n >\n {icon !== false && (\n <div\n className={classes.inputIcon}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon || <RiSearch2Line />}\n </div>\n )}\n <Input\n ref={inputRef}\n className={classes.input}\n {...(icon !== false && { 'data-icon': true })}\n placeholder={placeholder}\n />\n <Button\n className={classes.clear}\n data-size={dataAttributes['data-size']}\n >\n <RiCloseCircleLine />\n </Button>\n </div>\n <FieldError />\n </AriaSearchField>\n );\n },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["isFocused","AriaSearchField"],"mappings":";;;;;;;;;;;AAmCO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,qBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,CAAC,SAAA,CAAU,YAAY,CAAA,IAAK,CAAC,SAAA,CAAU,iBAAiB,CAAA,EAAG;AACvE,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,CAAU,YAAY,CAAA,EAAG,SAAA,CAAU,iBAAiB,CAAC,CAAC,CAAA;AAEjE,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,IAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAG9C,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,MAAM,iBAAA,GAAoB,CAACA,UAAAA,KAAuB;AAChD,MAAA,SAAA,CAAU,gBAAgBA,UAAS,CAAA;AACnC,MAAA,YAAA,CAAaA,UAAS,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,IAC1B,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,CAAC,QAAA,CAAS,OAAA;AAC/B,IAAA,MAAM,QAAA,GAAW,CAAC,CAAC,QAAA,CAAS,OAAA,EAAS,KAAA;AAErC,IAAA,MAAM,WAAA,GAAc,WAAA,GAChB,cAAA,IAAkB,CAAC,YAAY,CAAC,SAAA,GAChC,cAAA,IACA,CAAC,SAAA,CAAU,KAAA,IACX,CAAC,SAAA,CAAU,gBACX,CAAC,SAAA;AAEL,IAAA,uBACE,IAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACJ,gBAAA,EAAgB,WAAA;AAAA,QACf,GAAG,SAAA;AAAA,QACJ,aAAA,EAAe,iBAAA;AAAA,QACf,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,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAA,CAAQ,YAAA;AAAA,cACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cACrC,OAAA,EAAS,oBAAA;AAAA,cAER,QAAA,EAAA;AAAA,gBAAA,IAAA,KAAS,KAAA,oBACR,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,SAAA;AAAA,oBACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA,IAAA,wBAAS,aAAA,EAAA,EAAc;AAAA;AAAA,iBAC1B;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,GAAA,EAAK,QAAA;AAAA,oBACL,WAAW,OAAA,CAAQ,KAAA;AAAA,oBAClB,GAAI,IAAA,KAAS,KAAA,IAAS,EAAE,aAAa,IAAA,EAAK;AAAA,oBAC3C;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,KAAA;AAAA,oBACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBAErC,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport { Select as AriaSelect, Popover } from 'react-aria-components';\nimport { SelectProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectDefinition } from './definition';\nimport { PopoverDefinition } from '../Popover/definition';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\n\n/**\n * A dropdown picker for selecting one or multiple options from a list, with optional search filtering and inline error display.\n *\n * @public\n */\nexport const Select = forwardRef<\n HTMLDivElement,\n SelectProps<'single' | 'multiple'>\n>((props, ref) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n SelectDefinition,\n {\n placeholder: 'Select an option',\n ...props,\n },\n );\n const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});\n\n const {\n classes,\n label,\n description,\n options,\n icon,\n searchable,\n searchPlaceholder,\n isRequired,\n secondaryLabel,\n } = 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 'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n return (\n <AriaSelect\n className={classes.root}\n {...dataAttributes}\n ref={ref}\n {...restProps}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <SelectTrigger icon={icon} />\n <FieldError />\n <Popover\n className={clsx(popoverOwnProps.classes.root, classes.popover)}\n {...dataAttributes}\n >\n <SelectContent\n searchable={searchable}\n searchPlaceholder={searchPlaceholder}\n options={options}\n />\n </Popover>\n </AriaSelect>\n );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":";;;;;;;;;;;;;;AAiCO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,gBAAA;AAAA,IACA;AAAA,MACE,WAAA,EAAa,kBAAA;AAAA,MACb,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,KAAoB,aAAA,CAAc,iBAAA,EAAmB,EAAE,CAAA;AAEzE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,EAAA,MAAM,kBAAA,GAAqB,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport { Select as AriaSelect, Popover } from 'react-aria-components';\nimport { SelectProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectDefinition } from './definition';\nimport { PopoverDefinition } from '../Popover/definition';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\n\n/**\n * A dropdown picker for selecting one or multiple options from a list, with optional search filtering and inline error display.\n *\n * @public\n */\nexport const Select = forwardRef<\n HTMLDivElement,\n SelectProps<'single' | 'multiple'>\n>((props, ref) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n SelectDefinition,\n {\n placeholder: 'Select an option',\n ...props,\n },\n );\n const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});\n\n const {\n classes,\n label,\n description,\n options,\n icon,\n searchable,\n searchPlaceholder,\n isRequired,\n secondaryLabel,\n } = 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 'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n return (\n <AriaSelect\n className={classes.root}\n {...dataAttributes}\n ref={ref}\n {...restProps}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n descriptionSlot=\"description\"\n />\n <SelectTrigger icon={icon} />\n <FieldError />\n <Popover\n className={clsx(popoverOwnProps.classes.root, classes.popover)}\n {...dataAttributes}\n >\n <SelectContent\n searchable={searchable}\n searchPlaceholder={searchPlaceholder}\n options={options}\n />\n </Popover>\n </AriaSelect>\n );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":";;;;;;;;;;;;;;AAiCO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,gBAAA;AAAA,IACA;AAAA,MACE,WAAA,EAAa,kBAAA;AAAA,MACb,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,KAAoB,aAAA,CAAc,iBAAA,EAAmB,EAAE,CAAA;AAEzE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,EAAA,MAAM,kBAAA,GAAqB,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB,WAAA;AAAA,YACA,eAAA,EAAgB;AAAA;AAAA,SAClB;AAAA,wBACA,GAAA,CAAC,iBAAc,IAAA,EAAY,CAAA;AAAA,4BAC1B,UAAA,EAAA,EAAW,CAAA;AAAA,wBACZ,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,eAAA,CAAgB,OAAA,CAAQ,IAAA,EAAM,QAAQ,OAAO,CAAA;AAAA,YAC5D,GAAG,cAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,iBAAA;AAAA,gBACA;AAAA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useId } from 'react-aria';
|
|
3
3
|
import { ResizableTableContainer, Virtualizer } from 'react-aria-components';
|
|
4
|
-
import { TableLayout } from '
|
|
4
|
+
import { TableLayout } from 'react-stately';
|
|
5
5
|
import { useDefinition } from '../../../hooks/useDefinition/useDefinition.esm.js';
|
|
6
6
|
import { TableWrapperDefinition } from '../definition.esm.js';
|
|
7
7
|
import { TableRoot } from './TableRoot.esm.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 { useId } from 'react-aria';\nimport {\n type Key,\n ResizableTableContainer,\n Virtualizer,\n} from 'react-aria-components';\nimport { TableLayout } from '@react-stately/layout';\nimport { useDefinition } from '../../../hooks/useDefinition';\nimport { TableWrapperDefinition } from '../definition';\nimport { TableRoot } from './TableRoot';\nimport { TableHeader } from './TableHeader';\nimport { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Column } from './Column';\nimport { TablePagination } from '../../TablePagination';\nimport type {\n TableProps,\n TableItem,\n RowConfig,\n RowRenderFn,\n TablePaginationType,\n} from '../types';\nimport { useMemo } from 'react';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { Flex } from '../../Flex';\nimport { TableBodySkeleton } from './TableBodySkeleton';\n\nfunction isRowRenderFn<T extends TableItem>(\n rowConfig: RowConfig<T> | RowRenderFn<T> | undefined,\n): rowConfig is RowRenderFn<T> {\n return typeof rowConfig === 'function';\n}\n\nfunction useDisabledRows<T extends TableItem>({\n data,\n rowConfig,\n}: Pick<TableProps<T>, 'data' | 'rowConfig'>): Set<Key> | undefined {\n return useMemo(() => {\n if (!data || typeof rowConfig === 'function' || !rowConfig?.getIsDisabled) {\n return;\n }\n\n return data.reduce<Set<Key>>((set, item) => {\n const isDisabled = rowConfig.getIsDisabled?.(item);\n if (isDisabled) {\n set.add(String(item.id));\n }\n return set;\n }, new Set<Key>());\n }, [data, rowConfig]);\n}\n\nfunction useLiveRegionLabel(\n pagination: TablePaginationType,\n isStale: boolean,\n isLoading: boolean,\n hasData: boolean,\n): string {\n if (isLoading) {\n return 'Loading table data.';\n }\n\n if (!hasData || pagination.type === 'none') {\n return '';\n }\n\n const { pageSize, offset, totalCount, getLabel } = pagination;\n\n if (isStale) {\n return 'Loading table data.';\n }\n\n let liveRegionLabel = 'Table page loaded. ';\n\n if (getLabel) {\n liveRegionLabel += getLabel({ pageSize, offset, totalCount });\n } else if (offset !== undefined) {\n const fromCount = offset + 1;\n const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;\n }\n return liveRegionLabel;\n}\n\n/**\n * A full-featured data table with built-in pagination, sorting, row selection, loading and error states, and optional virtualization.\n * Pair with `useTable` to manage data fetching and state, or pass `data`, `columnConfig`, and `pagination` directly for manual control.\n *\n * @public\n */\nexport function Table<T extends TableItem>({\n columnConfig,\n data,\n loading = false,\n isStale = false,\n error,\n pagination,\n sort,\n rowConfig,\n selection,\n emptyState,\n className,\n style,\n virtualized,\n}: TableProps<T>) {\n const {\n ownProps: { classes },\n } = useDefinition(TableWrapperDefinition, { className });\n const liveRegionId = useId();\n\n const visibleColumns = useMemo(\n () => columnConfig.filter(col => !col.isHidden),\n [columnConfig],\n );\n const disabledRows = useDisabledRows({ data, rowConfig });\n\n const {\n mode: selectionMode,\n selected: selectedKeys,\n behavior: selectionBehavior,\n onSelectionChange,\n } = selection || {};\n\n const isInitialLoading = loading && !data;\n\n if (error) {\n return (\n <div className={classes.root} style={style}>\n Error: {error.message}\n </div>\n );\n }\n\n const liveRegionLabel = useLiveRegionLabel(\n pagination,\n isStale,\n isInitialLoading,\n data !== undefined,\n );\n\n const manualColumnSizing = columnConfig.some(\n col =>\n col.width != null ||\n col.minWidth != null ||\n col.maxWidth != null ||\n col.defaultWidth != null,\n );\n\n const wrapResizable = manualColumnSizing\n ? (elem: React.ReactNode) => (\n <ResizableTableContainer className={classes.resizableContainer}>\n {elem}\n </ResizableTableContainer>\n )\n : (elem: React.ReactNode) => <>{elem}</>;\n\n const layoutOptions =\n typeof virtualized === 'object' ? virtualized : undefined;\n\n const wrapVirtualized = (elem: React.ReactNode) =>\n virtualized ? (\n <Virtualizer layout={TableLayout} layoutOptions={layoutOptions}>\n {elem}\n </Virtualizer>\n ) : (\n elem\n );\n\n return (\n <div className={classes.root} style={style}>\n <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n {liveRegionLabel}\n </VisuallyHidden>\n {wrapResizable(\n wrapVirtualized(\n <TableRoot\n {...(isInitialLoading\n ? {}\n : {\n selectionMode,\n selectionBehavior,\n selectedKeys,\n onSelectionChange,\n })}\n sortDescriptor={sort?.descriptor ?? undefined}\n onSortChange={sort?.onSortChange}\n disabledKeys={disabledRows}\n stale={isStale}\n loading={isInitialLoading}\n aria-describedby={liveRegionId}\n >\n <TableHeader columns={visibleColumns}>\n {column =>\n column.header ? (\n column.header()\n ) : (\n <Column\n id={column.id}\n isRowHeader={column.isRowHeader}\n allowsSorting={column.isSortable}\n width={column.width}\n defaultWidth={column.defaultWidth}\n minWidth={column.minWidth}\n maxWidth={column.maxWidth}\n >\n {column.label}\n </Column>\n )\n }\n </TableHeader>\n {isInitialLoading ? (\n <TableBodySkeleton columns={visibleColumns} />\n ) : (\n <TableBody\n items={data}\n dependencies={[visibleColumns]}\n renderEmptyState={\n emptyState ? () => <Flex p=\"3\">{emptyState}</Flex> : undefined\n }\n >\n {item => {\n const itemIndex = data?.indexOf(item) ?? -1;\n\n if (isRowRenderFn(rowConfig)) {\n return rowConfig({\n item,\n index: itemIndex,\n });\n }\n\n return (\n <Row\n id={String(item.id)}\n columns={visibleColumns}\n href={rowConfig?.getHref?.(item)}\n onAction={\n rowConfig?.onClick\n ? () => rowConfig?.onClick?.(item)\n : undefined\n }\n >\n {column => column.cell(item)}\n </Row>\n );\n }}\n </TableBody>\n )}\n </TableRoot>,\n ),\n )}\n {pagination.type === 'page' && (\n <TablePagination\n pageSize={pagination.pageSize}\n pageSizeOptions={pagination.pageSizeOptions}\n offset={pagination.offset}\n totalCount={pagination.totalCount}\n hasNextPage={pagination.hasNextPage}\n hasPreviousPage={pagination.hasPreviousPage}\n onNextPage={pagination.onNextPage}\n onPreviousPage={pagination.onPreviousPage}\n onPageSizeChange={pagination.onPageSizeChange}\n showPageSizeOptions={pagination.showPageSizeOptions}\n getLabel={pagination.getLabel}\n showPaginationLabel={pagination.showPaginationLabel}\n />\n )}\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 { useId } from 'react-aria';\nimport {\n type Key,\n ResizableTableContainer,\n Virtualizer,\n} from 'react-aria-components';\nimport { TableLayout } from 'react-stately';\nimport { useDefinition } from '../../../hooks/useDefinition';\nimport { TableWrapperDefinition } from '../definition';\nimport { TableRoot } from './TableRoot';\nimport { TableHeader } from './TableHeader';\nimport { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Column } from './Column';\nimport { TablePagination } from '../../TablePagination';\nimport type {\n TableProps,\n TableItem,\n RowConfig,\n RowRenderFn,\n TablePaginationType,\n} from '../types';\nimport { useMemo } from 'react';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { Flex } from '../../Flex';\nimport { TableBodySkeleton } from './TableBodySkeleton';\n\nfunction isRowRenderFn<T extends TableItem>(\n rowConfig: RowConfig<T> | RowRenderFn<T> | undefined,\n): rowConfig is RowRenderFn<T> {\n return typeof rowConfig === 'function';\n}\n\nfunction useDisabledRows<T extends TableItem>({\n data,\n rowConfig,\n}: Pick<TableProps<T>, 'data' | 'rowConfig'>): Set<Key> | undefined {\n return useMemo(() => {\n if (!data || typeof rowConfig === 'function' || !rowConfig?.getIsDisabled) {\n return;\n }\n\n return data.reduce<Set<Key>>((set, item) => {\n const isDisabled = rowConfig.getIsDisabled?.(item);\n if (isDisabled) {\n set.add(String(item.id));\n }\n return set;\n }, new Set<Key>());\n }, [data, rowConfig]);\n}\n\nfunction useLiveRegionLabel(\n pagination: TablePaginationType,\n isStale: boolean,\n isLoading: boolean,\n hasData: boolean,\n): string {\n if (isLoading) {\n return 'Loading table data.';\n }\n\n if (!hasData || pagination.type === 'none') {\n return '';\n }\n\n const { pageSize, offset, totalCount, getLabel } = pagination;\n\n if (isStale) {\n return 'Loading table data.';\n }\n\n let liveRegionLabel = 'Table page loaded. ';\n\n if (getLabel) {\n liveRegionLabel += getLabel({ pageSize, offset, totalCount });\n } else if (offset !== undefined) {\n const fromCount = offset + 1;\n const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;\n }\n return liveRegionLabel;\n}\n\n/**\n * A full-featured data table with built-in pagination, sorting, row selection, loading and error states, and optional virtualization.\n * Pair with `useTable` to manage data fetching and state, or pass `data`, `columnConfig`, and `pagination` directly for manual control.\n *\n * @public\n */\nexport function Table<T extends TableItem>({\n columnConfig,\n data,\n loading = false,\n isStale = false,\n error,\n pagination,\n sort,\n rowConfig,\n selection,\n emptyState,\n className,\n style,\n virtualized,\n}: TableProps<T>) {\n const {\n ownProps: { classes },\n } = useDefinition(TableWrapperDefinition, { className });\n const liveRegionId = useId();\n\n const visibleColumns = useMemo(\n () => columnConfig.filter(col => !col.isHidden),\n [columnConfig],\n );\n const disabledRows = useDisabledRows({ data, rowConfig });\n\n const {\n mode: selectionMode,\n selected: selectedKeys,\n behavior: selectionBehavior,\n onSelectionChange,\n } = selection || {};\n\n const isInitialLoading = loading && !data;\n\n if (error) {\n return (\n <div className={classes.root} style={style}>\n Error: {error.message}\n </div>\n );\n }\n\n const liveRegionLabel = useLiveRegionLabel(\n pagination,\n isStale,\n isInitialLoading,\n data !== undefined,\n );\n\n const manualColumnSizing = columnConfig.some(\n col =>\n col.width != null ||\n col.minWidth != null ||\n col.maxWidth != null ||\n col.defaultWidth != null,\n );\n\n const wrapResizable = manualColumnSizing\n ? (elem: React.ReactNode) => (\n <ResizableTableContainer className={classes.resizableContainer}>\n {elem}\n </ResizableTableContainer>\n )\n : (elem: React.ReactNode) => <>{elem}</>;\n\n const layoutOptions =\n typeof virtualized === 'object' ? virtualized : undefined;\n\n const wrapVirtualized = (elem: React.ReactNode) =>\n virtualized ? (\n <Virtualizer layout={TableLayout} layoutOptions={layoutOptions}>\n {elem}\n </Virtualizer>\n ) : (\n elem\n );\n\n return (\n <div className={classes.root} style={style}>\n <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n {liveRegionLabel}\n </VisuallyHidden>\n {wrapResizable(\n wrapVirtualized(\n <TableRoot\n {...(isInitialLoading\n ? {}\n : {\n selectionMode,\n selectionBehavior,\n selectedKeys,\n onSelectionChange,\n })}\n sortDescriptor={sort?.descriptor ?? undefined}\n onSortChange={sort?.onSortChange}\n disabledKeys={disabledRows}\n stale={isStale}\n loading={isInitialLoading}\n aria-describedby={liveRegionId}\n >\n <TableHeader columns={visibleColumns}>\n {column =>\n column.header ? (\n column.header()\n ) : (\n <Column\n id={column.id}\n isRowHeader={column.isRowHeader}\n allowsSorting={column.isSortable}\n width={column.width}\n defaultWidth={column.defaultWidth}\n minWidth={column.minWidth}\n maxWidth={column.maxWidth}\n >\n {column.label}\n </Column>\n )\n }\n </TableHeader>\n {isInitialLoading ? (\n <TableBodySkeleton columns={visibleColumns} />\n ) : (\n <TableBody\n items={data}\n dependencies={[visibleColumns]}\n renderEmptyState={\n emptyState ? () => <Flex p=\"3\">{emptyState}</Flex> : undefined\n }\n >\n {item => {\n const itemIndex = data?.indexOf(item) ?? -1;\n\n if (isRowRenderFn(rowConfig)) {\n return rowConfig({\n item,\n index: itemIndex,\n });\n }\n\n return (\n <Row\n id={String(item.id)}\n columns={visibleColumns}\n href={rowConfig?.getHref?.(item)}\n onAction={\n rowConfig?.onClick\n ? () => rowConfig?.onClick?.(item)\n : undefined\n }\n >\n {column => column.cell(item)}\n </Row>\n );\n }}\n </TableBody>\n )}\n </TableRoot>,\n ),\n )}\n {pagination.type === 'page' && (\n <TablePagination\n pageSize={pagination.pageSize}\n pageSizeOptions={pagination.pageSizeOptions}\n offset={pagination.offset}\n totalCount={pagination.totalCount}\n hasNextPage={pagination.hasNextPage}\n hasPreviousPage={pagination.hasPreviousPage}\n onNextPage={pagination.onNextPage}\n onPreviousPage={pagination.onPreviousPage}\n onPageSizeChange={pagination.onPageSizeChange}\n showPageSizeOptions={pagination.showPageSizeOptions}\n getLabel={pagination.getLabel}\n showPaginationLabel={pagination.showPaginationLabel}\n />\n )}\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -14,13 +14,14 @@ import '../../Skeleton/Skeleton.module.css.esm.js';
|
|
|
14
14
|
const SKELETON_ROW_COUNT = 5;
|
|
15
15
|
const SKELETON_WIDTHS = ["75%", "50%", "60%", "45%", "70%"];
|
|
16
16
|
const skeletonItems = Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => ({
|
|
17
|
-
id: `skeleton-${i}
|
|
17
|
+
id: `skeleton-${i}`,
|
|
18
|
+
index: i
|
|
18
19
|
}));
|
|
19
20
|
function TableBodySkeleton({
|
|
20
21
|
columns
|
|
21
22
|
}) {
|
|
22
23
|
return /* @__PURE__ */ jsx(TableBody, { items: skeletonItems, dependencies: [columns], children: (item) => {
|
|
23
|
-
const rowIndex =
|
|
24
|
+
const rowIndex = item.index;
|
|
24
25
|
return /* @__PURE__ */ jsx(Row, { id: item.id, columns, children: (column) => /* @__PURE__ */ jsx(Cell, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
25
26
|
Skeleton,
|
|
26
27
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBodySkeleton.esm.js","sources":["../../../../src/components/Table/components/TableBodySkeleton.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 { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Cell } from './Cell';\nimport { Skeleton } from '../../Skeleton';\
|
|
1
|
+
{"version":3,"file":"TableBodySkeleton.esm.js","sources":["../../../../src/components/Table/components/TableBodySkeleton.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 { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Cell } from './Cell';\nimport { Skeleton } from '../../Skeleton';\n\nconst SKELETON_ROW_COUNT = 5;\nconst SKELETON_WIDTHS = ['75%', '50%', '60%', '45%', '70%'];\n\nconst skeletonItems = Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => ({\n id: `skeleton-${i}`,\n index: i,\n}));\n\n/**\n * A table body that renders animated skeleton rows as a loading placeholder.\n *\n * @remarks\n * Accepts any column array whose items have an `id` property, making it\n * compatible with both `ColumnConfig` and custom column types.\n *\n * @public\n */\nexport function TableBodySkeleton<T extends { id: string }>({\n columns,\n}: {\n columns: readonly T[];\n}) {\n return (\n <TableBody items={skeletonItems} dependencies={[columns]}>\n {item => {\n const rowIndex = item.index;\n return (\n <Row id={item.id} columns={columns}>\n {column => (\n <Cell key={column.id} aria-hidden=\"true\">\n <Skeleton\n width={\n SKELETON_WIDTHS[\n (rowIndex + columns.indexOf(column)) %\n SKELETON_WIDTHS.length\n ]\n }\n />\n </Cell>\n )}\n </Row>\n );\n }}\n </TableBody>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,kBAAA,GAAqB,CAAA;AAC3B,MAAM,kBAAkB,CAAC,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AAE1D,MAAM,aAAA,GAAgB,MAAM,IAAA,CAAK,EAAE,QAAQ,kBAAA,EAAmB,EAAG,CAAC,CAAA,EAAG,CAAA,MAAO;AAAA,EAC1E,EAAA,EAAI,YAAY,CAAC,CAAA,CAAA;AAAA,EACjB,KAAA,EAAO;AACT,CAAA,CAAE,CAAA;AAWK,SAAS,iBAAA,CAA4C;AAAA,EAC1D;AACF,CAAA,EAEG;AACD,EAAA,uBACE,GAAA,CAAC,aAAU,KAAA,EAAO,aAAA,EAAe,cAAc,CAAC,OAAO,GACpD,QAAA,EAAA,CAAA,IAAA,KAAQ;AACP,IAAA,MAAM,WAAW,IAAA,CAAK,KAAA;AACtB,IAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,IAAA,CAAK,EAAA,EAAI,SACf,QAAA,EAAA,CAAA,MAAA,qBACC,GAAA,CAAC,IAAA,EAAA,EAAqB,aAAA,EAAY,MAAA,EAChC,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA,EACE,iBACG,QAAA,GAAW,OAAA,CAAQ,QAAQ,MAAM,CAAA,IAChC,gBAAgB,MACpB;AAAA;AAAA,KAEJ,EAAA,EARS,MAAA,CAAO,EASlB,CAAA,EAEJ,CAAA;AAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -48,7 +48,6 @@ const TableBodyDefinition = defineComponent()({
|
|
|
48
48
|
});
|
|
49
49
|
const RowDefinition = defineComponent()({
|
|
50
50
|
styles,
|
|
51
|
-
resolveHref: true,
|
|
52
51
|
analytics: true,
|
|
53
52
|
bg: "consumer",
|
|
54
53
|
classNames: {
|
|
@@ -87,7 +86,6 @@ const CellDefinition = defineComponent()({
|
|
|
87
86
|
});
|
|
88
87
|
const CellTextDefinition = defineComponent()({
|
|
89
88
|
styles,
|
|
90
|
-
resolveHref: true,
|
|
91
89
|
classNames: {
|
|
92
90
|
root: "bui-TableCell",
|
|
93
91
|
cellContentWrapper: "bui-TableCellContentWrapper",
|
|
@@ -105,7 +103,6 @@ const CellTextDefinition = defineComponent()({
|
|
|
105
103
|
});
|
|
106
104
|
const CellProfileDefinition = defineComponent()({
|
|
107
105
|
styles,
|
|
108
|
-
resolveHref: true,
|
|
109
106
|
classNames: {
|
|
110
107
|
root: "bui-TableCell",
|
|
111
108
|
cellContentWrapper: "bui-TableCellContentWrapper",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Table/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 TableRootOwnProps,\n TableHeaderOwnProps,\n TableBodyOwnProps,\n RowOwnProps,\n ColumnOwnProps,\n CellOwnProps,\n CellTextOwnProps,\n CellProfileOwnProps,\n} from './types';\nimport styles from './Table.module.css';\n\n/** @internal */\nexport const TableWrapperDefinition = defineComponent<{\n className?: string;\n}>()({\n styles,\n classNames: {\n root: 'bui-TableWrapper',\n resizableContainer: 'bui-TableResizableContainer',\n },\n propDefs: {\n className: {},\n },\n});\n\n/**\n * Component definition for Table\n * @public\n */\nexport const TableDefinition = defineComponent<TableRootOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Table',\n },\n propDefs: {\n stale: { dataAttribute: true },\n loading: { dataAttribute: true },\n },\n});\n\n/**\n * Component definition for TableHeader\n * @internal\n */\nexport const TableHeaderDefinition = defineComponent<TableHeaderOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableHeader',\n headSelection: 'bui-TableHeadSelection',\n },\n propDefs: {\n columns: {},\n children: {},\n },\n});\n\n/**\n * Component definition for TableBody\n * @internal\n */\nexport const TableBodyDefinition = defineComponent<TableBodyOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableBody',\n },\n propDefs: {},\n});\n\n/**\n * Component definition for Row\n * @internal\n */\nexport const RowDefinition = defineComponent<RowOwnProps>()({\n styles,\n
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Table/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 TableRootOwnProps,\n TableHeaderOwnProps,\n TableBodyOwnProps,\n RowOwnProps,\n ColumnOwnProps,\n CellOwnProps,\n CellTextOwnProps,\n CellProfileOwnProps,\n} from './types';\nimport styles from './Table.module.css';\n\n/** @internal */\nexport const TableWrapperDefinition = defineComponent<{\n className?: string;\n}>()({\n styles,\n classNames: {\n root: 'bui-TableWrapper',\n resizableContainer: 'bui-TableResizableContainer',\n },\n propDefs: {\n className: {},\n },\n});\n\n/**\n * Component definition for Table\n * @public\n */\nexport const TableDefinition = defineComponent<TableRootOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Table',\n },\n propDefs: {\n stale: { dataAttribute: true },\n loading: { dataAttribute: true },\n },\n});\n\n/**\n * Component definition for TableHeader\n * @internal\n */\nexport const TableHeaderDefinition = defineComponent<TableHeaderOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableHeader',\n headSelection: 'bui-TableHeadSelection',\n },\n propDefs: {\n columns: {},\n children: {},\n },\n});\n\n/**\n * Component definition for TableBody\n * @internal\n */\nexport const TableBodyDefinition = defineComponent<TableBodyOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableBody',\n },\n propDefs: {},\n});\n\n/**\n * Component definition for Row\n * @internal\n */\nexport const RowDefinition = defineComponent<RowOwnProps>()({\n styles,\n analytics: true,\n bg: 'consumer',\n classNames: {\n root: 'bui-TableRow',\n cell: 'bui-TableCell',\n cellSelection: 'bui-TableCellSelection',\n },\n propDefs: {\n columns: {},\n children: {},\n href: {},\n noTrack: {},\n },\n});\n\n/**\n * Component definition for Column\n * @internal\n */\nexport const ColumnDefinition = defineComponent<ColumnOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableHead',\n headContent: 'bui-TableHeadContent',\n headLabel: 'bui-TableHeadLabel',\n headSortButton: 'bui-TableHeadSortButton',\n },\n propDefs: {\n children: {},\n className: {},\n },\n});\n\n/**\n * Component definition for Cell\n * @internal\n */\nexport const CellDefinition = defineComponent<CellOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableCell',\n },\n propDefs: {\n className: {},\n },\n});\n\n/**\n * Component definition for CellText\n * @internal\n */\nexport const CellTextDefinition = defineComponent<CellTextOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableCell',\n cellContentWrapper: 'bui-TableCellContentWrapper',\n cellContent: 'bui-TableCellContent',\n cellIcon: 'bui-TableCellIcon',\n },\n propDefs: {\n title: {},\n description: {},\n color: { default: 'primary' },\n leadingIcon: {},\n href: {},\n className: {},\n },\n});\n\n/**\n * Component definition for CellProfile\n * @internal\n */\nexport const CellProfileDefinition = defineComponent<CellProfileOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TableCell',\n cellContentWrapper: 'bui-TableCellContentWrapper',\n cellContent: 'bui-TableCellContent',\n },\n propDefs: {\n src: {},\n name: {},\n href: {},\n description: {},\n color: { default: 'primary' },\n className: {},\n },\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tabs/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 TabsOwnProps,\n TabListOwnProps,\n TabOwnProps,\n TabPanelOwnProps,\n TabsIndicatorsOwnProps,\n} from './types';\nimport styles from './Tabs.module.css';\n\n/**\n * Component definition for Tabs\n * @public\n */\nexport const TabsDefinition = defineComponent<TabsOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Tabs',\n },\n propDefs: {\n className: {},\n children: {},\n },\n});\n\n/** @internal */\nexport const TabListDefinition = defineComponent<TabListOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TabListWrapper',\n tabList: 'bui-TabList',\n },\n propDefs: {\n className: {},\n children: {},\n },\n});\n\n/** @internal */\nexport const TabDefinition = defineComponent<TabOwnProps>()({\n styles,\n
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tabs/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 TabsOwnProps,\n TabListOwnProps,\n TabOwnProps,\n TabPanelOwnProps,\n TabsIndicatorsOwnProps,\n} from './types';\nimport styles from './Tabs.module.css';\n\n/**\n * Component definition for Tabs\n * @public\n */\nexport const TabsDefinition = defineComponent<TabsOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Tabs',\n },\n propDefs: {\n className: {},\n children: {},\n },\n});\n\n/** @internal */\nexport const TabListDefinition = defineComponent<TabListOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TabListWrapper',\n tabList: 'bui-TabList',\n },\n propDefs: {\n className: {},\n children: {},\n },\n});\n\n/** @internal */\nexport const TabDefinition = defineComponent<TabOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Tab',\n },\n analytics: true,\n propDefs: {\n className: {},\n matchStrategy: {},\n href: {},\n id: {},\n noTrack: {},\n },\n});\n\n/** @internal */\nexport const TabPanelDefinition = defineComponent<TabPanelOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TabPanel',\n },\n propDefs: {\n className: {},\n },\n});\n\n/** @internal */\nexport const TabsIndicatorsDefinition =\n defineComponent<TabsIndicatorsOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TabActive',\n hovered: 'bui-TabHovered',\n },\n propDefs: {\n tabRefs: {},\n tabsRef: {},\n hoveredKey: {},\n prevHoveredKey: {},\n },\n });\n"],"names":[],"mappings":";;;;;;;;;;AA8BO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU;AAAC;AAEf,CAAC;AAGM,MAAM,iBAAA,GAAoB,iBAAiC,CAAE;AAAA,EAClE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,oBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU;AAAC;AAEf,CAAC;AAGM,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,SAAA,EAAW,IAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,IAAI,EAAC;AAAA,IACL,SAAS;AAAC;AAEd,CAAC;AAGM,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,gBAAgB;AAAC;AAErB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TagGroup/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 { TagGroupOwnProps, TagOwnProps } from './types';\nimport styles from './TagGroup.module.css';\n\n/**\n * Component definition for TagGroup\n * @public\n */\nexport const TagGroupDefinition = defineComponent<TagGroupOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TagGroup',\n list: 'bui-TagList',\n },\n propDefs: {\n items: {},\n children: {},\n renderEmptyState: {},\n className: {},\n },\n});\n\n/** @internal */\nexport const TagDefinition = defineComponent<TagOwnProps>()({\n styles,\n
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TagGroup/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 { TagGroupOwnProps, TagOwnProps } from './types';\nimport styles from './TagGroup.module.css';\n\n/**\n * Component definition for TagGroup\n * @public\n */\nexport const TagGroupDefinition = defineComponent<TagGroupOwnProps>()({\n styles,\n classNames: {\n root: 'bui-TagGroup',\n list: 'bui-TagList',\n },\n propDefs: {\n items: {},\n children: {},\n renderEmptyState: {},\n className: {},\n },\n});\n\n/** @internal */\nexport const TagDefinition = defineComponent<TagOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Tag',\n icon: 'bui-TagIcon',\n removeButton: 'bui-TagRemoveButton',\n },\n analytics: true,\n propDefs: {\n noTrack: {},\n icon: {},\n size: { dataAttribute: true, default: 'small' },\n href: {},\n children: {},\n className: {},\n },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,UAAU,EAAC;AAAA,IACX,kBAAkB,EAAC;AAAA,IACnB,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM,aAAA;AAAA,IACN,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,SAAA,EAAW,IAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,MAAM,EAAC;AAAA,IACP,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,MAAM,EAAC;AAAA,IACP,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TextDefinition } from './definition';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n props: TextProps<T>,\n ref: React.Ref<any>,\n) {\n
|
|
1
|
+
{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TextDefinition } from './definition';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n props: TextProps<T>,\n ref: React.Ref<any>,\n) {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n TextDefinition,\n props,\n );\n const { classes, as } = ownProps;\n\n const Component = as;\n\n return (\n <Component\n ref={ref}\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n />\n );\n}\n\nTextComponent.displayName = 'Text';\n\n/**\n * A typographic primitive that renders text with design system variants, weights, and colors, and can render as any HTML element.\n *\n * @public\n */\nexport const Text = forwardRef(TextComponent) as {\n <T extends ElementType = 'p'>(\n props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n ): React.ReactElement<TextProps<T>, T>;\n displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,EAAA,EAAG,GAAI,QAAA;AAExB,EAAA,MAAM,SAAA,GAAY,EAAA;AAElB,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAOrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.esm.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport { Input, TextField as AriaTextField } from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport type { TextFieldProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TextFieldDefinition } from './definition';\n\n/**\n * A single-line text input with an integrated label, optional icon, and inline error display.\n *\n * @public\n */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n (props, ref) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n TextFieldDefinition,\n props,\n );\n const { classes, label, icon, secondaryLabel, placeholder, description } =\n ownProps;\n\n useEffect(() => {\n if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n console.warn(\n 'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n return (\n <AriaTextField\n className={classes.root}\n {...dataAttributes}\n {...restProps}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <div\n className={classes.inputWrapper}\n data-size={dataAttributes['data-size']}\n >\n {icon && (\n <div\n className={classes.inputIcon}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon}\n </div>\n )}\n <Input\n className={classes.input}\n {...(icon && { 'data-icon': true })}\n placeholder={placeholder}\n />\n </div>\n <FieldError />\n </AriaTextField>\n );\n },\n);\n\nTextField.displayName = 'TextField';\n"],"names":["AriaTextField"],"mappings":";;;;;;;;;;AA6BO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,mBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,cAAA,EAAgB,WAAA,EAAa,aAAY,GACrE,QAAA;AAEF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,CAAC,SAAA,CAAU,YAAY,CAAA,IAAK,CAAC,SAAA,CAAU,iBAAiB,CAAA,EAAG;AACvE,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,CAAU,YAAY,CAAA,EAAG,SAAA,CAAU,iBAAiB,CAAC,CAAC,CAAA;AAGjE,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,uBACE,IAAA;AAAA,MAACA,WAAA;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;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"TextField.esm.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport { Input, TextField as AriaTextField } from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport type { TextFieldProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TextFieldDefinition } from './definition';\n\n/**\n * A single-line text input with an integrated label, optional icon, and inline error display.\n *\n * @public\n */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n (props, ref) => {\n const { ownProps, restProps, dataAttributes } = useDefinition(\n TextFieldDefinition,\n props,\n );\n const { classes, label, icon, secondaryLabel, placeholder, description } =\n ownProps;\n\n useEffect(() => {\n if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n console.warn(\n 'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n return (\n <AriaTextField\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 <div\n className={classes.inputWrapper}\n data-size={dataAttributes['data-size']}\n >\n {icon && (\n <div\n className={classes.inputIcon}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon}\n </div>\n )}\n <Input\n className={classes.input}\n {...(icon && { 'data-icon': true })}\n placeholder={placeholder}\n />\n </div>\n <FieldError />\n </AriaTextField>\n );\n },\n);\n\nTextField.displayName = 'TextField';\n"],"names":["AriaTextField"],"mappings":";;;;;;;;;;AA6BO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,mBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,cAAA,EAAgB,WAAA,EAAa,aAAY,GACrE,QAAA;AAEF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,CAAC,SAAA,CAAU,YAAY,CAAA,IAAK,CAAC,SAAA,CAAU,iBAAiB,CAAA,EAAG;AACvE,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,CAAU,YAAY,CAAA,EAAG,SAAA,CAAU,iBAAiB,CAAC,CAAC,CAAA;AAGjE,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,uBACE,IAAA;AAAA,MAACA,WAAA;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,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAA,CAAQ,YAAA;AAAA,cACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,SAAA;AAAA,oBACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,KAAA;AAAA,oBAClB,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}
|
|
@@ -9,13 +9,11 @@ import { useInRouterContext, useHref } from 'react-router-dom';
|
|
|
9
9
|
function useDefinition(definition, props, options) {
|
|
10
10
|
const { breakpoint } = useBreakpoint();
|
|
11
11
|
let hrefResolvedProps = props;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
hrefResolvedProps = { ...props, href: absoluteHref };
|
|
18
|
-
}
|
|
12
|
+
const hasRouter = useInRouterContext();
|
|
13
|
+
if (hasRouter) {
|
|
14
|
+
const absoluteHref = useHref(props.href ?? "");
|
|
15
|
+
if (props.href !== void 0) {
|
|
16
|
+
hrefResolvedProps = { ...props, href: absoluteHref };
|
|
19
17
|
}
|
|
20
18
|
}
|
|
21
19
|
const { ownPropsResolved, restProps } = resolveDefinitionProps(
|
|
@@ -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 { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport { useAnalytics } from '../../analytics/useAnalytics';\nimport { noopTracker } from '../../analytics/useAnalytics';\nimport { useInRouterContext, useHref } from 'react-router-dom';\nimport type {\n ComponentConfig,\n
|
|
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 { useAnalytics } from '../../analytics/useAnalytics';\nimport { noopTracker } from '../../analytics/useAnalytics';\nimport { useInRouterContext, useHref } from 'react-router-dom';\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 // Turn relative href into an absolute path using the current route\n // context, so that client-side navigation works correctly.\n let hrefResolvedProps = props;\n const hasRouter = useInRouterContext();\n // useHref throws outside a Router, so we guard with useInRouterContext.\n // The guard is safe because a component's router context does not\n // change during its lifetime, keeping the hook call count stable.\n if (hasRouter) {\n const absoluteHref = useHref((props as any).href ?? '');\n if ((props as any).href !== undefined) {\n hrefResolvedProps = { ...props, href: absoluteHref } as P;\n }\n }\n\n // Resolve all props centrally — applies responsive values and defaults\n const { ownPropsResolved, restProps } = resolveDefinitionProps(\n definition,\n hrefResolvedProps,\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 // Analytics: conditionally call useAnalytics based on definition flag\n let analytics = noopTracker;\n if (definition.analytics) {\n const tracker = useAnalytics();\n analytics = ownPropsResolved.noTrack ? noopTracker : tracker;\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 ...(definition.analytics ? { analytics } : {}),\n } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}
|