@carbon/ibm-products 2.36.0-alpha.27 → 2.36.0
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/Carousel/Carousel.d.ts +46 -2
- package/es/components/Carousel/Carousel.js +36 -21
- package/es/components/Carousel/CarouselItem.d.ts +19 -2
- package/es/components/Carousel/CarouselItem.js +0 -1
- package/es/components/UserProfileImage/UserProfileImage.d.ts +66 -2
- package/es/components/UserProfileImage/UserProfileImage.js +5 -3
- package/lib/components/Carousel/Carousel.d.ts +46 -2
- package/lib/components/Carousel/Carousel.js +35 -20
- package/lib/components/Carousel/CarouselItem.d.ts +19 -2
- package/lib/components/Carousel/CarouselItem.js +0 -1
- package/lib/components/UserProfileImage/UserProfileImage.d.ts +66 -2
- package/lib/components/UserProfileImage/UserProfileImage.js +5 -3
- package/package.json +5 -5
- package/telemetry.yml +3 -0
@@ -1,3 +1,47 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2023, 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
|
+
import React, { ReactNode } from 'react';
|
8
|
+
interface CarouselProps {
|
9
|
+
/**
|
10
|
+
* Provide the contents of the Carousel.
|
11
|
+
*/
|
12
|
+
children: ReactNode;
|
13
|
+
/**
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
15
|
+
*/
|
16
|
+
className?: string;
|
17
|
+
/**
|
18
|
+
* Disables the ability of the Carousel to scroll
|
19
|
+
* use a keyboard's left and right arrow keys.
|
20
|
+
*/
|
21
|
+
disableArrowScroll?: boolean;
|
22
|
+
/**
|
23
|
+
* Enables the edges of the component to have faded styling.
|
24
|
+
*
|
25
|
+
* Pass a single string (`$color`) to specify the same color for left and right.
|
26
|
+
*
|
27
|
+
* Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
|
28
|
+
*/
|
29
|
+
fadedEdgeColor?: string | {
|
30
|
+
left: string;
|
31
|
+
right: string;
|
32
|
+
};
|
33
|
+
/**
|
34
|
+
* An optional callback function that returns `true`
|
35
|
+
* when the carousel has enough content to be scrollable,
|
36
|
+
* and `false` when there is not enough content.
|
37
|
+
*/
|
38
|
+
onChangeIsScrollable?: (isScrollable: boolean) => void;
|
39
|
+
/**
|
40
|
+
* An optional callback function that returns the scroll position as
|
41
|
+
* a value between 0 and 1.
|
42
|
+
*/
|
43
|
+
onScroll?: (scrollPercent: number) => void;
|
44
|
+
}
|
1
45
|
/**
|
2
46
|
* The Carousel acts as a scaffold for other Novice to Pro content.
|
3
47
|
*
|
@@ -14,5 +58,5 @@
|
|
14
58
|
* 2. From the right-aligned position, when scrolling left,
|
15
59
|
* the left-most item should again be left-aligned.
|
16
60
|
*/
|
17
|
-
|
18
|
-
|
61
|
+
declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
|
62
|
+
export { Carousel };
|
@@ -5,7 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
9
|
import React__default, { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
|
10
10
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
11
|
import { CarouselItem } from './CarouselItem.js';
|
@@ -14,7 +14,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
|
14
14
|
import { pkg } from '../../settings.js';
|
15
15
|
|
16
16
|
var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
|
17
|
-
|
18
17
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
19
18
|
var blockClass = "".concat(pkg.prefix, "--carousel");
|
20
19
|
var componentName = 'Carousel';
|
@@ -53,29 +52,31 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
53
52
|
_ref$onScroll = _ref.onScroll,
|
54
53
|
onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
|
55
54
|
rest = _objectWithoutProperties(_ref, _excluded);
|
56
|
-
var carouselRef = useRef();
|
57
|
-
var scrollRef = useRef();
|
55
|
+
var carouselRef = useRef(null);
|
56
|
+
var scrollRef = useRef(null);
|
58
57
|
// Array of refs used to reference this component's children DOM elements
|
59
58
|
var childElementsRef = useRef(Array(React__default.Children.count(children)).fill(useRef(null)));
|
60
|
-
var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left
|
61
|
-
var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right
|
59
|
+
var leftFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
|
60
|
+
var rightFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
|
62
61
|
|
63
62
|
// Trigger callbacks to report state of the carousel
|
64
63
|
var handleOnScroll = useCallback(function () {
|
64
|
+
var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
|
65
|
+
if (!scrollRef.current) {
|
66
|
+
return;
|
67
|
+
}
|
68
|
+
|
65
69
|
// viewport's width
|
66
|
-
var clientWidth = scrollRef.current.clientWidth;
|
70
|
+
var clientWidth = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth;
|
67
71
|
// scroll position
|
68
|
-
var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
|
72
|
+
var scrollLeft = parseInt("".concat((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft), 10);
|
69
73
|
// scrollable width
|
70
|
-
var scrollWidth = scrollRef.current.scrollWidth;
|
74
|
+
var scrollWidth = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth;
|
71
75
|
|
72
76
|
// The maximum scrollLeft achievable is the scrollable width - the viewport width.
|
73
77
|
var scrollLeftMax = scrollWidth - clientWidth;
|
74
78
|
// if isNaN(scrollLeft / scrollLeftMax), then set to zero
|
75
79
|
var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
|
76
|
-
if (!scrollRef.current) {
|
77
|
-
return;
|
78
|
-
}
|
79
80
|
|
80
81
|
// Callback 1: Does the carousel have enough content to enable scrolling?
|
81
82
|
onChangeIsScrollable(scrollWidth > clientWidth);
|
@@ -95,7 +96,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
95
96
|
|
96
97
|
// Get all elements that are visible in the container.
|
97
98
|
var getElementsInView = useCallback(function () {
|
98
|
-
var
|
99
|
+
var _scrollRef$current4;
|
100
|
+
var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.getBoundingClientRect();
|
99
101
|
var inViewElements = childElementsRef.current.filter(function (el) {
|
100
102
|
return getElementInView(containerRect, el.getBoundingClientRect());
|
101
103
|
});
|
@@ -104,8 +106,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
104
106
|
|
105
107
|
// Return container's and children's rect data
|
106
108
|
var getContainerAndChildRectData = useCallback(function () {
|
109
|
+
var _scrollRef$current5;
|
107
110
|
// Get the rect of the container
|
108
|
-
var containerRect = scrollRef.current.getBoundingClientRect();
|
111
|
+
var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.getBoundingClientRect();
|
109
112
|
// Get all child elements that are in view of the container, and return their bounding rects.
|
110
113
|
var elementRectsInView = getElementsInView().map(function (el) {
|
111
114
|
return el.getBoundingClientRect();
|
@@ -123,27 +126,37 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
123
126
|
};
|
124
127
|
}, [getElementsInView]);
|
125
128
|
var handleScrollNext = useCallback(function () {
|
129
|
+
if (!scrollRef.current) {
|
130
|
+
return;
|
131
|
+
}
|
126
132
|
var _getContainerAndChild = getContainerAndChildRectData(),
|
127
133
|
containerRect = _getContainerAndChild.containerRect,
|
128
134
|
visibleWidth = _getContainerAndChild.visibleWidth;
|
129
135
|
// Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
|
130
|
-
var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
|
136
|
+
var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
|
131
137
|
// Increment the scrollLeft of the container
|
132
138
|
scrollRef.current.scrollLeft += scrollValue;
|
133
139
|
}, [getContainerAndChildRectData]);
|
134
140
|
var handleScrollPrev = useCallback(function () {
|
141
|
+
var _containerRect$width, _containerRect$left;
|
142
|
+
if (!scrollRef.current) {
|
143
|
+
return;
|
144
|
+
}
|
135
145
|
var _getContainerAndChild2 = getContainerAndChildRectData(),
|
136
146
|
containerRect = _getContainerAndChild2.containerRect,
|
137
147
|
elementRectsInView = _getContainerAndChild2.elementRectsInView,
|
138
148
|
visibleWidth = _getContainerAndChild2.visibleWidth;
|
139
149
|
// Set the scrollValue to the visibleWidth minus the first child's left value,
|
140
150
|
// but if the visibleWidth value is 0, set it to the container's width plus the container's left value
|
141
|
-
var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
|
151
|
+
var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : ((_containerRect$width = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) !== null && _containerRect$width !== void 0 ? _containerRect$width : 0) + ((_containerRect$left = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _containerRect$left !== void 0 ? _containerRect$left : 0);
|
142
152
|
|
143
153
|
// Decrement the scrollLeft of the container
|
144
154
|
scrollRef.current.scrollLeft -= scrollValue;
|
145
155
|
}, [getContainerAndChildRectData]);
|
146
156
|
var handleScrollReset = useCallback(function () {
|
157
|
+
if (!scrollRef.current) {
|
158
|
+
return;
|
159
|
+
}
|
147
160
|
// This doesn't trigger "scrollend"...
|
148
161
|
scrollRef.current.scrollLeft = 0;
|
149
162
|
// ...so trigger a callback manually.
|
@@ -170,6 +183,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
170
183
|
// On window.resize, reset carousel to zero.
|
171
184
|
useEffect(function () {
|
172
185
|
var handleWindowResize = function handleWindowResize() {
|
186
|
+
if (!scrollRef.current) {
|
187
|
+
return;
|
188
|
+
}
|
173
189
|
scrollRef.current.scrollLeft = 0;
|
174
190
|
handleOnScroll();
|
175
191
|
};
|
@@ -185,9 +201,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
185
201
|
handleOnScroll();
|
186
202
|
};
|
187
203
|
var scrollDiv = scrollRef.current;
|
188
|
-
scrollDiv.addEventListener('scrollend', handleScrollend);
|
204
|
+
scrollDiv === null || scrollDiv === void 0 || scrollDiv.addEventListener('scrollend', handleScrollend);
|
189
205
|
return function () {
|
190
|
-
return scrollDiv.removeEventListener('scrollend', handleScrollend);
|
206
|
+
return scrollDiv === null || scrollDiv === void 0 ? void 0 : scrollDiv.removeEventListener('scrollend', handleScrollend);
|
191
207
|
};
|
192
208
|
}, [handleOnScroll]);
|
193
209
|
|
@@ -207,9 +223,7 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
207
223
|
passive: false
|
208
224
|
});
|
209
225
|
return function () {
|
210
|
-
scrollDiv.removeEventListener('wheel', handleWheel
|
211
|
-
passive: false
|
212
|
-
});
|
226
|
+
scrollDiv.removeEventListener('wheel', handleWheel);
|
213
227
|
};
|
214
228
|
}
|
215
229
|
}, []);
|
@@ -305,6 +319,7 @@ Carousel.propTypes = {
|
|
305
319
|
*
|
306
320
|
* Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
|
307
321
|
*/
|
322
|
+
/**@ts-ignore*/
|
308
323
|
fadedEdgeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
|
309
324
|
left: PropTypes.string,
|
310
325
|
right: PropTypes.string
|
@@ -1,5 +1,22 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2023, 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
|
+
import React, { ReactNode } from 'react';
|
8
|
+
interface CarouselItemProps {
|
9
|
+
/**
|
10
|
+
* Provide the contents of the CarouselItem.
|
11
|
+
*/
|
12
|
+
children: ReactNode;
|
13
|
+
/**
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
15
|
+
*/
|
16
|
+
className?: string;
|
17
|
+
}
|
1
18
|
/**
|
2
19
|
* TODO: A description of the component.
|
3
20
|
*/
|
4
|
-
|
5
|
-
|
21
|
+
declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
|
22
|
+
export { CarouselItem };
|
@@ -13,7 +13,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
|
13
13
|
import { pkg } from '../../settings.js';
|
14
14
|
|
15
15
|
var _excluded = ["children", "className"];
|
16
|
-
|
17
16
|
// Carbon and package components we use.
|
18
17
|
/* TODO: @import(s) of carbon components and other package components. */
|
19
18
|
|
@@ -1,5 +1,69 @@
|
|
1
1
|
/**
|
2
|
-
*
|
2
|
+
* Copyright IBM Corp. 2021, 2021
|
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.
|
3
6
|
*/
|
4
|
-
|
7
|
+
/// <reference path="../../../src/custom-typings/index.d.ts" />
|
5
8
|
import React from 'react';
|
9
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
10
|
+
import '../../global/js/utils/props-helper';
|
11
|
+
import { IconButton } from '@carbon/react';
|
12
|
+
type imageProps = {
|
13
|
+
/**
|
14
|
+
* When passing the image prop, supply a full path to the image to be displayed.
|
15
|
+
*/
|
16
|
+
image: string;
|
17
|
+
/**
|
18
|
+
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
19
|
+
*/
|
20
|
+
imageDescription: string;
|
21
|
+
} | {
|
22
|
+
image?: never;
|
23
|
+
imageDescription?: never;
|
24
|
+
};
|
25
|
+
type UserProfileImageBaseProps = {
|
26
|
+
/**
|
27
|
+
* The background color passed should match one of the background colors in the library documentation:
|
28
|
+
* https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
|
29
|
+
*/
|
30
|
+
backgroundColor?: string;
|
31
|
+
/**
|
32
|
+
* Provide an optional class to be applied to the containing node.
|
33
|
+
*/
|
34
|
+
className?: string;
|
35
|
+
/**
|
36
|
+
* Provide a custom icon to use if you need to use an icon other than the included ones
|
37
|
+
*/
|
38
|
+
icon?: () => CarbonIconType | null;
|
39
|
+
/**
|
40
|
+
* When passing the initials prop, either send the initials to be used or the user's display name. The first two capital letters of the display name will be used as the initials.
|
41
|
+
*/
|
42
|
+
initials?: string;
|
43
|
+
/**
|
44
|
+
* When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
|
45
|
+
*/
|
46
|
+
kind?: 'user' | 'group';
|
47
|
+
/**
|
48
|
+
* Set the size of the avatar circle
|
49
|
+
*/
|
50
|
+
size: 'xl' | 'lg' | 'md';
|
51
|
+
/**
|
52
|
+
* Set theme in which the component will be rendered
|
53
|
+
*/
|
54
|
+
theme: 'light' | 'dark';
|
55
|
+
/**
|
56
|
+
* Specify how the trigger should align with the tooltip
|
57
|
+
*/
|
58
|
+
tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
|
59
|
+
/**
|
60
|
+
* Pass in the display name to have it shown on hover
|
61
|
+
*/
|
62
|
+
tooltipText?: string;
|
63
|
+
};
|
64
|
+
type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
|
65
|
+
/**
|
66
|
+
* The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
|
67
|
+
*/
|
68
|
+
export declare let UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
|
69
|
+
export {};
|
@@ -17,7 +17,6 @@ import { usePrefix, Tooltip } from '@carbon/react';
|
|
17
17
|
import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
|
18
18
|
|
19
19
|
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
|
20
|
-
|
21
20
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
22
21
|
var blockClass = "".concat(pkg.prefix, "--user-profile-image");
|
23
22
|
var componentName = 'UserProfileImage';
|
@@ -84,12 +83,13 @@ var UserProfileImage = /*#__PURE__*/React__default.forwardRef(function (_ref, re
|
|
84
83
|
}
|
85
84
|
};
|
86
85
|
var formatInitials = function formatInitials() {
|
87
|
-
|
86
|
+
var _match;
|
87
|
+
if (initials && initials.length === 2) {
|
88
88
|
return initials;
|
89
89
|
}
|
90
90
|
// RegEx takes in the display name and returns the first and last initials. Thomas Watson and Thomas J. Watson
|
91
91
|
// both return JW.
|
92
|
-
return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
|
92
|
+
return ((_match = (initials || '').match(/(^\S\S?|\b\S)?/g)) === null || _match === void 0 || (_match = _match.join('').match(/(^\S|\S$)?/g)) === null || _match === void 0 ? void 0 : _match.join('').toUpperCase()) || '';
|
93
93
|
};
|
94
94
|
var getFillItem = function getFillItem() {
|
95
95
|
if (image) {
|
@@ -149,10 +149,12 @@ UserProfileImage.propTypes = {
|
|
149
149
|
/**
|
150
150
|
* When passing the image prop, supply a full path to the image to be displayed.
|
151
151
|
*/
|
152
|
+
/**@ts-ignore */
|
152
153
|
image: PropTypes.string,
|
153
154
|
/**
|
154
155
|
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
155
156
|
*/
|
157
|
+
/**@ts-ignore */
|
156
158
|
imageDescription: PropTypes.string.isRequired.if(function (_ref2) {
|
157
159
|
var image = _ref2.image;
|
158
160
|
return !!image;
|
@@ -1,3 +1,47 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2023, 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
|
+
import React, { ReactNode } from 'react';
|
8
|
+
interface CarouselProps {
|
9
|
+
/**
|
10
|
+
* Provide the contents of the Carousel.
|
11
|
+
*/
|
12
|
+
children: ReactNode;
|
13
|
+
/**
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
15
|
+
*/
|
16
|
+
className?: string;
|
17
|
+
/**
|
18
|
+
* Disables the ability of the Carousel to scroll
|
19
|
+
* use a keyboard's left and right arrow keys.
|
20
|
+
*/
|
21
|
+
disableArrowScroll?: boolean;
|
22
|
+
/**
|
23
|
+
* Enables the edges of the component to have faded styling.
|
24
|
+
*
|
25
|
+
* Pass a single string (`$color`) to specify the same color for left and right.
|
26
|
+
*
|
27
|
+
* Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
|
28
|
+
*/
|
29
|
+
fadedEdgeColor?: string | {
|
30
|
+
left: string;
|
31
|
+
right: string;
|
32
|
+
};
|
33
|
+
/**
|
34
|
+
* An optional callback function that returns `true`
|
35
|
+
* when the carousel has enough content to be scrollable,
|
36
|
+
* and `false` when there is not enough content.
|
37
|
+
*/
|
38
|
+
onChangeIsScrollable?: (isScrollable: boolean) => void;
|
39
|
+
/**
|
40
|
+
* An optional callback function that returns the scroll position as
|
41
|
+
* a value between 0 and 1.
|
42
|
+
*/
|
43
|
+
onScroll?: (scrollPercent: number) => void;
|
44
|
+
}
|
1
45
|
/**
|
2
46
|
* The Carousel acts as a scaffold for other Novice to Pro content.
|
3
47
|
*
|
@@ -14,5 +58,5 @@
|
|
14
58
|
* 2. From the right-aligned position, when scrolling left,
|
15
59
|
* the left-most item should again be left-aligned.
|
16
60
|
*/
|
17
|
-
|
18
|
-
|
61
|
+
declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
|
62
|
+
export { Carousel };
|
@@ -23,7 +23,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
23
23
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
24
24
|
|
25
25
|
var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
|
26
|
-
|
27
26
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
28
27
|
var blockClass = "".concat(settings.pkg.prefix, "--carousel");
|
29
28
|
var componentName = 'Carousel';
|
@@ -62,29 +61,31 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
62
61
|
_ref$onScroll = _ref.onScroll,
|
63
62
|
onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
|
64
63
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
65
|
-
var carouselRef = React.useRef();
|
66
|
-
var scrollRef = React.useRef();
|
64
|
+
var carouselRef = React.useRef(null);
|
65
|
+
var scrollRef = React.useRef(null);
|
67
66
|
// Array of refs used to reference this component's children DOM elements
|
68
67
|
var childElementsRef = React.useRef(Array(React__default["default"].Children.count(children)).fill(React.useRef(null)));
|
69
|
-
var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left
|
70
|
-
var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right
|
68
|
+
var leftFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
|
69
|
+
var rightFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
|
71
70
|
|
72
71
|
// Trigger callbacks to report state of the carousel
|
73
72
|
var handleOnScroll = React.useCallback(function () {
|
73
|
+
var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
|
74
|
+
if (!scrollRef.current) {
|
75
|
+
return;
|
76
|
+
}
|
77
|
+
|
74
78
|
// viewport's width
|
75
|
-
var clientWidth = scrollRef.current.clientWidth;
|
79
|
+
var clientWidth = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth;
|
76
80
|
// scroll position
|
77
|
-
var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
|
81
|
+
var scrollLeft = parseInt("".concat((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft), 10);
|
78
82
|
// scrollable width
|
79
|
-
var scrollWidth = scrollRef.current.scrollWidth;
|
83
|
+
var scrollWidth = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth;
|
80
84
|
|
81
85
|
// The maximum scrollLeft achievable is the scrollable width - the viewport width.
|
82
86
|
var scrollLeftMax = scrollWidth - clientWidth;
|
83
87
|
// if isNaN(scrollLeft / scrollLeftMax), then set to zero
|
84
88
|
var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
|
85
|
-
if (!scrollRef.current) {
|
86
|
-
return;
|
87
|
-
}
|
88
89
|
|
89
90
|
// Callback 1: Does the carousel have enough content to enable scrolling?
|
90
91
|
onChangeIsScrollable(scrollWidth > clientWidth);
|
@@ -104,7 +105,8 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
104
105
|
|
105
106
|
// Get all elements that are visible in the container.
|
106
107
|
var getElementsInView = React.useCallback(function () {
|
107
|
-
var
|
108
|
+
var _scrollRef$current4;
|
109
|
+
var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.getBoundingClientRect();
|
108
110
|
var inViewElements = childElementsRef.current.filter(function (el) {
|
109
111
|
return getElementInView(containerRect, el.getBoundingClientRect());
|
110
112
|
});
|
@@ -113,8 +115,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
113
115
|
|
114
116
|
// Return container's and children's rect data
|
115
117
|
var getContainerAndChildRectData = React.useCallback(function () {
|
118
|
+
var _scrollRef$current5;
|
116
119
|
// Get the rect of the container
|
117
|
-
var containerRect = scrollRef.current.getBoundingClientRect();
|
120
|
+
var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.getBoundingClientRect();
|
118
121
|
// Get all child elements that are in view of the container, and return their bounding rects.
|
119
122
|
var elementRectsInView = getElementsInView().map(function (el) {
|
120
123
|
return el.getBoundingClientRect();
|
@@ -132,27 +135,37 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
132
135
|
};
|
133
136
|
}, [getElementsInView]);
|
134
137
|
var handleScrollNext = React.useCallback(function () {
|
138
|
+
if (!scrollRef.current) {
|
139
|
+
return;
|
140
|
+
}
|
135
141
|
var _getContainerAndChild = getContainerAndChildRectData(),
|
136
142
|
containerRect = _getContainerAndChild.containerRect,
|
137
143
|
visibleWidth = _getContainerAndChild.visibleWidth;
|
138
144
|
// Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
|
139
|
-
var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
|
145
|
+
var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
|
140
146
|
// Increment the scrollLeft of the container
|
141
147
|
scrollRef.current.scrollLeft += scrollValue;
|
142
148
|
}, [getContainerAndChildRectData]);
|
143
149
|
var handleScrollPrev = React.useCallback(function () {
|
150
|
+
var _containerRect$width, _containerRect$left;
|
151
|
+
if (!scrollRef.current) {
|
152
|
+
return;
|
153
|
+
}
|
144
154
|
var _getContainerAndChild2 = getContainerAndChildRectData(),
|
145
155
|
containerRect = _getContainerAndChild2.containerRect,
|
146
156
|
elementRectsInView = _getContainerAndChild2.elementRectsInView,
|
147
157
|
visibleWidth = _getContainerAndChild2.visibleWidth;
|
148
158
|
// Set the scrollValue to the visibleWidth minus the first child's left value,
|
149
159
|
// but if the visibleWidth value is 0, set it to the container's width plus the container's left value
|
150
|
-
var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
|
160
|
+
var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : ((_containerRect$width = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) !== null && _containerRect$width !== void 0 ? _containerRect$width : 0) + ((_containerRect$left = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _containerRect$left !== void 0 ? _containerRect$left : 0);
|
151
161
|
|
152
162
|
// Decrement the scrollLeft of the container
|
153
163
|
scrollRef.current.scrollLeft -= scrollValue;
|
154
164
|
}, [getContainerAndChildRectData]);
|
155
165
|
var handleScrollReset = React.useCallback(function () {
|
166
|
+
if (!scrollRef.current) {
|
167
|
+
return;
|
168
|
+
}
|
156
169
|
// This doesn't trigger "scrollend"...
|
157
170
|
scrollRef.current.scrollLeft = 0;
|
158
171
|
// ...so trigger a callback manually.
|
@@ -179,6 +192,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
179
192
|
// On window.resize, reset carousel to zero.
|
180
193
|
React.useEffect(function () {
|
181
194
|
var handleWindowResize = function handleWindowResize() {
|
195
|
+
if (!scrollRef.current) {
|
196
|
+
return;
|
197
|
+
}
|
182
198
|
scrollRef.current.scrollLeft = 0;
|
183
199
|
handleOnScroll();
|
184
200
|
};
|
@@ -194,9 +210,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
194
210
|
handleOnScroll();
|
195
211
|
};
|
196
212
|
var scrollDiv = scrollRef.current;
|
197
|
-
scrollDiv.addEventListener('scrollend', handleScrollend);
|
213
|
+
scrollDiv === null || scrollDiv === void 0 || scrollDiv.addEventListener('scrollend', handleScrollend);
|
198
214
|
return function () {
|
199
|
-
return scrollDiv.removeEventListener('scrollend', handleScrollend);
|
215
|
+
return scrollDiv === null || scrollDiv === void 0 ? void 0 : scrollDiv.removeEventListener('scrollend', handleScrollend);
|
200
216
|
};
|
201
217
|
}, [handleOnScroll]);
|
202
218
|
|
@@ -216,9 +232,7 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
216
232
|
passive: false
|
217
233
|
});
|
218
234
|
return function () {
|
219
|
-
scrollDiv.removeEventListener('wheel', handleWheel
|
220
|
-
passive: false
|
221
|
-
});
|
235
|
+
scrollDiv.removeEventListener('wheel', handleWheel);
|
222
236
|
};
|
223
237
|
}
|
224
238
|
}, []);
|
@@ -314,6 +328,7 @@ Carousel.propTypes = {
|
|
314
328
|
*
|
315
329
|
* Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
|
316
330
|
*/
|
331
|
+
/**@ts-ignore*/
|
317
332
|
fadedEdgeColor: index["default"].oneOfType([index["default"].string, index["default"].shape({
|
318
333
|
left: index["default"].string,
|
319
334
|
right: index["default"].string
|
@@ -1,5 +1,22 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2023, 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
|
+
import React, { ReactNode } from 'react';
|
8
|
+
interface CarouselItemProps {
|
9
|
+
/**
|
10
|
+
* Provide the contents of the CarouselItem.
|
11
|
+
*/
|
12
|
+
children: ReactNode;
|
13
|
+
/**
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
15
|
+
*/
|
16
|
+
className?: string;
|
17
|
+
}
|
1
18
|
/**
|
2
19
|
* TODO: A description of the component.
|
3
20
|
*/
|
4
|
-
|
5
|
-
|
21
|
+
declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
|
22
|
+
export { CarouselItem };
|
@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
22
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
23
23
|
|
24
24
|
var _excluded = ["children", "className"];
|
25
|
-
|
26
25
|
// Carbon and package components we use.
|
27
26
|
/* TODO: @import(s) of carbon components and other package components. */
|
28
27
|
|
@@ -1,5 +1,69 @@
|
|
1
1
|
/**
|
2
|
-
*
|
2
|
+
* Copyright IBM Corp. 2021, 2021
|
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.
|
3
6
|
*/
|
4
|
-
|
7
|
+
/// <reference path="../../../src/custom-typings/index.d.ts" />
|
5
8
|
import React from 'react';
|
9
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
10
|
+
import '../../global/js/utils/props-helper';
|
11
|
+
import { IconButton } from '@carbon/react';
|
12
|
+
type imageProps = {
|
13
|
+
/**
|
14
|
+
* When passing the image prop, supply a full path to the image to be displayed.
|
15
|
+
*/
|
16
|
+
image: string;
|
17
|
+
/**
|
18
|
+
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
19
|
+
*/
|
20
|
+
imageDescription: string;
|
21
|
+
} | {
|
22
|
+
image?: never;
|
23
|
+
imageDescription?: never;
|
24
|
+
};
|
25
|
+
type UserProfileImageBaseProps = {
|
26
|
+
/**
|
27
|
+
* The background color passed should match one of the background colors in the library documentation:
|
28
|
+
* https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
|
29
|
+
*/
|
30
|
+
backgroundColor?: string;
|
31
|
+
/**
|
32
|
+
* Provide an optional class to be applied to the containing node.
|
33
|
+
*/
|
34
|
+
className?: string;
|
35
|
+
/**
|
36
|
+
* Provide a custom icon to use if you need to use an icon other than the included ones
|
37
|
+
*/
|
38
|
+
icon?: () => CarbonIconType | null;
|
39
|
+
/**
|
40
|
+
* When passing the initials prop, either send the initials to be used or the user's display name. The first two capital letters of the display name will be used as the initials.
|
41
|
+
*/
|
42
|
+
initials?: string;
|
43
|
+
/**
|
44
|
+
* When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
|
45
|
+
*/
|
46
|
+
kind?: 'user' | 'group';
|
47
|
+
/**
|
48
|
+
* Set the size of the avatar circle
|
49
|
+
*/
|
50
|
+
size: 'xl' | 'lg' | 'md';
|
51
|
+
/**
|
52
|
+
* Set theme in which the component will be rendered
|
53
|
+
*/
|
54
|
+
theme: 'light' | 'dark';
|
55
|
+
/**
|
56
|
+
* Specify how the trigger should align with the tooltip
|
57
|
+
*/
|
58
|
+
tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
|
59
|
+
/**
|
60
|
+
* Pass in the display name to have it shown on hover
|
61
|
+
*/
|
62
|
+
tooltipText?: string;
|
63
|
+
};
|
64
|
+
type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
|
65
|
+
/**
|
66
|
+
* The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
|
67
|
+
*/
|
68
|
+
export declare let UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
|
69
|
+
export {};
|
@@ -26,7 +26,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
26
26
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
27
27
|
|
28
28
|
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
|
29
|
-
|
30
29
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
31
30
|
var blockClass = "".concat(settings.pkg.prefix, "--user-profile-image");
|
32
31
|
var componentName = 'UserProfileImage';
|
@@ -93,12 +92,13 @@ exports.UserProfileImage = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
93
92
|
}
|
94
93
|
};
|
95
94
|
var formatInitials = function formatInitials() {
|
96
|
-
|
95
|
+
var _match;
|
96
|
+
if (initials && initials.length === 2) {
|
97
97
|
return initials;
|
98
98
|
}
|
99
99
|
// RegEx takes in the display name and returns the first and last initials. Thomas Watson and Thomas J. Watson
|
100
100
|
// both return JW.
|
101
|
-
return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
|
101
|
+
return ((_match = (initials || '').match(/(^\S\S?|\b\S)?/g)) === null || _match === void 0 || (_match = _match.join('').match(/(^\S|\S$)?/g)) === null || _match === void 0 ? void 0 : _match.join('').toUpperCase()) || '';
|
102
102
|
};
|
103
103
|
var getFillItem = function getFillItem() {
|
104
104
|
if (image) {
|
@@ -158,10 +158,12 @@ exports.UserProfileImage.propTypes = {
|
|
158
158
|
/**
|
159
159
|
* When passing the image prop, supply a full path to the image to be displayed.
|
160
160
|
*/
|
161
|
+
/**@ts-ignore */
|
161
162
|
image: index["default"].string,
|
162
163
|
/**
|
163
164
|
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
164
165
|
*/
|
166
|
+
/**@ts-ignore */
|
165
167
|
imageDescription: index["default"].string.isRequired.if(function (_ref2) {
|
166
168
|
var image = _ref2.image;
|
167
169
|
return !!image;
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.36.0
|
4
|
+
"version": "2.36.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -76,7 +76,7 @@
|
|
76
76
|
"fs-extra": "^11.2.0",
|
77
77
|
"glob": "^10.3.10",
|
78
78
|
"jest": "^29.7.0",
|
79
|
-
"jest-config-ibm-cloud-cognitive": "^1.1.
|
79
|
+
"jest-config-ibm-cloud-cognitive": "^1.1.6",
|
80
80
|
"jest-environment-jsdom": "^29.7.0",
|
81
81
|
"namor": "^1.1.2",
|
82
82
|
"npm-check-updates": "^16.14.12",
|
@@ -90,13 +90,13 @@
|
|
90
90
|
},
|
91
91
|
"dependencies": {
|
92
92
|
"@babel/runtime": "^7.23.9",
|
93
|
-
"@carbon/ibm-products-styles": "^2.
|
93
|
+
"@carbon/ibm-products-styles": "^2.34.0",
|
94
94
|
"@carbon/telemetry": "^0.1.0",
|
95
95
|
"@dnd-kit/core": "^6.0.8",
|
96
96
|
"@dnd-kit/modifiers": "^7.0.0",
|
97
97
|
"@dnd-kit/sortable": "^8.0.0",
|
98
98
|
"@dnd-kit/utilities": "^3.2.2",
|
99
|
-
"@ibm/telemetry-js": "^1.
|
99
|
+
"@ibm/telemetry-js": "^1.5.0",
|
100
100
|
"framer-motion": "^6.5.1 < 7",
|
101
101
|
"immutability-helper": "^3.1.1",
|
102
102
|
"lodash": "^4.17.21",
|
@@ -114,5 +114,5 @@
|
|
114
114
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
115
115
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
116
116
|
},
|
117
|
-
"gitHead": "
|
117
|
+
"gitHead": "b1783b0aa7a0fbfbc120c3b47ecfb6855983a37d"
|
118
118
|
}
|