@lumx/react 3.20.1-alpha.36 → 3.20.1-alpha.38

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.
Files changed (106) hide show
  1. package/index.d.ts +4 -15
  2. package/index.js +13966 -64
  3. package/index.js.map +1 -0
  4. package/package.json +3 -3
  5. package/utils/index.js +159 -3
  6. package/utils/index.js.map +1 -0
  7. package/_internal/035c132d.js +0 -314
  8. package/_internal/0b9c76cb.js +0 -5
  9. package/_internal/0ea95af1.js +0 -819
  10. package/_internal/230173a8.js +0 -12
  11. package/_internal/2a3d237c.js +0 -11
  12. package/_internal/2c2b6a89.js +0 -51
  13. package/_internal/3181f000.js +0 -13
  14. package/_internal/36bd7352.js +0 -218
  15. package/_internal/3864a6c1.js +0 -436
  16. package/_internal/3a1facc0.js +0 -17
  17. package/_internal/49bbeed3.js +0 -5
  18. package/_internal/4daccdd5.js +0 -24
  19. package/_internal/4f4c0582.js +0 -2169
  20. package/_internal/5cef5e8c.js +0 -74
  21. package/_internal/6a60381c.js +0 -117
  22. package/_internal/6f084a40.js +0 -111
  23. package/_internal/76ddefd4.js +0 -61
  24. package/_internal/78df9309.js +0 -19
  25. package/_internal/7ad474e4.js +0 -98
  26. package/_internal/7b293665.js +0 -19
  27. package/_internal/7daf0f24.js +0 -76
  28. package/_internal/825ac334.js +0 -129
  29. package/_internal/827b804a.js +0 -5
  30. package/_internal/8bce732e.js +0 -8
  31. package/_internal/9d1336a1.js +0 -18
  32. package/_internal/a38bdcd0.js +0 -49
  33. package/_internal/b326655a.js +0 -682
  34. package/_internal/b83e864b.js +0 -76
  35. package/_internal/bace1bf1.js +0 -103
  36. package/_internal/c57190eb.js +0 -146
  37. package/_internal/components/alert-dialog/index-284fed80.js +0 -163
  38. package/_internal/components/autocomplete/__mockData__/index-96fc7ea7.js +0 -27
  39. package/_internal/components/autocomplete/index-27a49d5d.js +0 -261
  40. package/_internal/components/avatar/index-b8bc3cae.js +0 -83
  41. package/_internal/components/badge/index-9880f056.js +0 -81
  42. package/_internal/components/button/index-d919f96d.js +0 -47
  43. package/_internal/components/checkbox/index-dd478de9.js +0 -143
  44. package/_internal/components/chip/index-7f84cdbd.js +0 -102
  45. package/_internal/components/comment-block/index-e942de30.js +0 -138
  46. package/_internal/components/date-picker/index-a258d3ce.js +0 -596
  47. package/_internal/components/dialog/index-c7066813.js +0 -238
  48. package/_internal/components/divider/index-b6934baf.js +0 -50
  49. package/_internal/components/drag-handle/index-80e5af6c.js +0 -52
  50. package/_internal/components/dropdown/index-cebfc268.js +0 -147
  51. package/_internal/components/expansion-panel/index-9d45a211.js +0 -167
  52. package/_internal/components/flag/index-33e9d909.js +0 -59
  53. package/_internal/components/flex-box/index-0d6b6b43.js +0 -56
  54. package/_internal/components/generic-block/index-836c4352.js +0 -124
  55. package/_internal/components/grid/index-8c16a4f1.js +0 -104
  56. package/_internal/components/grid-column/index-4a2f56bb.js +0 -59
  57. package/_internal/components/heading/index-fd558a9a.js +0 -53
  58. package/_internal/components/icon/index-e7b9b40e.js +0 -1
  59. package/_internal/components/image-block/index-7021c2f1.js +0 -110
  60. package/_internal/components/image-lightbox/index-27017547.js +0 -759
  61. package/_internal/components/inline-list/index-52efec7f.js +0 -74
  62. package/_internal/components/input-helper/index-5a837e7c.js +0 -71
  63. package/_internal/components/input-label/index-0113f382.js +0 -59
  64. package/_internal/components/lightbox/index-fad5a9f2.js +0 -155
  65. package/_internal/components/link/index-008bae4b.js +0 -72
  66. package/_internal/components/link-preview/index-3e9c32f2.js +0 -117
  67. package/_internal/components/list/index-da88c6e9.js +0 -71
  68. package/_internal/components/message/index-17b568f2.js +0 -98
  69. package/_internal/components/mosaic/index-2d40e01c.js +0 -95
  70. package/_internal/components/navigation/index-dc17c639.js +0 -225
  71. package/_internal/components/notification/index-a1101015.js +0 -146
  72. package/_internal/components/popover/index-dbca63f1.js +0 -2
  73. package/_internal/components/popover-dialog/index-654d2abc.js +0 -66
  74. package/_internal/components/post-block/index-4b6b4dcb.js +0 -109
  75. package/_internal/components/progress/index-6f578c31.js +0 -182
  76. package/_internal/components/progress-tracker/index-700bc4c2.js +0 -309
  77. package/_internal/components/radio-button/index-89b725af.js +0 -149
  78. package/_internal/components/select/index-2755aa32.js +0 -458
  79. package/_internal/components/side-navigation/index-0bbe1fdd.js +0 -165
  80. package/_internal/components/skeleton/index-b2f8501c.js +0 -166
  81. package/_internal/components/slider/index-4f9b891b.js +0 -311
  82. package/_internal/components/slideshow/index-d4604589.js +0 -150
  83. package/_internal/components/switch/index-58fe0f0c.js +0 -122
  84. package/_internal/components/table/index-d541aa88.js +0 -297
  85. package/_internal/components/tabs/index-af1538d6.js +0 -298
  86. package/_internal/components/text/index-5bfc6d5e.js +0 -1
  87. package/_internal/components/text-field/index-47c98d09.js +0 -360
  88. package/_internal/components/thumbnail/index-71545d95.js +0 -41
  89. package/_internal/components/toolbar/index-7041a5a6.js +0 -61
  90. package/_internal/components/tooltip/index-8bb97e60.js +0 -327
  91. package/_internal/components/uploader/index-8f6f55de.js +0 -153
  92. package/_internal/components/user-block/index-70d4ce8f.js +0 -145
  93. package/_internal/d0e3f49e.js +0 -23
  94. package/_internal/de24f857.js +0 -3
  95. package/_internal/e806b848.js +0 -8
  96. package/_internal/e913a3af.js +0 -117
  97. package/_internal/ea04260d.js +0 -28
  98. package/_internal/eaf6c45a.js +0 -3
  99. package/_internal/ebdcb0c7.js +0 -60
  100. package/_internal/ef5d1aac.js +0 -3
  101. package/_internal/f0d7d6ea.js +0 -29
  102. package/_internal/utils/ClickAwayProvider/index-1234ce76.js +0 -94
  103. package/_internal/utils/MaterialThemeSwitcher/index-8d22de5a.js +0 -48
  104. package/_internal/utils/Portal/index-6e0a7404.js +0 -44
  105. package/_internal/utils/disabled/index-075b99c3.js +0 -36
  106. package/_internal/utils/type/index-ea9fc197.js +0 -2
