@linzjs/lui 17.15.0 → 17.16.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/CHANGELOG.md +9 -0
- package/dist/assets/icons/misclose_error.svg +1 -0
- package/dist/assets/icons/notice_of_change.svg +1 -1
- package/dist/assets/icons/survey.svg +1 -1
- package/dist/assets/icons/xml_file.svg +1 -1
- package/dist/assets/svg-content.tsx +8 -16
- package/dist/components/LuiSidePanel/LuiSidePanel.d.ts +1 -0
- package/dist/components/LuiTooltip/LuiTooltip.d.ts +3 -1
- package/dist/index.js +197 -20
- package/dist/index.js.map +1 -1
- package/dist/lui.css +24 -51
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +197 -20
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Elements/Forms/FormComponents/Inputs.scss +1 -0
- package/dist/scss/Elements/Tooltips/tippy.scss +21 -70
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
# [17.16.0](https://github.com/linz/lui/compare/v17.15.1...v17.16.0) (2022-09-29)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* update the tooltip UX and add the following cursor support ([#772](https://github.com/linz/lui/issues/772)) ([9a812de](https://github.com/linz/lui/commit/9a812de282e2c9266ae9d75be0d4bfbe0ac69870))
|
|
7
|
+
|
|
8
|
+
## [17.15.1](https://github.com/linz/lui/compare/v17.15.0...v17.15.1) (2022-09-22)
|
|
9
|
+
|
|
1
10
|
# [17.15.0](https://github.com/linz/lui/compare/v17.14.1...v17.15.0) (2022-09-20)
|
|
2
11
|
|
|
3
12
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 18c.5 0 1-.5 1-1v-6c0-.6-.5-1-1-1s-1 .4-1 1v6c0 .5.5 1 1 1Zm0 4c.5 0 1-.5 1-1s-.5-1-1-1-1 .5-1 1 .5 1 1 1Zm-3-2v2H2L22 2v6h-2V6.8L6.8 20H18Z" fill="#000"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg viewBox="0 0 24 24"
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8l-6-6ZM9.9 19.7H8.1L6.2 16c0 .6.1 1 .1 1.3v2.3H5v-5.2h1.8L8.7 18V14.4h1.2v5.3Zm4.1-.5c-.4.4-.8.5-1.5.5-.6 0-1.1-.2-1.5-.6-.4-.4-.5-.9-.5-1.5 0-.7.2-1.2.5-1.5.4-.4.9-.5 1.5-.5.4 0 .7.1 1 .3.3.2.5.4.7.7.2.3.2.7.2 1.1.1.6-.1 1.1-.4 1.5Zm4.6-3.3c-.2-.1-.4-.2-.6-.2-.2 0-.4-.1-.6-.1-.3 0-.6.1-.8.4-.2.3-.3.6-.3 1.1 0 1 .4 1.5 1.1 1.5.2 0 .5 0 .7-.1.2-.1.4-.1.6-.2v1.2c-.4.2-.9.3-1.5.3-.8 0-1.4-.2-1.8-.7-.4-.5-.6-1.1-.6-2 0-.5.1-1 .3-1.4.2-.4.5-.7.9-.9.4-.2.8-.3 1.3-.3.6 0 1.1.1 1.6.4l-.3 1ZM19 12H5V4h9v5h5v3Zm-7.1 5.6c0 .3 0 .6.1.8.1.2.2.3.5.3.2 0 .4-.1.5-.3.1-.2.1-.4.1-.8 0-.3 0-.6-.1-.8-.1-.2-.2-.3-.5-.3-.2 0-.4.1-.5.3-.1.2-.1.5-.1.8Z" fill="#000"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg viewBox="0 0 24 24"
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 5H8V1.1H4c-1.7 0-3 1.3-3 3v14C1 19.8 2.3 21 4 21h16c1.7 0 3-1.3 3-3V8c0-1.7-1.3-3-3-3Zm1 3v3.3h-6.2V7H20c.6 0 1 .4 1 1Zm-7.8-1v4.3H8V7h5.2Zm-8 12H5c-1.1 0-2-.9-2-2s.9-2 2-2h.2v4Zm1.5 0v-4H8v-2.3h5.2V19H6.7ZM4 3.1h2V13H5c-.7 0-1.4.2-2 .6V4.1c0-.5.4-1 1-1ZM20 19h-5.2v-6.3H21V18c0 .6-.4 1-1 1Z" fill="#000"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 2h8l6 6v12c0 1.1-.9 2-2 2H5.99C4.89 22 4 21.1 4 20l.01-16c0-1.1.89-2 1.99-2Zm0 2v8h12V9h-5V4H6Zm-.98 15 1.513-2.51L5 14h1.433l.897 1.46.79-1.46h1.433l-1.547 2.55L9.52 19H8.087l-.87-1.407L6.452 19H5.02Zm4.804 0 .59-5h1.218l1.024 3.513L13.681 14h1.205l.596 5H14.23l-.322-2.698L13.252 19h-1.218l-.65-2.638L11.076 19H9.824Zm6.39-.31c.206.207.534.31.985.31H19v-1.17h-1.446c-.232 0-.348-.118-.348-.35V14h-1.3v3.701c0 .453.103.783.309.99Z"/></svg>
|
|
1
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 2h8l6 6v12c0 1.1-.9 2-2 2H5.99C4.89 22 4 21.1 4 20l.01-16c0-1.1.89-2 1.99-2Zm0 2v8h12V9h-5V4H6Zm-.98 15 1.513-2.51L5 14h1.433l.897 1.46.79-1.46h1.433l-1.547 2.55L9.52 19H8.087l-.87-1.407L6.452 19H5.02Zm4.804 0 .59-5h1.218l1.024 3.513L13.681 14h1.205l.596 5H14.23l-.322-2.698L13.252 19h-1.218l-.65-2.638L11.076 19H9.824Zm6.39-.31c.206.207.534.31.985.31H19v-1.17h-1.446c-.232 0-.348-.118-.348-.35V14h-1.3v3.701c0 .453.103.783.309.99Z" fill="#000"/></svg>
|
|
@@ -541,6 +541,12 @@ iconMap['ic_minimise'] = (
|
|
|
541
541
|
</svg>
|
|
542
542
|
);
|
|
543
543
|
|
|
544
|
+
iconMap['ic_misclose_error'] = (
|
|
545
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
546
|
+
<path d="M21 18c.5 0 1-.5 1-1v-6c0-.6-.5-1-1-1s-1 .4-1 1v6c0 .5.5 1 1 1Zm0 4c.5 0 1-.5 1-1s-.5-1-1-1-1 .5-1 1 .5 1 1 1Zm-3-2v2H2L22 2v6h-2V6.8L6.8 20H18Z" />
|
|
547
|
+
</svg>
|
|
548
|
+
);
|
|
549
|
+
|
|
544
550
|
iconMap['ic_more_vert'] = (
|
|
545
551
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
546
552
|
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
|
|
@@ -567,7 +573,7 @@ iconMap['ic_note_add'] = (
|
|
|
567
573
|
|
|
568
574
|
iconMap['ic_notice_of_change'] = (
|
|
569
575
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
570
|
-
<path d="M15 2H5c-1.1 0-
|
|
576
|
+
<path d="M15 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8l-6-6ZM9.9 19.7H8.1L6.2 16c0 .6.1 1 .1 1.3v2.3H5v-5.2h1.8L8.7 18V14.4h1.2v5.3Zm4.1-.5c-.4.4-.8.5-1.5.5-.6 0-1.1-.2-1.5-.6-.4-.4-.5-.9-.5-1.5 0-.7.2-1.2.5-1.5.4-.4.9-.5 1.5-.5.4 0 .7.1 1 .3.3.2.5.4.7.7.2.3.2.7.2 1.1.1.6-.1 1.1-.4 1.5Zm4.6-3.3c-.2-.1-.4-.2-.6-.2-.2 0-.4-.1-.6-.1-.3 0-.6.1-.8.4-.2.3-.3.6-.3 1.1 0 1 .4 1.5 1.1 1.5.2 0 .5 0 .7-.1.2-.1.4-.1.6-.2v1.2c-.4.2-.9.3-1.5.3-.8 0-1.4-.2-1.8-.7-.4-.5-.6-1.1-.6-2 0-.5.1-1 .3-1.4.2-.4.5-.7.9-.9.4-.2.8-.3 1.3-.3.6 0 1.1.1 1.6.4l-.3 1ZM19 12H5V4h9v5h5v3Zm-7.1 5.6c0 .3 0 .6.1.8.1.2.2.3.5.3.2 0 .4-.1.5-.3.1-.2.1-.4.1-.8 0-.3 0-.6-.1-.8-.1-.2-.2-.3-.5-.3-.2 0-.4.1-.5.3-.1.2-.1.5-.1.8Z" />
|
|
571
577
|
</svg>
|
|
572
578
|
);
|
|
573
579
|
|
|
@@ -763,21 +769,7 @@ iconMap['ic_submit'] = (
|
|
|
763
769
|
|
|
764
770
|
iconMap['ic_survey'] = (
|
|
765
771
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
766
|
-
<
|
|
767
|
-
<rect x="3" y="6" rx="2" stroke="#000" stroke- />
|
|
768
|
-
<path
|
|
769
|
-
d="M2 4a2 2 0 0 1 2-2h3v18H4a2 2 0 0 1-2-2V4Z"
|
|
770
|
-
stroke="#000"
|
|
771
|
-
stroke-
|
|
772
|
-
/>
|
|
773
|
-
<path d="M2 17a3 3 0 0 1 3-3h2v6H5a3 3 0 0 1-3-3Z" stroke="#000" stroke- />
|
|
774
|
-
<path d="M6 15h3v4H6z" />
|
|
775
|
-
<path
|
|
776
|
-
d="M21 12H8M14 19V7M6 19v-4"
|
|
777
|
-
stroke="#6B6966"
|
|
778
|
-
stroke-width="1.5"
|
|
779
|
-
stroke-linejoin="round"
|
|
780
|
-
/>
|
|
772
|
+
<path d="M20 5H8V1.1H4c-1.7 0-3 1.3-3 3v14C1 19.8 2.3 21 4 21h16c1.7 0 3-1.3 3-3V8c0-1.7-1.3-3-3-3Zm1 3v3.3h-6.2V7H20c.6 0 1 .4 1 1Zm-7.8-1v4.3H8V7h5.2Zm-8 12H5c-1.1 0-2-.9-2-2s.9-2 2-2h.2v4Zm1.5 0v-4H8v-2.3h5.2V19H6.7ZM4 3.1h2V13H5c-.7 0-1.4.2-2 .6V4.1c0-.5.4-1 1-1ZM20 19h-5.2v-6.3H21V18c0 .6-.4 1-1 1Z" />
|
|
781
773
|
</svg>
|
|
782
774
|
);
|
|
783
775
|
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { Placement } from 'tippy.js';
|
|
3
|
-
import 'tippy.js/dist/tippy.css';
|
|
4
3
|
import 'tippy.js/dist/border.css';
|
|
4
|
+
import 'tippy.js/dist/tippy.css';
|
|
5
5
|
export interface ILuiTooltipProperties {
|
|
6
6
|
message: string;
|
|
7
7
|
placement?: Placement;
|
|
8
8
|
trigger?: string;
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
animation?: boolean;
|
|
11
|
+
followCursor?: boolean;
|
|
12
|
+
mode?: 'default' | 'info' | 'error';
|
|
11
13
|
}
|
|
12
14
|
export declare const LuiTooltip: (props: ILuiTooltipProperties) => JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -338,6 +338,8 @@ iconMap['ic_message_received'] = (React__default["default"].createElement("svg",
|
|
|
338
338
|
React__default["default"].createElement("path", { d: "M19.5 4h-16c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9v-2h-9V8l8 5 8-5v5h2V6c0-1.1-.9-2-2-2Zm-8 7-8-5h16l-8 5Zm6 4-4 4 4 4v-3h4v-2h-4v-3Z" })));
|
|
339
339
|
iconMap['ic_minimise'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
|
|
340
340
|
React__default["default"].createElement("path", { d: "M7 19h10c.55 0 1 .45 1 1s-.45 1-1 1H7c-.55 0-1-.45-1-1s.45-1 1-1z" })));
|
|
341
|
+
iconMap['ic_misclose_error'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
342
|
+
React__default["default"].createElement("path", { d: "M21 18c.5 0 1-.5 1-1v-6c0-.6-.5-1-1-1s-1 .4-1 1v6c0 .5.5 1 1 1Zm0 4c.5 0 1-.5 1-1s-.5-1-1-1-1 .5-1 1 .5 1 1 1Zm-3-2v2H2L22 2v6h-2V6.8L6.8 20H18Z" })));
|
|
341
343
|
iconMap['ic_more_vert'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
|
|
342
344
|
React__default["default"].createElement("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })));
|
|
343
345
|
iconMap['ic_navigate_before'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
|
|
@@ -347,7 +349,7 @@ iconMap['ic_navigate_next'] = (React__default["default"].createElement("svg", {
|
|
|
347
349
|
iconMap['ic_note_add'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
348
350
|
React__default["default"].createElement("path", { d: "M13 11h-2v3H8v2h3v3h2v-3h3v-2h-3v-3Zm1-9H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6Zm4 18H6V4h7v5h5v11Z" })));
|
|
349
351
|
iconMap['ic_notice_of_change'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
350
|
-
React__default["default"].createElement("path", { d: "M15 2H5c-1.1 0-
|
|
352
|
+
React__default["default"].createElement("path", { d: "M15 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8l-6-6ZM9.9 19.7H8.1L6.2 16c0 .6.1 1 .1 1.3v2.3H5v-5.2h1.8L8.7 18V14.4h1.2v5.3Zm4.1-.5c-.4.4-.8.5-1.5.5-.6 0-1.1-.2-1.5-.6-.4-.4-.5-.9-.5-1.5 0-.7.2-1.2.5-1.5.4-.4.9-.5 1.5-.5.4 0 .7.1 1 .3.3.2.5.4.7.7.2.3.2.7.2 1.1.1.6-.1 1.1-.4 1.5Zm4.6-3.3c-.2-.1-.4-.2-.6-.2-.2 0-.4-.1-.6-.1-.3 0-.6.1-.8.4-.2.3-.3.6-.3 1.1 0 1 .4 1.5 1.1 1.5.2 0 .5 0 .7-.1.2-.1.4-.1.6-.2v1.2c-.4.2-.9.3-1.5.3-.8 0-1.4-.2-1.8-.7-.4-.5-.6-1.1-.6-2 0-.5.1-1 .3-1.4.2-.4.5-.7.9-.9.4-.2.8-.3 1.3-.3.6 0 1.1.1 1.6.4l-.3 1ZM19 12H5V4h9v5h5v3Zm-7.1 5.6c0 .3 0 .6.1.8.1.2.2.3.5.3.2 0 .4-.1.5-.3.1-.2.1-.4.1-.8 0-.3 0-.6-.1-.8-.1-.2-.2-.3-.5-.3-.2 0-.4.1-.5.3-.1.2-.1.5-.1.8Z" })));
|
|
351
353
|
iconMap['ic_numbered_list'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
|
|
352
354
|
React__default["default"].createElement("path", { d: "M21 16h-2c-.28 0-.5.22-.5.5s.22.5.5.5h1.5v.5H20c-.28 0-.5.22-.5.5s.22.5.5.5h.5v.5H19c-.28 0-.5.22-.5.5s.22.5.5.5h2c.28 0 .5-.22.5-.5v-3c0-.28-.22-.5-.5-.5zM19 5h.5v2.5c0 .28.22.5.5.5s.5-.22.5-.5v-3c0-.28-.22-.5-.5-.5h-1c-.28 0-.5.22-.5.5s.22.5.5.5zm2.5 5.72v-.22c0-.28-.22-.5-.5-.5h-2c-.28 0-.5.22-.5.5s.22.5.5.5h1.3l-1.68 1.96a.49.49 0 0 0-.12.32v.22c0 .28.22.5.5.5h2c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-1.3l1.68-1.96a.49.49 0 0 0 .12-.32zM15.5 5h-12c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1zm0 12h-12c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1zm0-6h-12c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z" })));
|
|
353
355
|
iconMap['ic_office_building_corporate'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -415,12 +417,7 @@ iconMap['ic_square_selection'] = (React__default["default"].createElement("svg",
|
|
|
415
417
|
iconMap['ic_submit'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
416
418
|
React__default["default"].createElement("path", { d: "M2.01 21 23 12 2.01 3 2 10l15 2-15 2 .01 7Z" })));
|
|
417
419
|
iconMap['ic_survey'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
418
|
-
React__default["default"].createElement("
|
|
419
|
-
React__default["default"].createElement("rect", { x: "3", y: "6", rx: "2", stroke: "#000", "stroke-": true }),
|
|
420
|
-
React__default["default"].createElement("path", { d: "M2 4a2 2 0 0 1 2-2h3v18H4a2 2 0 0 1-2-2V4Z", stroke: "#000", "stroke-": true }),
|
|
421
|
-
React__default["default"].createElement("path", { d: "M2 17a3 3 0 0 1 3-3h2v6H5a3 3 0 0 1-3-3Z", stroke: "#000", "stroke-": true }),
|
|
422
|
-
React__default["default"].createElement("path", { d: "M6 15h3v4H6z" }),
|
|
423
|
-
React__default["default"].createElement("path", { d: "M21 12H8M14 19V7M6 19v-4", stroke: "#6B6966", "stroke-width": "1.5", "stroke-linejoin": "round" })));
|
|
420
|
+
React__default["default"].createElement("path", { d: "M20 5H8V1.1H4c-1.7 0-3 1.3-3 3v14C1 19.8 2.3 21 4 21h16c1.7 0 3-1.3 3-3V8c0-1.7-1.3-3-3-3Zm1 3v3.3h-6.2V7H20c.6 0 1 .4 1 1Zm-7.8-1v4.3H8V7h5.2Zm-8 12H5c-1.1 0-2-.9-2-2s.9-2 2-2h.2v4Zm1.5 0v-4H8v-2.3h5.2V19H6.7ZM4 3.1h2V13H5c-.7 0-1.4.2-2 .6V4.1c0-.5.4-1 1-1ZM20 19h-5.2v-6.3H21V18c0 .6-.4 1-1 1Z" })));
|
|
424
421
|
iconMap['ic_survey_report'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
425
422
|
React__default["default"].createElement("path", { d: "M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 16H4V5h16v14Z" }),
|
|
426
423
|
React__default["default"].createElement("path", { d: "M19.41 10.42 17.99 9l-3.17 3.17-1.41-1.42L12 12.16 14.82 15l4.59-4.58Z" }),
|
|
@@ -32833,20 +32830,198 @@ Object.assign({}, applyStyles$1, {
|
|
|
32833
32830
|
}
|
|
32834
32831
|
});
|
|
32835
32832
|
|
|
32833
|
+
var mouseCoords = {
|
|
32834
|
+
clientX: 0,
|
|
32835
|
+
clientY: 0
|
|
32836
|
+
};
|
|
32837
|
+
var activeInstances = [];
|
|
32838
|
+
|
|
32839
|
+
function storeMouseCoords(_ref) {
|
|
32840
|
+
var clientX = _ref.clientX,
|
|
32841
|
+
clientY = _ref.clientY;
|
|
32842
|
+
mouseCoords = {
|
|
32843
|
+
clientX: clientX,
|
|
32844
|
+
clientY: clientY
|
|
32845
|
+
};
|
|
32846
|
+
}
|
|
32847
|
+
|
|
32848
|
+
function addMouseCoordsListener(doc) {
|
|
32849
|
+
doc.addEventListener('mousemove', storeMouseCoords);
|
|
32850
|
+
}
|
|
32851
|
+
|
|
32852
|
+
function removeMouseCoordsListener(doc) {
|
|
32853
|
+
doc.removeEventListener('mousemove', storeMouseCoords);
|
|
32854
|
+
}
|
|
32855
|
+
|
|
32856
|
+
var followCursor = {
|
|
32857
|
+
name: 'followCursor',
|
|
32858
|
+
defaultValue: false,
|
|
32859
|
+
fn: function fn(instance) {
|
|
32860
|
+
var reference = instance.reference;
|
|
32861
|
+
var doc = getOwnerDocument(instance.props.triggerTarget || reference);
|
|
32862
|
+
var isInternalUpdate = false;
|
|
32863
|
+
var wasFocusEvent = false;
|
|
32864
|
+
var isUnmounted = true;
|
|
32865
|
+
var prevProps = instance.props;
|
|
32866
|
+
|
|
32867
|
+
function getIsInitialBehavior() {
|
|
32868
|
+
return instance.props.followCursor === 'initial' && instance.state.isVisible;
|
|
32869
|
+
}
|
|
32870
|
+
|
|
32871
|
+
function addListener() {
|
|
32872
|
+
doc.addEventListener('mousemove', onMouseMove);
|
|
32873
|
+
}
|
|
32874
|
+
|
|
32875
|
+
function removeListener() {
|
|
32876
|
+
doc.removeEventListener('mousemove', onMouseMove);
|
|
32877
|
+
}
|
|
32878
|
+
|
|
32879
|
+
function unsetGetReferenceClientRect() {
|
|
32880
|
+
isInternalUpdate = true;
|
|
32881
|
+
instance.setProps({
|
|
32882
|
+
getReferenceClientRect: null
|
|
32883
|
+
});
|
|
32884
|
+
isInternalUpdate = false;
|
|
32885
|
+
}
|
|
32886
|
+
|
|
32887
|
+
function onMouseMove(event) {
|
|
32888
|
+
// If the instance is interactive, avoid updating the position unless it's
|
|
32889
|
+
// over the reference element
|
|
32890
|
+
var isCursorOverReference = event.target ? reference.contains(event.target) : true;
|
|
32891
|
+
var followCursor = instance.props.followCursor;
|
|
32892
|
+
var clientX = event.clientX,
|
|
32893
|
+
clientY = event.clientY;
|
|
32894
|
+
var rect = reference.getBoundingClientRect();
|
|
32895
|
+
var relativeX = clientX - rect.left;
|
|
32896
|
+
var relativeY = clientY - rect.top;
|
|
32897
|
+
|
|
32898
|
+
if (isCursorOverReference || !instance.props.interactive) {
|
|
32899
|
+
instance.setProps({
|
|
32900
|
+
// @ts-ignore - unneeded DOMRect properties
|
|
32901
|
+
getReferenceClientRect: function getReferenceClientRect() {
|
|
32902
|
+
var rect = reference.getBoundingClientRect();
|
|
32903
|
+
var x = clientX;
|
|
32904
|
+
var y = clientY;
|
|
32905
|
+
|
|
32906
|
+
if (followCursor === 'initial') {
|
|
32907
|
+
x = rect.left + relativeX;
|
|
32908
|
+
y = rect.top + relativeY;
|
|
32909
|
+
}
|
|
32910
|
+
|
|
32911
|
+
var top = followCursor === 'horizontal' ? rect.top : y;
|
|
32912
|
+
var right = followCursor === 'vertical' ? rect.right : x;
|
|
32913
|
+
var bottom = followCursor === 'horizontal' ? rect.bottom : y;
|
|
32914
|
+
var left = followCursor === 'vertical' ? rect.left : x;
|
|
32915
|
+
return {
|
|
32916
|
+
width: right - left,
|
|
32917
|
+
height: bottom - top,
|
|
32918
|
+
top: top,
|
|
32919
|
+
right: right,
|
|
32920
|
+
bottom: bottom,
|
|
32921
|
+
left: left
|
|
32922
|
+
};
|
|
32923
|
+
}
|
|
32924
|
+
});
|
|
32925
|
+
}
|
|
32926
|
+
}
|
|
32927
|
+
|
|
32928
|
+
function create() {
|
|
32929
|
+
if (instance.props.followCursor) {
|
|
32930
|
+
activeInstances.push({
|
|
32931
|
+
instance: instance,
|
|
32932
|
+
doc: doc
|
|
32933
|
+
});
|
|
32934
|
+
addMouseCoordsListener(doc);
|
|
32935
|
+
}
|
|
32936
|
+
}
|
|
32937
|
+
|
|
32938
|
+
function destroy() {
|
|
32939
|
+
activeInstances = activeInstances.filter(function (data) {
|
|
32940
|
+
return data.instance !== instance;
|
|
32941
|
+
});
|
|
32942
|
+
|
|
32943
|
+
if (activeInstances.filter(function (data) {
|
|
32944
|
+
return data.doc === doc;
|
|
32945
|
+
}).length === 0) {
|
|
32946
|
+
removeMouseCoordsListener(doc);
|
|
32947
|
+
}
|
|
32948
|
+
}
|
|
32949
|
+
|
|
32950
|
+
return {
|
|
32951
|
+
onCreate: create,
|
|
32952
|
+
onDestroy: destroy,
|
|
32953
|
+
onBeforeUpdate: function onBeforeUpdate() {
|
|
32954
|
+
prevProps = instance.props;
|
|
32955
|
+
},
|
|
32956
|
+
onAfterUpdate: function onAfterUpdate(_, _ref2) {
|
|
32957
|
+
var followCursor = _ref2.followCursor;
|
|
32958
|
+
|
|
32959
|
+
if (isInternalUpdate) {
|
|
32960
|
+
return;
|
|
32961
|
+
}
|
|
32962
|
+
|
|
32963
|
+
if (followCursor !== undefined && prevProps.followCursor !== followCursor) {
|
|
32964
|
+
destroy();
|
|
32965
|
+
|
|
32966
|
+
if (followCursor) {
|
|
32967
|
+
create();
|
|
32968
|
+
|
|
32969
|
+
if (instance.state.isMounted && !wasFocusEvent && !getIsInitialBehavior()) {
|
|
32970
|
+
addListener();
|
|
32971
|
+
}
|
|
32972
|
+
} else {
|
|
32973
|
+
removeListener();
|
|
32974
|
+
unsetGetReferenceClientRect();
|
|
32975
|
+
}
|
|
32976
|
+
}
|
|
32977
|
+
},
|
|
32978
|
+
onMount: function onMount() {
|
|
32979
|
+
if (instance.props.followCursor && !wasFocusEvent) {
|
|
32980
|
+
if (isUnmounted) {
|
|
32981
|
+
onMouseMove(mouseCoords);
|
|
32982
|
+
isUnmounted = false;
|
|
32983
|
+
}
|
|
32984
|
+
|
|
32985
|
+
if (!getIsInitialBehavior()) {
|
|
32986
|
+
addListener();
|
|
32987
|
+
}
|
|
32988
|
+
}
|
|
32989
|
+
},
|
|
32990
|
+
onTrigger: function onTrigger(_, event) {
|
|
32991
|
+
if (isMouseEvent$1(event)) {
|
|
32992
|
+
mouseCoords = {
|
|
32993
|
+
clientX: event.clientX,
|
|
32994
|
+
clientY: event.clientY
|
|
32995
|
+
};
|
|
32996
|
+
}
|
|
32997
|
+
|
|
32998
|
+
wasFocusEvent = event.type === 'focus';
|
|
32999
|
+
},
|
|
33000
|
+
onHidden: function onHidden() {
|
|
33001
|
+
if (instance.props.followCursor) {
|
|
33002
|
+
unsetGetReferenceClientRect();
|
|
33003
|
+
removeListener();
|
|
33004
|
+
isUnmounted = true;
|
|
33005
|
+
}
|
|
33006
|
+
}
|
|
33007
|
+
};
|
|
33008
|
+
}
|
|
33009
|
+
};
|
|
33010
|
+
|
|
32836
33011
|
tippy.setDefaultProps({
|
|
32837
33012
|
render: render
|
|
32838
33013
|
});
|
|
32839
33014
|
|
|
32840
|
-
var css_248z$5 = ".tippy-box
|
|
33015
|
+
var css_248z$5 = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
|
|
32841
33016
|
styleInject(css_248z$5);
|
|
32842
33017
|
|
|
32843
|
-
var css_248z$4 = ".tippy-box{
|
|
33018
|
+
var css_248z$4 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
|
|
32844
33019
|
styleInject(css_248z$4);
|
|
32845
33020
|
|
|
32846
33021
|
var id = 0;
|
|
32847
33022
|
var getKey = function () { return id++; };
|
|
32848
33023
|
var LuiTooltip = function (props) {
|
|
32849
|
-
var children = props.children, message = props.message, placement = props.placement, trigger = props.trigger, _a = props.animation, animation = _a === void 0 ? true : _a;
|
|
33024
|
+
var children = props.children, message = props.message, placement = props.placement, trigger = props.trigger, _a = props.animation, animation = _a === void 0 ? true : _a, _b = props.followCursor, followCursor$1 = _b === void 0 ? false : _b, _c = props.mode, mode = _c === void 0 ? 'default' : _c;
|
|
32850
33025
|
var id = "LuiToolTip_".concat(React.useMemo(getKey, []));
|
|
32851
33026
|
if (typeof message !== 'string') {
|
|
32852
33027
|
throw new Error('LuiTooltip message must be a string!');
|
|
@@ -32854,18 +33029,20 @@ var LuiTooltip = function (props) {
|
|
|
32854
33029
|
React.useEffect(function () {
|
|
32855
33030
|
tippy("#".concat(id), {
|
|
32856
33031
|
content: message,
|
|
32857
|
-
arrow:
|
|
33032
|
+
arrow: false,
|
|
32858
33033
|
trigger: trigger,
|
|
32859
|
-
theme:
|
|
33034
|
+
theme: mode,
|
|
32860
33035
|
placement: placement,
|
|
32861
|
-
offset: [0,
|
|
32862
|
-
animation: animation
|
|
33036
|
+
offset: [0, 18],
|
|
33037
|
+
animation: animation,
|
|
33038
|
+
followCursor: followCursor$1,
|
|
33039
|
+
plugins: [followCursor]
|
|
32863
33040
|
});
|
|
32864
33041
|
return function () {
|
|
32865
33042
|
var _a, _b;
|
|
32866
33043
|
(_b = (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a._tippy) === null || _b === void 0 ? void 0 : _b.destroy();
|
|
32867
33044
|
};
|
|
32868
|
-
}, [id, message, placement, trigger, animation]);
|
|
33045
|
+
}, [id, message, placement, trigger, animation, followCursor$1]);
|
|
32869
33046
|
return React__default["default"].createElement("span", { id: id }, children);
|
|
32870
33047
|
};
|
|
32871
33048
|
|
|
@@ -32902,18 +33079,18 @@ var LuiBadge = function (props) { return (React__default["default"].createElemen
|
|
|
32902
33079
|
var LuiSidePanelContext = React__default["default"].createContext({ setProps: function () { return undefined; } });
|
|
32903
33080
|
/* eslint-disable react/prop-types */
|
|
32904
33081
|
var LuiSidePanel = function (_a) {
|
|
32905
|
-
var children = _a.children, onClose = _a.onClose, width = _a.width, top = _a.top;
|
|
33082
|
+
var children = _a.children, onClose = _a.onClose, width = _a.width, top = _a.top, closeBtnTitleAttr = _a.closeBtnTitleAttr;
|
|
32906
33083
|
var setProps = React__default["default"].useContext(LuiSidePanelContext).setProps;
|
|
32907
33084
|
React__default["default"].useEffect(function () {
|
|
32908
|
-
setProps({ children: children, onClose: onClose, width: width, top: top });
|
|
33085
|
+
setProps({ children: children, onClose: onClose, width: width, top: top, closeBtnTitleAttr: closeBtnTitleAttr });
|
|
32909
33086
|
return function () {
|
|
32910
33087
|
setProps(undefined);
|
|
32911
33088
|
};
|
|
32912
|
-
}, [setProps, children, onClose, width, top]);
|
|
33089
|
+
}, [setProps, children, onClose, width, top, closeBtnTitleAttr]);
|
|
32913
33090
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
32914
33091
|
};
|
|
32915
33092
|
var LuiSidePanelContainer = function (props) {
|
|
32916
|
-
var _a = props !== null && props !== void 0 ? props : {}, children = _a.children, onClose = _a.onClose, _b = _a.width, width = _b === void 0 ? '50%' : _b, _c = _a.top, top = _c === void 0 ? 60 : _c;
|
|
33093
|
+
var _a = props !== null && props !== void 0 ? props : {}, children = _a.children, onClose = _a.onClose, _b = _a.width, width = _b === void 0 ? '50%' : _b, _c = _a.top, top = _c === void 0 ? 60 : _c, _d = _a.closeBtnTitleAttr, closeBtnTitleAttr = _d === void 0 ? 'Close panel' : _d;
|
|
32917
33094
|
return (React__default["default"].createElement("section", { style: {
|
|
32918
33095
|
position: 'fixed',
|
|
32919
33096
|
right: 0,
|
|
@@ -32926,7 +33103,7 @@ var LuiSidePanelContainer = function (props) {
|
|
|
32926
33103
|
padding: 0,
|
|
32927
33104
|
zIndex: 3
|
|
32928
33105
|
} },
|
|
32929
|
-
children && (React__default["default"].createElement("button", { type: "button", "data-testid": "close", onClick: onClose, style: {
|
|
33106
|
+
children && (React__default["default"].createElement("button", { type: "button", "data-testid": "close", title: closeBtnTitleAttr, onClick: onClose, style: {
|
|
32930
33107
|
color: '#5e5e61',
|
|
32931
33108
|
position: 'absolute',
|
|
32932
33109
|
right: 15,
|