superdesk-ui-framework 2.4.14 → 2.4.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (154) hide show
  1. package/app/index.js +1 -0
  2. package/app/scripts/modals.js +22 -9
  3. package/app/styles/_accessibility.scss +3 -2
  4. package/app/styles/_buttons.scss +17 -0
  5. package/app/styles/_modals.scss +23 -17
  6. package/app/styles/_tooltips.scss +66 -0
  7. package/app/styles/app.scss +1 -0
  8. package/app/styles/components/_sd-toaster.scss +6 -5
  9. package/app/styles/form-elements/_inputs.scss +1 -0
  10. package/app/styles/form-elements/_select-grid.scss +77 -0
  11. package/app/styles/pr-superdesk-theme.scss +3 -1
  12. package/app/styles/primereact/_pr-menu.scss +38 -0
  13. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  14. package/app/styles/variables/_colors.scss +30 -18
  15. package/app-typescript/components/Button.tsx +2 -2
  16. package/app-typescript/components/Dropdown.tsx +0 -1
  17. package/app-typescript/components/DropdownFirst.tsx +2 -2
  18. package/app-typescript/components/IconPicker.tsx +277 -0
  19. package/app-typescript/components/Input.tsx +8 -3
  20. package/app-typescript/components/ListItemLoader.tsx +30 -0
  21. package/app-typescript/components/Menu.tsx +149 -0
  22. package/app-typescript/components/PropsList.tsx +2 -2
  23. package/app-typescript/components/Radio.tsx +19 -10
  24. package/app-typescript/components/Select.tsx +6 -3
  25. package/app-typescript/components/SelectGrid.tsx +233 -0
  26. package/app-typescript/components/SelectWithTemplate.tsx +0 -2
  27. package/app-typescript/components/Skeleton.tsx +48 -0
  28. package/app-typescript/components/Tag.tsx +2 -2
  29. package/app-typescript/components/Toast.tsx +31 -5
  30. package/app-typescript/components/ToastMessage.tsx +9 -16
  31. package/app-typescript/components/ToastText.tsx +2 -4
  32. package/app-typescript/components/ToastWrapper.tsx +4 -4
  33. package/app-typescript/components/Togglebox.tsx +108 -0
  34. package/app-typescript/components/Tooltip.tsx +25 -1
  35. package/app-typescript/index.ts +8 -0
  36. package/dist/components/modals.html +180 -4
  37. package/dist/examples.bundle.css +52 -36
  38. package/dist/examples.bundle.js +5775 -3059
  39. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +14 -1
  40. package/dist/react/Alerts.tsx +4 -4
  41. package/dist/react/Autocomplete.tsx +17 -17
  42. package/dist/react/Badges.tsx +4 -4
  43. package/dist/react/BigIconFont.tsx +3 -3
  44. package/dist/react/ButtonGroups.tsx +6 -6
  45. package/dist/react/Buttons.tsx +11 -11
  46. package/dist/react/Carousel.tsx +15 -15
  47. package/dist/react/Checkboxs.tsx +10 -10
  48. package/dist/react/DatePicker.tsx +6 -6
  49. package/dist/react/Dropdowns.tsx +15 -15
  50. package/dist/react/EmptyStates.tsx +4 -4
  51. package/dist/react/GridItem.tsx +8 -8
  52. package/dist/react/GridList.tsx +3 -3
  53. package/dist/react/IconButtons.tsx +3 -3
  54. package/dist/react/IconFont.tsx +10 -9
  55. package/dist/react/IconLabels.tsx +4 -4
  56. package/dist/react/IconPicker.tsx +65 -0
  57. package/dist/react/Index.tsx +27 -2
  58. package/dist/react/Inputs.tsx +29 -11
  59. package/dist/react/Labels.tsx +6 -6
  60. package/dist/react/LeftNavigations.tsx +6 -6
  61. package/dist/react/ListItems.tsx +34 -0
  62. package/dist/react/Menu.tsx +159 -0
  63. package/dist/react/Modal.tsx +9 -9
  64. package/dist/react/NavButtons.tsx +7 -7
  65. package/dist/react/Popover.tsx +5 -5
  66. package/dist/react/Radios.tsx +29 -29
  67. package/dist/react/SelectGrid.tsx +121 -0
  68. package/dist/react/Selects.tsx +31 -9
  69. package/dist/react/Switch.tsx +5 -5
  70. package/dist/react/Tabs.tsx +12 -12
  71. package/dist/react/TimePicker.tsx +4 -4
  72. package/dist/react/Toasts.tsx +44 -56
  73. package/dist/react/Togglebox.tsx +51 -0
  74. package/dist/react/Tooltips.tsx +48 -4
  75. package/dist/superdesk-ui.bundle.css +3774 -96
  76. package/dist/superdesk-ui.bundle.js +4503 -2050
  77. package/dist/vendor.bundle.js +53312 -53308
  78. package/examples/pages/components/modals.html +180 -4
  79. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +14 -1
  80. package/examples/pages/react/Alerts.tsx +4 -4
  81. package/examples/pages/react/Autocomplete.tsx +17 -17
  82. package/examples/pages/react/Badges.tsx +4 -4
  83. package/examples/pages/react/BigIconFont.tsx +3 -3
  84. package/examples/pages/react/ButtonGroups.tsx +6 -6
  85. package/examples/pages/react/Buttons.tsx +11 -11
  86. package/examples/pages/react/Carousel.tsx +15 -15
  87. package/examples/pages/react/Checkboxs.tsx +10 -10
  88. package/examples/pages/react/DatePicker.tsx +6 -6
  89. package/examples/pages/react/Dropdowns.tsx +15 -15
  90. package/examples/pages/react/EmptyStates.tsx +4 -4
  91. package/examples/pages/react/GridItem.tsx +8 -8
  92. package/examples/pages/react/GridList.tsx +3 -3
  93. package/examples/pages/react/IconButtons.tsx +3 -3
  94. package/examples/pages/react/IconFont.tsx +10 -9
  95. package/examples/pages/react/IconLabels.tsx +4 -4
  96. package/examples/pages/react/IconPicker.tsx +65 -0
  97. package/examples/pages/react/Index.tsx +27 -2
  98. package/examples/pages/react/Inputs.tsx +29 -11
  99. package/examples/pages/react/Labels.tsx +6 -6
  100. package/examples/pages/react/LeftNavigations.tsx +6 -6
  101. package/examples/pages/react/ListItems.tsx +34 -0
  102. package/examples/pages/react/Menu.tsx +159 -0
  103. package/examples/pages/react/Modal.tsx +9 -9
  104. package/examples/pages/react/NavButtons.tsx +7 -7
  105. package/examples/pages/react/Popover.tsx +5 -5
  106. package/examples/pages/react/Radios.tsx +29 -29
  107. package/examples/pages/react/SelectGrid.tsx +121 -0
  108. package/examples/pages/react/Selects.tsx +31 -9
  109. package/examples/pages/react/Switch.tsx +5 -5
  110. package/examples/pages/react/Tabs.tsx +12 -12
  111. package/examples/pages/react/TimePicker.tsx +4 -4
  112. package/examples/pages/react/Toasts.tsx +44 -56
  113. package/examples/pages/react/Togglebox.tsx +51 -0
  114. package/examples/pages/react/Tooltips.tsx +48 -4
  115. package/package.json +2 -2
  116. package/patches/@superdesk+primereact+5.0.2-4.patch +13 -0
  117. package/react/components/Button.d.ts +1 -1
  118. package/react/components/Button.js +2 -1
  119. package/react/components/Dropdown.js +0 -1
  120. package/react/components/DropdownFirst.js +1 -1
  121. package/react/components/IconPicker.d.ts +24 -0
  122. package/react/components/IconPicker.js +283 -0
  123. package/react/components/Input.d.ts +2 -1
  124. package/react/components/Input.js +4 -1
  125. package/react/components/ListItemLoader.d.ts +4 -0
  126. package/react/components/ListItemLoader.js +62 -0
  127. package/react/components/Menu.d.ts +59 -0
  128. package/react/components/Menu.js +92 -0
  129. package/react/components/PropsList.d.ts +1 -1
  130. package/react/components/PropsList.js +1 -1
  131. package/react/components/Radio.d.ts +8 -7
  132. package/react/components/Radio.js +1 -1
  133. package/react/components/Select.d.ts +2 -1
  134. package/react/components/Select.js +4 -2
  135. package/react/components/SelectGrid.d.ts +45 -0
  136. package/react/components/SelectGrid.js +179 -0
  137. package/react/components/SelectWithTemplate.js +0 -1
  138. package/react/components/Skeleton.d.ts +30 -0
  139. package/react/components/Skeleton.js +55 -0
  140. package/react/components/Tag.js +1 -1
  141. package/react/components/Toast.d.ts +15 -0
  142. package/react/components/Toast.js +69 -0
  143. package/react/components/ToastMessage.d.ts +18 -0
  144. package/react/components/ToastMessage.js +66 -0
  145. package/react/components/ToastText.d.ts +9 -0
  146. package/react/components/ToastText.js +42 -0
  147. package/react/components/ToastWrapper.d.ts +31 -0
  148. package/react/components/ToastWrapper.js +116 -0
  149. package/react/components/Togglebox.d.ts +27 -0
  150. package/react/components/Togglebox.js +76 -0
  151. package/react/components/Tooltip.d.ts +2 -5
  152. package/react/components/Tooltip.js +48 -7
  153. package/react/index.d.ts +7 -0
  154. package/react/index.js +14 -0
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ export declare type MessageProp = React.ReactNode | string;
3
+ export declare type Position = 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
4
+ export declare type NotesType = 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
5
+ export interface IMessageOptions {
6
+ id: string;
7
+ position: Position;
8
+ message?: MessageProp;
9
+ duration?: number | null;
10
+ type?: NotesType;
11
+ icon?: string;
12
+ size?: 'fixed-s' | 'fixed-m' | 'fixed-l' | 'fixed-xl';
13
+ }
14
+ interface IProps extends IMessageOptions {
15
+ closeElement(id: string, position: Position): void;
16
+ }
17
+ export declare const ToastMessage: ({ id, message, type, icon, size, duration, position, closeElement, }: IProps) => JSX.Element;
18
+ export {};
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ var __importDefault = (this && this.__importDefault) || function (mod) {
22
+ return (mod && mod.__esModule) ? mod : { "default": mod };
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ exports.ToastMessage = void 0;
26
+ var React = __importStar(require("react"));
27
+ var ToastText_1 = __importDefault(require("./ToastText"));
28
+ var classnames_1 = __importDefault(require("classnames"));
29
+ exports.ToastMessage = function (_a) {
30
+ var _b;
31
+ var id = _a.id, message = _a.message, type = _a.type, icon = _a.icon, size = _a.size, duration = _a.duration, position = _a.position, closeElement = _a.closeElement;
32
+ var _c = React.useState(false), show = _c[0], setShow = _c[1];
33
+ var _d = React.useState(false), enter = _d[0], setEnter = _d[1];
34
+ var timer;
35
+ React.useEffect(function () { return setShow(true); }, []);
36
+ if (typeof duration === "number") {
37
+ React.useEffect(function () {
38
+ timer = window.setTimeout(function () {
39
+ close(id, position);
40
+ }, duration);
41
+ return function () { return clearTimeout(timer); };
42
+ }, [enter]);
43
+ }
44
+ function onMouseEnter() {
45
+ clearTimeout(timer);
46
+ }
47
+ function onMouseLeave() {
48
+ setEnter(false);
49
+ }
50
+ function close(element, elementPosition) {
51
+ setShow(false);
52
+ setTimeout(function () {
53
+ closeElement(element, elementPosition);
54
+ }, 100);
55
+ }
56
+ var classes = classnames_1.default('sd-toast', (_b = {},
57
+ _b["sd-toast--" + type] = type,
58
+ _b["sd-toast--" + size] = size,
59
+ _b['sd-toast--enter'] = !show && !enter,
60
+ _b['sd-toast--enter-active'] = show,
61
+ _b['sd-toast--exit'] = enter && !show,
62
+ _b['sd-toast--exit-active'] = !show,
63
+ _b));
64
+ return (React.createElement("div", { className: classes, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "aria-live": "assertive", "aria-atomic": "true" },
65
+ React.createElement(ToastText_1.default, { id: id, title: message, icon: icon, onClose: function () { return close(id, position); } })));
66
+ };
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ interface IProps {
3
+ id?: string;
4
+ title?: string | React.ReactNode;
5
+ icon?: string;
6
+ onClose: () => void;
7
+ }
8
+ declare const ToastText: ({ id, title, icon, onClose }: IProps) => JSX.Element;
9
+ export default ToastText;
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ Object.defineProperty(exports, "__esModule", { value: true });
22
+ var React = __importStar(require("react"));
23
+ var Icon_1 = require("./Icon");
24
+ var ToastText = function (_a) {
25
+ var id = _a.id, title = _a.title, icon = _a.icon, onClose = _a.onClose;
26
+ var ref = React.useRef(null);
27
+ return (React.createElement(React.Fragment, null,
28
+ icon ?
29
+ React.createElement("div", { className: 'sd-toast__icon' },
30
+ React.createElement(Icon_1.Icon, { name: icon })) : null,
31
+ typeof title === 'string' ?
32
+ (React.createElement("span", { style: { width: '100%' }, ref: ref, id: id },
33
+ React.createElement("div", { className: 'sd-toast__message' }, title))) :
34
+ React.createElement("span", { style: { width: '100%', display: 'inherit' }, ref: ref, id: id }, title),
35
+ onClose && React.createElement(Close, { onClose: onClose })));
36
+ };
37
+ var Close = function (_a) {
38
+ var onClose = _a.onClose;
39
+ return (React.createElement("button", { className: "icn-btn sd-toast__actions", type: "button", "aria-label": "Close", onClick: onClose },
40
+ React.createElement(Icon_1.Icon, { name: 'close-small' })));
41
+ };
42
+ exports.default = ToastText;
@@ -0,0 +1,31 @@
1
+ import * as React from 'react';
2
+ import { MessageProp, IMessageOptions } from './ToastMessage';
3
+ declare type State = {
4
+ top: Array<IMessageOptions>;
5
+ bottom: Array<IMessageOptions>;
6
+ 'top-right': Array<IMessageOptions>;
7
+ 'top-left': Array<IMessageOptions>;
8
+ 'bottom-right': Array<IMessageOptions>;
9
+ 'bottom-left': Array<IMessageOptions>;
10
+ };
11
+ export default class ToastWrapper extends React.PureComponent<{}, State> {
12
+ static idCounter: number;
13
+ state: State;
14
+ constructor(props: {});
15
+ notify: (message: MessageProp, options: Partial<IMessageOptions>) => {
16
+ id: string;
17
+ position: import("./ToastMessage").Position;
18
+ };
19
+ createToastState: (message: MessageProp, options: Partial<IMessageOptions>) => {
20
+ id: string;
21
+ message: React.ReactNode;
22
+ icon: string | undefined;
23
+ position: import("./ToastMessage").Position;
24
+ duration: number | null | undefined;
25
+ type: "default" | "primary" | "success" | "warning" | "alert" | "highlight" | "light" | undefined;
26
+ size: "fixed-s" | "fixed-m" | "fixed-l" | "fixed-xl" | undefined;
27
+ };
28
+ requestClose: (id: string, position: keyof State) => void;
29
+ render(): JSX.Element[];
30
+ }
31
+ export {};
@@ -0,0 +1,116 @@
1
+ "use strict";
2
+ var __extends = (this && this.__extends) || (function () {
3
+ var extendStatics = function (d, b) {
4
+ extendStatics = Object.setPrototypeOf ||
5
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
7
+ return extendStatics(d, b);
8
+ };
9
+ return function (d, b) {
10
+ extendStatics(d, b);
11
+ function __() { this.constructor = d; }
12
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13
+ };
14
+ })();
15
+ var __assign = (this && this.__assign) || function () {
16
+ __assign = Object.assign || function(t) {
17
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
18
+ s = arguments[i];
19
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
20
+ t[p] = s[p];
21
+ }
22
+ return t;
23
+ };
24
+ return __assign.apply(this, arguments);
25
+ };
26
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
27
+ if (k2 === undefined) k2 = k;
28
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
29
+ }) : (function(o, m, k, k2) {
30
+ if (k2 === undefined) k2 = k;
31
+ o[k2] = m[k];
32
+ }));
33
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
34
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
35
+ }) : function(o, v) {
36
+ o["default"] = v;
37
+ });
38
+ var __importStar = (this && this.__importStar) || function (mod) {
39
+ if (mod && mod.__esModule) return mod;
40
+ var result = {};
41
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
42
+ __setModuleDefault(result, mod);
43
+ return result;
44
+ };
45
+ var __spreadArrays = (this && this.__spreadArrays) || function () {
46
+ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
47
+ for (var r = Array(s), k = 0, i = 0; i < il; i++)
48
+ for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
49
+ r[k] = a[j];
50
+ return r;
51
+ };
52
+ Object.defineProperty(exports, "__esModule", { value: true });
53
+ var React = __importStar(require("react"));
54
+ var ToastMessage_1 = require("./ToastMessage");
55
+ var firstState = {
56
+ top: [],
57
+ bottom: [],
58
+ 'top-right': [],
59
+ 'top-left': [],
60
+ 'bottom-right': [],
61
+ 'bottom-left': [],
62
+ };
63
+ var ToastWrapper = /** @class */ (function (_super) {
64
+ __extends(ToastWrapper, _super);
65
+ function ToastWrapper(props) {
66
+ var _this = _super.call(this, props) || this;
67
+ _this.state = firstState;
68
+ _this.notify = function (message, options) {
69
+ var toast = _this.createToastState(message, options);
70
+ var position = toast.position;
71
+ var isTop = position === 'top';
72
+ _this.setState(function (prev) {
73
+ var _a;
74
+ return __assign(__assign({}, prev), (_a = {}, _a[position] = isTop
75
+ ? __spreadArrays([toast], prev[position]) : __spreadArrays(prev[position], [toast]), _a));
76
+ });
77
+ return { id: toast.id, position: toast.position };
78
+ };
79
+ _this.createToastState = function (message, options) {
80
+ var _a;
81
+ var id = '' + ++ToastWrapper.idCounter;
82
+ var position = (_a = options.position) !== null && _a !== void 0 ? _a : 'top';
83
+ return {
84
+ id: id,
85
+ message: message,
86
+ icon: options.icon,
87
+ position: position,
88
+ duration: options.duration,
89
+ type: options.type,
90
+ size: options.size,
91
+ };
92
+ };
93
+ _this.requestClose = function (id, position) {
94
+ _this.setState(function (prev) {
95
+ var _a;
96
+ return __assign(__assign({}, prev), (_a = {}, _a[position] = prev[position].filter(function (toast) { return toast.id !== id; }), _a));
97
+ });
98
+ };
99
+ _this.notify = _this.notify.bind(_this);
100
+ return _this;
101
+ }
102
+ ToastWrapper.prototype.render = function () {
103
+ var _this = this;
104
+ return Object.keys(this.state).map(function (position) {
105
+ var pos = position;
106
+ var toasts = _this.state[pos];
107
+ return (React.createElement("div", { key: position, className: "sd-toast__container sd-toast__container--" + pos }, (pos === 'top' ?
108
+ toasts : __spreadArrays(toasts).reverse()).map(function (toast) {
109
+ return React.createElement(ToastMessage_1.ToastMessage, { position: pos, type: toast.type, icon: toast.icon, closeElement: _this.requestClose, duration: toast.duration, key: toast.id, id: toast.id, message: toast.message, size: toast.size });
110
+ })));
111
+ });
112
+ };
113
+ ToastWrapper.idCounter = 0;
114
+ return ToastWrapper;
115
+ }(React.PureComponent));
116
+ exports.default = ToastWrapper;
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+ interface IProps {
3
+ title: string;
4
+ badge?: JSX.Element;
5
+ children: any;
6
+ hideUsingCSS?: boolean;
7
+ initiallyOpen?: boolean;
8
+ className?: string;
9
+ onOpen?(): void;
10
+ onClose?(): void;
11
+ }
12
+ interface IState {
13
+ isOpen: boolean;
14
+ }
15
+ /**
16
+ * @ngdoc react
17
+ * @name ToggleBox
18
+ * @description ToggleBox used to open/close a set of details
19
+ */
20
+ export declare class ToggleBox extends React.PureComponent<IProps, IState> {
21
+ htmlId: string;
22
+ constructor(props: IProps);
23
+ handleKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
24
+ toggle: () => void;
25
+ render(): JSX.Element;
26
+ }
27
+ export {};
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+ var __extends = (this && this.__extends) || (function () {
3
+ var extendStatics = function (d, b) {
4
+ extendStatics = Object.setPrototypeOf ||
5
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
7
+ return extendStatics(d, b);
8
+ };
9
+ return function (d, b) {
10
+ extendStatics(d, b);
11
+ function __() { this.constructor = d; }
12
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13
+ };
14
+ })();
15
+ var __importDefault = (this && this.__importDefault) || function (mod) {
16
+ return (mod && mod.__esModule) ? mod : { "default": mod };
17
+ };
18
+ Object.defineProperty(exports, "__esModule", { value: true });
19
+ exports.ToggleBox = void 0;
20
+ var react_1 = __importDefault(require("react"));
21
+ var classnames_1 = __importDefault(require("classnames"));
22
+ var react_id_generator_1 = __importDefault(require("react-id-generator"));
23
+ /**
24
+ * @ngdoc react
25
+ * @name ToggleBox
26
+ * @description ToggleBox used to open/close a set of details
27
+ */
28
+ var ToggleBox = /** @class */ (function (_super) {
29
+ __extends(ToggleBox, _super);
30
+ function ToggleBox(props) {
31
+ var _a;
32
+ var _this = _super.call(this, props) || this;
33
+ _this.htmlId = react_id_generator_1.default();
34
+ _this.handleKeyDown = function (event) {
35
+ if (event.key === "ArrowRight" && !_this.state.isOpen) {
36
+ _this.setState({ isOpen: true });
37
+ }
38
+ else if (event.key === "ArrowLeft" && _this.state.isOpen) {
39
+ _this.setState({ isOpen: false });
40
+ }
41
+ else if (event.key === "Enter") {
42
+ _this.toggle();
43
+ }
44
+ };
45
+ _this.toggle = function () {
46
+ _this.setState({ isOpen: !_this.state.isOpen }, function () {
47
+ if (!_this.state.isOpen && _this.props.onClose) {
48
+ _this.props.onClose();
49
+ }
50
+ else if (_this.props.onOpen) {
51
+ _this.props.onOpen();
52
+ }
53
+ });
54
+ };
55
+ _this.state = {
56
+ isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
57
+ };
58
+ return _this;
59
+ }
60
+ ToggleBox.prototype.render = function () {
61
+ var _a = this.props, title = _a.title, hideUsingCSS = _a.hideUsingCSS, className = _a.className, children = _a.children, badge = _a.badge;
62
+ var isOpen = this.state.isOpen;
63
+ return (react_1.default.createElement("div", { className: classnames_1.default('toggle-box', className, { hidden: !isOpen }) },
64
+ react_1.default.createElement("a", { className: "toggle-box__header", onClick: this.toggle, role: "button", tabIndex: 0, onKeyDown: this.handleKeyDown, id: "togglebox-" + this.htmlId },
65
+ react_1.default.createElement("div", { className: "toggle-box__chevron" },
66
+ react_1.default.createElement("i", { className: "icon-chevron-right-thin" })),
67
+ react_1.default.createElement("div", { className: "toggle-box__label" }, title),
68
+ react_1.default.createElement("div", { className: "toggle-box__line" }),
69
+ badge ? badge : null),
70
+ react_1.default.createElement("div", { className: "toggle-box__content-wraper" },
71
+ isOpen && !hideUsingCSS && (react_1.default.createElement("div", { className: "toggle-box__content", "aria-describedby": "togglebox-" + this.htmlId }, children)),
72
+ hideUsingCSS && (react_1.default.createElement("div", { className: classnames_1.default('toggle-box__content', { 'toggle-box__content--hidden': !isOpen }), "aria-describedby": "togglebox-" + this.htmlId }, children)))));
73
+ };
74
+ return ToggleBox;
75
+ }(react_1.default.PureComponent));
76
+ exports.ToggleBox = ToggleBox;
@@ -2,10 +2,7 @@ import * as React from 'react';
2
2
  interface IProps {
3
3
  text: string;
4
4
  flow?: 'top' | 'left' | 'right' | 'down';
5
+ appendToBody?: boolean;
5
6
  }