@@ -1,109 +0,0 @@
1
- import classNames from 'classnames';
2
- import isObject from 'lodash/isObject';
3
- import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
4
- import { u as useTheme } from '../../3181f000.js';
5
- import { f as forwardRef } from '../../8bce732e.js';
6
- import { jsxs, jsx } from 'react/jsx-runtime';
7
- import { ThumbnailVariant } from '../thumbnail/index-71545d95.js';
8
- import { Orientation, Theme } from '@lumx/core/js/constants';
9
- import { T as Thumbnail } from '../../035c132d.js';
10
-
11
- /**
12
- * Component display name.
13
- */
14
- const COMPONENT_NAME = 'PostBlock';
15
-
16
- /**
17
- * Component default class name and class prefix.
18
- */
19
- const CLASSNAME = getRootClassName(COMPONENT_NAME);
20
-
21
- /**
22
- * Component default props.
23
- */
24
- const DEFAULT_PROPS = {
25
- orientation: Orientation.horizontal
26
- };
27
-
28
- /**
29
- * PostBlock component.
30
- *
31
- * @param props Component props.
32
- * @param ref Component ref.
33
- * @return React element.
34
- */
35
- const PostBlock = forwardRef((props, ref) => {
36
- const defaultTheme = useTheme() || Theme.light;
37
- const {
38
- actions,
39
- attachments,
40
- author,
41
- className,
42
- meta,
43
- onClick,
44
- orientation = DEFAULT_PROPS.orientation,
45
- tags,
46
- text,
47
- theme = defaultTheme,
48
- thumbnailProps,
49
- title,
50
- ...forwardedProps
51
- } = props;
52
- return /*#__PURE__*/jsxs("div", {
53
- ref: ref,
54
- className: classNames(className, handleBasicClasses({
55
- prefix: CLASSNAME,
56
- orientation,
57
- theme
58
- })),
59
- ...forwardedProps,
60
- children: [thumbnailProps && /*#__PURE__*/jsx("div", {
61
- className: `${CLASSNAME}__thumbnail`,
62
- children: /*#__PURE__*/jsx(Thumbnail, {
63
- ...thumbnailProps,
64
- theme: theme,
65
- variant: ThumbnailVariant.rounded
66
- })
67
- }), /*#__PURE__*/jsxs("div", {
68
- className: `${CLASSNAME}__wrapper`,
69
- children: [author && /*#__PURE__*/jsx("div", {
70
- className: `${CLASSNAME}__author`,
71
- children: author
72
- }), title && /*#__PURE__*/jsx("button", {
73
- type: "button",
74
- className: `${CLASSNAME}__title`,
75
- onClick: onClick,
76
- children: title
77
- }), meta && /*#__PURE__*/jsx("span", {
78
- className: `${CLASSNAME}__meta`,
79
- children: meta
80
- }), isObject(text) && text.__html ?
81
- /*#__PURE__*/
82
- // eslint-disable-next-line react/no-danger
83
- jsx("p", {
84
- dangerouslySetInnerHTML: text,
85
- className: `${CLASSNAME}__text`
86
- }) : /*#__PURE__*/jsx("p", {
87
- className: `${CLASSNAME}__text`,
88
- children: text
89
- }), attachments && /*#__PURE__*/jsx("div", {
90
- className: `${CLASSNAME}__attachments`,
91
- children: attachments
92
- }), (tags || actions) && /*#__PURE__*/jsxs("div", {
93
- className: `${CLASSNAME}__toolbar`,
94
- children: [tags && /*#__PURE__*/jsx("div", {
95
- className: `${CLASSNAME}__tags`,
96
- children: tags
97
- }), actions && /*#__PURE__*/jsx("div", {
98
- className: `${CLASSNAME}__actions`,
99
- children: actions
100
- })]
101
- })]
102
- })]
103
- });
104
- });
105
- PostBlock.displayName = COMPONENT_NAME;
106
- PostBlock.className = CLASSNAME;
107
- PostBlock.defaultProps = DEFAULT_PROPS;
108
-
109
- export { PostBlock };
@@ -1,182 +0,0 @@
1
- import classNames from 'classnames';
2
- import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
3
- import { u as useTheme } from '../../3181f000.js';
4
- import { f as forwardRef } from '../../8bce732e.js';
5
- import { jsxs, jsx } from 'react/jsx-runtime';
6
- import { Theme, Size } from '@lumx/core/js/constants';
7
-
8
- /**
9
- * Component display name.
10
- */
11
- const COMPONENT_NAME$2 = 'ProgressLinear';
12
-
13
- /**
14
- * Component default class name and class prefix.
15
- */
16
- const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
17
-
18
- /**
19
- * Component default props.
20
- */
21
- const DEFAULT_PROPS$2 = {};
22
-
23
- /**
24
- * ProgressLinear component.
25
- *
26
- * @param props Component props.
27
- * @param ref Component ref.
28
- * @return React element.
29
- */
30
- const ProgressLinear = forwardRef((props, ref) => {
31
- const defaultTheme = useTheme() || Theme.light;
32
- const {
33
- className,
34
- theme = defaultTheme,
35
- ...forwardedProps
36
- } = props;
37
- return /*#__PURE__*/jsxs("div", {
38
- ref: ref,
39
- ...forwardedProps,
40
- className: classNames(className, handleBasicClasses({
41
- prefix: CLASSNAME$2,
42
- theme
43
- })),
44
- children: [/*#__PURE__*/jsx("div", {
45
- className: "lumx-progress-linear__line1"
46
- }), /*#__PURE__*/jsx("div", {
47
- className: "lumx-progress-linear__line2"
48
- })]
49
- });
50
- });
51
- ProgressLinear.displayName = COMPONENT_NAME$2;
52
- ProgressLinear.className = CLASSNAME$2;
53
- ProgressLinear.defaultProps = DEFAULT_PROPS$2;
54
-
55
- /**
56
- * Component display name.
57
- */
58
- const COMPONENT_NAME$1 = 'ProgressCircular';
59
-
60
- /**
61
- * Component default class name and class prefix.
62
- */
63
- const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
64
-
65
- /**
66
- * Component default props.
67
- */
68
- const DEFAULT_PROPS$1 = {
69
- size: Size.m,
70
- display: 'block'
71
- };
72
-
73
- /**
74
- * ProgressCircularProps component.
75
- *
76
- * @param props Component props.
77
- * @param ref Component ref.
78
- * @return React element.
79
- */
80
- const ProgressCircular = forwardRef((props, ref) => {
81
- const defaultTheme = useTheme() || Theme.light;
82
- const {
83
- className,
84
- theme = defaultTheme,
85
- size = DEFAULT_PROPS$1.size,
86
- display = DEFAULT_PROPS$1.display,
87
- ...forwardedProps
88
- } = props;
89
- const Element = display === 'block' ? 'div' : 'span';
90
- return /*#__PURE__*/jsxs(Element, {
91
- ref: ref,
92
- ...forwardedProps,
93
- className: classNames(className, handleBasicClasses({
94
- prefix: CLASSNAME$1,
95
- theme,
96
- size,
97
- display
98
- })),
99
- children: [/*#__PURE__*/jsx(Element, {
100
- className: "lumx-progress-circular__double-bounce1"
101
- }), /*#__PURE__*/jsx(Element, {
102
- className: "lumx-progress-circular__double-bounce2"
103
- }), /*#__PURE__*/jsx("svg", {
104
- className: "lumx-progress-circular__svg",
105
- viewBox: "25 25 50 50",
106
- children: /*#__PURE__*/jsx("circle", {
107
- className: "lumx-progress-circular__path",
108
- cx: "50",
109
- cy: "50",
110
- r: "20",
111
- fill: "none",
112
- strokeWidth: "5"
113
- })
114
- })]
115
- });
116
- });
117
- ProgressCircular.displayName = COMPONENT_NAME$1;
118
- ProgressCircular.className = CLASSNAME$1;
119
- ProgressCircular.defaultProps = DEFAULT_PROPS$1;
120
-
121
- const ProgressVariant = {
122
- linear: 'linear',
123
- circular: 'circular'
124
- };
125
-
126
- /**
127
- * Defines the props of the component.
128
- */
129
-
130
- /**
131
- * Component display name.
132
- */
133
- const COMPONENT_NAME = 'Progress';
134
-
135
- /**
136
- * Component default class name and class prefix.
137
- */
138
- const CLASSNAME = getRootClassName(COMPONENT_NAME);
139
-
140
- /**
141
- * Component default props.
142
- */
143
- const DEFAULT_PROPS = {
144
- variant: ProgressVariant.circular
145
- };
146
-
147
- /**
148
- * Progress component.
149
- *
150
- * @deprecated use `ProgressLinear` and `ProgressCircular` instead.
151
- * @param props Component props.
152
- * @param ref Component ref.
153
- * @return React element.
154
- */
155
- const Progress = forwardRef((props, ref) => {
156
- const defaultTheme = useTheme() || Theme.light;
157
- const {
158
- className,
159
- theme = defaultTheme,
160
- variant = DEFAULT_PROPS.variant,
161
- ...forwardedProps
162
- } = props;
163
- return /*#__PURE__*/jsxs("div", {
164
- ref: ref,
165
- ...forwardedProps,
166
- className: classNames(className, handleBasicClasses({
167
- prefix: CLASSNAME,
168
- theme,
169
- variant
170
- })),
171
- children: [variant === ProgressVariant.circular && /*#__PURE__*/jsx(ProgressCircular, {
172
- theme: theme
173
- }), variant === ProgressVariant.linear && /*#__PURE__*/jsx(ProgressLinear, {
174
- theme: theme
175
- })]
176
- });
177
- });
178
- Progress.displayName = COMPONENT_NAME;
179
- Progress.className = CLASSNAME;
180
- Progress.defaultProps = DEFAULT_PROPS;
181
-
182
- export { Progress, ProgressCircular, ProgressLinear, ProgressVariant };
@@ -1,309 +0,0 @@
1
- import React__default, { useReducer, useEffect, useCallback } from 'react';
2
- import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useTabProviderContextState, a as useTabProviderContext } from '../../825ac334.js';
3
- import { jsx, jsxs } from 'react/jsx-runtime';
4
- import classNames from 'classnames';
5
- import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
6
- import { m as mergeRefs } from '../../f0d7d6ea.js';
7
- import { f as forwardRef } from '../../8bce732e.js';
8
- import { u as useRovingTabIndex } from '../../7daf0f24.js';
9
- import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
10
- import { I as Icon, m as mdiAlertCircle } from '../../bace1bf1.js';
11
- import { Size, Kind, CSS_PREFIX } from '@lumx/core/js/constants';
12
- import { InputLabel } from '../input-label/index-0113f382.js';
13
- import { InputHelper } from '../input-helper/index-5a837e7c.js';
14
- import { m as mdiCheckCircle } from '../../de24f857.js';
15
- import '../../d0e3f49e.js';
16
-
17
- const mdiRadioboxBlank = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';
18
-
19
- const mdiRadioboxMarked = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
20
-
21
- const DEFAULT_PROPS$3 = {
22
- isLazy: INIT_STATE.isLazy,
23
- shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
24
- };
25
-
26
- /**
27
- * This component provides a context in which steps can be defined and linked to their step panel.
28
- *
29
- * It does not produce any markup so you can wrap it around any React elements and then split the ProgressTracker and ProgressTrackerPanel
30
- * components in the react tree.
31
- *
32
- * This works exactly as TabProvider so it uses TabProviderContext and tabs state.
33
- *
34
- * @param props React component props.
35
- * @return React element.
36
- */
37
- const ProgressTrackerProvider = props => {
38
- const {
39
- children,
40
- onChange,
41
- ...propState
42
- } = props;
43
- const [state, dispatch] = useReducer(reducer, INIT_STATE);
44
-
45
- // On prop state change => dispatch update.
46
- useEffect(() => {
47
- dispatch({
48
- type: 'update',
49
- payload: {
50
- ...DEFAULT_PROPS$3,
51
- ...propState,
52
- activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
53
- }
54
- });
55
- },
56
- // eslint-disable-next-line react-hooks/exhaustive-deps
57
- [dispatch, ...Object.values(propState)]);
58
-
59
- // On active tab index state change => send update to the onChange.
60
- useEffect(() => {
61
- if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {
62
- return;
63
- }
64
- onChange(state.activeTabIndex);
65
- },
66
- // eslint-disable-next-line react-hooks/exhaustive-deps
67
- [onChange, state.activeTabIndex]);
68
- return /*#__PURE__*/jsx(TabProviderContext.Provider, {
69
- value: [state, dispatch],
70
- children: children
71
- });
72
- };
73
- ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$3;
74
-
75
- /**
76
- * Component display name.
77
- */
78
- const COMPONENT_NAME$2 = 'ProgressTracker';
79
-
80
- /**
81
- * Component default class name and class prefix.
82
- */
83
- const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
84
-
85
- /**
86
- * Component default props.
87
- */
88
- const DEFAULT_PROPS$2 = {};
89
-
90
- /**
91
- * ProgressTracker component.
92
- *
93
- * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
94
- *
95
- * @param props Component props.
96
- * @param ref Component ref.
97
- * @return React element.
98
- */
99
- const ProgressTracker = forwardRef((props, ref) => {
100
- const {
101
- 'aria-label': ariaLabel,
102
- children,
103
- className,
104
- ...forwardedProps
105
- } = props;
106
- const stepListRef = React__default.useRef(null);
107
- useRovingTabIndex({
108
- parentRef: stepListRef,
109
- elementSelector: '[role="tab"]',
110
- keepTabIndex: false,
111
- extraDependencies: [children]
112
- });
113
- const state = useTabProviderContextState();
114
- const numberOfSteps = state?.ids?.tab?.length || 0;
115
- const backgroundPosition = numberOfSteps > 0 ? 100 / (numberOfSteps * 2) : 0;
116
- const trackPosition = numberOfSteps > 0 ? 100 / (numberOfSteps - 1) * (state?.activeTabIndex || 0) / 100 : 0;
117
- return /*#__PURE__*/jsxs("div", {
118
- ref: mergeRefs(ref, stepListRef),
119
- ...forwardedProps,
120
- className: classNames(className, CLASSNAME$2),
121
- children: [/*#__PURE__*/jsx("div", {
122
- className: `${CLASSNAME$2}__steps`,
123
- role: "tablist",
124
- "aria-label": ariaLabel,
125
- children: children
126
- }), /*#__PURE__*/jsx("div", {
127
- className: `${CLASSNAME$2}__background-bar`,
128
- style: {
129
- left: `${backgroundPosition}%`,
130
- right: `${backgroundPosition}%`
131
- }
132
- }), /*#__PURE__*/jsx("div", {
133
- className: `${CLASSNAME$2}__foreground-bar`,
134
- style: {
135
- left: `${backgroundPosition}%`,
136
- right: `${backgroundPosition}%`,
137
- transform: `scaleX(${trackPosition})`
138
- }
139
- })]
140
- });
141
- });
142
- ProgressTracker.displayName = COMPONENT_NAME$2;
143
- ProgressTracker.className = CLASSNAME$2;
144
- ProgressTracker.defaultProps = DEFAULT_PROPS$2;
145
-
146
- /**
147
- * Component display name.
148
- */
149
- const COMPONENT_NAME$1 = 'ProgressTrackerStep';
150
-
151
- /**
152
- * Component default class name and class prefix.
153
- */
154
- const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
155
-
156
- /**
157
- * Component default props.
158
- */
159
- const DEFAULT_PROPS$1 = {};
160
-
161
- /**
162
- * ProgressTrackerStep component.
163
- *
164
- * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
165
- *
166
- * @param props Component props.
167
- * @param ref Component ref.
168
- * @return React element.
169
- */
170
- const ProgressTrackerStep = forwardRef((props, ref) => {
171
- const {
172
- isAnyDisabled,
173
- otherProps
174
- } = useDisableStateProps(props);
175
- const {
176
- className,
177
- hasError,
178
- helper,
179
- id,
180
- isActive: propIsActive,
181
- isComplete,
182
- label,
183
- onFocus,
184
- onKeyPress,
185
- tabIndex = -1,
186
- ...forwardedProps
187
- } = otherProps;
188
- const state = useTabProviderContext('tab', id);
189
- const isActive = propIsActive || state?.isActive;
190
- const changeToCurrentTab = useCallback(() => {
191
- if (isAnyDisabled) {
192
- return;
193
- }
194
- state?.changeToTab();
195
- }, [isAnyDisabled, state]);
196
- const handleFocus = useCallback(event => {
197
- onFocus?.(event);
198
- if (state?.shouldActivateOnFocus) {
199
- changeToCurrentTab();
200
- }
201
- }, [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus]);
202
- const handleKeyPress = useCallback(event => {
203
- onKeyPress?.(event);
204
- if (event.key !== 'Enter') {
205
- return;
206
- }
207
- changeToCurrentTab();
208
- }, [changeToCurrentTab, onKeyPress]);
209
- const getIcon = () => {
210
- if (isComplete) {
211
- return mdiCheckCircle;
212
- }
213
- if (isActive) {
214
- return hasError ? mdiAlertCircle : mdiRadioboxMarked;
215
- }
216
- return mdiRadioboxBlank;
217
- };
218
- return /*#__PURE__*/jsxs("button", {
219
- ref: ref,
220
- ...forwardedProps,
221
- type: "button",
222
- id: state?.tabId,
223
- className: classNames(className, handleBasicClasses({
224
- prefix: CLASSNAME$1,
225
- hasError,
226
- isActive,
227
- isClickable: state && !isAnyDisabled,
228
- isComplete
229
- })),
230
- onClick: changeToCurrentTab,
231
- onKeyPress: handleKeyPress,
232
- onFocus: handleFocus,
233
- role: "tab",
234
- tabIndex: isActive ? 0 : tabIndex,
235
- "aria-disabled": isAnyDisabled,
236
- "aria-selected": isActive,
237
- "aria-controls": state?.tabPanelId,
238
- children: [/*#__PURE__*/jsx(Icon, {
239
- className: `${CLASSNAME$1}__state`,
240
- icon: getIcon(),
241
- size: Size.s
242
- }), /*#__PURE__*/jsx(InputLabel, {
243
- htmlFor: state?.tabId || '',
244
- className: `${CLASSNAME$1}__label`,
245
- children: label
246
- }), helper && /*#__PURE__*/jsx(InputHelper, {
247
- kind: hasError ? Kind.error : Kind.info,
248
- className: `${CLASSNAME$1}__helper`,
249
- children: helper
250
- })]
251
- });
252
- });
253
- ProgressTrackerStep.displayName = COMPONENT_NAME$1;
254
- ProgressTrackerStep.className = CLASSNAME$1;
255
- ProgressTrackerStep.defaultProps = DEFAULT_PROPS$1;
256
-
257
- /**
258
- * Component display name.
259
- */
260
- const COMPONENT_NAME = 'ProgressTrackerStepPanel';
261
-
262
- /**
263
- * Component default class name and class prefix.
264
- */
265
- const CLASSNAME = `${CSS_PREFIX}-step-panel`;
266
-
267
- /**
268
- * Component default props.
269
- */
270
- const DEFAULT_PROPS = {};
271
-
272
- /**
273
- * ProgressTrackerStepPanel component.
274
- *
275
- * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
276
- *
277
- * @param props Component props.
278
- * @param ref Component ref.
279
- * @return React element.
280
- */
281
- const ProgressTrackerStepPanel = forwardRef((props, ref) => {
282
- const {
283
- children,
284
- id,
285
- className,
286
- isActive: propIsActive,
287
- ...forwardedProps
288
- } = props;
289
- const state = useTabProviderContext('tabPanel', id);
290
- const isActive = propIsActive || state?.isActive;
291
- return /*#__PURE__*/jsx("div", {
292
- ref: ref,
293
- ...forwardedProps,
294
- id: state?.tabPanelId,
295
- className: classNames(className, handleBasicClasses({
296
- prefix: CLASSNAME,
297
- isActive
298
- })),
299
- role: "tabpanel",
300
- tabIndex: isActive ? 0 : -1,
301
- "aria-labelledby": state?.tabId,
302
- children: (!state?.isLazy || isActive) && children
303
- });
304
- });
305
- ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
306
- ProgressTrackerStepPanel.className = CLASSNAME;
307
- ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;
308
-
309
- export { ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel };