@carbon/react 1.91.0 → 1.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +989 -1014
- package/es/components/Accordion/AccordionItem.d.ts +12 -1
- package/es/components/Accordion/AccordionItem.js +9 -2
- package/es/components/Breadcrumb/BreadcrumbItem.js +1 -1
- package/es/components/Checkbox/Checkbox.js +2 -2
- package/es/components/ComboBox/ComboBox.js +39 -23
- package/es/components/ComboButton/index.js +1 -1
- package/es/components/ComposedModal/ComposedModal.js +66 -17
- package/es/components/ComposedModal/ComposedModalPresence.d.ts +34 -0
- package/es/components/ComposedModal/ComposedModalPresence.js +42 -0
- package/es/components/ComposedModal/index.d.ts +1 -0
- package/es/components/ComposedModal/useComposedModalState.d.ts +7 -0
- package/es/components/ComposedModal/useComposedModalState.js +24 -0
- package/es/components/DataTable/TableBatchActions.js +2 -2
- package/es/components/DatePicker/DatePicker.js +14 -6
- package/es/components/DatePickerInput/DatePickerInput.js +3 -3
- package/es/components/Dialog/Dialog.js +2 -2
- package/es/components/Dropdown/Dropdown.js +5 -5
- package/es/components/ExpandableSearch/ExpandableSearch.d.ts +1 -1
- package/es/components/ExpandableSearch/ExpandableSearch.js +1 -1
- package/es/components/FeatureFlags/index.d.ts +2 -1
- package/es/components/FeatureFlags/index.js +3 -1
- package/es/components/FileUploader/FileUploader.js +2 -2
- package/es/components/FileUploader/FileUploaderItem.js +2 -2
- package/es/components/FluidTextInput/FluidPasswordInput.js +24 -5
- package/es/components/FluidTextInput/index.js +1 -1
- package/es/components/FormLabel/FormLabel.js +1 -1
- package/es/components/ListBox/ListBox.d.ts +1 -1
- package/es/components/ListBox/ListBox.js +1 -2
- package/es/components/ListItem/ListItem.js +1 -1
- package/es/components/Menu/MenuItem.js +2 -2
- package/es/components/MenuButton/index.d.ts +2 -2
- package/es/components/MenuButton/index.js +2 -2
- package/es/components/Modal/Modal.js +60 -10
- package/es/components/Modal/ModalPresence.d.ts +32 -0
- package/es/components/Modal/ModalPresence.js +37 -0
- package/es/components/Modal/index.d.ts +2 -1
- package/es/components/Modal/index.js +1 -0
- package/es/components/MultiSelect/FilterableMultiSelect.js +3 -3
- package/es/components/MultiSelect/MultiSelect.js +6 -5
- package/es/components/Notification/Notification.js +2 -2
- package/es/components/NumberInput/NumberInput.d.ts +21 -11
- package/es/components/NumberInput/NumberInput.js +40 -26
- package/es/components/OverflowMenu/OverflowMenu.js +2 -3
- package/es/components/OverflowMenu/next/index.js +1 -1
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +1 -1
- package/es/components/PageHeader/PageHeader.js +2 -2
- package/es/components/ProgressIndicator/ProgressIndicator.js +1 -1
- package/es/components/RadioButton/RadioButton.js +3 -3
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +2 -2
- package/es/components/RadioTile/RadioTile.js +2 -2
- package/es/components/Select/Select.js +2 -2
- package/es/components/Slider/Slider.js +2 -2
- package/es/components/StructuredList/StructuredList.js +2 -2
- package/es/components/Tabs/Tabs.js +2 -2
- package/es/components/Tag/DismissibleTag.js +3 -3
- package/es/components/Tag/OperationalTag.js +3 -3
- package/es/components/Tag/SelectableTag.js +3 -3
- package/es/components/Tag/Tag.js +2 -2
- package/es/components/Text/Text.d.ts +1 -1
- package/es/components/Text/Text.js +0 -1
- package/es/components/Text/TextDirection.d.ts +1 -1
- package/es/components/Text/TextDirection.js +0 -1
- package/es/components/Text/createTextComponent.d.ts +2 -8
- package/es/components/Text/createTextComponent.js +2 -2
- package/es/components/Text/index.d.ts +0 -8
- package/es/components/TextArea/TextArea.js +2 -2
- package/es/components/TextInput/TextInput.js +2 -2
- package/es/components/Tile/Tile.js +2 -2
- package/es/components/Toggle/Toggle.js +2 -2
- package/es/components/UIShell/Switcher.js +0 -26
- package/es/index.d.ts +1 -1
- package/es/index.js +6 -4
- package/es/internal/useNormalizedInputProps.js +2 -2
- package/es/internal/usePresence.d.ts +17 -0
- package/es/internal/usePresence.js +66 -0
- package/es/internal/usePresenceContext.d.ts +25 -0
- package/es/internal/usePresenceContext.js +46 -0
- package/es/tools/mergeRefs.d.ts +5 -5
- package/es/tools/mergeRefs.js +16 -12
- package/lib/components/Accordion/AccordionItem.d.ts +12 -1
- package/lib/components/Accordion/AccordionItem.js +9 -2
- package/lib/components/Breadcrumb/BreadcrumbItem.js +1 -1
- package/lib/components/Checkbox/Checkbox.js +2 -2
- package/lib/components/ComboBox/ComboBox.js +39 -23
- package/lib/components/ComboButton/index.js +1 -1
- package/lib/components/ComposedModal/ComposedModal.js +65 -16
- package/lib/components/ComposedModal/ComposedModalPresence.d.ts +34 -0
- package/lib/components/ComposedModal/ComposedModalPresence.js +46 -0
- package/lib/components/ComposedModal/index.d.ts +1 -0
- package/lib/components/ComposedModal/useComposedModalState.d.ts +7 -0
- package/lib/components/ComposedModal/useComposedModalState.js +26 -0
- package/lib/components/DataTable/TableBatchActions.js +2 -2
- package/lib/components/DatePicker/DatePicker.js +14 -6
- package/lib/components/DatePickerInput/DatePickerInput.js +3 -3
- package/lib/components/Dialog/Dialog.js +2 -2
- package/lib/components/Dropdown/Dropdown.js +3 -3
- package/lib/components/ExpandableSearch/ExpandableSearch.d.ts +1 -1
- package/lib/components/ExpandableSearch/ExpandableSearch.js +1 -1
- package/lib/components/FeatureFlags/index.d.ts +2 -1
- package/lib/components/FeatureFlags/index.js +3 -1
- package/lib/components/FileUploader/FileUploader.js +2 -2
- package/lib/components/FileUploader/FileUploaderItem.js +2 -2
- package/lib/components/FluidTextInput/FluidPasswordInput.js +26 -5
- package/lib/components/FluidTextInput/index.js +2 -1
- package/lib/components/FormLabel/FormLabel.js +1 -1
- package/lib/components/ListBox/ListBox.d.ts +1 -1
- package/lib/components/ListBox/ListBox.js +1 -2
- package/lib/components/ListItem/ListItem.js +1 -1
- package/lib/components/Menu/MenuItem.js +2 -2
- package/lib/components/MenuButton/index.d.ts +2 -2
- package/lib/components/MenuButton/index.js +2 -2
- package/lib/components/Modal/Modal.js +59 -9
- package/lib/components/Modal/ModalPresence.d.ts +32 -0
- package/lib/components/Modal/ModalPresence.js +41 -0
- package/lib/components/Modal/index.d.ts +2 -1
- package/lib/components/Modal/index.js +1 -0
- package/lib/components/MultiSelect/FilterableMultiSelect.js +3 -3
- package/lib/components/MultiSelect/MultiSelect.js +4 -3
- package/lib/components/Notification/Notification.js +2 -2
- package/lib/components/NumberInput/NumberInput.d.ts +21 -11
- package/lib/components/NumberInput/NumberInput.js +40 -26
- package/lib/components/OverflowMenu/OverflowMenu.js +2 -3
- package/lib/components/OverflowMenu/next/index.js +1 -1
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +1 -1
- package/lib/components/PageHeader/PageHeader.js +2 -2
- package/lib/components/ProgressIndicator/ProgressIndicator.js +1 -1
- package/lib/components/RadioButton/RadioButton.js +3 -3
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +3 -3
- package/lib/components/RadioTile/RadioTile.js +2 -2
- package/lib/components/Select/Select.js +2 -2
- package/lib/components/Slider/Slider.js +2 -2
- package/lib/components/StructuredList/StructuredList.js +2 -2
- package/lib/components/Tabs/Tabs.js +2 -2
- package/lib/components/Tag/DismissibleTag.js +3 -3
- package/lib/components/Tag/OperationalTag.js +3 -3
- package/lib/components/Tag/SelectableTag.js +3 -3
- package/lib/components/Tag/Tag.js +2 -2
- package/lib/components/Text/Text.d.ts +1 -1
- package/lib/components/Text/Text.js +0 -1
- package/lib/components/Text/TextDirection.d.ts +1 -1
- package/lib/components/Text/TextDirection.js +0 -1
- package/lib/components/Text/createTextComponent.d.ts +2 -8
- package/lib/components/Text/createTextComponent.js +2 -2
- package/lib/components/Text/index.d.ts +0 -8
- package/lib/components/TextArea/TextArea.js +2 -2
- package/lib/components/TextInput/TextInput.js +2 -2
- package/lib/components/Tile/Tile.js +2 -2
- package/lib/components/Toggle/Toggle.js +2 -2
- package/lib/components/UIShell/Switcher.js +0 -26
- package/lib/index.d.ts +1 -1
- package/lib/index.js +13 -8
- package/lib/internal/useNormalizedInputProps.js +2 -2
- package/lib/internal/usePresence.d.ts +17 -0
- package/lib/internal/usePresence.js +68 -0
- package/lib/internal/usePresenceContext.d.ts +25 -0
- package/lib/internal/usePresenceContext.js +48 -0
- package/lib/tools/mergeRefs.d.ts +5 -5
- package/lib/tools/mergeRefs.js +16 -14
- package/package.json +7 -7
- package/telemetry.yml +4 -0
- package/es/components/Text/index.js +0 -16
- package/lib/components/Text/index.js +0 -20
|
@@ -20,11 +20,11 @@ var useId = require('../../internal/useId.js');
|
|
|
20
20
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
21
21
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
22
22
|
var noopFn = require('../../internal/noopFn.js');
|
|
23
|
-
require('../Text/
|
|
23
|
+
var Text = require('../Text/Text.js');
|
|
24
|
+
require('../Text/TextDirection.js');
|
|
24
25
|
var index = require('../FeatureFlags/index.js');
|
|
25
26
|
var index$1 = require('../AILabel/index.js');
|
|
26
27
|
var utils = require('../../internal/utils.js');
|
|
27
|
-
var Text = require('../Text/Text.js');
|
|
28
28
|
|
|
29
29
|
var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
|
|
30
30
|
const RadioTile = /*#__PURE__*/React.forwardRef(({
|
|
@@ -20,10 +20,10 @@ require('../FluidForm/FluidForm.js');
|
|
|
20
20
|
var FormContext = require('../FluidForm/FormContext.js');
|
|
21
21
|
var useId = require('../../internal/useId.js');
|
|
22
22
|
var events = require('../../tools/events.js');
|
|
23
|
-
require('../Text/
|
|
23
|
+
var Text = require('../Text/Text.js');
|
|
24
|
+
require('../Text/TextDirection.js');
|
|
24
25
|
var index = require('../AILabel/index.js');
|
|
25
26
|
var utils = require('../../internal/utils.js');
|
|
26
|
-
var Text = require('../Text/Text.js');
|
|
27
27
|
|
|
28
28
|
const Select = /*#__PURE__*/React.forwardRef(({
|
|
29
29
|
className,
|
|
@@ -16,13 +16,13 @@ var match = require('../../internal/keyboard/match.js');
|
|
|
16
16
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
17
17
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
18
18
|
var iconsReact = require('@carbon/icons-react');
|
|
19
|
-
require('../Text/
|
|
19
|
+
var Text = require('../Text/Text.js');
|
|
20
|
+
require('../Text/TextDirection.js');
|
|
20
21
|
require('../Tooltip/DefinitionTooltip.js');
|
|
21
22
|
var Tooltip = require('../Tooltip/Tooltip.js');
|
|
22
23
|
var SliderHandles = require('./SliderHandles.js');
|
|
23
24
|
var clamp = require('../../internal/clamp.js');
|
|
24
25
|
var throttle = require('../../node_modules/es-toolkit/dist/compat/function/throttle.js');
|
|
25
|
-
var Text = require('../Text/Text.js');
|
|
26
26
|
|
|
27
27
|
const ThumbWrapper = ({
|
|
28
28
|
hasTooltip,
|
|
@@ -14,10 +14,10 @@ var cx = require('classnames');
|
|
|
14
14
|
var useId = require('../../internal/useId.js');
|
|
15
15
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
16
16
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
17
|
-
require('../Text/
|
|
17
|
+
var Text = require('../Text/Text.js');
|
|
18
|
+
require('../Text/TextDirection.js');
|
|
18
19
|
var iconsReact = require('@carbon/icons-react');
|
|
19
20
|
var useOutsideClick = require('../../internal/useOutsideClick.js');
|
|
20
|
-
var Text = require('../Text/Text.js');
|
|
21
21
|
|
|
22
22
|
var _StructuredListCell;
|
|
23
23
|
const GridSelectedRowStateContext = /*#__PURE__*/React.createContext(null);
|
|
@@ -34,10 +34,10 @@ var usePressable = require('./usePressable.js');
|
|
|
34
34
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
35
35
|
var useEvent = require('../../internal/useEvent.js');
|
|
36
36
|
var useMatchMedia = require('../../internal/useMatchMedia.js');
|
|
37
|
-
require('../Text/
|
|
37
|
+
var Text = require('../Text/Text.js');
|
|
38
|
+
require('../Text/TextDirection.js');
|
|
38
39
|
var index = require('../BadgeIndicator/index.js');
|
|
39
40
|
var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
|
|
40
|
-
var Text = require('../Text/Text.js');
|
|
41
41
|
|
|
42
42
|
var _ChevronLeft, _ChevronRight, _BadgeIndicator;
|
|
43
43
|
const verticalTabHeight = 64;
|
|
@@ -20,12 +20,12 @@ var Tag = require('./Tag.js');
|
|
|
20
20
|
var iconsReact = require('@carbon/icons-react');
|
|
21
21
|
require('../Tooltip/DefinitionTooltip.js');
|
|
22
22
|
var Tooltip = require('../Tooltip/Tooltip.js');
|
|
23
|
-
require('../Text/
|
|
23
|
+
var Text = require('../Text/Text.js');
|
|
24
|
+
require('../Text/TextDirection.js');
|
|
24
25
|
var isEllipsisActive = require('./isEllipsisActive.js');
|
|
25
26
|
var mergeRefs = require('../../tools/mergeRefs.js');
|
|
26
27
|
var index = require('../AILabel/index.js');
|
|
27
28
|
var utils = require('../../internal/utils.js');
|
|
28
|
-
var Text = require('../Text/Text.js');
|
|
29
29
|
|
|
30
30
|
var _Close;
|
|
31
31
|
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
@@ -56,7 +56,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef(({
|
|
|
56
56
|
const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
|
|
57
57
|
setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
|
|
58
58
|
}, [prefix, tagLabelRef]);
|
|
59
|
-
const combinedRef = mergeRefs.
|
|
59
|
+
const combinedRef = mergeRefs.mergeRefs(tagLabelRef, forwardRef);
|
|
60
60
|
const handleClose = event => {
|
|
61
61
|
if (onClose) {
|
|
62
62
|
event.stopPropagation();
|
|
@@ -18,10 +18,10 @@ var usePrefix = require('../../internal/usePrefix.js');
|
|
|
18
18
|
var Tag = require('./Tag.js');
|
|
19
19
|
require('../Tooltip/DefinitionTooltip.js');
|
|
20
20
|
var Tooltip = require('../Tooltip/Tooltip.js');
|
|
21
|
-
require('../Text/
|
|
21
|
+
var Text = require('../Text/Text.js');
|
|
22
|
+
require('../Text/TextDirection.js');
|
|
22
23
|
var isEllipsisActive = require('./isEllipsisActive.js');
|
|
23
24
|
var mergeRefs = require('../../tools/mergeRefs.js');
|
|
24
|
-
var Text = require('../Text/Text.js');
|
|
25
25
|
|
|
26
26
|
const TYPES = {
|
|
27
27
|
red: 'Red',
|
|
@@ -57,7 +57,7 @@ const OperationalTag = /*#__PURE__*/React.forwardRef(({
|
|
|
57
57
|
setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
|
|
58
58
|
}, [prefix, tagRef]);
|
|
59
59
|
const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
|
|
60
|
-
const combinedRef = mergeRefs.
|
|
60
|
+
const combinedRef = mergeRefs.mergeRefs(tagRef, forwardRef);
|
|
61
61
|
if (isEllipsisApplied) {
|
|
62
62
|
return /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
|
|
63
63
|
label: text,
|
|
@@ -18,11 +18,11 @@ var usePrefix = require('../../internal/usePrefix.js');
|
|
|
18
18
|
var Tag = require('./Tag.js');
|
|
19
19
|
require('../Tooltip/DefinitionTooltip.js');
|
|
20
20
|
var Tooltip = require('../Tooltip/Tooltip.js');
|
|
21
|
-
require('../Text/
|
|
21
|
+
var Text = require('../Text/Text.js');
|
|
22
|
+
require('../Text/TextDirection.js');
|
|
22
23
|
var isEllipsisActive = require('./isEllipsisActive.js');
|
|
23
24
|
var mergeRefs = require('../../tools/mergeRefs.js');
|
|
24
25
|
var useControllableState = require('../../internal/useControllableState.js');
|
|
25
|
-
var Text = require('../Text/Text.js');
|
|
26
26
|
|
|
27
27
|
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
28
28
|
const SelectableTag = /*#__PURE__*/React.forwardRef(({
|
|
@@ -56,7 +56,7 @@ const SelectableTag = /*#__PURE__*/React.forwardRef(({
|
|
|
56
56
|
setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
|
|
57
57
|
}, [prefix, tagRef]);
|
|
58
58
|
const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
|
|
59
|
-
const combinedRef = mergeRefs.
|
|
59
|
+
const combinedRef = mergeRefs.mergeRefs(tagRef, forwardRef);
|
|
60
60
|
const handleClick = e => {
|
|
61
61
|
setSelectedTag(!selectedTag);
|
|
62
62
|
onClick?.(e);
|
|
@@ -16,7 +16,8 @@ var cx = require('classnames');
|
|
|
16
16
|
var iconsReact = require('@carbon/icons-react');
|
|
17
17
|
var useId = require('../../internal/useId.js');
|
|
18
18
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
19
|
-
require('../Text/
|
|
19
|
+
var Text = require('../Text/Text.js');
|
|
20
|
+
require('../Text/TextDirection.js');
|
|
20
21
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
21
22
|
var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
|
|
22
23
|
require('../Tooltip/Tooltip.js');
|
|
@@ -24,7 +25,6 @@ var isEllipsisActive = require('./isEllipsisActive.js');
|
|
|
24
25
|
var useMergedRefs = require('../../internal/useMergedRefs.js');
|
|
25
26
|
var index = require('../AILabel/index.js');
|
|
26
27
|
var utils = require('../../internal/utils.js');
|
|
27
|
-
var Text = require('../Text/Text.js');
|
|
28
28
|
|
|
29
29
|
var _Close;
|
|
30
30
|
const TYPES = {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { type ElementType, type ReactElement, type ReactNode } from 'react';
|
|
8
8
|
import { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../internal/PolymorphicProps';
|
|
9
|
-
import { type TextDir } from '
|
|
9
|
+
import { type TextDir } from './TextDirectionContext';
|
|
10
10
|
export interface TextBaseProps {
|
|
11
11
|
dir?: TextDir;
|
|
12
12
|
children?: ReactNode;
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
11
11
|
var PropTypes = require('prop-types');
|
|
12
12
|
var React = require('react');
|
|
13
|
-
require('./index.js');
|
|
14
13
|
var TextDirectionContext = require('./TextDirectionContext.js');
|
|
15
14
|
|
|
16
15
|
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import { ReactNode } from 'react';
|
|
9
|
-
import { type GetTextDirection, type TextDir } from '
|
|
9
|
+
import { type GetTextDirection, type TextDir } from './TextDirectionContext';
|
|
10
10
|
export interface TextDirectionProps {
|
|
11
11
|
children: ReactNode;
|
|
12
12
|
dir?: TextDir;
|
|
@@ -5,14 +5,8 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import { type ElementType } from 'react';
|
|
8
|
-
import { TextProps } from '
|
|
9
|
-
|
|
10
|
-
* Create a text component wrapper for a given text node type. Useful for
|
|
11
|
-
* returning a `Text` component for a text node like a `<label>`.
|
|
12
|
-
* @param {string} element
|
|
13
|
-
* @param {string} displayName
|
|
14
|
-
*/
|
|
15
|
-
export declare const createTextComponent: (element: ElementType, displayName: string) => {
|
|
8
|
+
import { TextProps } from './Text';
|
|
9
|
+
export declare const Legend: {
|
|
16
10
|
(props: TextProps<ElementType>): import("react/jsx-runtime").JSX.Element;
|
|
17
11
|
displayName: string;
|
|
18
12
|
};
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
|
|
10
10
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
11
11
|
var React = require('react');
|
|
12
|
-
require('./index.js');
|
|
13
12
|
var Text = require('./Text.js');
|
|
14
13
|
|
|
15
14
|
/**
|
|
@@ -29,5 +28,6 @@ const createTextComponent = (element, displayName) => {
|
|
|
29
28
|
}
|
|
30
29
|
return TextWrapper;
|
|
31
30
|
};
|
|
31
|
+
const Legend = createTextComponent('legend', 'Legend');
|
|
32
32
|
|
|
33
|
-
exports.
|
|
33
|
+
exports.Legend = Legend;
|
|
@@ -7,11 +7,3 @@
|
|
|
7
7
|
export * from './Text';
|
|
8
8
|
export * from './TextDirection';
|
|
9
9
|
export * from './TextDirectionContext';
|
|
10
|
-
export declare const Label: {
|
|
11
|
-
(props: import("./Text").TextProps<import("react").ElementType>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
14
|
-
export declare const Legend: {
|
|
15
|
-
(props: import("./Text").TextProps<import("react").ElementType>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
displayName: string;
|
|
17
|
-
};
|
|
@@ -23,10 +23,10 @@ var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
|
|
|
23
23
|
var useMergedRefs = require('../../internal/useMergedRefs.js');
|
|
24
24
|
var useId = require('../../internal/useId.js');
|
|
25
25
|
var noopFn = require('../../internal/noopFn.js');
|
|
26
|
-
require('../Text/
|
|
26
|
+
var Text = require('../Text/Text.js');
|
|
27
|
+
require('../Text/TextDirection.js');
|
|
27
28
|
var index = require('../AILabel/index.js');
|
|
28
29
|
var utils = require('../../internal/utils.js');
|
|
29
|
-
var Text = require('../Text/Text.js');
|
|
30
30
|
|
|
31
31
|
const frFn = React.forwardRef;
|
|
32
32
|
const TextArea = frFn((props, forwardRef) => {
|
|
@@ -20,10 +20,10 @@ var FormContext = require('../FluidForm/FormContext.js');
|
|
|
20
20
|
var useMergedRefs = require('../../internal/useMergedRefs.js');
|
|
21
21
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
22
22
|
var getAnnouncement = require('../../internal/getAnnouncement.js');
|
|
23
|
-
require('../Text/
|
|
23
|
+
var Text = require('../Text/Text.js');
|
|
24
|
+
require('../Text/TextDirection.js');
|
|
24
25
|
var index = require('../AILabel/index.js');
|
|
25
26
|
var utils = require('../../internal/utils.js');
|
|
26
|
-
var Text = require('../Text/Text.js');
|
|
27
27
|
|
|
28
28
|
const TextInput = /*#__PURE__*/React.forwardRef(({
|
|
29
29
|
className,
|
|
@@ -23,10 +23,10 @@ var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.
|
|
|
23
23
|
var useMergedRefs = require('../../internal/useMergedRefs.js');
|
|
24
24
|
var index = require('../FeatureFlags/index.js');
|
|
25
25
|
var useId = require('../../internal/useId.js');
|
|
26
|
-
require('../Text/
|
|
26
|
+
var Text = require('../Text/Text.js');
|
|
27
|
+
require('../Text/TextDirection.js');
|
|
27
28
|
var index$1 = require('../AILabel/index.js');
|
|
28
29
|
var utils = require('../../internal/utils.js');
|
|
29
|
-
var Text = require('../Text/Text.js');
|
|
30
30
|
|
|
31
31
|
var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
|
|
32
32
|
const Tile = /*#__PURE__*/React.forwardRef(({
|
|
@@ -15,8 +15,8 @@ var PropTypes = require('prop-types');
|
|
|
15
15
|
var cx = require('classnames');
|
|
16
16
|
var useControllableState = require('../../internal/useControllableState.js');
|
|
17
17
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
|
-
require('../Text/index.js');
|
|
19
18
|
var Text = require('../Text/Text.js');
|
|
19
|
+
require('../Text/TextDirection.js');
|
|
20
20
|
|
|
21
21
|
var _path;
|
|
22
22
|
function Toggle({
|
|
@@ -105,7 +105,7 @@ function Toggle({
|
|
|
105
105
|
className: appearanceClasses
|
|
106
106
|
}, /*#__PURE__*/React.createElement("div", {
|
|
107
107
|
className: switchClasses
|
|
108
|
-
}, isSm && /*#__PURE__*/React.createElement("svg", {
|
|
108
|
+
}, isSm && !readOnly && /*#__PURE__*/React.createElement("svg", {
|
|
109
109
|
"aria-hidden": "true",
|
|
110
110
|
focusable: "false",
|
|
111
111
|
className: `${prefix}--toggle__check`,
|
|
@@ -16,34 +16,8 @@ var usePrefix = require('../../internal/usePrefix.js');
|
|
|
16
16
|
var useMergedRefs = require('../../internal/useMergedRefs.js');
|
|
17
17
|
var PropTypes = require('prop-types');
|
|
18
18
|
var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
|
|
19
|
-
require('./Content.js');
|
|
20
|
-
require('./Header.js');
|
|
21
|
-
require('./HeaderContainer.js');
|
|
22
|
-
require('./HeaderGlobalAction.js');
|
|
23
|
-
require('./HeaderGlobalBar.js');
|
|
24
|
-
require('./HeaderMenu.js');
|
|
25
|
-
require('./HeaderMenuButton.js');
|
|
26
|
-
require('./HeaderMenuItem.js');
|
|
27
|
-
require('./HeaderName.js');
|
|
28
|
-
require('./HeaderNavigation.js');
|
|
29
|
-
require('./HeaderPanel.js');
|
|
30
|
-
require('./HeaderSideNavItems.js');
|
|
31
19
|
var SwitcherItem = require('./SwitcherItem.js');
|
|
32
20
|
var SwitcherDivider = require('./SwitcherDivider.js');
|
|
33
|
-
require('./SkipToContent.js');
|
|
34
|
-
require('./SideNav.js');
|
|
35
|
-
require('./SideNavDetails.js');
|
|
36
|
-
require('./SideNavDivider.js');
|
|
37
|
-
require('./SideNavFooter.js');
|
|
38
|
-
require('./SideNavHeader.js');
|
|
39
|
-
require('./SideNavIcon.js');
|
|
40
|
-
require('./SideNavItem.js');
|
|
41
|
-
require('./SideNavItems.js');
|
|
42
|
-
require('./SideNavLink.js');
|
|
43
|
-
require('./SideNavLinkText.js');
|
|
44
|
-
require('./SideNavMenu.js');
|
|
45
|
-
require('./SideNavMenuItem.js');
|
|
46
|
-
require('./SideNavSwitcher.js');
|
|
47
21
|
|
|
48
22
|
const Switcher = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
|
|
49
23
|
const switcherRef = React.useRef(null);
|
package/lib/index.d.ts
CHANGED
|
@@ -111,7 +111,7 @@ export { FluidMultiSelect, FluidMultiSelectSkeleton, FluidMultiSelect as unstabl
|
|
|
111
111
|
export { FluidSelect, FluidSelectSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, } from './components/FluidSelect';
|
|
112
112
|
export { FluidSearch, FluidSearchSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, } from './components/FluidSearch';
|
|
113
113
|
export { FluidTextArea, FluidTextAreaSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, } from './components/FluidTextArea';
|
|
114
|
-
export { FluidTextInput, FluidTextInputSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, } from './components/FluidTextInput';
|
|
114
|
+
export { FluidPasswordInput, FluidTextInput, FluidTextInputSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, } from './components/FluidTextInput';
|
|
115
115
|
export { FluidNumberInput, FluidNumberInputSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, } from './components/FluidNumberInput';
|
|
116
116
|
export { FluidTimePicker, FluidTimePickerSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, } from './components/FluidTimePicker';
|
|
117
117
|
export { FluidTimePickerSelect, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSelect as preview__FluidTimePickerSelect, } from './components/FluidTimePickerSelect';
|
package/lib/index.js
CHANGED
|
@@ -28,6 +28,7 @@ var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleto
|
|
|
28
28
|
var ComboBox = require('./components/ComboBox/ComboBox.js');
|
|
29
29
|
var index$9 = require('./components/ComboButton/index.js');
|
|
30
30
|
var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
|
|
31
|
+
var ComposedModalPresence = require('./components/ComposedModal/ComposedModalPresence.js');
|
|
31
32
|
var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
|
|
32
33
|
var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
|
|
33
34
|
require('./components/ContainedList/index.js');
|
|
@@ -97,6 +98,7 @@ var Menu = require('./components/Menu/Menu.js');
|
|
|
97
98
|
var MenuItem = require('./components/Menu/MenuItem.js');
|
|
98
99
|
var index$b = require('./components/MenuButton/index.js');
|
|
99
100
|
var Modal = require('./components/Modal/Modal.js');
|
|
101
|
+
var ModalPresence = require('./components/Modal/ModalPresence.js');
|
|
100
102
|
var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
|
|
101
103
|
var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
|
|
102
104
|
var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
|
|
@@ -207,7 +209,7 @@ var FluidSearch_Skeleton = require('./components/FluidSearch/FluidSearch.Skeleto
|
|
|
207
209
|
var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
|
|
208
210
|
var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
|
|
209
211
|
var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
|
|
210
|
-
require('./components/FluidTextInput/FluidPasswordInput.js');
|
|
212
|
+
var FluidPasswordInput = require('./components/FluidTextInput/FluidPasswordInput.js');
|
|
211
213
|
var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInput.Skeleton.js');
|
|
212
214
|
var FluidNumberInput = require('./components/FluidNumberInput/FluidNumberInput.js');
|
|
213
215
|
var FluidNumberInput_Skeleton = require('./components/FluidNumberInput/FluidNumberInput.Skeleton.js');
|
|
@@ -233,7 +235,9 @@ var AISkeletonIcon = require('./components/AISkeleton/AISkeletonIcon.js');
|
|
|
233
235
|
var AISkeletonText = require('./components/AISkeleton/AISkeletonText.js');
|
|
234
236
|
var DefinitionTooltip = require('./components/Tooltip/DefinitionTooltip.js');
|
|
235
237
|
var Tooltip = require('./components/Tooltip/Tooltip.js');
|
|
236
|
-
require('./components/Text/
|
|
238
|
+
var Text = require('./components/Text/Text.js');
|
|
239
|
+
var TextDirection = require('./components/Text/TextDirection.js');
|
|
240
|
+
require('react');
|
|
237
241
|
var index$i = require('./components/Theme/index.js');
|
|
238
242
|
var usePrefix = require('./internal/usePrefix.js');
|
|
239
243
|
var useIdPrefix = require('./internal/useIdPrefix.js');
|
|
@@ -241,8 +245,6 @@ var PageSelector = require('./components/Pagination/experimental/PageSelector.js
|
|
|
241
245
|
var Pagination = require('./components/Pagination/experimental/Pagination.js');
|
|
242
246
|
var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
|
|
243
247
|
var ContainedList = require('./components/ContainedList/ContainedList.js');
|
|
244
|
-
var Text = require('./components/Text/Text.js');
|
|
245
|
-
var TextDirection = require('./components/Text/TextDirection.js');
|
|
246
248
|
|
|
247
249
|
|
|
248
250
|
|
|
@@ -270,6 +272,7 @@ exports.ComboBox = ComboBox.default;
|
|
|
270
272
|
exports.ComboButton = index$9.ComboButton;
|
|
271
273
|
exports.ComposedModal = ComposedModal.default;
|
|
272
274
|
exports.ModalBody = ComposedModal.ModalBody;
|
|
275
|
+
exports.ComposedModalPresence = ComposedModalPresence.ComposedModalPresence;
|
|
273
276
|
exports.ModalHeader = ModalHeader.ModalHeader;
|
|
274
277
|
exports.ModalFooter = ModalFooter.ModalFooter;
|
|
275
278
|
exports.ContentSwitcher = ContentSwitcher.ContentSwitcher;
|
|
@@ -350,6 +353,7 @@ exports.MenuItemRadioGroup = MenuItem.MenuItemRadioGroup;
|
|
|
350
353
|
exports.MenuItemSelectable = MenuItem.MenuItemSelectable;
|
|
351
354
|
exports.MenuButton = index$b.MenuButton;
|
|
352
355
|
exports.Modal = Modal.default;
|
|
356
|
+
exports.ModalPresence = ModalPresence.ModalPresence;
|
|
353
357
|
exports.ModalWrapper = ModalWrapper.default;
|
|
354
358
|
exports.FilterableMultiSelect = FilterableMultiSelect.FilterableMultiSelect;
|
|
355
359
|
exports.MultiSelect = MultiSelect.MultiSelect;
|
|
@@ -521,6 +525,7 @@ exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton.default;
|
|
|
521
525
|
exports.FluidTextInput = FluidTextInput.default;
|
|
522
526
|
exports.preview__FluidTextInput = FluidTextInput.default;
|
|
523
527
|
exports.unstable__FluidTextInput = FluidTextInput.default;
|
|
528
|
+
exports.FluidPasswordInput = FluidPasswordInput.default;
|
|
524
529
|
exports.FluidTextInputSkeleton = FluidTextInput_Skeleton.default;
|
|
525
530
|
exports.preview__FluidTextInputSkeleton = FluidTextInput_Skeleton.default;
|
|
526
531
|
exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton.default;
|
|
@@ -584,6 +589,10 @@ exports.preview__AiSkeletonText = AISkeletonText.default;
|
|
|
584
589
|
exports.unstable__AiSkeletonText = AISkeletonText.default;
|
|
585
590
|
exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
|
|
586
591
|
exports.Tooltip = Tooltip.Tooltip;
|
|
592
|
+
exports.preview_Text = Text.Text;
|
|
593
|
+
exports.unstable_Text = Text.Text;
|
|
594
|
+
exports.preview_TextDirection = TextDirection.TextDirection;
|
|
595
|
+
exports.unstable_TextDirection = TextDirection.TextDirection;
|
|
587
596
|
exports.GlobalTheme = index$i.GlobalTheme;
|
|
588
597
|
exports.Theme = index$i.Theme;
|
|
589
598
|
exports.ThemeContext = index$i.ThemeContext;
|
|
@@ -598,7 +607,3 @@ exports.preview_Pagination = Pagination.default;
|
|
|
598
607
|
exports.unstable_Pagination = Pagination.default;
|
|
599
608
|
exports.ContainedListItem = ContainedListItem.default;
|
|
600
609
|
exports.ContainedList = ContainedList.default;
|
|
601
|
-
exports.preview_Text = Text.Text;
|
|
602
|
-
exports.unstable_Text = Text.Text;
|
|
603
|
-
exports.preview_TextDirection = TextDirection.TextDirection;
|
|
604
|
-
exports.unstable_TextDirection = TextDirection.TextDirection;
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
|
|
10
10
|
var React = require('react');
|
|
11
11
|
var iconsReact = require('@carbon/icons-react');
|
|
12
|
-
require('../components/Text/index.js');
|
|
13
|
-
var usePrefix = require('./usePrefix.js');
|
|
14
12
|
var Text = require('../components/Text/Text.js');
|
|
13
|
+
require('../components/Text/TextDirection.js');
|
|
14
|
+
var usePrefix = require('./usePrefix.js');
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Returns an object containing normalized properties for an input component.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { type RefObject } from 'react';
|
|
8
|
+
export declare const usePresence: (ref: RefObject<HTMLElement | null>, isOpen: boolean) => {
|
|
9
|
+
/**
|
|
10
|
+
* Indicates whether the ref object is supposed to be mounted
|
|
11
|
+
*/
|
|
12
|
+
isPresent: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Indicates whether the ref object is currently exiting
|
|
15
|
+
*/
|
|
16
|
+
isExiting: boolean;
|
|
17
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var React = require('react');
|
|
11
|
+
var usePrefix = require('./usePrefix.js');
|
|
12
|
+
|
|
13
|
+
const usePresence = (ref, isOpen) => {
|
|
14
|
+
const prefix = usePrefix.usePrefix();
|
|
15
|
+
const [exitState, setExitState] = React.useState(isOpen ? 'idle' : 'finished');
|
|
16
|
+
const isExiting = exitState === 'active';
|
|
17
|
+
|
|
18
|
+
// element is exiting
|
|
19
|
+
if (!isOpen && exitState === 'idle') {
|
|
20
|
+
setExitState('active');
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// element exit was interrupted
|
|
24
|
+
if (isOpen && exitState !== 'idle') {
|
|
25
|
+
setExitState('idle');
|
|
26
|
+
}
|
|
27
|
+
const handleAnimationEnd = React.useCallback(() => {
|
|
28
|
+
setExitState('finished');
|
|
29
|
+
}, []);
|
|
30
|
+
React.useLayoutEffect(() => {
|
|
31
|
+
if (!ref.current || !isExiting) return;
|
|
32
|
+
|
|
33
|
+
// resolve for JSDOM
|
|
34
|
+
if (!('getAnimations' in ref.current)) {
|
|
35
|
+
handleAnimationEnd();
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// cover all animations that start with the presence prefix
|
|
40
|
+
const animations = ref.current.getAnimations({
|
|
41
|
+
subtree: true
|
|
42
|
+
}).filter(animation => animation instanceof CSSAnimation && animation.animationName.startsWith(`${prefix}--presence`));
|
|
43
|
+
if (!animations.length) {
|
|
44
|
+
handleAnimationEnd();
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
let cancelled = false;
|
|
48
|
+
Promise.all(animations.map(animation => animation.finished)).finally(() => {
|
|
49
|
+
if (cancelled) return;
|
|
50
|
+
handleAnimationEnd();
|
|
51
|
+
});
|
|
52
|
+
return () => {
|
|
53
|
+
cancelled = true;
|
|
54
|
+
};
|
|
55
|
+
}, [ref, isExiting, prefix, handleAnimationEnd]);
|
|
56
|
+
return {
|
|
57
|
+
/**
|
|
58
|
+
* Indicates whether the ref object is supposed to be mounted
|
|
59
|
+
*/
|
|
60
|
+
isPresent: isOpen || exitState !== 'finished',
|
|
61
|
+
/**
|
|
62
|
+
* Indicates whether the ref object is currently exiting
|
|
63
|
+
*/
|
|
64
|
+
isExiting
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
exports.usePresence = usePresence;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { type RefObject } from 'react';
|
|
8
|
+
export interface PresenceContext {
|
|
9
|
+
/**
|
|
10
|
+
* The ref object the presence mode is mounted with
|
|
11
|
+
*/
|
|
12
|
+
presenceRef: RefObject<HTMLDivElement | null>;
|
|
13
|
+
/**
|
|
14
|
+
* Indicates whether the ref object is currently exiting
|
|
15
|
+
*/
|
|
16
|
+
isExiting: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Returns if the caller is exclusive to this presence context
|
|
19
|
+
*/
|
|
20
|
+
isPresenceExclusive: (id: string) => boolean;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
|
|
24
|
+
*/
|
|
25
|
+
export declare const usePresenceContext: (open: boolean, initialPresenceId?: string) => readonly [boolean, PresenceContext];
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var React = require('react');
|
|
11
|
+
var usePresence = require('./usePresence.js');
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
|
|
15
|
+
*/
|
|
16
|
+
const usePresenceContext = (open, initialPresenceId) => {
|
|
17
|
+
const presenceIdRef = React.useRef(initialPresenceId);
|
|
18
|
+
const presenceRef = React.useRef(null);
|
|
19
|
+
const prevPresenceRef = React.useRef(null);
|
|
20
|
+
|
|
21
|
+
// clean up the presence id, if not predefined and if the presence node was unmounted
|
|
22
|
+
if (!initialPresenceId && prevPresenceRef.current && !presenceRef.current) {
|
|
23
|
+
presenceIdRef.current = null;
|
|
24
|
+
}
|
|
25
|
+
prevPresenceRef.current = presenceRef.current;
|
|
26
|
+
const {
|
|
27
|
+
isPresent,
|
|
28
|
+
isExiting
|
|
29
|
+
} = usePresence.usePresence(presenceRef, open);
|
|
30
|
+
const isPresenceExclusive = React.useCallback(id => {
|
|
31
|
+
if (!id) return false;
|
|
32
|
+
|
|
33
|
+
// return false if the presence context is occupied
|
|
34
|
+
if (presenceIdRef.current && presenceIdRef.current !== id) return false;
|
|
35
|
+
|
|
36
|
+
// otherwise occupy presence context and return true
|
|
37
|
+
presenceIdRef.current = id;
|
|
38
|
+
return true;
|
|
39
|
+
}, []);
|
|
40
|
+
const contextValue = React.useMemo(() => ({
|
|
41
|
+
presenceRef,
|
|
42
|
+
isPresenceExclusive,
|
|
43
|
+
isExiting
|
|
44
|
+
}), [presenceRef, isPresenceExclusive, isExiting]);
|
|
45
|
+
return [isPresent, contextValue];
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
exports.usePresenceContext = usePresenceContext;
|
package/lib/tools/mergeRefs.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export default mergeRefs;
|
|
2
1
|
/**
|
|
3
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2025
|
|
4
3
|
*
|
|
5
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
5
|
* LICENSE file in the root directory of this source tree.
|
|
7
6
|
*/
|
|
7
|
+
import type { Ref, RefCallback } from 'react';
|
|
8
8
|
/**
|
|
9
|
-
* @param
|
|
10
|
-
* @returns
|
|
9
|
+
* @param refs Refs to merge.
|
|
10
|
+
* @returns Merged ref.
|
|
11
11
|
*/
|
|
12
|
-
declare
|
|
12
|
+
export declare const mergeRefs: <T>(...refs: (Ref<T> | null | undefined)[]) => RefCallback<T>;
|