@qoretechnologies/reqore 0.66.0 → 0.67.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/.tasks/NEW_COMPONENT.md +439 -0
- package/dist/components/Accordion/index.d.ts +2 -1
- package/dist/components/Accordion/index.d.ts.map +1 -1
- package/dist/components/Accordion/index.js +10 -27
- package/dist/components/Accordion/index.js.map +1 -1
- package/dist/components/Button/index.d.ts +3 -3
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +2 -2
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Callout/index.d.ts +19 -0
- package/dist/components/Callout/index.d.ts.map +1 -1
- package/dist/components/Callout/index.js +35 -8
- package/dist/components/Callout/index.js.map +1 -1
- package/dist/components/EntityRow/index.d.ts +25 -0
- package/dist/components/EntityRow/index.d.ts.map +1 -1
- package/dist/components/EntityRow/index.js +24 -13
- package/dist/components/EntityRow/index.js.map +1 -1
- package/dist/components/ErrorBoundary/index.js +1 -1
- package/dist/components/ErrorBoundary/index.js.map +1 -1
- package/dist/components/FeatureCard/index.d.ts +15 -0
- package/dist/components/FeatureCard/index.d.ts.map +1 -1
- package/dist/components/FeatureCard/index.js +10 -5
- package/dist/components/FeatureCard/index.js.map +1 -1
- package/dist/components/Notifications/notification.d.ts +15 -0
- package/dist/components/Notifications/notification.d.ts.map +1 -1
- package/dist/components/Notifications/notification.js +11 -5
- package/dist/components/Notifications/notification.js.map +1 -1
- package/dist/components/Panel/index.d.ts +16 -0
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +66 -23
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/SeverityRow/index.d.ts +15 -0
- package/dist/components/SeverityRow/index.d.ts.map +1 -1
- package/dist/components/SeverityRow/index.js +15 -11
- package/dist/components/SeverityRow/index.js.map +1 -1
- package/dist/components/Statistic/index.d.ts +17 -0
- package/dist/components/Statistic/index.d.ts.map +1 -1
- package/dist/components/Statistic/index.js +10 -5
- package/dist/components/Statistic/index.js.map +1 -1
- package/dist/components/Testimonial/index.d.ts +78 -0
- package/dist/components/Testimonial/index.d.ts.map +1 -0
- package/dist/components/Testimonial/index.js +156 -0
- package/dist/components/Testimonial/index.js.map +1 -0
- package/dist/helpers/utils.d.ts +20 -0
- package/dist/helpers/utils.d.ts.map +1 -1
- package/dist/helpers/utils.js +27 -1
- package/dist/helpers/utils.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/tests.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FeatureCard/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qCAAgC;AAChC,+BAAkD;AAClD,qEAAgD;AAChD,+CAM+B;AAE/B,+CAK8B;AAC9B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FeatureCard/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TSizes } from '../../constants/sizes';
|
|
3
3
|
import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
|
|
4
|
+
import { TReqorePadded } from '../../helpers/utils';
|
|
4
5
|
import { IWithReqoreCustomTheme, IWithReqoreEffect, IWithReqoreMinimal, IWithReqoreOpaque } from '../../types/global';
|
|
5
6
|
import { IReqoreIconName } from '../../types/icons';
|
|
6
7
|
export type IReqoreNotificationType = TReqoreIntent;
|
|
@@ -18,6 +19,18 @@ export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqore
|
|
|
18
19
|
flat?: boolean;
|
|
19
20
|
size?: TSizes;
|
|
20
21
|
blur?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Controls which axes receive the notification's outer padding.
|
|
24
|
+
* - `true` (default): padding on both axes
|
|
25
|
+
* - `false`: no padding
|
|
26
|
+
* - `'horizontal'`: only left/right padding
|
|
27
|
+
* - `'vertical'`: only top/bottom padding
|
|
28
|
+
*/
|
|
29
|
+
padded?: TReqorePadded;
|
|
30
|
+
/**
|
|
31
|
+
* Size of the notification's outer padding. Defaults to `size`.
|
|
32
|
+
*/
|
|
33
|
+
paddingSize?: TSizes;
|
|
21
34
|
}
|
|
22
35
|
export interface IReqoreNotificationStyle extends IWithReqoreOpaque {
|
|
23
36
|
theme: IReqoreTheme;
|
|
@@ -34,6 +47,8 @@ export interface IReqoreNotificationStyle extends IWithReqoreOpaque {
|
|
|
34
47
|
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
35
48
|
backgroundBlur?: number;
|
|
36
49
|
raised?: boolean;
|
|
50
|
+
$padded?: TReqorePadded;
|
|
51
|
+
$paddingSize?: TSizes;
|
|
37
52
|
}
|
|
38
53
|
export declare const StyledReqoreNotification: any;
|
|
39
54
|
export declare const StyledIconWrapper: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/notification.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAqC,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAUpE,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;AAEpD,MAAM,WAAW,wBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB;IACxB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/notification.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAqC,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAUpE,OAAO,EAAkB,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;AAEpD,MAAM,WAAW,wBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB;IACxB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD,eAAO,MAAM,wBAAwB,KAmGpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,KA0B7B,CAAC;AAEF,eAAO,MAAM,8BAA8B,KAS1C,CAAC;AAEF,eAAO,MAAM,gCAAgC,KAW5C,CAAC;AAEF,eAAO,MAAM,uBAAuB,KAKnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,KAerC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CAAA;CAOzD,CAAC;AAEF,QAAA,MAAM,kBAAkB,+IAiIvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -54,6 +54,7 @@ var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider"))
|
|
|
54
54
|
var animations_2 = require("../../helpers/animations");
|
|
55
55
|
var colors_1 = require("../../helpers/colors");
|
|
56
56
|
var useTheme_1 = require("../../hooks/useTheme");
|
|
57
|
+
var utils_1 = require("../../helpers/utils");
|
|
57
58
|
var styles_1 = require("../../styles");
|
|
58
59
|
var Effect_1 = require("../Effect");
|
|
59
60
|
var Header_1 = require("../Header");
|
|
@@ -108,8 +109,13 @@ exports.StyledIconWrapper = styled_components_1["default"].div(templateObject_11
|
|
|
108
109
|
});
|
|
109
110
|
exports.StyledNotificationInnerContent = styled_components_1["default"].div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-flow: column;\n justify-content: center;\n\n .reqore-heading {\n line-height: 1;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-flow: column;\n justify-content: center;\n\n .reqore-heading {\n line-height: 1;\n }\n"])));
|
|
110
111
|
exports.StyledNotificationContentWrapper = styled_components_1["default"].div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n justify-content: center;\n padding: ", ";\n"], ["\n flex: 1;\n display: flex;\n justify-content: center;\n padding: ", ";\n"])), function (_a) {
|
|
111
|
-
var _b = _a.size, size = _b === void 0 ? 'normal' : _b;
|
|
112
|
-
return
|
|
112
|
+
var _b = _a.size, size = _b === void 0 ? 'normal' : _b, _c = _a.$padded, $padded = _c === void 0 ? true : _c, $paddingSize = _a.$paddingSize;
|
|
113
|
+
return (0, utils_1.resolvePadding)({
|
|
114
|
+
padded: $padded,
|
|
115
|
+
paddingSize: $paddingSize !== null && $paddingSize !== void 0 ? $paddingSize : size,
|
|
116
|
+
verticalMultiplier: 1,
|
|
117
|
+
horizontalMultiplier: 1
|
|
118
|
+
});
|
|
113
119
|
});
|
|
114
120
|
exports.StyledNotificationTitle = styled_components_1["default"].h4(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n margin: 0 0 5px 0;\n padding: 0;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0 5px 0;\n padding: 0;\n display: flex;\n align-items: center;\n"])));
|
|
115
121
|
exports.StyledNotificationContent = styled_components_1["default"].div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex: 1;\n font-size: ", "px;\n overflow-wrap: anywhere;\n display: flex;\n flex-flow: column;\n justify-content: center;\n\n ", "\n"], ["\n margin: 0;\n padding: 0;\n flex: 1;\n font-size: ", "px;\n overflow-wrap: anywhere;\n display: flex;\n flex-flow: column;\n justify-content: center;\n\n ", "\n"])), function (_a) {
|
|
@@ -128,8 +134,8 @@ exports.typeToIcon = {
|
|
|
128
134
|
muted: 'Forbid2Line'
|
|
129
135
|
};
|
|
130
136
|
var ReqoreNotification = (0, react_1.forwardRef)(function (_a, ref) {
|
|
131
|
-
var type = _a.type, intent = _a.intent, icon = _a.icon, title = _a.title, content = _a.content, onClose = _a.onClose, onClick = _a.onClick, duration = _a.duration, onFinish = _a.onFinish, flat = _a.flat, minimal = _a.minimal, _b = _a.opaque, opaque = _b === void 0 ? true : _b, blur = _a.blur, _c = _a.size, size = _c === void 0 ? 'normal' : _c, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme;
|
|
132
|
-
var
|
|
137
|
+
var type = _a.type, intent = _a.intent, icon = _a.icon, title = _a.title, content = _a.content, onClose = _a.onClose, onClick = _a.onClick, duration = _a.duration, onFinish = _a.onFinish, flat = _a.flat, minimal = _a.minimal, _b = _a.opaque, opaque = _b === void 0 ? true : _b, blur = _a.blur, _c = _a.size, size = _c === void 0 ? 'normal' : _c, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, _d = _a.padded, padded = _d === void 0 ? true : _d, paddingSize = _a.paddingSize;
|
|
138
|
+
var _e = (0, react_1.useState)(null), internalTimeout = _e[0], setInternalTimeout = _e[1];
|
|
133
139
|
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, type || intent, 'notifications', inheritCustomTheme);
|
|
134
140
|
var transitions = (0, web_1.useTransition)(true, {
|
|
135
141
|
from: { opacity: 0, transform: 'scale(0.9)' },
|
|
@@ -158,7 +164,7 @@ var ReqoreNotification = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
158
164
|
clearTimeout(internalTimeout);
|
|
159
165
|
});
|
|
160
166
|
return transitions(function (styles, item) {
|
|
161
|
-
return item ? ((0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], { children: (0, jsx_runtime_1.jsxs)(exports.StyledReqoreNotification, __assign({ as: web_1.animated.div, type: type || intent, hasShadow: true, timeout: duration, clickable: !!onClick, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(); }, flat: flat, minimal: minimal, className: 'reqore-notification', ref: ref, style: styles, size: size, opaque: opaque, blur: blur, theme: theme, maxWidth: '450px' }, { children: [(0, jsx_runtime_1.jsxs)(exports.StyledNotificationContentWrapper, __assign({ size: size, theme: theme }, { children: [type || intent || icon ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: intent === 'pending' || type === 'pending' ? ((0, jsx_runtime_1.jsx)(Spinner_1.ReqoreSpinner, { size: size, type: 5, iconMargin: 'right' })) : ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon || exports.typeToIcon[type || intent], margin: 'right', size: size })) })) : null, (0, jsx_runtime_1.jsxs)(exports.StyledNotificationInnerContent, { children: [title && (0, jsx_runtime_1.jsx)(Header_1.ReqoreHeading, __assign({ size: size }, { children: title })), (0, jsx_runtime_1.jsx)(exports.StyledNotificationContent, __assign({ theme: theme, hasTitle: !!title, size: size }, { children: content }))] })] })), onClose ? ((0, jsx_runtime_1.jsx)(exports.StyledIconWrapper, __assign({ type: type || intent, size: size, clickable: true, className: 'reqore-notification-close', onClick: function (event) {
|
|
167
|
+
return item ? ((0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], { children: (0, jsx_runtime_1.jsxs)(exports.StyledReqoreNotification, __assign({ as: web_1.animated.div, type: type || intent, hasShadow: true, timeout: duration, clickable: !!onClick, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(); }, flat: flat, minimal: minimal, className: 'reqore-notification', ref: ref, style: styles, size: size, opaque: opaque, blur: blur, theme: theme, maxWidth: '450px' }, { children: [(0, jsx_runtime_1.jsxs)(exports.StyledNotificationContentWrapper, __assign({ size: size, theme: theme, "$padded": padded, "$paddingSize": paddingSize }, { children: [type || intent || icon ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: intent === 'pending' || type === 'pending' ? ((0, jsx_runtime_1.jsx)(Spinner_1.ReqoreSpinner, { size: size, type: 5, iconMargin: 'right' })) : ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon || exports.typeToIcon[type || intent], margin: 'right', size: size })) })) : null, (0, jsx_runtime_1.jsxs)(exports.StyledNotificationInnerContent, { children: [title && (0, jsx_runtime_1.jsx)(Header_1.ReqoreHeading, __assign({ size: size }, { children: title })), (0, jsx_runtime_1.jsx)(exports.StyledNotificationContent, __assign({ theme: theme, hasTitle: !!title, size: size }, { children: content }))] })] })), onClose ? ((0, jsx_runtime_1.jsx)(exports.StyledIconWrapper, __assign({ type: type || intent, size: size, clickable: true, className: 'reqore-notification-close', onClick: function (event) {
|
|
162
168
|
event.stopPropagation();
|
|
163
169
|
onClose();
|
|
164
170
|
} }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'CloseFill', margin: 'both', size: size }) }))) : null] }), "".concat(duration).concat(type || intent).concat(title).concat(content)) })) : null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../../src/components/Notifications/notification.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yCAA4D;AAC5D,qCAAgC;AAChC,+BAA+D;AAC/D,uCAAiD;AACjD,qEAA2D;AAC3D,yDAA2D;AAC3D,+CAAkF;AAElF,iFAAiE;AACjE,uDAAkD;AAClD,+CAK8B;AAC9B,iDAAsD;
|
|
1
|
+
{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../../src/components/Notifications/notification.tsx"],"names":[],"mappings":"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"}
|
|
@@ -40,6 +40,22 @@ export interface IReqorePanelProps extends IReqoreComponent, IWithReqoreSize, IW
|
|
|
40
40
|
children?: any;
|
|
41
41
|
icon?: IReqoreIconName;
|
|
42
42
|
iconProps?: IReqoreIconProps;
|
|
43
|
+
/**
|
|
44
|
+
* When `true`, the leading icon is rendered inside the label/badge row so
|
|
45
|
+
* the description appears beneath both the icon and the label. When `false`
|
|
46
|
+
* (default), the icon sits to the left of the label+description stack and
|
|
47
|
+
* its vertical alignment is controlled by `iconVerticalAlign`.
|
|
48
|
+
*/
|
|
49
|
+
iconWithLabel?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Vertical alignment of the leading icon relative to the label+description
|
|
52
|
+
* stack. Only takes effect when `iconWithLabel={false}` (the default
|
|
53
|
+
* layout). Defaults to `'center'`.
|
|
54
|
+
* - `'top'`: icon aligns with the label line
|
|
55
|
+
* - `'center'`: icon centres against the whole label+description block
|
|
56
|
+
* - `'bottom'`: icon aligns with the description line
|
|
57
|
+
*/
|
|
58
|
+
iconVerticalAlign?: 'top' | 'center' | 'bottom';
|
|
43
59
|
label?: string | ReactElement<any>;
|
|
44
60
|
badge?: TReqoreBadge | TReqoreBadge[];
|
|
45
61
|
description?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAGL,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,OAAO,EAQL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAiBpE,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAA0B,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAqB,EAAe,kBAAkB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAExF,OAA2B,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAuB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAgB,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE5E,OAAmB,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -78,7 +78,7 @@ var ControlGroup_1 = __importDefault(require("../ControlGroup"));
|
|
|
78
78
|
var Dropdown_1 = __importDefault(require("../Dropdown"));
|
|
79
79
|
var Effect_1 = require("../Effect");
|
|
80
80
|
var ErrorBoundary_1 = require("../ErrorBoundary");
|
|
81
|
-
var Icon_1 =
|
|
81
|
+
var Icon_1 = __importDefault(require("../Icon"));
|
|
82
82
|
var Skeleton_1 = require("../Skeleton");
|
|
83
83
|
var Span_1 = require("../Span");
|
|
84
84
|
var TooltipComponent_1 = require("../TooltipComponent");
|
|
@@ -88,7 +88,16 @@ var getPaddingSize = function (padded, size) {
|
|
|
88
88
|
return typeof padded === 'string' ? sizes_1.PADDING_FROM_SIZE[padded] : sizes_1.PADDING_FROM_SIZE[size];
|
|
89
89
|
};
|
|
90
90
|
exports.StyledPanelTitleHeader = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex: 1 1 auto;\n width: 100%;\n overflow: hidden;\n"], ["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex: 1 1 auto;\n width: 100%;\n overflow: hidden;\n"])));
|
|
91
|
-
exports.StyledPanelTitleHeaderContent = styled_components_1["default"].div(
|
|
91
|
+
exports.StyledPanelTitleHeaderContent = styled_components_1["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // When the icon lives in the outer container (iconVerticalAlign mode),\n // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n // makes each row's auto-sized height equal to the actual text row's\n // line-box height, so 'align-self: center' on the icon (in column 1)\n // visually centres the icon against the text row it shares a grid row\n // with \u2014 no font-metric guesswork.\n display: ", ";\n ", "\n flex: 0 1 auto;\n overflow: hidden;\n min-width: ", "px;\n"], ["\n // When the icon lives in the outer container (iconVerticalAlign mode),\n // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n // makes each row's auto-sized height equal to the actual text row's\n // line-box height, so 'align-self: center' on the icon (in column 1)\n // visually centres the icon against the text row it shares a grid row\n // with \u2014 no font-metric guesswork.\n display: ", ";\n ", "\n flex: 0 1 auto;\n overflow: hidden;\n min-width: ", "px;\n"])), function (_a) {
|
|
92
|
+
var $hasOuterIcon = _a.$hasOuterIcon;
|
|
93
|
+
return ($hasOuterIcon ? 'grid' : 'flex');
|
|
94
|
+
}, function (_a) {
|
|
95
|
+
var $hasOuterIcon = _a.$hasOuterIcon, size = _a.size, _b = _a.$iconVerticalAlign, $iconVerticalAlign = _b === void 0 ? 'center' : _b, $hasDescription = _a.$hasDescription;
|
|
96
|
+
return $hasOuterIcon
|
|
97
|
+
? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n // 'auto' lets the column grow to the icon's actual rendered size \u2014\n // important when consumers pass a custom 'iconProps.size' that does\n // not match the default size derived from 'panelSize'/'labelSize'.\n // 'iconSize' is still passed via 'min-width' below to ensure a\n // sensible minimum reservation when the row is otherwise empty.\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: ", ";\n column-gap: ", "px;\n row-gap: 3px;\n align-items: start;\n\n & > .reqore-panel-title-icon {\n ", "\n grid-column: 1;\n align-self: center;\n justify-self: start;\n // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n // SVG for inline-text contexts. In our grid layout the wrapper is\n // already vertically centred against the text row's line-box;\n // 'display: block' takes the SVG out of inline flow entirely so\n // baseline/super offsets cannot push it off-centre. The wrapper's\n // own 'align-items: center' then centres the SVG within itself.\n & svg {\n display: block;\n vertical-align: middle;\n }\n }\n\n & > .reqore-panel-title-label-row {\n grid-column: 2;\n grid-row: 1;\n min-width: 0;\n }\n\n & > .reqore-panel-title-description {\n grid-column: 2;\n grid-row: 2;\n min-width: 0;\n }\n "], ["\n // 'auto' lets the column grow to the icon's actual rendered size \u2014\n // important when consumers pass a custom 'iconProps.size' that does\n // not match the default size derived from 'panelSize'/'labelSize'.\n // 'iconSize' is still passed via 'min-width' below to ensure a\n // sensible minimum reservation when the row is otherwise empty.\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: ", ";\n column-gap: ", "px;\n row-gap: 3px;\n align-items: start;\n\n & > .reqore-panel-title-icon {\n ", "\n grid-column: 1;\n align-self: center;\n justify-self: start;\n // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n // SVG for inline-text contexts. In our grid layout the wrapper is\n // already vertically centred against the text row's line-box;\n // 'display: block' takes the SVG out of inline flow entirely so\n // baseline/super offsets cannot push it off-centre. The wrapper's\n // own 'align-items: center' then centres the SVG within itself.\n & svg {\n display: block;\n vertical-align: middle;\n }\n }\n\n & > .reqore-panel-title-label-row {\n grid-column: 2;\n grid-row: 1;\n min-width: 0;\n }\n\n & > .reqore-panel-title-description {\n grid-column: 2;\n grid-row: 2;\n min-width: 0;\n }\n "])), $hasDescription ? 'auto auto' : 'auto', sizes_1.PADDING_FROM_SIZE[size || 'normal'], $iconVerticalAlign === 'top'
|
|
98
|
+
? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-row: 1;\n "], ["\n grid-row: 1;\n "]))) : $iconVerticalAlign === 'bottom' && $hasDescription
|
|
99
|
+
? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n grid-row: 2;\n "], ["\n grid-row: 2;\n "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n grid-row: 1 / ", ";\n "], ["\n grid-row: 1 / ", ";\n "])), $hasDescription ? 3 : 2)) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n justify-content: flex-start;\n align-items: center;\n "], ["\n justify-content: flex-start;\n align-items: center;\n "])));
|
|
100
|
+
}, function (_a) {
|
|
92
101
|
var iconSize = _a.iconSize, hasIcon = _a.hasIcon;
|
|
93
102
|
var width = 0;
|
|
94
103
|
if (hasIcon) {
|
|
@@ -96,9 +105,9 @@ exports.StyledPanelTitleHeaderContent = styled_components_1["default"].div(templ
|
|
|
96
105
|
}
|
|
97
106
|
return width;
|
|
98
107
|
});
|
|
99
|
-
exports.StyledPanelTitleHeaderLabelAndDescription = styled_components_1["default"].div(
|
|
100
|
-
exports.StyledPanelTitleHeaderLabelAndBadge = styled_components_1["default"].div(
|
|
101
|
-
exports.StyledPanel = (0, styled_components_1["default"])(Effect_1.StyledEffect)(
|
|
108
|
+
exports.StyledPanelTitleHeaderLabelAndDescription = styled_components_1["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-flow: column;\n gap: 3px;\n min-width: 0;\n flex: 1 auto;\n"], ["\n display: flex;\n flex-flow: column;\n gap: 3px;\n min-width: 0;\n flex: 1 auto;\n"])));
|
|
109
|
+
exports.StyledPanelTitleHeaderLabelAndBadge = styled_components_1["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n"], ["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n"])));
|
|
110
|
+
exports.StyledPanel = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", "px;\n border: ", ";\n color: ", ";\n overflow: ", ";\n display: flex;\n flex-flow: column;\n position: relative;\n backdrop-filter: ", ";\n width: ", ";\n max-width: 100%;\n flex: ", ";\n\n &:not(:hover) {\n .reqore-panel-action-hidden {\n display: none;\n }\n }\n\n &.reqore-panel-floating-active {\n border-top-right-radius: 0;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", "px;\n border: ", ";\n color: ", ";\n overflow: ", ";\n display: flex;\n flex-flow: column;\n position: relative;\n backdrop-filter: ", ";\n width: ", ";\n max-width: 100%;\n flex: ", ";\n\n &:not(:hover) {\n .reqore-panel-action-hidden {\n display: none;\n }\n }\n\n &.reqore-panel-floating-active {\n border-top-right-radius: 0;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
102
111
|
var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
|
|
103
112
|
return (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
|
|
104
113
|
}, function (_a) {
|
|
@@ -127,23 +136,23 @@ exports.StyledPanel = (0, styled_components_1["default"])(Effect_1.StyledEffect)
|
|
|
127
136
|
}, function (_a) {
|
|
128
137
|
var interactive = _a.interactive, theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b, flat = _a.flat, intent = _a.intent;
|
|
129
138
|
return interactive
|
|
130
|
-
? (0, styled_components_1.css)(
|
|
139
|
+
? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: pointer;\n\n &:hover {\n ", " ", " .reqore-panel-title-icon {\n transform: scale(", ");\n }\n\n background-color: ", ";\n\n border-color: ", ";\n\n ", "\n }\n "], ["\n cursor: pointer;\n\n &:hover {\n ", " ", " .reqore-panel-title-icon {\n transform: scale(", ");\n }\n\n background-color: ", ";\n\n border-color: ", ";\n\n ", "\n }\n "])), exports.StyledPanelTitle, exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, opacity === 0 && flat
|
|
131
140
|
? undefined
|
|
132
141
|
: (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity)), opacity), flat && !intent
|
|
133
142
|
? undefined
|
|
134
|
-
: "".concat((0, colors_2.changeLightness)(intent ? theme.intents[intent] : (0, colors_2.getMainBackgroundColor)(theme), 0.25)), opacity !== 0 && (0, styled_components_1.css)(
|
|
143
|
+
: "".concat((0, colors_2.changeLightness)(intent ? theme.intents[intent] : (0, colors_2.getMainBackgroundColor)(theme), 0.25)), opacity !== 0 && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ":after {\n background: linear-gradient(\n to top,\n ", "\n 0%,\n transparent 100%\n );\n }\n "], ["\n ", ":after {\n background: linear-gradient(\n to top,\n ", "\n 0%,\n transparent 100%\n );\n }\n "])), item_1.StyledCollectionItemContent, (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity)), opacity))) : undefined;
|
|
135
144
|
}, function (_a) {
|
|
136
145
|
var raised = _a.raised, flat = _a.flat, intent = _a.intent;
|
|
137
146
|
return raised && flat && !intent && styles_1.RaisedElement;
|
|
138
147
|
}, function (_a) {
|
|
139
148
|
var fill = _a.fill, isCollapsed = _a.isCollapsed;
|
|
140
149
|
return !isCollapsed && fill
|
|
141
|
-
? (0, styled_components_1.css)(
|
|
150
|
+
? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n height: 100%;\n flex: 1;\n "], ["\n height: 100%;\n flex: 1;\n "]))) : undefined;
|
|
142
151
|
}, function (_a) {
|
|
143
152
|
var disabled = _a.disabled;
|
|
144
153
|
return disabled && styles_1.DisabledElement;
|
|
145
154
|
});
|
|
146
|
-
exports.StyledPanelTitle = styled_components_1["default"].div(
|
|
155
|
+
exports.StyledPanelTitle = styled_components_1["default"].div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n flex-flow: ", ";\n background-color: ", ";\n justify-content: space-between;\n\n padding: ", ";\n\n align-items: center;\n border-bottom: ", ";\n transition: background-color 0.2s ease-out;\n overflow: hidden;\n flex: 0 0 auto;\n gap: ", "px;\n\n ", " .reqore-panel-title-icon {\n transform: scale(", ");\n }\n\n ", "\n"], ["\n display: flex;\n flex-flow: ", ";\n background-color: ", ";\n justify-content: space-between;\n\n padding: ", ";\n\n align-items: center;\n border-bottom: ", ";\n transition: background-color 0.2s ease-out;\n overflow: hidden;\n flex: 0 0 auto;\n gap: ", "px;\n\n ", " .reqore-panel-title-icon {\n transform: scale(", ");\n }\n\n ", "\n"])), function (_a) {
|
|
147
156
|
var responsive = _a.responsive, isMobile = _a.isMobile;
|
|
148
157
|
return (responsive ? (isMobile ? 'column' : 'row') : 'row');
|
|
149
158
|
}, function (_a) {
|
|
@@ -157,14 +166,14 @@ exports.StyledPanelTitle = styled_components_1["default"].div(templateObject_10
|
|
|
157
166
|
return !isCollapsed && !flat && opacity
|
|
158
167
|
? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
|
|
159
168
|
: null;
|
|
160
|
-
}, sizes_1.GAP_FROM_SIZE.normal, exports.StyledPanelTitleHeaderContent,
|
|
169
|
+
}, sizes_1.GAP_FROM_SIZE.normal, exports.StyledPanelTitleHeaderContent, styles_1.INACTIVE_ICON_SCALE, function (_a) {
|
|
161
170
|
var collapsible = _a.collapsible;
|
|
162
|
-
return collapsible && (0, styled_components_1.css)(
|
|
171
|
+
return collapsible && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n cursor: pointer;\n &:hover {\n ", " .reqore-panel-title-icon {\n transform: scale(", ");\n }\n\n background-color: ", ";\n }\n "], ["\n cursor: pointer;\n &:hover {\n ", " .reqore-panel-title-icon {\n transform: scale(", ");\n }\n\n background-color: ", ";\n }\n "])), exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, function (_a) {
|
|
163
172
|
var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
|
|
164
173
|
return (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.05), opacity);
|
|
165
174
|
});
|
|
166
175
|
});
|
|
167
|
-
exports.StyledPanelTopBar = (0, styled_components_1["default"])(exports.StyledPanelTitle)(
|
|
176
|
+
exports.StyledPanelTopBar = (0, styled_components_1["default"])(exports.StyledPanelTitle)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n padding-bottom: ", ";\n padding-top: ", ";\n position: ", ";\n top: ", ";\n z-index: ", ";\n background: ", ";\n"], ["\n padding-bottom: ", ";\n padding-top: ", ";\n position: ", ";\n top: ", ";\n z-index: ", ";\n background: ", ";\n"])), function (_a) {
|
|
168
177
|
var padded = _a.padded, size = _a.size, isCollapsed = _a.isCollapsed, minimal = _a.minimal;
|
|
169
178
|
return !padded || isCollapsed || !minimal ? "".concat(getPaddingSize(padded, size), "px") : 0;
|
|
170
179
|
}, function (_a) {
|
|
@@ -187,7 +196,7 @@ exports.StyledPanelTopBar = (0, styled_components_1["default"])(exports.StyledPa
|
|
|
187
196
|
var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
|
|
188
197
|
return (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
|
|
189
198
|
});
|
|
190
|
-
exports.StyledPanelBottomActions = (0, styled_components_1["default"])(exports.StyledPanelTitle)(
|
|
199
|
+
exports.StyledPanelBottomActions = (0, styled_components_1["default"])(exports.StyledPanelTitle)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n border-bottom: 0;\n border-top: ", ";\n"], ["\n padding-top: ", ";\n padding-bottom: ", ";\n border-bottom: 0;\n border-top: ", ";\n"])), function (_a) {
|
|
191
200
|
var padded = _a.padded, size = _a.size, minimal = _a.minimal;
|
|
192
201
|
return !padded || !minimal ? "".concat(getPaddingSize(padded, size), "px") : 0;
|
|
193
202
|
}, function (_a) {
|
|
@@ -203,7 +212,7 @@ exports.StyledPanelBottomActions = (0, styled_components_1["default"])(exports.S
|
|
|
203
212
|
? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
|
|
204
213
|
: null;
|
|
205
214
|
});
|
|
206
|
-
exports.StyledPanelContent = styled_components_1["default"].div(
|
|
215
|
+
exports.StyledPanelContent = styled_components_1["default"].div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: ", ";\n padding: ", ";\n flex: 1;\n overflow: auto;\n overflow-wrap: anywhere;\n font-size: ", "px;\n"], ["\n display: ", ";\n padding: ", ";\n flex: 1;\n overflow: auto;\n overflow-wrap: anywhere;\n font-size: ", "px;\n"])), function (_a) {
|
|
207
216
|
var isCollapsed = _a.isCollapsed;
|
|
208
217
|
return (isCollapsed ? 'none !important' : undefined);
|
|
209
218
|
}, function (_a) {
|
|
@@ -217,7 +226,7 @@ exports.StyledPanelContent = styled_components_1["default"].div(templateObject_1
|
|
|
217
226
|
var size = _a.size;
|
|
218
227
|
return sizes_1.TEXT_FROM_SIZE[size];
|
|
219
228
|
});
|
|
220
|
-
exports.StyledFloatingActions = styled_components_1["default"].div(
|
|
229
|
+
exports.StyledFloatingActions = styled_components_1["default"].div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n position: fixed;\n z-index: 999999;\n display: flex;\n padding: ", "px;\n background-color: ", ";\n border: ", ";\n border-bottom: none;\n border-radius: ", "px ", "px\n 0 0;\n gap: ", "px;\n pointer-events: auto;\n"], ["\n position: fixed;\n z-index: 999999;\n display: flex;\n padding: ", "px;\n background-color: ", ";\n border: ", ";\n border-bottom: none;\n border-radius: ", "px ", "px\n 0 0;\n gap: ", "px;\n pointer-events: auto;\n"])), function (_a) {
|
|
221
230
|
var size = _a.size;
|
|
222
231
|
return sizes_1.PADDING_FROM_SIZE[size];
|
|
223
232
|
}, function (_a) {
|
|
@@ -245,8 +254,8 @@ exports.ReqorePanelSkeleton = (0, react_2.memo)(function (_a) {
|
|
|
245
254
|
(children ? (children) : ((0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ vertical: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { lines: 5, width: '100%', size: 'tiny' }) }))))] })));
|
|
246
255
|
});
|
|
247
256
|
exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
|
|
248
|
-
var children = _a.children, label = _a.label, description = _a.description, _b = _a.collapseButtonProps, collapseButtonProps = _b === void 0 ? {} : _b, collapsible = _a.collapsible, onClose = _a.onClose, _c = _a.closeButtonProps, closeButtonProps = _c === void 0 ? {} : _c, _d = _a.rounded, rounded = _d === void 0 ? true : _d, _e = _a.actions, actions = _e === void 0 ? [] : _e, _f = _a.bottomActions, bottomActions = _f === void 0 ? [] : _f, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, intent = _a.intent, className = _a.className, flat = _a.flat,
|
|
249
|
-
var
|
|
257
|
+
var children = _a.children, label = _a.label, description = _a.description, _b = _a.collapseButtonProps, collapseButtonProps = _b === void 0 ? {} : _b, collapsible = _a.collapsible, onClose = _a.onClose, _c = _a.closeButtonProps, closeButtonProps = _c === void 0 ? {} : _c, _d = _a.rounded, rounded = _d === void 0 ? true : _d, _e = _a.actions, actions = _e === void 0 ? [] : _e, _f = _a.bottomActions, bottomActions = _f === void 0 ? [] : _f, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, _g = _a.iconWithLabel, iconWithLabel = _g === void 0 ? false : _g, _h = _a.iconVerticalAlign, iconVerticalAlign = _h === void 0 ? 'center' : _h, intent = _a.intent, className = _a.className, flat = _a.flat, _j = _a.unMountContentOnCollapse, unMountContentOnCollapse = _j === void 0 ? true : _j, onCollapseChange = _a.onCollapseChange, _k = _a.padded, padded = _k === void 0 ? true : _k, _l = _a.wrapperPadding, wrapperPadding = _l === void 0 ? 'both' : _l, contentStyle = _a.contentStyle, contentEffect = _a.contentEffect, _m = _a.labelEffect, labelEffect = _m === void 0 ? {} : _m, _o = _a.descriptionEffect, descriptionEffect = _o === void 0 ? {} : _o, descriptionIntent = _a.descriptionIntent, labelSize = _a.labelSize, contentSize = _a.contentSize, minimal = _a.minimal, badge = _a.badge, iconColor = _a.iconColor, _p = _a.iconProps, iconProps = _p === void 0 ? {} : _p, fluid = _a.fluid, _q = _a.responsiveActions, responsiveActions = _q === void 0 ? true : _q, _r = _a.responsiveTitle, responsiveTitle = _r === void 0 ? true : _r, _s = _a.size, panelSize = _s === void 0 ? 'normal' : _s, getContentRef = _a.getContentRef, _t = _a.labelProps, labelProps = _t === void 0 ? {} : _t, disabled = _a.disabled, breadcrumbs = _a.breadcrumbs, _u = _a.showActionsWhenCollapsed, showActionsWhenCollapsed = _u === void 0 ? true : _u, showLabelTooltip = _a.showLabelTooltip, customLabelTooltip = _a.customLabelTooltip, resizable = _a.resizable, onLabelEdit = _a.onLabelEdit, responsiveActionsWrapperProps = _a.responsiveActionsWrapperProps, loading = _a.loading, loadingIconType = _a.loadingIconType, skeleton = _a.skeleton, errorBoundaryOptions = _a.errorBoundaryOptions, floatingActions = _a.floatingActions, rest = __rest(_a, ["children", "label", "description", "collapseButtonProps", "collapsible", "onClose", "closeButtonProps", "rounded", "actions", "bottomActions", "isCollapsed", "customTheme", "inheritCustomTheme", "icon", "iconImage", "iconWithLabel", "iconVerticalAlign", "intent", "className", "flat", "unMountContentOnCollapse", "onCollapseChange", "padded", "wrapperPadding", "contentStyle", "contentEffect", "labelEffect", "descriptionEffect", "descriptionIntent", "labelSize", "contentSize", "minimal", "badge", "iconColor", "iconProps", "fluid", "responsiveActions", "responsiveTitle", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions"]);
|
|
258
|
+
var _v = (0, react_2.useState)(isCollapsed || false), _isCollapsed = _v[0], setIsCollapsed = _v[1];
|
|
250
259
|
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme ||
|
|
251
260
|
((contentEffect === null || contentEffect === void 0 ? void 0 : contentEffect.gradient) && minimal
|
|
252
261
|
? { main: Object.values(contentEffect.gradient.colors)[0] }
|
|
@@ -259,8 +268,8 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
|
|
|
259
268
|
}, []);
|
|
260
269
|
var isMobile = (0, useReqoreContext_1.useReqoreProperty)('isMobile');
|
|
261
270
|
var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
|
|
262
|
-
var
|
|
263
|
-
var
|
|
271
|
+
var _w = (0, react_use_1.useMeasure)(), measureRef = _w[0], width = _w[1].width;
|
|
272
|
+
var _x = (0, react_2.useState)(false), _isHovered = _x[0], setIsHovered = _x[1];
|
|
264
273
|
var floatingActionsRef = (0, react_2.useRef)(null);
|
|
265
274
|
var panelRef = (0, react_2.useRef)(null);
|
|
266
275
|
var hoverTimerRef = (0, react_2.useRef)(null);
|
|
@@ -496,9 +505,43 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
|
|
|
496
505
|
panelRef.current = node;
|
|
497
506
|
}, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [_isHovered &&
|
|
498
507
|
(0, lodash_1.size)(floatingActionsList) > 0 &&
|
|
499
|
-
(0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledFloatingActions, __assign({ className: 'reqore-panel-floating-actions', theme: theme, size: panelSize, intent: intent, flat: flat, ref: floatingActionsRef, onMouseLeave: handleFloatingActionsMouseLeave }, { children: (0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ size: panelSize, gapSize: panelSize }, { children: floatingActionsList.map(function (action, index) { return renderActions(action, index, true); }) })) })), document.body), hasTitleBar && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTopBar, __assign({ flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : opacity !== null && opacity !== void 0 ? opacity : 1, noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, isMobile: isMobile || isSmall, ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset }, { children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { children: [breadcrumbs ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1["default"], __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((
|
|
500
|
-
|
|
501
|
-
|
|
508
|
+
(0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledFloatingActions, __assign({ className: 'reqore-panel-floating-actions', theme: theme, size: panelSize, intent: intent, flat: flat, ref: floatingActionsRef, onMouseLeave: handleFloatingActionsMouseLeave }, { children: (0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ size: panelSize, gapSize: panelSize }, { children: floatingActionsList.map(function (action, index) { return renderActions(action, index, true); }) })) })), document.body), hasTitleBar && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTopBar, __assign({ flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : opacity !== null && opacity !== void 0 ? opacity : 1, noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, isMobile: isMobile || isSmall, ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset }, { children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { children: [breadcrumbs ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1["default"], __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((function () {
|
|
509
|
+
var hasPanelIcon = !!icon || !!iconImage || loading;
|
|
510
|
+
// Layout decision:
|
|
511
|
+
// - iconWithLabel=true → render the icon INSIDE the
|
|
512
|
+
// label-and-badge row (no outer icon column). The
|
|
513
|
+
// description sits flush-left under the icon+label.
|
|
514
|
+
// - When there is NO description, fall back to the
|
|
515
|
+
// inline layout regardless of iconVerticalAlign — the
|
|
516
|
+
// outer grid only earns its keep when there is a
|
|
517
|
+
// description row to anchor against, and the inline
|
|
518
|
+
// layout aligns icon-to-text glyphs more naturally
|
|
519
|
+
// via the heading's own line-height.
|
|
520
|
+
// - Otherwise → outer two-column grid where the icon
|
|
521
|
+
// sits in a reserved column. iconVerticalAlign places
|
|
522
|
+
// the icon in row 1 (label), row 2 (description), or
|
|
523
|
+
// spans both rows (center). The description always
|
|
524
|
+
// indents past the icon column.
|
|
525
|
+
var inlineWithLabel = hasPanelIcon && (iconWithLabel || !description);
|
|
526
|
+
var useOuterGrid = hasPanelIcon && !inlineWithLabel;
|
|
527
|
+
// Outer grid → grid column-gap handles icon→label
|
|
528
|
+
// spacing, so the icon itself takes no margin.
|
|
529
|
+
// Inline → keep 'margin=right' so ReqoreIcon adds its
|
|
530
|
+
// standard side-spacer between icon and label.
|
|
531
|
+
var iconMargin = useOuterGrid ? undefined : 'right';
|
|
532
|
+
var panelIcon = hasPanelIcon ? ((0, jsx_runtime_1.jsx)(Icon_1["default"], __assign({ size: "".concat(sizes_1.ICON_FROM_HEADER_SIZE[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]], "px"), image: loading ? undefined : iconImage, margin: iconMargin, color: iconColor, tooltip: iconTooltip, effect: {
|
|
533
|
+
opacity: colors_1.CONTROL_ICON_OPACITY
|
|
534
|
+
} }, iconProps, { animation: loading ? 'spin' : iconProps === null || iconProps === void 0 ? void 0 : iconProps.animation, icon: loading
|
|
535
|
+
? "Loader".concat(loadingIconType || '', "Line")
|
|
536
|
+
: icon || (iconProps === null || iconProps === void 0 ? void 0 : iconProps.icon), className: "reqore-panel-title-icon ".concat((iconProps === null || iconProps === void 0 ? void 0 : iconProps.className) || '').trim() }))) : null;
|
|
537
|
+
var labelRow = ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndBadge, __assign({ className: 'reqore-panel-title-label-row' }, { children: [inlineWithLabel && panelIcon, typeof label === 'string' ? ((0, jsx_runtime_1.jsx)(LabelEditor_1.LabelEditor, { size: labelSize || panelSize, customTheme: theme, effect: __assign({ noWrap: true }, labelEffect), style: {
|
|
538
|
+
display: 'inline-flex',
|
|
539
|
+
alignItems: 'center',
|
|
540
|
+
minWidth: 0
|
|
541
|
+
}, label: label, onSubmit: onLabelEdit, tooltip: showLabelTooltip ? customLabelTooltip || label : undefined })) : (label), badge || badge === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null] })));
|
|
542
|
+
var descriptionRow = description ? ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({ className: 'reqore-panel-title-description', size: labelSize ? sizes_1.NUMBER_TO_SIZE[labelSize] : panelSize, effect: __assign({ opacity: 0.7 }, descriptionEffect), intent: descriptionIntent }, { children: description }))) : null;
|
|
543
|
+
return ((0, jsx_runtime_1.jsx)(exports.StyledPanelTitleHeaderContent, __assign({ size: panelSize }, labelProps, { hasLabel: !!label, hasIcon: useOuterGrid, iconSize: sizes_1.ICON_FROM_HEADER_SIZE[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]], "$hasOuterIcon": useOuterGrid, "$iconVerticalAlign": iconVerticalAlign, "$hasDescription": !!description }, { children: useOuterGrid ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [panelIcon, labelRow, descriptionRow] })) : ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndDescription, { children: [labelRow, descriptionRow] })) })));
|
|
544
|
+
})()) : null, breadcrumbs && (badge || badge === 0) ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null, (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions, { show: isSmall && (!!onClose || collapsible), isSmall: isSmall, showControlButtons: true, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, fluid: false, style: { marginLeft: 'auto' } })] })), hasResponsiveActions(nonFloatingActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ responsive: responsiveActions, fluid: responsiveActions || isSmall, horizontalAlign: 'flex-end', customTheme: theme, size: panelSize }, responsiveActionsWrapperProps, { children: nonFloatingActions.map(renderResponsiveActions()) }))), (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions, __assign({ show: showNonResponsiveGroup(), isSmall: isSmall, showControlButtons: !isSmall, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, fluid: !hasTitleHeader || isSmall }, { children: nonFloatingActions.map(renderNonResponsiveActions()) }))] }))), !_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? ((0, jsx_runtime_1.jsx)(exports.StyledPanelContent, __assign({ as: 'div', className: 'reqore-panel-content', hasLabel: !!hasTitleBar, hasBottomActions: hasBottomActions, isCollapsed: _isCollapsed, style: contentStyle, padded: padded, minimal: minimal || opacity === 0, size: contentSize || panelSize, ref: getContentRef, noHorizontalPadding: noHorizontalPadding }, { children: children }))) : null, hasBottomActions && !_isCollapsed ? ((0, jsx_runtime_1.jsxs)(exports.StyledPanelBottomActions, __assign({ flat: flat, className: 'reqore-panel-bottom-actions', theme: theme, padded: padded, intent: intent, minimal: minimal || opacity === 0, opacity: minimal ? 0 : opacity !== null && opacity !== void 0 ? opacity : 1, size: contentSize || panelSize, noHorizontalPadding: noHorizontalPadding }, { children: [hasNonResponsiveActions(leftBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ size: panelSize, style: { marginRight: 'auto' } }, { children: leftBottomActions.map(renderNonResponsiveActions('flex-start')) }))) : null, hasResponsiveActions(leftBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ fluid: responsiveActions, responsive: responsiveActions, customTheme: theme, size: panelSize, style: { marginRight: 'auto' } }, { children: leftBottomActions.map(renderResponsiveActions('flex-start')) }))), hasResponsiveActions(rightBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ fluid: responsiveActions, horizontalAlign: 'flex-end', responsive: responsiveActions, customTheme: theme, style: { marginLeft: 'auto' }, size: panelSize }, { children: rightBottomActions.map(renderResponsiveActions()) }))), hasNonResponsiveActions(rightBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1["default"], __assign({ horizontalAlign: 'flex-end', size: panelSize, style: { marginLeft: 'auto' } }, { children: rightBottomActions.map(renderNonResponsiveActions()) }))) : null] }))) : null] })) })));
|
|
502
545
|
});
|
|
503
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
546
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
504
547
|
//# sourceMappingURL=index.js.map
|