6
- export declare class Tooltip extends React.PureComponent<IProps> {
7
- htmlId: string;
8
- componentDidMount(): void;
9
- render(): JSX.Element;
10
- }
7
+ export declare const Tooltip: React.FC<IProps>;
11
8
  export {};
@@ -12,6 +12,17 @@ var __extends = (this && this.__extends) || (function () {
12
12
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13
13
  };
14
14
  })();
15
+ var __assign = (this && this.__assign) || function () {
16
+ __assign = Object.assign || function(t) {
17
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
18
+ s = arguments[i];
19
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
20
+ t[p] = s[p];
21
+ }
22
+ return t;
23
+ };
24
+ return __assign.apply(this, arguments);
25
+ };
15
26
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
16
27
  if (k2 === undefined) k2 = k;
17
28
  Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -31,6 +42,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
31
42
  __setModuleDefault(result, mod);
32
43
  return result;
33
44
  };
45
+ var __rest = (this && this.__rest) || function (s, e) {
46
+ var t = {};
47
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
48
+ t[p] = s[p];
49
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
50
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
51
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
52
+ t[p[i]] = s[p[i]];
53
+ }
54
+ return t;
55
+ };
34
56
  var __importDefault = (this && this.__importDefault) || function (mod) {
35
57
  return (mod && mod.__esModule) ? mod : { "default": mod };
36
58
  };
@@ -38,21 +60,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
38
60
  exports.Tooltip = void 0;
39
61
  var React = __importStar(require("react"));
40
62
  var react_id_generator_1 = __importDefault(require("react-id-generator"));
41
- var Tooltip = /** @class */ (function (_super) {
42
- __extends(Tooltip, _super);
43
- function Tooltip() {
63
+ var tooltip_1 = require("@superdesk/primereact/tooltip");
64
+ exports.Tooltip = function (_a) {
65
+ var appendToBody = _a.appendToBody, children = _a.children, otherProps = __rest(_a, ["appendToBody", "children"]);
66
+ return appendToBody ?
67
+ React.createElement(TooltipAppended, __assign({}, otherProps), children)
68
+ :
69
+ React.createElement(TooltipBasic, __assign({}, otherProps), children);
70
+ };
71
+ var TooltipBasic = /** @class */ (function (_super) {
72
+ __extends(TooltipBasic, _super);
73
+ function TooltipBasic() {
44
74
  var _this = _super !== null && _super.apply(this, arguments) || this;
45
75
  _this.htmlId = react_id_generator_1.default();
46
76
  return _this;
47
77
  }
48
- Tooltip.prototype.componentDidMount = function () {
78
+ TooltipBasic.prototype.componentDidMount = function () {
49
79
  var tooltip = document.getElementById('t' + this.htmlId);
50
80
  tooltip === null || tooltip === void 0 ? void 0 : tooltip.setAttribute('data-sd-tooltip', this.props.text);
51
81
  if (this.props.flow) {
52
82
  tooltip === null || tooltip === void 0 ? void 0 : tooltip.setAttribute('data-flow', this.props.flow);
53
83
  }
54
84
  };
55
- Tooltip.prototype.render = function () {
85
+ TooltipBasic.prototype.render = function () {
56
86
  if (React.isValidElement(this.props.children)) {
57
87
  return (React.cloneElement(this.props.children, { id: 't' + this.htmlId }));
58
88
  }
@@ -60,6 +90,17 @@ var Tooltip = /** @class */ (function (_super) {
60
90
  return (React.createElement(React.Fragment, null));
61
91
  }
62
92
  };
63
- return Tooltip;
93
+ return TooltipBasic;
64
94
  }(React.PureComponent));
65
- exports.Tooltip = Tooltip;
95
+ var TooltipAppended = function (_a) {
96
+ var children = _a.children, flow = _a.flow, text = _a.text;
97
+ var htmlId = react_id_generator_1.default();
98
+ var triggerId = "t" + htmlId;
99
+ var position = flow === "down" ? "bottom" : flow;
100
+ return (React.createElement(React.Fragment, null,
101
+ React.createElement(tooltip_1.Tooltip, { target: "#" + triggerId, content: text, position: position !== null && position !== void 0 ? position : 'top' }),
102
+ React.isValidElement(children) ?
103
+ React.cloneElement(children, { id: triggerId })
104
+ :
105
+ React.createElement(React.Fragment, null)));
106
+ };
package/react/index.d.ts CHANGED
@@ -54,5 +54,12 @@ export { TagInput } from './components/TagInput';
54
54
  export { TagInputTest } from './components/TagInputTest';
55
55
  export { GridList } from './components/GridList';
56
56
  export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper } from './components/GridItem';
57
+ export { toasted } from './components/Toast';
58
+ export { Menu } from './components/Menu';
59
+ export { ToggleBox } from './components/Togglebox';
60
+ export { SelectGrid } from './components/SelectGrid';
61
+ export { IconPicker } from './components/IconPicker';
62
+ export { Skeleton } from './components/Skeleton';
63
+ export { ListItemLoader } from './components/ListItemLoader';
57
64
  export declare const ToggleBoxNext: any;
58
65
  export declare const reactToAngular1: any;
package/react/index.js CHANGED
@@ -130,3 +130,17 @@ Object.defineProperty(exports, "GridItemFooterBlock", { enumerable: true, get: f
130
130
  Object.defineProperty(exports, "GridItemFooterActions", { enumerable: true, get: function () { return GridItem_1.GridItemFooterActions; } });
131
131
  Object.defineProperty(exports, "GridItemTopActions", { enumerable: true, get: function () { return GridItem_1.GridItemTopActions; } });
132
132
  Object.defineProperty(exports, "GridItemCheckWrapper", { enumerable: true, get: function () { return GridItem_1.GridItemCheckWrapper; } });
133
+ var Toast_1 = require("./components/Toast");
134
+ Object.defineProperty(exports, "toasted", { enumerable: true, get: function () { return Toast_1.toasted; } });
135
+ var Menu_1 = require("./components/Menu");
136
+ Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
137
+ var Togglebox_1 = require("./components/Togglebox");
138
+ Object.defineProperty(exports, "ToggleBox", { enumerable: true, get: function () { return Togglebox_1.ToggleBox; } });
139
+ var SelectGrid_1 = require("./components/SelectGrid");
140
+ Object.defineProperty(exports, "SelectGrid", { enumerable: true, get: function () { return SelectGrid_1.SelectGrid; } });
141
+ var IconPicker_1 = require("./components/IconPicker");
142
+ Object.defineProperty(exports, "IconPicker", { enumerable: true, get: function () { return IconPicker_1.IconPicker; } });
143
+ var Skeleton_1 = require("./components/Skeleton");
144
+ Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
145
+ var ListItemLoader_1 = require("./components/ListItemLoader");
146
+ Object.defineProperty(exports, "ListItemLoader", { enumerable: true, get: function () { return ListItemLoader_1.ListItemLoader; } });