@qoretechnologies/reqore 0.20.7 → 0.22.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/__tests__/dropdown.test.tsx +1 -1
- package/__tests__/table.test.tsx +20 -18
- package/dist/components/Breadcrumbs/index.d.ts +2 -2
- package/dist/components/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/Breadcrumbs/item.d.ts.map +1 -1
- package/dist/components/Breadcrumbs/item.js +3 -4
- package/dist/components/Breadcrumbs/item.js.map +1 -1
- package/dist/components/Button/index.d.ts +3 -7
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +28 -19
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Checkbox/index.d.ts +3 -4
- package/dist/components/Checkbox/index.d.ts.map +1 -1
- package/dist/components/Checkbox/index.js +35 -12
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/Comment/index.d.ts +2 -2
- package/dist/components/ControlGroup/index.d.ts +1 -0
- package/dist/components/ControlGroup/index.d.ts.map +1 -1
- package/dist/components/ControlGroup/index.js +3 -2
- package/dist/components/ControlGroup/index.js.map +1 -1
- package/dist/components/Header/index.d.ts +2 -2
- package/dist/components/Header/index.d.ts.map +1 -1
- package/dist/components/Icon/index.d.ts +2 -2
- package/dist/components/Input/index.d.ts +2 -4
- package/dist/components/Input/index.d.ts.map +1 -1
- package/dist/components/Input/index.js +57 -28
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/Menu/index.d.ts +3 -2
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +7 -4
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Menu/item.d.ts +7 -6
- package/dist/components/Menu/item.d.ts.map +1 -1
- package/dist/components/Menu/item.js +9 -67
- package/dist/components/Menu/item.js.map +1 -1
- package/dist/components/Message/index.d.ts +2 -2
- package/dist/components/Message/index.d.ts.map +1 -1
- package/dist/components/Navbar/item.d.ts.map +1 -1
- package/dist/components/Navbar/item.js +12 -5
- package/dist/components/Navbar/item.js.map +1 -1
- package/dist/components/Notifications/notification.d.ts +4 -4
- package/dist/components/Notifications/notification.d.ts.map +1 -1
- package/dist/components/Panel/index.d.ts +3 -3
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Paragraph/index.d.ts +2 -2
- package/dist/components/Paragraph/index.d.ts.map +1 -1
- package/dist/components/Sidebar/index.d.ts.map +1 -1
- package/dist/components/Sidebar/index.js +7 -6
- package/dist/components/Sidebar/index.js.map +1 -1
- package/dist/components/Table/index.d.ts +10 -11
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/Table/index.js +5 -4
- package/dist/components/Table/index.js.map +1 -1
- package/dist/components/Table/row.d.ts +6 -6
- package/dist/components/Table/row.d.ts.map +1 -1
- package/dist/components/Tabs/index.d.ts +5 -5
- package/dist/components/Tabs/item.d.ts.map +1 -1
- package/dist/components/Tabs/item.js +2 -3
- package/dist/components/Tabs/item.js.map +1 -1
- package/dist/components/Tag/index.d.ts +5 -10
- package/dist/components/Tag/index.d.ts.map +1 -1
- package/dist/components/Tag/index.js +10 -7
- package/dist/components/Tag/index.js.map +1 -1
- package/dist/components/Textarea/index.d.ts +4 -2
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +55 -15
- package/dist/components/Textarea/index.js.map +1 -1
- package/dist/constants/theme.d.ts +1 -1
- package/dist/containers/ReqoreProvider.d.ts +4 -4
- package/dist/helpers/colors.d.ts +2 -2
- package/dist/helpers/colors.d.ts.map +1 -1
- package/dist/hooks/useCombinedRefs.d.ts +10 -1
- package/dist/hooks/useCombinedRefs.d.ts.map +1 -1
- package/dist/hooks/useCombinedRefs.js +18 -2
- package/dist/hooks/useCombinedRefs.js.map +1 -1
- package/dist/hooks/useTheme.d.ts +2 -2
- package/dist/hooks/useTheme.d.ts.map +1 -1
- package/dist/styles.d.ts +2 -0
- package/dist/styles.d.ts.map +1 -1
- package/dist/styles.js +5 -3
- package/dist/styles.js.map +1 -1
- package/dist/types/global.d.ts +83 -0
- package/dist/types/global.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Breadcrumbs/index.tsx +2 -2
- package/src/components/Breadcrumbs/item.tsx +4 -5
- package/src/components/Button/index.tsx +77 -49
- package/src/components/Checkbox/index.tsx +27 -17
- package/src/components/Comment/index.tsx +2 -2
- package/src/components/ControlGroup/index.tsx +3 -3
- package/src/components/Header/index.tsx +2 -2
- package/src/components/Icon/index.tsx +2 -2
- package/src/components/Input/index.tsx +58 -44
- package/src/components/Menu/index.tsx +14 -3
- package/src/components/Menu/item.tsx +42 -132
- package/src/components/Message/index.tsx +2 -2
- package/src/components/Navbar/item.tsx +20 -3
- package/src/components/Notifications/notification.tsx +4 -4
- package/src/components/Panel/index.tsx +3 -3
- package/src/components/Paragraph/index.tsx +2 -2
- package/src/components/Sidebar/index.tsx +11 -0
- package/src/components/Table/index.tsx +23 -15
- package/src/components/Table/row.tsx +11 -11
- package/src/components/Tabs/index.tsx +5 -5
- package/src/components/Tabs/item.tsx +3 -4
- package/src/components/Tag/index.tsx +18 -21
- package/src/components/Textarea/index.tsx +76 -28
- package/src/constants/theme.ts +1 -1
- package/src/containers/ReqoreProvider.tsx +4 -4
- package/src/helpers/colors.ts +2 -2
- package/src/hooks/useCombinedRefs.ts +9 -2
- package/src/hooks/useTheme.ts +2 -2
- package/src/mock/data.json +11000 -0
- package/src/mock/tableData.ts +5 -14
- package/src/stories/Button/Button.stories.tsx +4 -1
- package/src/stories/Checkbox/Checkbox.stories.tsx +5 -4
- package/src/stories/Input/Input.stories.tsx +39 -6
- package/src/stories/Menu/Menu.stories.tsx +14 -2
- package/src/stories/RadioGroup/RadioGroup.stories.tsx +10 -0
- package/src/stories/Table/Table.stories.tsx +12 -1
- package/src/stories/Tag/Tag.stories.tsx +7 -1
- package/src/stories/TextArea/TextArea.stories.tsx +83 -13
- package/src/styles.ts +11 -2
- package/src/types/global.ts +89 -0
- package/tests.json +1 -1
|
@@ -62,7 +62,7 @@ var sizes_1 = require("../../constants/sizes");
|
|
|
62
62
|
var ThemeContext_1 = __importDefault(require("../../context/ThemeContext"));
|
|
63
63
|
var colors_1 = require("../../helpers/colors");
|
|
64
64
|
var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
|
|
65
|
-
var
|
|
65
|
+
var useTooltip_1 = require("../../hooks/useTooltip");
|
|
66
66
|
var Icon_1 = __importDefault(require("../Icon"));
|
|
67
67
|
exports.StyledTag = styled_components_1["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n flex-shrink: 0;\n align-items: center;\n font-family: system-ui;\n font-weight: 600;\n overflow: hidden;\n font-size: ", "px;\n height: ", "px;\n min-width: ", "px;\n border-radius: ", "px;\n width: ", ";\n\n ", "\n\n ", "\n\n\n ", "\n"], ["\n display: inline-flex;\n justify-content: center;\n flex-shrink: 0;\n align-items: center;\n font-family: system-ui;\n font-weight: 600;\n overflow: hidden;\n font-size: ", "px;\n height: ", "px;\n min-width: ", "px;\n border-radius: ", "px;\n width: ", ";\n\n ", "\n\n ", "\n\n\n ", "\n"])), function (_a) {
|
|
68
68
|
var size = _a.size;
|
|
@@ -111,19 +111,22 @@ var StyledButtonWrapper = styled_components_1["default"].div(templateObject_8 ||
|
|
|
111
111
|
});
|
|
112
112
|
var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
|
|
113
113
|
var tooltip = _a.tooltip, label = _a.label, icon = _a.icon, rightIcon = _a.rightIcon, className = _a.className, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? 'normal' : _b, onRemoveClick = _a.onRemoveClick, actions = _a.actions, badge = _a.badge, intent = _a.intent, color = _a.color, rest = __rest(_a, ["tooltip", "label", "icon", "rightIcon", "className", "onClick", "size", "onRemoveClick", "actions", "badge", "intent", "color"]);
|
|
114
|
-
var
|
|
115
|
-
var combinedRef = (0, useCombinedRefs_1.useCombinedRefs)(innerRef, ref);
|
|
114
|
+
var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
|
|
116
115
|
var theme = (0, react_1.useContext)(ThemeContext_1["default"]);
|
|
117
|
-
(0,
|
|
116
|
+
(0, useTooltip_1.useTooltip)(targetRef.current, tooltip);
|
|
118
117
|
// If color or intent was specified, set the color
|
|
119
118
|
var customColor = intent ? theme.intents[intent] : color;
|
|
120
|
-
return ((0, jsx_runtime_1.jsxs)(exports.StyledTag, __assign({}, rest, { color: customColor, className: "".concat(className || '', " reqore-tag"), size: size, ref:
|
|
121
|
-
? actions.map(function (action) { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.ReqorePopover, __assign({
|
|
119
|
+
return ((0, jsx_runtime_1.jsxs)(exports.StyledTag, __assign({}, rest, { color: customColor, className: "".concat(className || '', " reqore-tag"), size: size, ref: targetRef, badge: badge, removable: !!onRemoveClick, interactive: !!onClick && !rest.disabled }, { children: [(0, jsx_runtime_1.jsxs)(StyledTagContentWrapper, __assign({ size: size, className: 'reqore-tag-content', onClick: onClick }, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon, size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: label || rightIcon ? 'right' : undefined })), label && (0, jsx_runtime_1.jsx)(StyledTagContent, __assign({ size: size }, { children: label })), rightIcon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: rightIcon, size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: label ? 'left' : undefined }))] })), (0, size_1["default"])(actions)
|
|
120
|
+
? actions.map(function (action) { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.ReqorePopover, __assign({ component: StyledButtonWrapper, componentProps: {
|
|
122
121
|
size: size,
|
|
123
122
|
color: customColor,
|
|
124
123
|
className: 'reqore-tag-action',
|
|
125
124
|
onClick: action.onClick
|
|
126
|
-
}
|
|
125
|
+
} }, (action.tooltip
|
|
126
|
+
? typeof action.tooltip === 'string'
|
|
127
|
+
? { tooltip: action.tooltip }
|
|
128
|
+
: action.tooltip || {}
|
|
129
|
+
: {}), { noWrapper: true }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: action.icon, size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px") }) })) })); })
|
|
127
130
|
: null, onRemoveClick && !rest.disabled ? ((0, jsx_runtime_1.jsx)(__1.ReqorePopover, __assign({ component: StyledButtonWrapper, componentProps: {
|
|
128
131
|
size: size,
|
|
129
132
|
color: customColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAAgC;AAChC,+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TSizes } from '../../constants/sizes';
|
|
3
3
|
import { IReqoreTheme } from '../../constants/theme';
|
|
4
|
-
|
|
4
|
+
import { IReqoreDisabled, IReqoreIntent, IReqoreReadOnly, IWithReqoreCustomTheme, IWithReqoreTooltip } from '../../types/global';
|
|
5
|
+
export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaElement>, IReqoreReadOnly, IReqoreDisabled, IWithReqoreCustomTheme, IWithReqoreTooltip, IReqoreIntent {
|
|
5
6
|
autoFocus?: boolean;
|
|
6
|
-
disabled?: boolean;
|
|
7
7
|
width?: number;
|
|
8
8
|
height?: number;
|
|
9
9
|
scaleWithContent?: boolean;
|
|
@@ -13,6 +13,8 @@ export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaE
|
|
|
13
13
|
value?: string;
|
|
14
14
|
rows?: number;
|
|
15
15
|
cols?: number;
|
|
16
|
+
rounded?: boolean;
|
|
17
|
+
flat?: boolean;
|
|
16
18
|
onClearClick?: () => any;
|
|
17
19
|
}
|
|
18
20
|
export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAoC,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAMrD,OAAO,EACL,eAAe,EACf,aAAa,EACb,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAC/C,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EAClB,aAAa;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,KAMjC,CAAC;AAEF,eAAO,MAAM,cAAc,KAyD1B,CAAC;AAEF,QAAA,MAAM,WAAW,sFAoDhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -14,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
|
|
|
14
14
|
};
|
|
15
15
|
return __assign.apply(this, arguments);
|
|
16
16
|
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
17
40
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
41
|
var t = {};
|
|
19
42
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -33,9 +56,13 @@ exports.StyledTextarea = exports.StyledTextareaWrapper = void 0;
|
|
|
33
56
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
34
57
|
var polished_1 = require("polished");
|
|
35
58
|
var react_1 = require("react");
|
|
36
|
-
var styled_components_1 =
|
|
59
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
37
60
|
var sizes_1 = require("../../constants/sizes");
|
|
38
61
|
var colors_1 = require("../../helpers/colors");
|
|
62
|
+
var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
|
|
63
|
+
var useTheme_1 = require("../../hooks/useTheme");
|
|
64
|
+
var useTooltip_1 = require("../../hooks/useTooltip");
|
|
65
|
+
var styles_1 = require("../../styles");
|
|
39
66
|
var InputClearButton_1 = __importDefault(require("../InputClearButton"));
|
|
40
67
|
exports.StyledTextareaWrapper = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n flex: ", ";\n position: relative;\n overflow: hidden;\n"], ["\n height: ", ";\n width: ", ";\n flex: ", ";\n position: relative;\n overflow: hidden;\n"])), function (_a) {
|
|
41
68
|
var height = _a.height;
|
|
@@ -47,39 +74,52 @@ exports.StyledTextareaWrapper = styled_components_1["default"].div(templateObjec
|
|
|
47
74
|
var fluid = _a.fluid;
|
|
48
75
|
return (fluid ? '1' : undefined);
|
|
49
76
|
});
|
|
50
|
-
exports.StyledTextarea = styled_components_1["default"].textarea(
|
|
77
|
+
exports.StyledTextarea = styled_components_1["default"].textarea(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n font-size: ", "px;\n margin: 0;\n padding: 5px 7px;\n resize: none;\n\n background-color: ", ";\n color: ", ";\n\n transition: all 0.2s ease-out;\n\n &:active,\n &:focus {\n background-color: ", ";\n }\n\n border-radius: ", "px;\n border: ", ";\n border-bottom: ", ";\n\n transition: all 0.2s ease-out;\n\n ", "\n\n &::placeholder {\n transition: all 0.2s ease-out;\n color: ", ";\n }\n\n &:focus {\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n\n &:disabled {\n ", ";\n }\n"], ["\n height: 100%;\n width: 100%;\n font-size: ", "px;\n margin: 0;\n padding: 5px 7px;\n resize: none;\n\n background-color: ", ";\n color: ", ";\n\n transition: all 0.2s ease-out;\n\n &:active,\n &:focus {\n background-color: ", ";\n }\n\n border-radius: ", "px;\n border: ", ";\n border-bottom: ", ";\n\n transition: all 0.2s ease-out;\n\n ", "\n\n &::placeholder {\n transition: all 0.2s ease-out;\n color: ", ";\n }\n\n &:focus {\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n\n &:disabled {\n ", ";\n }\n"])), function (_a) {
|
|
51
78
|
var _size = _a._size;
|
|
52
79
|
return sizes_1.TEXT_FROM_SIZE[_size];
|
|
53
80
|
}, function (_a) {
|
|
54
81
|
var theme = _a.theme, minimal = _a.minimal;
|
|
55
|
-
return minimal ? 'transparent' : (0, polished_1.
|
|
82
|
+
return minimal ? 'transparent' : (0, polished_1.rgba)(theme.main, 0.3);
|
|
56
83
|
}, function (_a) {
|
|
57
84
|
var theme = _a.theme;
|
|
58
85
|
return (0, colors_1.getReadableColor)(theme);
|
|
59
86
|
}, function (_a) {
|
|
60
|
-
var
|
|
61
|
-
return
|
|
87
|
+
var theme = _a.theme, minimal = _a.minimal;
|
|
88
|
+
return minimal ? 'transparent' : (0, polished_1.rgba)(theme.main, 0.5);
|
|
62
89
|
}, function (_a) {
|
|
63
|
-
var minimal = _a.minimal,
|
|
64
|
-
return minimal
|
|
90
|
+
var minimal = _a.minimal, rounded = _a.rounded, _size = _a._size;
|
|
91
|
+
return minimal || !rounded ? 0 : sizes_1.RADIUS_FROM_SIZE[_size];
|
|
65
92
|
}, function (_a) {
|
|
66
|
-
var minimal = _a.minimal;
|
|
67
|
-
return
|
|
93
|
+
var minimal = _a.minimal, theme = _a.theme, flat = _a.flat;
|
|
94
|
+
return !minimal && !flat ? "1px solid ".concat((0, colors_1.changeLightness)(theme.main, 0.05)) : 0;
|
|
68
95
|
}, function (_a) {
|
|
69
|
-
var theme = _a.theme;
|
|
70
|
-
return
|
|
96
|
+
var minimal = _a.minimal, theme = _a.theme, flat = _a.flat;
|
|
97
|
+
return minimal && !flat ? "0.5px solid ".concat((0, colors_1.changeLightness)(theme.main, 0.05)) : undefined;
|
|
98
|
+
}, function (_a) {
|
|
99
|
+
var disabled = _a.disabled, readOnly = _a.readOnly;
|
|
100
|
+
return !disabled && !readOnly
|
|
101
|
+
? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:active,\n &:focus,\n &:hover {\n outline: none;\n border-color: ", ";\n }\n "], ["\n &:active,\n &:focus,\n &:hover {\n outline: none;\n border-color: ", ";\n }\n "])), function (_a) {
|
|
102
|
+
var theme = _a.theme;
|
|
103
|
+
return (0, colors_1.changeLightness)(theme.main, 0.1);
|
|
104
|
+
}) : undefined;
|
|
71
105
|
}, function (_a) {
|
|
72
106
|
var theme = _a.theme;
|
|
73
107
|
return (0, polished_1.rgba)((0, colors_1.getReadableColor)(theme), 0.3);
|
|
74
108
|
}, function (_a) {
|
|
75
109
|
var theme = _a.theme;
|
|
76
110
|
return (0, polished_1.rgba)((0, colors_1.getReadableColor)(theme), 0.5);
|
|
77
|
-
})
|
|
111
|
+
}, function (_a) {
|
|
112
|
+
var readOnly = _a.readOnly;
|
|
113
|
+
return readOnly && styles_1.ReadOnlyElement;
|
|
114
|
+
}, styles_1.DisabledElement);
|
|
78
115
|
var ReqoreInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
79
116
|
var _b;
|
|
80
|
-
var width = _a.width, height = _a.height, scaleWithContent = _a.scaleWithContent, _c = _a.size, size = _c === void 0 ? 'normal' : _c, className = _a.className, onClearClick = _a.onClearClick, fluid = _a.fluid, rest = __rest(_a, ["width", "height", "scaleWithContent", "size", "className", "onClearClick", "fluid"]);
|
|
81
|
-
|
|
117
|
+
var width = _a.width, height = _a.height, scaleWithContent = _a.scaleWithContent, _c = _a.size, size = _c === void 0 ? 'normal' : _c, className = _a.className, onClearClick = _a.onClearClick, fluid = _a.fluid, tooltip = _a.tooltip, customTheme = _a.customTheme, intent = _a.intent, _d = _a.rounded, rounded = _d === void 0 ? true : _d, rest = __rest(_a, ["width", "height", "scaleWithContent", "size", "className", "onClearClick", "fluid", "tooltip", "customTheme", "intent", "rounded"]);
|
|
118
|
+
var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
|
|
119
|
+
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
|
|
120
|
+
(0, useTooltip_1.useTooltip)(targetRef === null || targetRef === void 0 ? void 0 : targetRef.current, tooltip);
|
|
121
|
+
return ((0, jsx_runtime_1.jsxs)(exports.StyledTextareaWrapper, __assign({ className: "".concat(className || '', " reqore-control-wrapper"), width: width, height: height, fluid: fluid, _size: size, theme: theme }, { children: [(0, jsx_runtime_1.jsx)(exports.StyledTextarea, __assign({}, rest, { className: "".concat(className || '', " reqore-control reqore-textarea"), _size: size, ref: targetRef, theme: theme, rounded: rounded, rows: scaleWithContent ? (((_b = rest === null || rest === void 0 ? void 0 : rest.value) === null || _b === void 0 ? void 0 : _b.split(/\r\n|\r|\n/).length) || 1) + 1 : rest.rows })), !rest.readOnly && ((0, jsx_runtime_1.jsx)(InputClearButton_1["default"], { enabled: !(rest === null || rest === void 0 ? void 0 : rest.disabled) && !!(onClearClick && (rest === null || rest === void 0 ? void 0 : rest.onChange)), show: (rest === null || rest === void 0 ? void 0 : rest.value) && rest.value !== '', onClick: onClearClick, size: 'big' }))] })));
|
|
82
122
|
});
|
|
83
123
|
exports["default"] = ReqoreInput;
|
|
84
|
-
var templateObject_1, templateObject_2;
|
|
124
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
85
125
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -75,7 +75,7 @@ export interface IReqoreIntents {
|
|
|
75
75
|
danger?: string;
|
|
76
76
|
muted?: string;
|
|
77
77
|
}
|
|
78
|
-
export declare type
|
|
78
|
+
export declare type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
|
|
79
79
|
export declare const DEFAULT_INTENTS: IReqoreIntents;
|
|
80
80
|
export declare const DEFAULT_THEME: IReqoreTheme;
|
|
81
81
|
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { IReqoreNotificationsPosition } from '../components/Notifications';
|
|
3
3
|
import { IReqoreNotificationType } from '../components/Notifications/notification';
|
|
4
4
|
import { TSizes } from '../constants/sizes';
|
|
5
|
-
import {
|
|
5
|
+
import { TReqoreIntent } from '../constants/theme';
|
|
6
6
|
import { IReqoreIconName } from '../types/icons';
|
|
7
7
|
export interface IReqoreNotificationData {
|
|
8
8
|
title?: string;
|
|
@@ -14,7 +14,7 @@ export interface IReqoreNotificationData {
|
|
|
14
14
|
onFinish?: (id?: string) => any;
|
|
15
15
|
id?: string;
|
|
16
16
|
type?: IReqoreNotificationType;
|
|
17
|
-
intent?:
|
|
17
|
+
intent?: TReqoreIntent;
|
|
18
18
|
flat?: boolean;
|
|
19
19
|
inverted?: boolean;
|
|
20
20
|
size?: TSizes;
|
|
@@ -28,12 +28,12 @@ export interface IReqoreConfirmationModal {
|
|
|
28
28
|
description?: string;
|
|
29
29
|
onConfirm?: () => void;
|
|
30
30
|
onCancel?: () => void;
|
|
31
|
-
confirmButtonIntent?:
|
|
31
|
+
confirmButtonIntent?: TReqoreIntent;
|
|
32
32
|
confirmLabel?: string;
|
|
33
33
|
confirmIcon?: IReqoreIconName;
|
|
34
34
|
cancelLabel?: string;
|
|
35
35
|
isOpen?: boolean;
|
|
36
|
-
intent?:
|
|
36
|
+
intent?: TReqoreIntent;
|
|
37
37
|
}
|
|
38
38
|
declare const ReqoreProvider: React.FC<IReqoreNotifications>;
|
|
39
39
|
export default ReqoreProvider;
|
package/dist/helpers/colors.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
|
|
2
2
|
export declare const getReadableColor: (theme: Partial<IReqoreTheme>, ifLight?: string, ifDark?: string, dimmed?: boolean, fallback?: string) => string;
|
|
3
3
|
export declare const getReadableColorFrom: (from: string, dim?: boolean, ifLight?: string, ifDark?: string) => string;
|
|
4
4
|
export declare const percentToHexAlpha: (p: number) => string;
|
|
@@ -10,6 +10,6 @@ export declare const getColorByBgColor: (bgColor: any) => "#ffffff" | "" | "#000
|
|
|
10
10
|
export declare const isValidSixCharHex: (hex: string) => boolean;
|
|
11
11
|
export declare const buildTheme: (theme: IReqoreTheme) => IReqoreTheme;
|
|
12
12
|
export declare const mergeThemes: (element: string, theme: IReqoreTheme, customTheme: any) => IReqoreTheme;
|
|
13
|
-
export declare const getNotificationIntent: (theme: IReqoreTheme, intent?:
|
|
13
|
+
export declare const getNotificationIntent: (theme: IReqoreTheme, intent?: TReqoreIntent) => string;
|
|
14
14
|
export declare const getMainBackgroundColor: (theme: IReqoreTheme) => string;
|
|
15
15
|
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAElF,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,EAC5B,OAAO,CAAC,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,OAAO,EAChB,QAAQ,CAAC,EAAE,MAAM,KACd,MAaJ,CAAC;AAEF,eAAO,MAAM,oBAAoB,SACzB,MAAM,QACN,OAAO,YACH,MAAM,WACP,MAAM,WAMhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAO,MAAM,WAM1C,CAAC;AAEF,eAAO,MAAM,YAAY,cAAe,MAAM,YAI7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,KAAK,MAG9B,CAAC;AAI1C,eAAO,MAAM,eAAe,UAAW,MAAM,cAAc,MAAM,KAAG,MAMnE,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,MAAM,cAAc,MAAM,KAAG,MAC+B,CAAC;AAEnG,eAAO,MAAM,iBAAiB,8CAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAS,MAAM,KAAG,OAE/C,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,YAAY,KAAG,YAiChD,CAAC;AAEF,eAAO,MAAM,WAAW,YAAa,MAAM,SAAS,YAAY,eAAe,GAAG,iBAcjF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,YAAY,WAAW,aAAa,WAMhF,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,YAAY,KAAG,MAC1B,CAAC"}
|
|
@@ -1,3 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* It takes a list of refs and returns a single ref that can be used to reference the same underlying
|
|
4
|
+
* DOM element
|
|
5
|
+
* @param refs - An array of refs to combine.
|
|
6
|
+
* @returns A ref object.
|
|
7
|
+
*/
|
|
8
|
+
export declare function useCombinedRefs(...refs: any[]): {
|
|
9
|
+
_innerRef: any;
|
|
10
|
+
targetRef: React.MutableRefObject<undefined>;
|
|
11
|
+
};
|
|
3
12
|
//# sourceMappingURL=useCombinedRefs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCombinedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useCombinedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,IAAI,OAAA
|
|
1
|
+
{"version":3,"file":"useCombinedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useCombinedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,GAAG,IAAI,OAAA;;;EAiBtC"}
|
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
3
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
4
|
+
if (ar || !(i in from)) {
|
|
5
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
6
|
+
ar[i] = from[i];
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
10
|
+
};
|
|
2
11
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
12
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
13
|
};
|
|
5
14
|
exports.__esModule = true;
|
|
6
15
|
exports.useCombinedRefs = void 0;
|
|
7
16
|
var react_1 = __importDefault(require("react"));
|
|
17
|
+
/**
|
|
18
|
+
* It takes a list of refs and returns a single ref that can be used to reference the same underlying
|
|
19
|
+
* DOM element
|
|
20
|
+
* @param refs - An array of refs to combine.
|
|
21
|
+
* @returns A ref object.
|
|
22
|
+
*/
|
|
8
23
|
function useCombinedRefs() {
|
|
9
24
|
var refs = [];
|
|
10
25
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
11
26
|
refs[_i] = arguments[_i];
|
|
12
27
|
}
|
|
28
|
+
var _a = react_1["default"].useState(null), _innerRef = _a[0], setInnerRef = _a[1];
|
|
13
29
|
var targetRef = react_1["default"].useRef();
|
|
14
30
|
react_1["default"].useEffect(function () {
|
|
15
|
-
refs.forEach(function (ref) {
|
|
31
|
+
__spreadArray(__spreadArray([], refs, true), [setInnerRef], false).forEach(function (ref) {
|
|
16
32
|
if (!ref)
|
|
17
33
|
return;
|
|
18
34
|
if (typeof ref === 'function') {
|
|
@@ -23,7 +39,7 @@ function useCombinedRefs() {
|
|
|
23
39
|
}
|
|
24
40
|
});
|
|
25
41
|
}, [refs]);
|
|
26
|
-
return targetRef;
|
|
42
|
+
return { _innerRef: _innerRef, targetRef: targetRef };
|
|
27
43
|
}
|
|
28
44
|
exports.useCombinedRefs = useCombinedRefs;
|
|
29
45
|
//# sourceMappingURL=useCombinedRefs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCombinedRefs.js","sourceRoot":"","sources":["../../src/hooks/useCombinedRefs.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCombinedRefs.js","sourceRoot":"","sources":["../../src/hooks/useCombinedRefs.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B;;;;;GAKG;AACH,SAAgB,eAAe;IAAC,cAAO;SAAP,UAAO,EAAP,qBAAO,EAAP,IAAO;QAAP,yBAAO;;IAC/B,IAAA,KAA2B,kBAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAA9C,SAAS,QAAA,EAAE,WAAW,QAAwB,CAAC;IACtD,IAAM,SAAS,GAAG,kBAAK,CAAC,MAAM,EAAE,CAAC;IAEjC,kBAAK,CAAC,SAAS,CAAC;QACd,gCAAI,IAAI,UAAE,WAAW,UAAE,OAAO,CAAC,UAAC,GAAG;YACjC,IAAI,CAAC,GAAG;gBAAE,OAAO;YAEjB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;gBAC7B,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;aACxB;iBAAM;gBACL,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;aACjC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,EAAE,SAAS,WAAA,EAAE,SAAS,WAAA,EAAE,CAAC;AAClC,CAAC;AAjBD,0CAiBC"}
|
package/dist/hooks/useTheme.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const useReqoreTheme: (element: string, customTheme?: Partial<IReqoreTheme>, intent?:
|
|
1
|
+
import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
|
|
2
|
+
export declare const useReqoreTheme: (element: string, customTheme?: Partial<IReqoreTheme>, intent?: TReqoreIntent) => IReqoreTheme;
|
|
3
3
|
//# sourceMappingURL=useTheme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIjE,eAAO,MAAM,cAAc,YAChB,MAAM,gBACF,QAAQ,YAAY,CAAC,WACzB,aAAa,iBAUvB,CAAC"}
|
package/dist/styles.d.ts
CHANGED
|
@@ -2,4 +2,6 @@ export declare const AnimatedTextElement: any;
|
|
|
2
2
|
export declare const InactiveIconScale: any;
|
|
3
3
|
export declare const ActiveIconScale: any;
|
|
4
4
|
export declare const ScaleIconOnHover: any;
|
|
5
|
+
export declare const DisabledElement: any;
|
|
6
|
+
export declare const ReadOnlyElement: any;
|
|
5
7
|
//# sourceMappingURL=styles.d.ts.map
|
package/dist/styles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,KAY/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,KAI7B,CAAC;AAEF,eAAO,MAAM,eAAe,KAI3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,KAY/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,KAI7B,CAAC;AAEF,eAAO,MAAM,eAAe,KAI3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,KAK5B,CAAC;AAEF,eAAO,MAAM,eAAe,KAI3B,CAAC;AAEF,eAAO,MAAM,eAAe,KAG3B,CAAC"}
|
package/dist/styles.js
CHANGED
|
@@ -4,13 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
6
|
exports.__esModule = true;
|
|
7
|
-
exports.ScaleIconOnHover = exports.ActiveIconScale = exports.InactiveIconScale = exports.AnimatedTextElement = void 0;
|
|
7
|
+
exports.ReadOnlyElement = exports.DisabledElement = exports.ScaleIconOnHover = exports.ActiveIconScale = exports.InactiveIconScale = exports.AnimatedTextElement = void 0;
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
9
|
var Button_1 = require("./components/Button");
|
|
10
10
|
var Icon_1 = require("./components/Icon");
|
|
11
11
|
exports.AnimatedTextElement = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", " {\n transform: translateY(0px);\n filter: blur(0);\n opacity: 1;\n }\n\n ", " {\n transform: translateY(150%);\n filter: blur(10px);\n opacity: 0;\n }\n"], ["\n ", " {\n transform: translateY(0px);\n filter: blur(0);\n opacity: 1;\n }\n\n ", " {\n transform: translateY(150%);\n filter: blur(10px);\n opacity: 0;\n }\n"])), Button_1.StyledActiveContent, Button_1.StyledInActiveContent);
|
|
12
12
|
exports.InactiveIconScale = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", " {\n transform: scale(0.85);\n }\n"], ["\n ", " {\n transform: scale(0.85);\n }\n"])), Icon_1.StyledIconWrapper);
|
|
13
13
|
exports.ActiveIconScale = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", " {\n transform: scale(1);\n }\n"], ["\n ", " {\n transform: scale(1);\n }\n"])), Icon_1.StyledIconWrapper);
|
|
14
|
-
exports.ScaleIconOnHover = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
|
|
15
|
-
|
|
14
|
+
exports.ScaleIconOnHover = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:hover,\n &:focus {\n ", "\n }\n"], ["\n &:hover,\n &:focus {\n ", "\n }\n"])), exports.ActiveIconScale);
|
|
15
|
+
exports.DisabledElement = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n pointer-events: none;\n opacity: 0.5;\n cursor: not-allowed;\n"], ["\n pointer-events: none;\n opacity: 0.5;\n cursor: not-allowed;\n"])));
|
|
16
|
+
exports.ReadOnlyElement = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n pointer-events: none;\n cursor: not-allowed;\n"], ["\n pointer-events: none;\n cursor: not-allowed;\n"])));
|
|
17
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
16
18
|
//# sourceMappingURL=styles.js.map
|
package/dist/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAwC;AACxC,8CAAiF;AACjF,0CAAsD;AAEzC,QAAA,mBAAmB,OAAG,uBAAG,4PAAA,MAClC,EAAmB,uFAMnB,EAAqB,uFAKxB,KAXG,4BAAmB,EAMnB,8BAAqB,EAKvB;AAEW,QAAA,iBAAiB,OAAG,uBAAG,oHAAA,MAChC,EAAiB,wCAGpB,KAHG,wBAAiB,EAGnB;AAEW,QAAA,eAAe,OAAG,uBAAG,iHAAA,MAC9B,EAAiB,qCAGpB,KAHG,wBAAiB,EAGnB;AAEW,QAAA,gBAAgB,OAAG,uBAAG,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAwC;AACxC,8CAAiF;AACjF,0CAAsD;AAEzC,QAAA,mBAAmB,OAAG,uBAAG,4PAAA,MAClC,EAAmB,uFAMnB,EAAqB,uFAKxB,KAXG,4BAAmB,EAMnB,8BAAqB,EAKvB;AAEW,QAAA,iBAAiB,OAAG,uBAAG,oHAAA,MAChC,EAAiB,wCAGpB,KAHG,wBAAiB,EAGnB;AAEW,QAAA,eAAe,OAAG,uBAAG,iHAAA,MAC9B,EAAiB,qCAGpB,KAHG,wBAAiB,EAGnB;AAEW,QAAA,gBAAgB,OAAG,uBAAG,gHAAA,iCAG7B,EAAe,SAEpB,KAFK,uBAAe,EAEnB;AAEW,QAAA,eAAe,OAAG,uBAAG,0IAAA,sEAIjC,KAAC;AAEW,QAAA,eAAe,OAAG,uBAAG,yHAAA,qDAGjC,KAAC"}
|
package/dist/types/global.d.ts
CHANGED
|
@@ -1,8 +1,91 @@
|
|
|
1
|
+
import { IReqoreCustomTheme, TReqoreIntent } from '../constants/theme';
|
|
1
2
|
import { IPopoverOptions } from '../hooks/usePopover';
|
|
2
3
|
export interface IReqoreComponent {
|
|
3
4
|
_insidePopover?: boolean;
|
|
4
5
|
_popoverId?: string;
|
|
5
6
|
}
|
|
7
|
+
export interface IReqoreReadOnly {
|
|
8
|
+
/**
|
|
9
|
+
* If true, the component will be read only
|
|
10
|
+
* @default false
|
|
11
|
+
* @type boolean
|
|
12
|
+
* @memberof IReqoreReadOnly
|
|
13
|
+
* @example
|
|
14
|
+
* <ReqoreInput readOnly />
|
|
15
|
+
* <ReqoreInput readOnly={true} />
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
18
|
+
readOnly?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export interface IReqoreDisabled {
|
|
21
|
+
/**
|
|
22
|
+
* If true, the component will be disabled
|
|
23
|
+
* @default false
|
|
24
|
+
* @type boolean
|
|
25
|
+
* @memberof IReqoreDisabled
|
|
26
|
+
* @example
|
|
27
|
+
* <ReqoreInput disabled />
|
|
28
|
+
* <ReqoreInput disabled={true} />
|
|
29
|
+
*
|
|
30
|
+
*/
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
}
|
|
33
|
+
export interface IReqoreIntent {
|
|
34
|
+
/**
|
|
35
|
+
* The intent of the component
|
|
36
|
+
* @default none
|
|
37
|
+
* @type TReqoreIntent
|
|
38
|
+
* @memberof IReqoreIntent
|
|
39
|
+
* @example
|
|
40
|
+
* <ReqoreInput intent="info" />
|
|
41
|
+
* <ReqoreInput intent="success" />
|
|
42
|
+
* <ReqoreInput intent="pending" />
|
|
43
|
+
* <ReqoreInput intent="warning" />
|
|
44
|
+
* <ReqoreInput intent="danger" />
|
|
45
|
+
* <ReqoreInput intent="muted" />
|
|
46
|
+
*/
|
|
47
|
+
intent?: TReqoreIntent;
|
|
48
|
+
}
|
|
49
|
+
export interface IWithReqoreCustomTheme {
|
|
50
|
+
/**
|
|
51
|
+
* The custom theme of the component
|
|
52
|
+
* @default none
|
|
53
|
+
* @type IReqoreCustomTheme
|
|
54
|
+
* @memberof IWithReqoreCustomTheme
|
|
55
|
+
* @example
|
|
56
|
+
* <ReqoreInput customTheme={{ main: '#ff0000' }} />
|
|
57
|
+
* <ReqoreInput customTheme={{ main: '#ff0000', text: { color: '#0000ff' } }} />
|
|
58
|
+
*/
|
|
59
|
+
customTheme?: IReqoreCustomTheme;
|
|
60
|
+
}
|
|
61
|
+
export interface IWithReqoreTooltip {
|
|
62
|
+
/**
|
|
63
|
+
* The tooltip of the component
|
|
64
|
+
* @default none
|
|
65
|
+
* @type string | IReqoreTooltip
|
|
66
|
+
* @memberof IWithReqoreTooltip
|
|
67
|
+
* @example
|
|
68
|
+
* <ReqoreInput tooltip="This is a tooltip" />
|
|
69
|
+
* <ReqoreInput tooltip={{ content: 'This is a tooltip' }} />
|
|
70
|
+
* <ReqoreInput tooltip={{ content: 'This is a tooltip', position: 'top' }} />
|
|
71
|
+
* <ReqoreInput tooltip={{ content: 'This is a tooltip', position: 'top', handle: 'focus', useTargetWidth: true, noArrow: true }} />
|
|
72
|
+
*/
|
|
73
|
+
tooltip?: string | IReqoreTooltip;
|
|
74
|
+
}
|
|
75
|
+
export interface IWithReqoreFlat {
|
|
76
|
+
/**
|
|
77
|
+
* If true, the component will be flat
|
|
78
|
+
* @default false
|
|
79
|
+
* @type boolean
|
|
80
|
+
* @memberof IWithReqoreFlat
|
|
81
|
+
* @example
|
|
82
|
+
* <ReqoreInput flat />
|
|
83
|
+
* <ReqoreInput flat={true} />
|
|
84
|
+
* <ReqoreInput flat={false} />
|
|
85
|
+
*
|
|
86
|
+
*/
|
|
87
|
+
flat?: boolean;
|
|
88
|
+
}
|
|
6
89
|
export interface IReqoreTooltip extends IPopoverOptions {
|
|
7
90
|
}
|
|
8
91
|
export declare type TReqoreTooltipProp = string | IReqoreTooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
TEXT_FROM_SIZE,
|
|
11
11
|
TSizes,
|
|
12
12
|
} from '../../constants/sizes';
|
|
13
|
-
import { IReqoreBreadcrumbsTheme,
|
|
13
|
+
import { IReqoreBreadcrumbsTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
|
|
14
14
|
import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
|
|
15
15
|
import { calculateStringSizeInPixels } from '../../helpers/utils';
|
|
16
16
|
import { useReqoreTheme } from '../../hooks/useTheme';
|
|
@@ -28,7 +28,7 @@ export interface IReqoreBreadcrumbItemTabs {
|
|
|
28
28
|
tabs: IReqoreTabsListItem[];
|
|
29
29
|
onTabChange: (tabId: string | number) => any;
|
|
30
30
|
activeTab: string;
|
|
31
|
-
activeTabIntent?:
|
|
31
|
+
activeTabIntent?: TReqoreIntent;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
export interface IReqoreBreadcrumbItem {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { IReqoreBreadcrumbItem } from '.';
|
|
4
4
|
import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
|
|
@@ -123,15 +123,14 @@ const ReqoreBreadcrumbsItem = forwardRef(
|
|
|
123
123
|
}: IReqoreBreadcrumbItemProps,
|
|
124
124
|
ref
|
|
125
125
|
) => {
|
|
126
|
-
const
|
|
127
|
-
const combinedRef = useCombinedRefs(innerRef, ref);
|
|
126
|
+
const { targetRef } = useCombinedRefs(ref);
|
|
128
127
|
const theme = useReqoreTheme('breadcrumbs', customTheme);
|
|
129
128
|
|
|
130
|
-
useTooltip(
|
|
129
|
+
useTooltip(targetRef?.current, tooltip);
|
|
131
130
|
|
|
132
131
|
return (
|
|
133
132
|
<StyledBreadcrumbItem
|
|
134
|
-
ref={
|
|
133
|
+
ref={targetRef}
|
|
135
134
|
active={active}
|
|
136
135
|
interactive={interactive || !!props?.onClick}
|
|
137
136
|
className='reqore-breadcrumbs-item'
|