@hazelcast/ui 2.0.4 → 2.0.5-canary.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/lib/components/Button.js +2 -2
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Calendar/Calendar.d.ts +6 -4
- package/lib/components/Calendar/Calendar.js +1 -12
- package/lib/components/Calendar/Calendar.js.map +1 -1
- package/lib/components/Calendar/components/CalendarHeader.d.ts +2 -2
- package/lib/components/Checkbox.d.ts +2 -2
- package/lib/components/Checkbox.js.map +1 -1
- package/lib/components/Error.js +1 -1
- package/lib/components/Error.js.map +1 -1
- package/lib/components/Help.d.ts +0 -1
- package/lib/components/Help.js +2 -2
- package/lib/components/Help.js.map +1 -1
- package/lib/components/Popover.d.ts +3 -10
- package/lib/components/Popover.js +28 -80
- package/lib/components/Popover.js.map +1 -1
- package/lib/components/Radio.d.ts +2 -2
- package/lib/components/Radio.js.map +1 -1
- package/lib/components/Select/CheckableSelectField.js +2 -3
- package/lib/components/Select/CheckableSelectField.js.map +1 -1
- package/lib/components/Table/features/columnsSelection/CellCopyablePopover.js +1 -1
- package/lib/components/Table/features/columnsSelection/CellCopyablePopover.js.map +1 -1
- package/lib/components/Table/features/columnsSelection/columnsSelection.d.ts +2 -2
- package/lib/components/TextArea.js +0 -6
- package/lib/components/TextArea.js.map +1 -1
- package/lib/components/Tooltip.d.ts +4 -12
- package/lib/components/Tooltip.js +33 -116
- package/lib/components/Tooltip.js.map +1 -1
- package/lib/components/Tooltip.module.scss +6 -137
- package/lib/components/TruncatedText.d.ts +0 -1
- package/lib/components/TruncatedText.js +2 -2
- package/lib/components/TruncatedText.js.map +1 -1
- package/lib/hooks/useDimensions.d.ts +1 -1
- package/lib/hooks/useDimensions.js.map +1 -1
- package/package.json +15 -14
- package/lib/hooks/useResizeAware.d.ts +0 -3
- package/lib/hooks/useResizeAware.js +0 -25
- package/lib/hooks/useResizeAware.js.map +0 -1
package/lib/components/Button.js
CHANGED
|
@@ -39,14 +39,14 @@ iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopen
|
|
|
39
39
|
const iconSize = propIconSize || (size === 'medium' ? 'smallMedium' : 'small');
|
|
40
40
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
41
41
|
const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
|
|
42
|
-
return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef
|
|
42
|
+
return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef) => (React.createElement(Component, { "data-test": "button", className: cn(styles.button, {
|
|
43
43
|
[styles[`color${capitalizeFirstCharacter(color)}`]]: true,
|
|
44
44
|
[styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
|
|
45
45
|
[styles.active]: active,
|
|
46
46
|
[styles[size]]: size !== 'small',
|
|
47
47
|
}, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ref: mergeRefs([ref, tooltipRef]), ...rest },
|
|
48
48
|
React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
|
|
49
|
-
React.createElement("span", { className: cn(styles.body, bodyClassName)
|
|
49
|
+
React.createElement("span", { className: cn(styles.body, bodyClassName) },
|
|
50
50
|
loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: iconSize }),
|
|
51
51
|
iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: iconSize, color: iconLeftColor })),
|
|
52
52
|
truncate ? (React.createElement(TruncatedText, { text: capitalize && typeof children === 'string' ? children.toUpperCase() : children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,IAAI,EAAuB,MAAM,QAAQ,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAgGzC,MAAM,wBAAwB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1F;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,SAAS,EAAE,SAAS,GAAG,QAAQ,EAC/B,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,UAAU,GAAG,IAAI;AACjB,mBAAmB;AACnB,QAAQ,EACR,eAAe,EACf,sBAAsB,EACtB,wBAAwB;AACxB,YAAY;AACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,iBAAiB;AACjB,aAAa;AACb,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,GAAG,GAAG,UAAU,EAChB,MAAM,EACN,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,IAAI,GAAG,OAAO,EACd,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAa,YAAY,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IACzD,MAAM,uBAAuB,GAAG,OAAO,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAAC,CAAC,QAAQ,IAAI,iBAAiB,CAAC,CAAA;IAE9G,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,EAC7C,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAC3C,SAAS,EAAE,wBAAwB,IAElC,CAAC,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import { DatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { DataTestProp } from '../../helpers/types';
|
|
4
4
|
import { PortalContainer } from '../../utils/portal';
|
|
5
5
|
export type CalendarSize = 'medium' | 'small';
|
|
@@ -8,10 +8,12 @@ export type CalendarProps = {
|
|
|
8
8
|
date: Date | null;
|
|
9
9
|
inputLabel?: string;
|
|
10
10
|
inputClassName?: string;
|
|
11
|
-
onDateChange:
|
|
11
|
+
onDateChange: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
12
|
+
selectsRange?: never;
|
|
13
|
+
selectsMultiple?: never;
|
|
12
14
|
size?: CalendarSize;
|
|
13
15
|
container?: PortalContainer;
|
|
14
16
|
inPortal?: boolean;
|
|
15
17
|
dateFormat?: string;
|
|
16
|
-
} & Omit<
|
|
18
|
+
} & Omit<DatePickerProps, 'value' | 'onChange' | 'dateFormat' | 'selectsMultiple' | 'selectsRange' | 'showMonthYearDropdown'> & DataTestProp;
|
|
17
19
|
export declare const Calendar: FC<CalendarProps>;
|
|
@@ -22,17 +22,6 @@ export const Calendar = ({ calendarClassName, className, containerClassName, dat
|
|
|
22
22
|
return (React.createElement("div", { className: cn(styles.container, {
|
|
23
23
|
[styles.time]: showTimeInput,
|
|
24
24
|
}, containerClassName) },
|
|
25
|
-
React.createElement(DatePicker, { ...props, "data-test": dataTest, calendarClassName: cn(styles.calendar, calendarClassName), className: className,
|
|
26
|
-
/*
|
|
27
|
-
* Note: The library instantiates the component using React.cloneElement
|
|
28
|
-
* Source: https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L926
|
|
29
|
-
*/
|
|
30
|
-
customInput: React.createElement(CalendarInput, { "data-test": `${dataTest}-input`, label: inputLabel, textFieldSize: size, className: inputClassName }), customTimeInput: React.createElement(CalendarTime, { "data-test": `${dataTest}-time` }), dateFormat: showTimeInput ? `${dateFormat} ${timeFormat}` : dateFormat, onChange: onDateChange, popperContainer: PopperContainer,
|
|
31
|
-
/*
|
|
32
|
-
* Note:
|
|
33
|
-
* 'renderCustomHeader' is the only child component override prop that is not instantiated
|
|
34
|
-
* via React.cloneElement. So at least we can utilise a typed React.Component over React.ReactNode here
|
|
35
|
-
*/
|
|
36
|
-
renderCustomHeader: CalendarHeader, selected: date, timeFormat: timeFormat, showPopperArrow: false, showTimeInput: showTimeInput })));
|
|
25
|
+
React.createElement(DatePicker, { ...props, "data-test": dataTest, calendarClassName: cn(styles.calendar, calendarClassName), className: className, customInput: React.createElement(CalendarInput, { "data-test": `${dataTest}-input`, label: inputLabel, textFieldSize: size, className: inputClassName }), customTimeInput: React.createElement(CalendarTime, { "data-test": `${dataTest}-time` }), dateFormat: showTimeInput ? `${dateFormat} ${timeFormat}` : dateFormat, onChange: onDateChange, popperContainer: PopperContainer, renderCustomHeader: ({ ...props }) => React.createElement(CalendarHeader, { ...props }), selected: date, timeFormat: timeFormat, showPopperArrow: false, showTimeInput: showTimeInput })));
|
|
37
26
|
};
|
|
38
27
|
//# sourceMappingURL=Calendar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAA+B,MAAM,kBAAkB,CAAA;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAmB,MAAM,oBAAoB,CAAA;AAExE,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,uBAAuB,GAC3B,CAAC,SAA6B,EAAE,QAAiB,EAAM,EAAE,CACzD,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,CACP,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AACxE,CAAC,CAAA;AAmBH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,WAAW,EACxB,UAAU,GAAG,WAAW,EACxB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE9H,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;SAC7B,EACD,kBAAkB,CACnB;QAED,oBAAC,UAAU,OACL,KAAK,eACE,QAAQ,EACnB,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,oBAAC,aAAa,iBAAY,GAAG,QAAQ,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjI,eAAe,EAAE,oBAAC,YAAY,iBAAY,GAAG,QAAQ,OAAO,GAAI,EAChE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,cAAc,OAAK,KAAK,GAAI,EACnE,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,GAC5B,CACE,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DatePickerProps } from 'react-datepicker';
|
|
3
3
|
type ExtractFnArgumentType<T> = T extends (arg: infer U) => any ? U : never;
|
|
4
|
-
export type CalendarHeaderProps = ExtractFnArgumentType<
|
|
4
|
+
export type CalendarHeaderProps = ExtractFnArgumentType<DatePickerProps['renderCustomHeader']>;
|
|
5
5
|
export declare const CalendarHeader: FC<CalendarHeaderProps>;
|
|
6
6
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ChangeEvent, FocusEvent, ReactElement,
|
|
1
|
+
import React, { ChangeEvent, FocusEvent, ReactElement, MouseEvent } from 'react';
|
|
2
2
|
import { HelpProps } from './Help';
|
|
3
3
|
import { DataTestProp } from '../helpers/types';
|
|
4
4
|
type CheckboxCoreProps = {
|
|
@@ -11,7 +11,7 @@ type CheckboxCoreProps = {
|
|
|
11
11
|
checked?: boolean;
|
|
12
12
|
};
|
|
13
13
|
export type CheckboxExtraProps = {
|
|
14
|
-
label?: ReactElement |
|
|
14
|
+
label?: ReactElement | string;
|
|
15
15
|
helperText?: HelpProps['helperText'];
|
|
16
16
|
indeterminate?: boolean;
|
|
17
17
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"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"}
|
package/lib/components/Error.js
CHANGED
|
@@ -4,5 +4,5 @@ import { TruncatedText } from './TruncatedText';
|
|
|
4
4
|
import styles from './Error.module.scss';
|
|
5
5
|
export const errorId = (inputId) => `${inputId}-error`;
|
|
6
6
|
/* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role */
|
|
7
|
-
export const Error = ({ error, className, inputId, truncated, tooltipPlacement, 'data-test': dataTest = 'error' }) => (React.createElement("div", { role: "alert", id: errorId(inputId), "data-test": dataTest, className: cn(styles.container, error && styles.hasError, className) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement
|
|
7
|
+
export const Error = ({ error, className, inputId, truncated, tooltipPlacement, 'data-test': dataTest = 'error' }) => (React.createElement("div", { role: "alert", id: errorId(inputId), "data-test": dataTest, className: cn(styles.container, error && styles.hasError, className) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement }) : error));
|
|
8
8
|
//# sourceMappingURL=Error.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../src/components/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CACpI,6BAAK,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,IAC9H,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../src/components/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CACpI,6BAAK,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,IAC9H,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAAC,CAAC,CAAC,KAAK,CACzF,CACP,CAAA"}
|
package/lib/components/Help.d.ts
CHANGED
|
@@ -8,7 +8,6 @@ export interface HelpProps extends DataTestProp {
|
|
|
8
8
|
helperText: string | ReactElement;
|
|
9
9
|
placement?: TooltipProps['placement'];
|
|
10
10
|
className?: string;
|
|
11
|
-
popperRef?: TooltipProps['popperRef'];
|
|
12
11
|
size?: IconSize;
|
|
13
12
|
tooltipWordBreak?: CSSProperties['wordBreak'];
|
|
14
13
|
}
|
package/lib/components/Help.js
CHANGED
|
@@ -6,9 +6,9 @@ import { Tooltip } from './Tooltip';
|
|
|
6
6
|
import styleConsts from '../../styles/constants/export.module.scss';
|
|
7
7
|
import styles from './Help.module.scss';
|
|
8
8
|
export const helpTooltipId = (inputId) => `${inputId}-help`;
|
|
9
|
-
export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak,
|
|
9
|
+
export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, size = 'small', 'data-test': dataTest = 'help', }) => {
|
|
10
10
|
const tooltipId = helpTooltipId(parentId);
|
|
11
|
-
return (React.createElement(Tooltip, { placement: placement, content: helperText, id: tooltipId,
|
|
11
|
+
return (React.createElement(Tooltip, { placement: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak }, (ref) => (React.createElement("div", { ref: ref, "data-test": dataTest, className: cn(styles.container, className) },
|
|
12
12
|
React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConsts.colorPrimary, icon: HelpCircle, className: styles.icon, size: size })))));
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=Help.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAGjD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAGjD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,IAC3F,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,GAAG,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC5E,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,23 +1,16 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
|
-
import { Placement } from '@
|
|
2
|
+
import { Placement, OffsetOptions } from '@floating-ui/react';
|
|
3
3
|
import { PortalContainer } from '../utils/portal';
|
|
4
4
|
import { DataTestProp } from '../helpers/types';
|
|
5
5
|
export interface PopoverProps extends DataTestProp {
|
|
6
6
|
open: boolean;
|
|
7
7
|
placement?: Placement;
|
|
8
|
-
offset?:
|
|
9
|
-
x: number;
|
|
10
|
-
y: number;
|
|
11
|
-
}>;
|
|
12
|
-
preventOverflowOptions?: {
|
|
13
|
-
rootBoundary: 'vew';
|
|
14
|
-
};
|
|
8
|
+
offset?: OffsetOptions;
|
|
15
9
|
className?: string;
|
|
16
10
|
anchorElement?: HTMLElement | null;
|
|
17
|
-
arrowElement?: HTMLElement | null;
|
|
18
11
|
onClose: () => void;
|
|
19
12
|
matchReferenceSize?: boolean;
|
|
20
|
-
onUpdateLayout?: () => void;
|
|
21
13
|
container?: PortalContainer;
|
|
14
|
+
autoPlacement?: boolean;
|
|
22
15
|
}
|
|
23
16
|
export declare const Popover: (props: PropsWithChildren<PopoverProps>) => React.JSX.Element;
|
|
@@ -1,99 +1,47 @@
|
|
|
1
|
-
import React, { useCallback, useEffect
|
|
1
|
+
import React, { useCallback, useEffect } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import {
|
|
4
|
-
import { detectOverflow } from '@popperjs/core';
|
|
3
|
+
import { useFloating, offset, shift, size } from '@floating-ui/react';
|
|
5
4
|
import cls from 'classnames';
|
|
5
|
+
import { autoPlacement as autoPlacementMiddleware } from '@floating-ui/react';
|
|
6
6
|
import { getPortalContainer } from '../utils/portal';
|
|
7
7
|
import { useOnClickOutside, useRefValue } from '../hooks';
|
|
8
8
|
import styles from './Popover.module.scss';
|
|
9
9
|
export const Popover = (props) => {
|
|
10
|
-
const { open, children, anchorElement, placement = 'bottom-end', className, offset
|
|
11
|
-
const getOnUpdate = useRefValue(onUpdateLayout);
|
|
10
|
+
const { open, children, anchorElement, placement = 'bottom-end', className, offset: offsetOptions, onClose, 'data-test': dataTest, matchReferenceSize = false, container = `body`, autoPlacement = false, } = props;
|
|
12
11
|
const getOnClose = useRefValue(onClose);
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
var _a, _b;
|
|
16
|
-
const modifiers = [
|
|
17
|
-
{
|
|
18
|
-
name: 'offset',
|
|
19
|
-
options: {
|
|
20
|
-
offset: [(_a = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _b !== void 0 ? _b : 0],
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
name: 'preventOverflow',
|
|
25
|
-
options: {
|
|
26
|
-
rootBoundary: 'viewport',
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
{ name: 'arrow', options: { element: arrowElement } },
|
|
30
|
-
{
|
|
31
|
-
name: 'maxSize',
|
|
32
|
-
enabled: true,
|
|
33
|
-
phase: 'main',
|
|
34
|
-
requiresIfExists: ['offset', 'preventOverflow', 'flip'],
|
|
35
|
-
fn({ state, name }) {
|
|
36
|
-
const overflow = detectOverflow(state);
|
|
37
|
-
const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
|
|
38
|
-
const { width, height } = state.rects.popper;
|
|
39
|
-
const [basePlacement] = state.placement.split('-');
|
|
40
|
-
const widthProp = basePlacement === 'left' ? 'left' : 'right';
|
|
41
|
-
const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
|
|
42
|
-
state.modifiersData[name] = {
|
|
43
|
-
width: width - overflow[widthProp] - x,
|
|
44
|
-
height: height - overflow[heightProp] - y,
|
|
45
|
-
};
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
name: 'applyMaxSize',
|
|
50
|
-
enabled: true,
|
|
51
|
-
phase: 'beforeWrite',
|
|
52
|
-
requires: ['maxSize'],
|
|
53
|
-
fn: ({ state }) => {
|
|
54
|
-
const { height } = state.modifiersData.maxSize;
|
|
55
|
-
state.styles.popper.maxHeight = `${height}px`;
|
|
56
|
-
},
|
|
57
|
-
},
|
|
58
|
-
];
|
|
59
|
-
if (matchReferenceSize) {
|
|
60
|
-
modifiers.push({
|
|
61
|
-
name: 'matchReferenceSize',
|
|
62
|
-
enabled: true,
|
|
63
|
-
fn: ({ state, instance }) => {
|
|
64
|
-
const onUpdate = getOnUpdate();
|
|
65
|
-
const widthOrHeight = state.placement.startsWith('left') || state.placement.startsWith('right') ? 'height' : 'width';
|
|
66
|
-
const popperSize = state.rects.popper[widthOrHeight];
|
|
67
|
-
const referenceSize = state.rects.reference[widthOrHeight];
|
|
68
|
-
if (Math.round(popperSize) === Math.round(referenceSize))
|
|
69
|
-
return;
|
|
70
|
-
state.elements.popper.style[widthOrHeight] = `${referenceSize}px`;
|
|
71
|
-
void instance.update();
|
|
72
|
-
if (onUpdate) {
|
|
73
|
-
onUpdate();
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
phase: 'beforeWrite',
|
|
77
|
-
requires: ['computeStyles'],
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
return modifiers;
|
|
81
|
-
}, [matchReferenceSize, offset, arrowElement, getOnUpdate]);
|
|
82
|
-
const popper = usePopper(anchorElement, popperElement, {
|
|
12
|
+
const { refs, floatingStyles } = useFloating({
|
|
13
|
+
elements: { reference: anchorElement },
|
|
83
14
|
placement,
|
|
84
|
-
|
|
15
|
+
middleware: [
|
|
16
|
+
...(autoPlacement ? [autoPlacementMiddleware()] : []),
|
|
17
|
+
...(matchReferenceSize
|
|
18
|
+
? [
|
|
19
|
+
size({
|
|
20
|
+
apply({ rects, elements }) {
|
|
21
|
+
Object.assign(elements.floating.style, {
|
|
22
|
+
minWidth: `${rects.reference.width}px`,
|
|
23
|
+
});
|
|
24
|
+
},
|
|
25
|
+
}),
|
|
26
|
+
]
|
|
27
|
+
: []),
|
|
28
|
+
offset(offsetOptions),
|
|
29
|
+
shift({
|
|
30
|
+
crossAxis: true,
|
|
31
|
+
}),
|
|
32
|
+
],
|
|
85
33
|
});
|
|
86
34
|
const containerEl = getPortalContainer(container, anchorElement);
|
|
87
35
|
useOnClickOutside(open, {
|
|
88
|
-
target:
|
|
36
|
+
target: refs.floating.current,
|
|
89
37
|
excludeElement: anchorElement,
|
|
90
38
|
handler: onClose,
|
|
91
39
|
});
|
|
92
40
|
const handleFocusIn = useCallback((e) => {
|
|
93
|
-
if (
|
|
41
|
+
if (refs.floating.current && !refs.floating.current.contains(e.target) && !(anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.contains(e.target))) {
|
|
94
42
|
onClose();
|
|
95
43
|
}
|
|
96
|
-
}, [onClose,
|
|
44
|
+
}, [onClose, refs.floating, anchorElement]);
|
|
97
45
|
const handleKeyDown = useCallback((e) => {
|
|
98
46
|
if (e.key === 'Escape') {
|
|
99
47
|
getOnClose()();
|
|
@@ -114,7 +62,7 @@ export const Popover = (props) => {
|
|
|
114
62
|
};
|
|
115
63
|
}, [open, handleFocusIn, handleKeyDown]);
|
|
116
64
|
return (React.createElement(React.Fragment, null, containerEl
|
|
117
|
-
? createPortal(open && (React.createElement("div", { ref:
|
|
65
|
+
? createPortal(open && (React.createElement("div", { ref: refs.setFloating, "data-test": dataTest, className: cls(styles.root, className), style: floatingStyles }, children)), containerEl)
|
|
118
66
|
: children));
|
|
119
67
|
};
|
|
120
68
|
//# sourceMappingURL=Popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,WAAW,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC, FocusEvent, ReactElement, ReactNode
|
|
1
|
+
import { FC, FocusEvent, ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { DataTestProp } from '../helpers/types';
|
|
3
3
|
import { HelpProps } from './Help';
|
|
4
4
|
type RadioCoreProps = {
|
|
@@ -7,7 +7,7 @@ type RadioCoreProps = {
|
|
|
7
7
|
checked?: boolean;
|
|
8
8
|
};
|
|
9
9
|
export type RadioExtraProps = {
|
|
10
|
-
label?:
|
|
10
|
+
label?: string | ReactElement;
|
|
11
11
|
helperText?: HelpProps['helperText'];
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
required?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2C,UAAU,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,MAAM,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAmB/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,WAAW,EAAE,QAAQ,GAAG,aAAa,EACrC,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACjE,MAAM,UAAU,GAAG,OAAO;QACxB,CAAC,CAAC;YACE,cAAc,EAAE,IAAI;YACpB,mBAAmB,EAAE,OAAO;SAC7B;QACH,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO,CACL,+BACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO;SAC1B,EACD,SAAS,CACV,eACU,QAAQ,EACnB,OAAO,EAAE,EAAE;QAMV,KAAK,KAAK,SAAS,IAAI,CACtB,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,eAAa,GAAG,QAAQ,QAAQ;YACzD,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,GAAI,CAC1B,CACP;QACD,+BACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,sBACA,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,KAC7C,UAAU,GACd;QACD,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;QAC3E,UAAU,IAAI,oBAAC,IAAI,iBAAY,GAAG,QAAQ,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI,CAC3H,CACT,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -17,7 +17,6 @@ export const CheckableSelectField = (props) => {
|
|
|
17
17
|
const id = useUID();
|
|
18
18
|
const { isOpen, toggle, close } = useOpenCloseState(defaultOpen);
|
|
19
19
|
const [searchValue, setSearchValue] = useState('');
|
|
20
|
-
const [forceUpdateToken, setForceUpdateToken] = useState(1);
|
|
21
20
|
const [anchorElement, setAnchorElement] = useState(null);
|
|
22
21
|
const handleKeyDown = useCallback((e) => {
|
|
23
22
|
if (e.key === 'Enter') {
|
|
@@ -50,7 +49,7 @@ export const CheckableSelectField = (props) => {
|
|
|
50
49
|
React.createElement(TextField, { size: size, name: name, id: rootId || id, onClick: toggle, onKeyDown: handleKeyDown, containerRef: setAnchorElement, onChange: () => null, label: label || '', labelClassName: labelClassName, disabled: disabled, showAriaLabel: showAriaLabel, helperText: helperText, className: cls(className, styles.opener, {
|
|
51
50
|
[styles.withPermanentPlaceholder]: placeholderMode === 'permanent',
|
|
52
51
|
}), error: error, errorClassName: errorClassName, onBlur: onBlur, readOnly: true, required: required, "data-test": `${dataTest}-opener`, value: getValueLabel(), inputTrailingIconLabel: isOpen ? 'Close' : 'Open', inputTrailingIcon: isOpen ? ChevronUp : ChevronDown }),
|
|
53
|
-
React.createElement(Popover, { matchReferenceSize: true, anchorElement: anchorElement, open: isOpen, onClose: close, className: styles.panel
|
|
52
|
+
React.createElement(Popover, { matchReferenceSize: true, anchorElement: anchorElement, open: isOpen, onClose: close, className: styles.panel },
|
|
54
53
|
React.createElement("div", { className: styles.dropdown, "data-test": `${dataTest}-dropdown` },
|
|
55
54
|
React.createElement("div", { className: styles.search },
|
|
56
55
|
searchInputProps.startAdornment,
|
|
@@ -67,7 +66,7 @@ export const CheckableSelectField = (props) => {
|
|
|
67
66
|
}
|
|
68
67
|
} },
|
|
69
68
|
React.createElement(Checkmark, { checked: isChecked }),
|
|
70
|
-
React.createElement(TruncatedText, { text: option.label
|
|
69
|
+
React.createElement(TruncatedText, { text: option.label })));
|
|
71
70
|
})) : (React.createElement("span", { className: styles.noOptionsMessage, "data-test": `${dataTest}-no-options-message` }, noOptionsMessage))),
|
|
72
71
|
React.createElement("div", { className: styles.bottom },
|
|
73
72
|
React.createElement(Link, { component: "button", "data-test": `${dataTest}-select-all`, onClick: () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckableSelectField.js","sourceRoot":"","sources":["../../../src/components/Select/CheckableSelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAiB,MAAM,OAAO,CAAA;AACnG,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,GAAG,MAAM,YAAY,CAAA;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,OAAO,MAAM,MAAM,oCAAoC,CAAA;AA0CvD,MAAM,SAAS,GAAG,CAAC,EAAE,OAAO,EAAkB,EAAE,EAAE;IAChD,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAA;IAEvE,OAAO,OAAO,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU,GAAI,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU,GAAI,CAAA;AACtF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAqC,KAA8B,EAAE,EAAE;IACzG,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,OAAO,EACd,WAAW,GAAG,QAAQ,EACtB,eAAe,GAAG,QAAQ,EAC1B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,WAAW,EAAE,QAAQ,EACrB,gBAAgB,GAAG,cAAc,EACjC,iBAAiB,GAAG,eAAe,EACnC,gBAAgB,GAAG,YAAY,EAC/B,EAAE,EAAE,MAAM,EACV,aAAa,EACb,gBAAgB,GAAG,EAAE,EACrB,cAAc,EACd,cAAc,GACf,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"CheckableSelectField.js","sourceRoot":"","sources":["../../../src/components/Select/CheckableSelectField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ export const CellCopyablePopover = ({ children, contentClassName, anchorElement,
|
|
|
7
7
|
useEffect(() => {
|
|
8
8
|
return () => onClose();
|
|
9
9
|
}, [onClose]);
|
|
10
|
-
return (React.createElement(Popover, { open: isOpen, onClose: onClose, anchorElement: anchorElement, placement: "top-start", className: styles.root, "data-test": "cell-copyable-popover", offset: {
|
|
10
|
+
return (React.createElement(Popover, { open: isOpen, onClose: onClose, anchorElement: anchorElement, placement: "top-start", className: styles.root, "data-test": "cell-copyable-popover", offset: { mainAxis: -((_a = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetHeight) !== null && _a !== void 0 ? _a : 0) } },
|
|
11
11
|
React.createElement("div", { className: cls(styles.content, contentClassName), onDoubleClick: onClose, style: { minHeight: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetHeight, minWidth: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetWidth } }, children)));
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=CellCopyablePopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellCopyablePopover.js","sourceRoot":"","sources":["../../../../../src/components/Table/features/columnsSelection/CellCopyablePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,GAAG,MAAM,YAAY,CAAA;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAStD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,MAAM,EACN,OAAO,GACgC,EAAE,EAAE;;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,oBAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,MAAM,CAAC,IAAI,eACZ,uBAAuB,EACjC,MAAM,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"CellCopyablePopover.js","sourceRoot":"","sources":["../../../../../src/components/Table/features/columnsSelection/CellCopyablePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,GAAG,MAAM,YAAY,CAAA;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAStD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,MAAM,EACN,OAAO,GACgC,EAAE,EAAE;;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,oBAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,MAAM,CAAC,IAAI,eACZ,uBAAuB,EACjC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,mCAAI,CAAC,CAAC,EAAE;QAEzD,6BACE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAChD,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,WAAW,EAAE,IAEtF,QAAQ,CACL,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -12,7 +12,7 @@ export declare const useColumnsSelection: (props: ColumnsSelectionProps) => {
|
|
|
12
12
|
}) => void;
|
|
13
13
|
setSelectedColumns: import("react").Dispatch<import("react").SetStateAction<SelectedColumnsState>>;
|
|
14
14
|
getSelectedColumns: () => SelectedColumnsState;
|
|
15
|
-
selectionStartedRef: import("react").
|
|
15
|
+
selectionStartedRef: import("react").RefObject<boolean>;
|
|
16
16
|
onMouseEnterSelection: (id: string) => void;
|
|
17
|
-
selectedColumnValuesRef: import("react").
|
|
17
|
+
selectedColumnValuesRef: import("react").RefObject<(string | undefined)[][]>;
|
|
18
18
|
};
|
|
@@ -3,17 +3,11 @@ import cn from 'classnames';
|
|
|
3
3
|
import { useUID } from 'react-uid';
|
|
4
4
|
import { Error, errorId } from './Error';
|
|
5
5
|
import { FieldHeader } from './FieldHeader';
|
|
6
|
-
import { useResizeAware } from '../hooks/useResizeAware';
|
|
7
6
|
import styles from './TextArea.module.scss';
|
|
8
7
|
export const TextArea = (props) => {
|
|
9
8
|
const { error, label, name, onBlur, onChange, placeholder, value, disabled, className, labelClassName, textareaClassName, errorClassName, required, resizable = true, helperText, size = 'medium', 'data-test': dataTest = 'textarea', ...htmlAttrs } = props;
|
|
10
9
|
const id = useUID();
|
|
11
10
|
const textareaRef = useRef(null);
|
|
12
|
-
const popperRef = useRef();
|
|
13
|
-
useResizeAware(textareaRef.current, () => {
|
|
14
|
-
var _a, _b;
|
|
15
|
-
(_b = (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.forceUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
16
|
-
});
|
|
17
11
|
return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
|
|
18
12
|
[styles.disabled]: disabled,
|
|
19
13
|
[styles.hasError]: error,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,MAAM,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,MAAM,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAsB3C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;IAErD,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;SACrC,EACD,SAAS,CACV;QAED,oBAAC,WAAW,iBAAY,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI;QAC9H,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB;YACtC,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe;gBACpC,kCACE,GAAG,EAAE,WAAW,kBACF,CAAC,CAAC,KAAK,mBACN,QAAQ,uBACJ,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,EACvC,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,EAAE,CACX;wBACE,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,SAAS;qBAClC,EACD,iBAAiB,CAClB,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,GACb;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CACpC,CACF;QACN,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChI,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Placement } from '@
|
|
3
|
-
import { usePopper } from 'react-popper';
|
|
4
|
-
import { PortalContainer } from '../utils/portal';
|
|
5
|
-
export type PopperRef = ReturnType<typeof usePopper>;
|
|
1
|
+
import { FC, ReactNode, CSSProperties, ReactElement } from 'react';
|
|
2
|
+
import { Placement, ReferenceType } from '@floating-ui/react';
|
|
6
3
|
export type TooltipProps = {
|
|
7
4
|
content: ReactNode;
|
|
8
5
|
id?: string;
|
|
9
|
-
hideTimeoutDuration?: number;
|
|
10
6
|
offset?: number;
|
|
11
7
|
arrow?: boolean;
|
|
12
8
|
color?: 'dark' | 'secondary';
|
|
@@ -14,14 +10,10 @@ export type TooltipProps = {
|
|
|
14
10
|
placement?: Placement;
|
|
15
11
|
visible?: boolean;
|
|
16
12
|
className?: string;
|
|
17
|
-
|
|
18
|
-
children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler, onMouseLeave?: MouseEventHandler) => ReactNode;
|
|
19
|
-
popperRef?: MutableRefObject<PopperRef | undefined>;
|
|
20
|
-
updateToken?: ReactText | boolean;
|
|
21
|
-
tooltipContainer?: PortalContainer;
|
|
13
|
+
children: (ref: (node: ReferenceType | null) => void) => ReactElement;
|
|
22
14
|
wordBreak?: CSSProperties['wordBreak'];
|
|
23
|
-
disabled?: boolean;
|
|
24
15
|
zIndex?: number;
|
|
16
|
+
autoPlacement?: boolean;
|
|
25
17
|
};
|
|
26
18
|
/**
|
|
27
19
|
* ### Purpose
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import
|
|
3
|
-
import { usePopper } from 'react-popper';
|
|
1
|
+
import React, { useRef, cloneElement, useState } from 'react';
|
|
2
|
+
import { FloatingArrow, offset, useFloating, arrow, useHover, useInteractions, autoUpdate, autoPlacement as autoPlacementMiddleware, FloatingPortal, safePolygon, } from '@floating-ui/react';
|
|
4
3
|
import cn from 'classnames';
|
|
5
|
-
import { containsElement } from '../hooks';
|
|
6
|
-
import { getPortalContainer } from '../utils/portal';
|
|
7
4
|
import styles from './Tooltip.module.scss';
|
|
8
|
-
|
|
5
|
+
import { canUseDOM } from '../utils/ssr';
|
|
9
6
|
/**
|
|
10
7
|
* ### Purpose
|
|
11
8
|
* Useful when you need to display additional information/actionable content.
|
|
@@ -22,118 +19,38 @@ const TooltipContext = createContext(null);
|
|
|
22
19
|
* ### Usage
|
|
23
20
|
* Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
|
|
24
21
|
*/
|
|
25
|
-
export const Tooltip = ({ id, content,
|
|
26
|
-
const [
|
|
27
|
-
const
|
|
28
|
-
const context =
|
|
29
|
-
|
|
30
|
-
const timeoutId = timeoutRef.current;
|
|
31
|
-
context === null || context === void 0 ? void 0 : context.clearHideTimeout();
|
|
32
|
-
if (timeoutId !== null) {
|
|
33
|
-
clearTimeout(timeoutId);
|
|
34
|
-
}
|
|
35
|
-
}, [context]);
|
|
36
|
-
/*
|
|
37
|
-
* We're using useState instead of useRef because react-popper package has some issues with useRef:
|
|
38
|
-
* https://github.com/popperjs/react-popper/issues/241#issuecomment-591411605
|
|
39
|
-
*/
|
|
40
|
-
const [referenceElement, setReferenceElement] = useState(null);
|
|
41
|
-
const [popperElement, setPopperElement] = useState(null);
|
|
42
|
-
const [arrowElement, setArrowElement] = useState(null);
|
|
43
|
-
const modifiers = useMemo(() => {
|
|
44
|
-
const result = [
|
|
45
|
-
{
|
|
46
|
-
name: 'offset',
|
|
47
|
-
options: {
|
|
48
|
-
offset: [0, offset],
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
];
|
|
52
|
-
if (arrow) {
|
|
53
|
-
result.push({
|
|
54
|
-
name: 'arrow',
|
|
55
|
-
options: {
|
|
56
|
-
element: arrowElement,
|
|
57
|
-
padding,
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
return result;
|
|
62
|
-
}, [arrow, padding, offset, arrowElement]);
|
|
63
|
-
const popper = usePopper(referenceElement, popperElement, {
|
|
22
|
+
export const Tooltip = ({ id, content, offset: offsetY = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, wordBreak, zIndex = 20, arrow: showArrow = true, color, autoPlacement = false, className, }) => {
|
|
23
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
24
|
+
const arrowRef = useRef(null);
|
|
25
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
26
|
+
strategy: 'absolute',
|
|
64
27
|
placement,
|
|
65
|
-
|
|
28
|
+
whileElementsMounted: autoUpdate,
|
|
29
|
+
open: isOpen,
|
|
30
|
+
onOpenChange: setIsOpen,
|
|
31
|
+
middleware: [
|
|
32
|
+
...(autoPlacement ? [autoPlacementMiddleware()] : []),
|
|
33
|
+
offset(offsetY),
|
|
34
|
+
...(showArrow
|
|
35
|
+
? [
|
|
36
|
+
arrow({
|
|
37
|
+
element: arrowRef,
|
|
38
|
+
padding,
|
|
39
|
+
}),
|
|
40
|
+
]
|
|
41
|
+
: []),
|
|
42
|
+
],
|
|
66
43
|
});
|
|
67
|
-
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
const e = event;
|
|
74
|
-
const { relatedTarget } = e !== null && e !== void 0 ? e : {};
|
|
75
|
-
timeoutRef.current = setTimeout(() => {
|
|
76
|
-
if (relatedTarget) {
|
|
77
|
-
if (!containsElement(context === null || context === void 0 ? void 0 : context.referenceElement, relatedTarget) &&
|
|
78
|
-
!containsElement(context === null || context === void 0 ? void 0 : context.popperElement, relatedTarget)) {
|
|
79
|
-
context === null || context === void 0 ? void 0 : context.hide();
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
setShown(false);
|
|
83
|
-
}, hideTimeoutDuration);
|
|
84
|
-
}, [hideTimeoutDuration, context]);
|
|
85
|
-
const contextValue = useMemo(() => ({
|
|
86
|
-
popperElement,
|
|
87
|
-
referenceElement,
|
|
88
|
-
hide: onMouseLeave,
|
|
89
|
-
clearHideTimeout,
|
|
90
|
-
}), [onMouseLeave, clearHideTimeout, popperElement, referenceElement]);
|
|
91
|
-
// Makes sure "visible" prop can override local "isShown" state
|
|
92
|
-
const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : !disabled && isShown;
|
|
93
|
-
// Update the tooltip's position (useful when resizing table columns)
|
|
94
|
-
useLayoutEffect(() => {
|
|
95
|
-
var _a;
|
|
96
|
-
if (content) {
|
|
97
|
-
void ((_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper));
|
|
98
|
-
}
|
|
99
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
100
|
-
}, [isTooltipVisible, updateToken]);
|
|
101
|
-
useEffect(() => {
|
|
102
|
-
return () => {
|
|
103
|
-
clearHideTimeout();
|
|
104
|
-
};
|
|
105
|
-
}, [clearHideTimeout]);
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseenter', onMouseEnter, false);
|
|
108
|
-
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseleave', onMouseLeave, false);
|
|
109
|
-
return () => {
|
|
110
|
-
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseenter', onMouseEnter);
|
|
111
|
-
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseleave', onMouseLeave);
|
|
112
|
-
};
|
|
113
|
-
}, [referenceElement, onMouseEnter, onMouseLeave]);
|
|
114
|
-
useEffect(() => {
|
|
115
|
-
if (hoverAbleTooltip) {
|
|
116
|
-
popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseenter', onMouseEnter, false);
|
|
117
|
-
popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseleave', onMouseLeave, false);
|
|
118
|
-
}
|
|
119
|
-
return () => {
|
|
120
|
-
popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseenter', onMouseEnter);
|
|
121
|
-
popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseleave', onMouseLeave);
|
|
122
|
-
};
|
|
123
|
-
}, [popperElement, onMouseEnter, onMouseLeave, hoverAbleTooltip]);
|
|
124
|
-
const tooltipPortalContainer = getPortalContainer(tooltipContainer, referenceElement);
|
|
125
|
-
return (React.createElement(TooltipContext.Provider, { value: contextValue },
|
|
126
|
-
children(setReferenceElement, onMouseEnter, (e) => {
|
|
127
|
-
onMouseLeave(e);
|
|
128
|
-
}),
|
|
129
|
-
content !== undefined && (React.createElement(React.Fragment, null,
|
|
44
|
+
const hover = useHover(context, { handleClose: safePolygon() });
|
|
45
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
|
|
46
|
+
const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : isOpen;
|
|
47
|
+
return (React.createElement(React.Fragment, null,
|
|
48
|
+
cloneElement(children(refs.setReference), { ...getReferenceProps() }),
|
|
49
|
+
content !== undefined && isTooltipVisible && (React.createElement(React.Fragment, null,
|
|
130
50
|
React.createElement("span", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}, color && [styles[color]], className), style: { ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", "aria-hidden": true, ...popper.attributes.popper },
|
|
136
|
-
content,
|
|
137
|
-
arrow && (React.createElement("span", { ref: setArrowElement, className: styles.arrow, style: popper.styles.arrow, "data-test": "tooltip-arrow", ...popper.attributes.arrow })))), tooltipPortalContainer)))));
|
|
51
|
+
React.createElement(FloatingPortal, { root: canUseDOM ? document.body : null },
|
|
52
|
+
React.createElement("span", { ref: refs.setFloating, className: cn(styles.overlay, color && [styles[color]], className), style: { ...floatingStyles, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", ...getFloatingProps() },
|
|
53
|
+
content,
|
|
54
|
+
showArrow && React.createElement(FloatingArrow, { ref: arrowRef, context: context, className: styles.arrow })))))));
|
|
138
55
|
};
|
|
139
56
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAiB,YAAY,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzG,OAAO,EACL,aAAa,EAEb,MAAM,EACN,WAAW,EACX,KAAK,EACL,QAAQ,EACR,eAAe,EACf,UAAU,EACV,aAAa,IAAI,uBAAuB,EACxC,cAAc,EAEd,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAkBxC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EACxC,EAAE,EACF,OAAO,EACP,MAAM,EAAE,OAAO,GAAG,EAAE,EACpB,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,KAAK,EACjB,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,EAAE,EACX,KAAK,EAAE,SAAS,GAAG,IAAI,EACvB,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,SAAS,GACV,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAE7B,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,WAAW,CAAC;QACpD,QAAQ,EAAE,UAAU;QACpB,SAAS;QACT,oBAAoB,EAAE,UAAU;QAChC,IAAI,EAAE,MAAM;QACZ,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE;YACV,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACrD,MAAM,CAAC,OAAO,CAAC;YACf,GAAG,CAAC,SAAS;gBACX,CAAC,CAAC;oBACE,KAAK,CAAC;wBACJ,OAAO,EAAE,QAAQ;wBACjB,OAAO;qBACR,CAAC;iBACH;gBACH,CAAC,CAAC,EAAE,CAAC;SACR;KACF,CAAC,CAAA;IAEF,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC,CAAA;IAE/D,MAAM,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,GAAG,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;IAExE,MAAM,gBAAgB,GAAG,OAAO,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAA;IAE9F,OAAO,CACL;QACG,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,GAAG,iBAAiB,EAAE,EAAE,CAAC;QACrE,OAAO,KAAK,SAAS,IAAI,gBAAgB,IAAI,CAC5C;YACE,iCAAU,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,eAAW,YAAY,IACxG,OAAO,CACH;YACP,oBAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;gBACpD,8BACE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,eAC3E,iBAAiB,KACvB,gBAAgB,EAAE;oBAErB,OAAO;oBACP,SAAS,IAAI,oBAAC,aAAa,IAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CACpF,CACQ,CAChB,CACJ,CACA,CACJ,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -6,118 +6,9 @@
|
|
|
6
6
|
@include h.visuallyHidden;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
@mixin arrow($position, $color, $borderColor) {
|
|
13
|
-
@if $position == bottom {
|
|
14
|
-
> .arrow {
|
|
15
|
-
top: 0;
|
|
16
|
-
|
|
17
|
-
&::before,
|
|
18
|
-
&::after {
|
|
19
|
-
border-left: c.$tooltipArrowSize solid transparent;
|
|
20
|
-
border-right: c.$tooltipArrowSize solid transparent;
|
|
21
|
-
top: 0;
|
|
22
|
-
left: 50%;
|
|
23
|
-
margin-left: -(c.$tooltipArrowSize);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&::before {
|
|
27
|
-
border-bottom: c.$tooltipArrowSize solid $color;
|
|
28
|
-
margin-top: -(c.$tooltipArrowSize);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&::after {
|
|
32
|
-
border-bottom: c.$tooltipArrowSize solid $borderColor;
|
|
33
|
-
transform: translateY(-($tooltipArrowSize2-3));
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
} @else if $position == right {
|
|
37
|
-
> .arrow {
|
|
38
|
-
left: 0;
|
|
39
|
-
|
|
40
|
-
&::before,
|
|
41
|
-
&::after {
|
|
42
|
-
border-top: c.$tooltipArrowSize solid transparent;
|
|
43
|
-
border-bottom: c.$tooltipArrowSize solid transparent;
|
|
44
|
-
top: 50%;
|
|
45
|
-
left: 0;
|
|
46
|
-
margin-top: -(c.$tooltipArrowSize);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&::before {
|
|
50
|
-
border-right: c.$tooltipArrowSize solid $color;
|
|
51
|
-
margin-left: -(c.$tooltipArrowSize);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&::after {
|
|
55
|
-
border-right: c.$tooltipArrowSize solid $borderColor;
|
|
56
|
-
transform: translateX(-($tooltipArrowSize2-3));
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
} @else if $position == left {
|
|
60
|
-
> .arrow {
|
|
61
|
-
right: 0;
|
|
62
|
-
|
|
63
|
-
&::before,
|
|
64
|
-
&::after {
|
|
65
|
-
border-top: c.$tooltipArrowSize solid transparent;
|
|
66
|
-
border-bottom: c.$tooltipArrowSize solid transparent;
|
|
67
|
-
top: 50%;
|
|
68
|
-
left: 100%;
|
|
69
|
-
margin-top: -(c.$tooltipArrowSize);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
&::before {
|
|
73
|
-
border-left: c.$tooltipArrowSize solid $color;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&::after {
|
|
77
|
-
border-left: c.$tooltipArrowSize solid $borderColor;
|
|
78
|
-
transform: translateX(-($tooltipArrowSize1-3));
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
} @else {
|
|
82
|
-
> .arrow {
|
|
83
|
-
bottom: 0;
|
|
84
|
-
|
|
85
|
-
&::before,
|
|
86
|
-
&::after {
|
|
87
|
-
border-left: c.$tooltipArrowSize solid transparent;
|
|
88
|
-
border-right: c.$tooltipArrowSize solid transparent;
|
|
89
|
-
top: 100%;
|
|
90
|
-
left: 50%;
|
|
91
|
-
margin-left: -(c.$tooltipArrowSize);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
&::before {
|
|
95
|
-
border-top: c.$tooltipArrowSize solid $color;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&::after {
|
|
99
|
-
border-top: c.$tooltipArrowSize solid $borderColor;
|
|
100
|
-
transform: translateY(-($tooltipArrowSize1-3));
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
@mixin arrowPlacements($color: c.$colorNeutralLight, $borderColor: c.$colorNeutralLighter) {
|
|
107
|
-
&[data-popper-placement^='top'] {
|
|
108
|
-
@include arrow(top, $color, $borderColor);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
&[data-popper-placement^='right'] {
|
|
112
|
-
@include arrow(right, $color, $borderColor);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
&[data-popper-placement^='bottom'] {
|
|
116
|
-
@include arrow(bottom, $color, $borderColor);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
&[data-popper-placement^='left'] {
|
|
120
|
-
@include arrow(left, $color, $borderColor);
|
|
9
|
+
@mixin arrowPlacements($color) {
|
|
10
|
+
.arrow {
|
|
11
|
+
fill: $color;
|
|
121
12
|
}
|
|
122
13
|
}
|
|
123
14
|
|
|
@@ -133,20 +24,12 @@ $tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
|
|
|
133
24
|
color: c.$colorText;
|
|
134
25
|
word-break: break-all;
|
|
135
26
|
|
|
136
|
-
&.hidden {
|
|
137
|
-
visibility: hidden;
|
|
138
|
-
|
|
139
|
-
// important is needed to override inline style
|
|
140
|
-
top: -99999px !important;
|
|
141
|
-
left: -99999px !important;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
27
|
&.secondary {
|
|
145
28
|
border: none;
|
|
146
29
|
color: c.$colorNeutralWhite;
|
|
147
30
|
background-color: c.$colorTextSubdued;
|
|
148
31
|
|
|
149
|
-
@include arrowPlacements(c.$colorTextSubdued
|
|
32
|
+
@include arrowPlacements(c.$colorTextSubdued);
|
|
150
33
|
}
|
|
151
34
|
|
|
152
35
|
&.dark {
|
|
@@ -154,22 +37,8 @@ $tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
|
|
|
154
37
|
color: c.$colorBrandText;
|
|
155
38
|
background-color: c.$colorBrandAccent;
|
|
156
39
|
|
|
157
|
-
@include arrowPlacements(c.$colorBrandAccent
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
> .arrow {
|
|
161
|
-
position: absolute;
|
|
162
|
-
z-index: c.$zIndex100;
|
|
163
|
-
display: block;
|
|
164
|
-
width: c.$tooltipArrowSize;
|
|
165
|
-
height: c.$tooltipArrowSize;
|
|
166
|
-
|
|
167
|
-
&::before,
|
|
168
|
-
&::after {
|
|
169
|
-
content: '';
|
|
170
|
-
position: absolute;
|
|
171
|
-
}
|
|
40
|
+
@include arrowPlacements(c.$colorBrandAccent);
|
|
172
41
|
}
|
|
173
42
|
|
|
174
|
-
@include arrowPlacements;
|
|
43
|
+
@include arrowPlacements(c.$colorNeutralLight);
|
|
175
44
|
}
|
|
@@ -8,7 +8,6 @@ interface TruncatedTextProps extends DataTestProp {
|
|
|
8
8
|
multiline?: boolean;
|
|
9
9
|
tooltipVisible?: boolean;
|
|
10
10
|
tooltipClassName?: string;
|
|
11
|
-
hoverAbleTooltip?: boolean;
|
|
12
11
|
tooltipPlacement?: TooltipProps['placement'];
|
|
13
12
|
}
|
|
14
13
|
export declare const TruncatedText: FC<TruncatedTextProps>;
|
|
@@ -5,7 +5,7 @@ import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
|
5
5
|
import { useUID } from 'react-uid';
|
|
6
6
|
import { Tooltip } from './Tooltip';
|
|
7
7
|
import styles from './TruncatedText.module.scss';
|
|
8
|
-
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top',
|
|
8
|
+
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', multiline, tooltipClassName, 'data-test': dataTest, }) => {
|
|
9
9
|
const textRef = useRef(null);
|
|
10
10
|
const [tooltip, setTooltip] = useState();
|
|
11
11
|
const idTooltip = useUID();
|
|
@@ -17,7 +17,7 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
|
|
|
17
17
|
// https://codepen.io/triple-j/pen/wadKQB
|
|
18
18
|
setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
|
|
19
19
|
}, [text, forceUpdateToken]);
|
|
20
|
-
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, className: tooltipClassName, placement: tooltipPlacement
|
|
20
|
+
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, className: tooltipClassName, placement: tooltipPlacement }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
|
|
21
21
|
React.createElement("span", { "data-test": dataTest, "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=TruncatedText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAahD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,SAAS,EACT,gBAAgB,EAChB,WAAW,EAAE,QAAQ,GACtB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC/D,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,IACxH,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;QACpH,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDimensions.js","sourceRoot":"","sources":["../../src/hooks/useDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnE,OAAO,QAAQ,MAAM,wBAAwB,CAAA;AAO7C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"useDimensions.js","sourceRoot":"","sources":["../../src/hooks/useDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnE,OAAO,QAAQ,MAAM,wBAAwB,CAAA;AAO7C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAkC,EAAc,EAAE;IAC9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAa,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;IAEjF,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YAChB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAA;QACrF,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAA;IAEvB,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5-canary.0",
|
|
4
4
|
"description": "Hazelcast design system components and utilities",
|
|
5
5
|
"homepage": "https://github.com/hazelcast/hive#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -46,9 +46,10 @@
|
|
|
46
46
|
"verify-all": "npm run lint && npm run test && npm run build-storybook && npm run test:visual"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@
|
|
49
|
+
"@floating-ui/core": "^1.7.3",
|
|
50
|
+
"@floating-ui/react": "^0.26.28",
|
|
51
|
+
"@headlessui/react": "^2.2.0",
|
|
50
52
|
"@icons-pack/react-simple-icons": "^12.0.0",
|
|
51
|
-
"@popperjs/core": "^2.11.8",
|
|
52
53
|
"@tanstack/react-table": "^8.21.2",
|
|
53
54
|
"@types/react-modal": "3.16.3",
|
|
54
55
|
"classnames": "^2.5.1",
|
|
@@ -56,19 +57,19 @@
|
|
|
56
57
|
"dequal": "^2.0.3",
|
|
57
58
|
"formik": "^2.4.6",
|
|
58
59
|
"nuka-carousel": "^7.0.0",
|
|
59
|
-
"react-datepicker": "^
|
|
60
|
+
"react-datepicker": "^7.5.0",
|
|
60
61
|
"react-feather": "^2.0.10",
|
|
61
62
|
"react-hot-keys": "^2.7.3",
|
|
62
63
|
"react-merge-refs": "^1.1.0",
|
|
63
64
|
"react-modal": "^3.16.3",
|
|
64
|
-
"react-
|
|
65
|
+
"react-reconciler": "^0.32.0",
|
|
65
66
|
"react-select": "^5.10.0",
|
|
66
67
|
"react-simple-timefield": "^3.3.1",
|
|
67
68
|
"react-uid": "^2.4.0",
|
|
68
69
|
"react-use": "^17.6.0",
|
|
69
70
|
"serialize-error": "^12.0.0",
|
|
70
71
|
"use-deep-compare": "^1.3.0",
|
|
71
|
-
"yup": "^
|
|
72
|
+
"yup": "^1.5.0"
|
|
72
73
|
},
|
|
73
74
|
"devDependencies": {
|
|
74
75
|
"@babel/core": "^7.26.9",
|
|
@@ -98,9 +99,9 @@
|
|
|
98
99
|
"@types/jest": "^29.5.14",
|
|
99
100
|
"@types/jest-axe": "^3.5.9",
|
|
100
101
|
"@types/node": "^18.15.3",
|
|
101
|
-
"@types/react": "^
|
|
102
|
+
"@types/react": "^19.1.12",
|
|
102
103
|
"@types/react-datepicker": "^4.19.6",
|
|
103
|
-
"@types/react-dom": "^
|
|
104
|
+
"@types/react-dom": "^19.1.9",
|
|
104
105
|
"@types/use-persisted-state": "^0.3.5",
|
|
105
106
|
"@typescript-eslint/eslint-plugin": "^8.24.0",
|
|
106
107
|
"@typescript-eslint/parser": "^8.24.0",
|
|
@@ -130,8 +131,8 @@
|
|
|
130
131
|
"postcss-reporter": "^7.1.0",
|
|
131
132
|
"postcss-scss": "^4.0.9",
|
|
132
133
|
"prettier": "^3.5.1",
|
|
133
|
-
"react": "^
|
|
134
|
-
"react-dom": "^
|
|
134
|
+
"react": "^19.1.1",
|
|
135
|
+
"react-dom": "^19.1.1",
|
|
135
136
|
"regenerator-runtime": "^0.14.1",
|
|
136
137
|
"sass": "^1.85.0",
|
|
137
138
|
"sass-loader": "^16.0.5",
|
|
@@ -148,11 +149,11 @@
|
|
|
148
149
|
},
|
|
149
150
|
"peerDependencies": {
|
|
150
151
|
"@types/lodash": "^4.17.13",
|
|
151
|
-
"@types/react": "^
|
|
152
|
-
"@types/react-dom": "^
|
|
152
|
+
"@types/react": "^19",
|
|
153
|
+
"@types/react-dom": "^19",
|
|
153
154
|
"lodash": "^4.17.21",
|
|
154
|
-
"react": "^
|
|
155
|
-
"react-dom": "^
|
|
155
|
+
"react": "^19",
|
|
156
|
+
"react-dom": "^19"
|
|
156
157
|
},
|
|
157
158
|
"publishConfig": {
|
|
158
159
|
"access": "public"
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { useMemo, useEffect } from 'react';
|
|
2
|
-
import debounce from 'lodash/debounce';
|
|
3
|
-
import { useRefValue } from './useRefValue';
|
|
4
|
-
export const useResizeAware = (el, callback, options = { delay: 200 }) => {
|
|
5
|
-
const getOnResize = useRefValue(callback);
|
|
6
|
-
const onResize = useMemo(() => debounce(() => {
|
|
7
|
-
const cb = getOnResize();
|
|
8
|
-
if (cb) {
|
|
9
|
-
cb();
|
|
10
|
-
}
|
|
11
|
-
}, options.delay), [getOnResize, options.delay]);
|
|
12
|
-
const observer = useMemo(() => new ResizeObserver(onResize), [onResize]);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
if (el) {
|
|
15
|
-
observer.observe(el);
|
|
16
|
-
}
|
|
17
|
-
return () => {
|
|
18
|
-
onResize.cancel();
|
|
19
|
-
if (el) {
|
|
20
|
-
observer.unobserve(el);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
}, [el, observer, onResize]);
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=useResizeAware.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeAware.js","sourceRoot":"","sources":["../../src/hooks/useResizeAware.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,QAAQ,MAAM,iBAAiB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAkC,EAAE,QAAoB,EAAE,OAAO,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IACnH,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;IACzC,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,EAAE;QACZ,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;QAExB,IAAI,EAAE,EAAE,CAAC;YACP,EAAE,EAAE,CAAA;QACN,CAAC;IACH,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,EACnB,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAC7B,CAAA;IACD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,EAAE,EAAE,CAAC;YACP,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QACtB,CAAC;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,MAAM,EAAE,CAAA;YACjB,IAAI,EAAE,EAAE,CAAC;gBACP,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;YACxB,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;AAC9B,CAAC,CAAA"}
|