@indico-data/design-system 3.6.2 → 3.6.4
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/tooltip/Tooltip.d.ts +5 -3
- package/lib/components/truncate/Truncate.d.ts +1 -1
- package/lib/components/truncate/types.d.ts +2 -3
- package/lib/index.d.ts +8 -7
- package/lib/index.esm.js +4 -4
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +4 -4
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/tooltip/Tooltip.stories.tsx +10 -0
- package/src/components/tooltip/Tooltip.tsx +6 -2
- package/src/components/truncate/Truncate.stories.tsx +7 -7
- package/src/components/truncate/Truncate.tsx +4 -4
- package/src/components/truncate/__tests__/Truncate.test.tsx +2 -2
- package/src/components/truncate/types.ts +2 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
import { PlacesType } from 'react-tooltip';
|
|
2
|
+
import { PlacesType, PositionStrategy } from 'react-tooltip';
|
|
3
3
|
export interface TooltipProps {
|
|
4
4
|
id: string;
|
|
5
5
|
/** Whether the tooltip should be shown on click */
|
|
@@ -8,14 +8,16 @@ export interface TooltipProps {
|
|
|
8
8
|
delayShow?: number;
|
|
9
9
|
/** The delay in milliseconds before the tooltip is hidden */
|
|
10
10
|
delayHide?: number;
|
|
11
|
-
children: React.ReactNode;
|
|
12
11
|
/** The placement of the tooltip */
|
|
13
12
|
place?: PlacesType;
|
|
14
13
|
/** The width of the tooltip */
|
|
15
14
|
width?: CSSProperties['width'];
|
|
16
15
|
/** The max width of the tooltip */
|
|
17
16
|
maxWidth?: CSSProperties['maxWidth'];
|
|
17
|
+
/** The position strategy of the tooltip */
|
|
18
|
+
positionStrategy?: PositionStrategy;
|
|
18
19
|
/** The content of the tooltip */
|
|
20
|
+
children: React.ReactNode;
|
|
19
21
|
[key: string]: any;
|
|
20
22
|
}
|
|
21
|
-
export declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, place, width, maxWidth, opacity, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, place, width, maxWidth, opacity, positionStrategy, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TruncateProps } from './types';
|
|
2
|
-
export declare const Truncate: ({ numLines,
|
|
2
|
+
export declare const Truncate: ({ numLines, tooltipOptions, children, ...rest }: TruncateProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,11 +2,10 @@ import { TooltipProps } from '../tooltip/Tooltip';
|
|
|
2
2
|
export interface TruncateProps {
|
|
3
3
|
/** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
|
|
4
4
|
numLines?: number;
|
|
5
|
-
/** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
|
|
6
|
-
truncateString: string;
|
|
7
5
|
/** The options for the tooltip. If `disabled` is `true`, the tooltip will not be shown. If left blank, the tooltip will be shown by default. This is particularly useful if you want to set the width of the tooltip to something other than the default `max-content`. */
|
|
8
6
|
tooltipOptions?: Partial<TooltipProps> & {
|
|
9
7
|
disabled?: boolean;
|
|
10
8
|
};
|
|
11
|
-
|
|
9
|
+
/** The children to display. This will be displayed in the truncate component. */
|
|
10
|
+
children: React.ReactNode;
|
|
12
11
|
}
|
package/lib/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters
|
|
|
11
11
|
export { DateRange } from 'react-day-picker';
|
|
12
12
|
import { ColumnDef, Row as Row$1, SortingState } from '@tanstack/react-table';
|
|
13
13
|
export { ColumnDef, SortingFn, SortingState, Column as TanstackTableColumnType, Row as TanstackTableRowType, Table as TanstackTableType, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
|
|
14
|
-
import { PlacesType } from 'react-tooltip';
|
|
14
|
+
import { PlacesType, PositionStrategy } from 'react-tooltip';
|
|
15
15
|
export { ToastContainer, toast } from 'react-toastify';
|
|
16
16
|
|
|
17
17
|
declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
|
|
@@ -943,17 +943,19 @@ interface TooltipProps {
|
|
|
943
943
|
delayShow?: number;
|
|
944
944
|
/** The delay in milliseconds before the tooltip is hidden */
|
|
945
945
|
delayHide?: number;
|
|
946
|
-
children: React.ReactNode;
|
|
947
946
|
/** The placement of the tooltip */
|
|
948
947
|
place?: PlacesType;
|
|
949
948
|
/** The width of the tooltip */
|
|
950
949
|
width?: CSSProperties['width'];
|
|
951
950
|
/** The max width of the tooltip */
|
|
952
951
|
maxWidth?: CSSProperties['maxWidth'];
|
|
952
|
+
/** The position strategy of the tooltip */
|
|
953
|
+
positionStrategy?: PositionStrategy;
|
|
953
954
|
/** The content of the tooltip */
|
|
955
|
+
children: React.ReactNode;
|
|
954
956
|
[key: string]: any;
|
|
955
957
|
}
|
|
956
|
-
declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, place, width, maxWidth, opacity, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
|
|
958
|
+
declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, place, width, maxWidth, opacity, positionStrategy, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
|
|
957
959
|
|
|
958
960
|
interface PaginationProps {
|
|
959
961
|
/** The total number of pages to be displayed */
|
|
@@ -1023,15 +1025,14 @@ declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legend
|
|
|
1023
1025
|
interface TruncateProps {
|
|
1024
1026
|
/** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
|
|
1025
1027
|
numLines?: number;
|
|
1026
|
-
/** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
|
|
1027
|
-
truncateString: string;
|
|
1028
1028
|
/** The options for the tooltip. If `disabled` is `true`, the tooltip will not be shown. If left blank, the tooltip will be shown by default. This is particularly useful if you want to set the width of the tooltip to something other than the default `max-content`. */
|
|
1029
1029
|
tooltipOptions?: Partial<TooltipProps> & {
|
|
1030
1030
|
disabled?: boolean;
|
|
1031
1031
|
};
|
|
1032
|
-
|
|
1032
|
+
/** The children to display. This will be displayed in the truncate component. */
|
|
1033
|
+
children: React.ReactNode;
|
|
1033
1034
|
}
|
|
1034
1035
|
|
|
1035
|
-
declare const Truncate: ({ numLines,
|
|
1036
|
+
declare const Truncate: ({ numLines, tooltipOptions, children, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
|
|
1036
1037
|
|
|
1037
1038
|
export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, ConfirmationModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, SingleInputDatePicker, SingleInputDateTimePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };
|
package/lib/index.esm.js
CHANGED
|
@@ -43092,7 +43092,7 @@ const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,bas
|
|
|
43092
43092
|
.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});}));
|
|
43093
43093
|
|
|
43094
43094
|
const Tooltip = (_a) => {
|
|
43095
|
-
var { id, clickToShow, delayShow, delayHide, children, place = 'top', width = 'max-content', maxWidth, opacity = 1 } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "place", "width", "maxWidth", "opacity"]);
|
|
43095
|
+
var { id, clickToShow, delayShow, delayHide, children, place = 'top', width = 'max-content', maxWidth, opacity = 1, positionStrategy = 'absolute' } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "place", "width", "maxWidth", "opacity", "positionStrategy"]);
|
|
43096
43096
|
return (jsx(M, Object.assign({ style: {
|
|
43097
43097
|
backgroundColor: 'var(--pf-semantic-background-inverted)',
|
|
43098
43098
|
color: 'var(--pf-semantic-font-inverted)',
|
|
@@ -43102,7 +43102,7 @@ const Tooltip = (_a) => {
|
|
|
43102
43102
|
textWrap: 'wrap',
|
|
43103
43103
|
wordWrap: 'break-word',
|
|
43104
43104
|
zIndex: 1000,
|
|
43105
|
-
}, className: "tooltip", id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide, opacity: opacity }, rest, { children: children })));
|
|
43105
|
+
}, className: "tooltip", id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide, opacity: opacity, positionStrategy: positionStrategy }, rest, { children: children })));
|
|
43106
43106
|
};
|
|
43107
43107
|
|
|
43108
43108
|
function BarSpinner(_a) {
|
|
@@ -43238,7 +43238,7 @@ function v4(options, buf, offset) {
|
|
|
43238
43238
|
}
|
|
43239
43239
|
|
|
43240
43240
|
const Truncate = (_a) => {
|
|
43241
|
-
var { numLines = 1,
|
|
43241
|
+
var { numLines = 1, tooltipOptions = {}, children } = _a, rest = __rest(_a, ["numLines", "tooltipOptions", "children"]);
|
|
43242
43242
|
const [isTruncated, setIsTruncated] = useState(false);
|
|
43243
43243
|
const id = useMemo(() => v4().replace(/[^a-zA-Z0-9-_]/g, '_'), []);
|
|
43244
43244
|
const ref = useRef(null);
|
|
@@ -43264,7 +43264,7 @@ const Truncate = (_a) => {
|
|
|
43264
43264
|
return (jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [jsx("span", Object.assign({ ref: ref, "data-testid": `truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`, "data-tooltip-id": id, className: classNames('truncate', {
|
|
43265
43265
|
'truncate--multi-line': numLines > 1,
|
|
43266
43266
|
'truncate--single-line': numLines === 1,
|
|
43267
|
-
}) }, rest, { children:
|
|
43267
|
+
}) }, rest, { children: children })), isTruncated && children && !tooltipOptions.disabled && (jsx(Tooltip, Object.assign({}, tooltipOptions, { id: id, children: children })))] }));
|
|
43268
43268
|
};
|
|
43269
43269
|
|
|
43270
43270
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|