glints-aries 4.0.250 → 4.0.252
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/es/@next/Modal/Modal.stories.d.ts +1 -0
- package/es/@next/Select/components/Activator/ActivatorSelect.js +4 -3
- package/es/@next/Select/components/Activator/ActivatorStyle.d.ts +1 -0
- package/es/@next/Select/components/Activator/ActivatorStyle.js +6 -1
- package/es/@next/Tooltip/Tooltip.d.ts +2 -1
- package/es/@next/Tooltip/Tooltip.js +3 -1
- package/es/@next/Tooltip/TooltipStyle.d.ts +3 -1
- package/es/@next/Tooltip/TooltipStyle.js +4 -2
- package/lib/@next/Modal/Modal.stories.d.ts +1 -0
- package/lib/@next/Select/components/Activator/ActivatorSelect.js +3 -2
- package/lib/@next/Select/components/Activator/ActivatorStyle.d.ts +1 -0
- package/lib/@next/Select/components/Activator/ActivatorStyle.js +8 -2
- package/lib/@next/Tooltip/Tooltip.d.ts +2 -1
- package/lib/@next/Tooltip/Tooltip.js +3 -1
- package/lib/@next/Tooltip/TooltipStyle.d.ts +3 -1
- package/lib/@next/Tooltip/TooltipStyle.js +4 -2
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import React, { useEffect, useRef, useState } from 'react';
|
|
|
5
5
|
import { Icon } from '../../../Icon';
|
|
6
6
|
import { Typography } from '../../../Typography';
|
|
7
7
|
import { Blue, Neutral } from '../../../utilities/colors';
|
|
8
|
-
import { StyledSelect, StyledTag, TagsContainer } from './ActivatorStyle';
|
|
8
|
+
import { StyledSelect, StyledSelectTypography, StyledTag, TagsContainer } from './ActivatorStyle';
|
|
9
9
|
export var ActivatorSelect = function ActivatorSelect(_ref) {
|
|
10
10
|
var placeholder = _ref.placeholder,
|
|
11
11
|
selectedValues = _ref.selectedValues,
|
|
@@ -76,9 +76,10 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
|
|
|
76
76
|
onClick: handleClick,
|
|
77
77
|
disabled: disabled,
|
|
78
78
|
width: width
|
|
79
|
-
}), allowMultiple ? tagsMarkup() : /*#__PURE__*/React.createElement(
|
|
79
|
+
}), allowMultiple ? tagsMarkup() : /*#__PURE__*/React.createElement(StyledSelectTypography, {
|
|
80
80
|
variant: "body1",
|
|
81
|
-
|
|
81
|
+
"data-disabled": disabled,
|
|
82
|
+
color: hasSelectedValues ? Neutral.B18 : Neutral.B40
|
|
82
83
|
}, hasSelectedValues ? selectedLabels[0] : placeholderMarkup), /*#__PURE__*/React.createElement(Icon, {
|
|
83
84
|
height: 24,
|
|
84
85
|
name: "ri-arrow-m-down-line",
|
|
@@ -7,3 +7,4 @@ export declare const StyledTextInput: import("styled-components").StyledComponen
|
|
|
7
7
|
canClear?: boolean;
|
|
8
8
|
onChange?: (value: string) => void;
|
|
9
9
|
} & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
|
|
10
|
+
export declare const StyledSelectTypography: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../../../Typography").TypographyProps) => JSX.Element, any, {}, never>;
|
|
@@ -6,6 +6,7 @@ import { NotoSans } from '../../../utilities/fonts';
|
|
|
6
6
|
import { space8 } from '../../../utilities/spacing';
|
|
7
7
|
import { TextInput } from '../../../TextInput';
|
|
8
8
|
import { Tag } from '../../../Tag';
|
|
9
|
+
import { Typography } from '../../../Typography';
|
|
9
10
|
export var StyledSelect = styled.button.withConfig({
|
|
10
11
|
displayName: "ActivatorStyle__StyledSelect",
|
|
11
12
|
componentId: "sc-rui73p-0"
|
|
@@ -25,4 +26,8 @@ export var StyledTextInput = styled(TextInput).withConfig({
|
|
|
25
26
|
componentId: "sc-rui73p-3"
|
|
26
27
|
})(["width:", ";"], function (props) {
|
|
27
28
|
return props.width;
|
|
28
|
-
});
|
|
29
|
+
});
|
|
30
|
+
export var StyledSelectTypography = styled(Typography).withConfig({
|
|
31
|
+
displayName: "ActivatorStyle__StyledSelectTypography",
|
|
32
|
+
componentId: "sc-rui73p-4"
|
|
33
|
+
})(["&[data-disabled='true']{color:", ";}"], Neutral.B85);
|
|
@@ -5,6 +5,7 @@ export declare type TooltipProps = {
|
|
|
5
5
|
preferredPosition?: TooltipPosition;
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
content: React.ReactNode;
|
|
8
|
+
zIndex?: number;
|
|
8
9
|
};
|
|
9
|
-
export declare const Tooltip: ({ children, content, preferredPosition, }: TooltipProps) => JSX.Element;
|
|
10
|
+
export declare const Tooltip: ({ children, content, preferredPosition, zIndex, }: TooltipProps) => JSX.Element;
|
|
10
11
|
export {};
|
|
@@ -52,7 +52,8 @@ export var Tooltip = function Tooltip(_ref) {
|
|
|
52
52
|
var children = _ref.children,
|
|
53
53
|
content = _ref.content,
|
|
54
54
|
_ref$preferredPositio = _ref.preferredPosition,
|
|
55
|
-
preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio
|
|
55
|
+
preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio,
|
|
56
|
+
zIndex = _ref.zIndex;
|
|
56
57
|
var tooltipRef = useRef(null);
|
|
57
58
|
var elRef = useRef(null);
|
|
58
59
|
var tooltipPositionsHandlerRef = useRef(null);
|
|
@@ -122,6 +123,7 @@ export var Tooltip = function Tooltip(_ref) {
|
|
|
122
123
|
}, children), isActive && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, {
|
|
123
124
|
"data-position": position,
|
|
124
125
|
ref: tooltipRef,
|
|
126
|
+
zIndex: zIndex,
|
|
125
127
|
style: {
|
|
126
128
|
top: (toolTipCoord == null ? void 0 : toolTipCoord.top) + 'px',
|
|
127
129
|
left: (toolTipCoord == null ? void 0 : toolTipCoord.left) + 'px',
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export declare const StyledTooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
export declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
zIndex?: number;
|
|
4
|
+
}, never>;
|
|
3
5
|
export declare const StyledTooltipArrow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -11,11 +11,13 @@ var background = Neutral.B18;
|
|
|
11
11
|
export var StyledTooltipContainer = styled.div.withConfig({
|
|
12
12
|
displayName: "TooltipStyle__StyledTooltipContainer",
|
|
13
13
|
componentId: "sc-37e5z7-0"
|
|
14
|
-
})(["display:inline-block;position:relative
|
|
14
|
+
})(["display:inline-block;position:relative;> svg{display:block;}"]);
|
|
15
15
|
export var StyledTooltip = styled.div.withConfig({
|
|
16
16
|
displayName: "TooltipStyle__StyledTooltip",
|
|
17
17
|
componentId: "sc-37e5z7-1"
|
|
18
|
-
})(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";
|
|
18
|
+
})(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";overflow-wrap:break-word;line-height:1;z-index:", ";&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}@media (max-width:", "){min-width:69px;}"], borderRadius2, space8, space12, Neutral.B100, background, function (props) {
|
|
19
|
+
return props.zIndex ? props.zIndex : 100;
|
|
20
|
+
}, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, verticalMargin, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, background, nonCentralArrowMargin, background, arrowSize, background, nonCentralArrowMargin, Breakpoints.large);
|
|
19
21
|
export var StyledTooltipArrow = styled.div.withConfig({
|
|
20
22
|
displayName: "TooltipStyle__StyledTooltipArrow",
|
|
21
23
|
componentId: "sc-37e5z7-2"
|
|
@@ -83,9 +83,10 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
|
|
|
83
83
|
onClick: handleClick,
|
|
84
84
|
disabled: disabled,
|
|
85
85
|
width: width
|
|
86
|
-
}), allowMultiple ? tagsMarkup() : /*#__PURE__*/_react["default"].createElement(
|
|
86
|
+
}), allowMultiple ? tagsMarkup() : /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledSelectTypography, {
|
|
87
87
|
variant: "body1",
|
|
88
|
-
|
|
88
|
+
"data-disabled": disabled,
|
|
89
|
+
color: hasSelectedValues ? _colors.Neutral.B18 : _colors.Neutral.B40
|
|
89
90
|
}, hasSelectedValues ? selectedLabels[0] : placeholderMarkup), /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
|
|
90
91
|
height: 24,
|
|
91
92
|
name: "ri-arrow-m-down-line",
|
|
@@ -7,3 +7,4 @@ export declare const StyledTextInput: import("styled-components").StyledComponen
|
|
|
7
7
|
canClear?: boolean;
|
|
8
8
|
onChange?: (value: string) => void;
|
|
9
9
|
} & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
|
|
10
|
+
export declare const StyledSelectTypography: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../../../Typography").TypographyProps) => JSX.Element, any, {}, never>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
exports.__esModule = true;
|
|
5
|
-
exports.TagsContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelect = void 0;
|
|
5
|
+
exports.TagsContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelectTypography = exports.StyledSelect = void 0;
|
|
6
6
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
7
7
|
var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints/Breakpoints"));
|
|
8
8
|
var _borderRadius = require("../../../utilities/borderRadius");
|
|
@@ -11,6 +11,7 @@ var _fonts = require("../../../utilities/fonts");
|
|
|
11
11
|
var _spacing = require("../../../utilities/spacing");
|
|
12
12
|
var _TextInput = require("../../../TextInput");
|
|
13
13
|
var _Tag = require("../../../Tag");
|
|
14
|
+
var _Typography = require("../../../Typography");
|
|
14
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
17
|
var StyledSelect = _styledComponents["default"].button.withConfig({
|
|
@@ -36,4 +37,9 @@ var StyledTextInput = (0, _styledComponents["default"])(_TextInput.TextInput).wi
|
|
|
36
37
|
})(["width:", ";"], function (props) {
|
|
37
38
|
return props.width;
|
|
38
39
|
});
|
|
39
|
-
exports.StyledTextInput = StyledTextInput;
|
|
40
|
+
exports.StyledTextInput = StyledTextInput;
|
|
41
|
+
var StyledSelectTypography = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
|
|
42
|
+
displayName: "ActivatorStyle__StyledSelectTypography",
|
|
43
|
+
componentId: "sc-rui73p-4"
|
|
44
|
+
})(["&[data-disabled='true']{color:", ";}"], _colors.Neutral.B85);
|
|
45
|
+
exports.StyledSelectTypography = StyledSelectTypography;
|
|
@@ -5,6 +5,7 @@ export declare type TooltipProps = {
|
|
|
5
5
|
preferredPosition?: TooltipPosition;
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
content: React.ReactNode;
|
|
8
|
+
zIndex?: number;
|
|
8
9
|
};
|
|
9
|
-
export declare const Tooltip: ({ children, content, preferredPosition, }: TooltipProps) => JSX.Element;
|
|
10
|
+
export declare const Tooltip: ({ children, content, preferredPosition, zIndex, }: TooltipProps) => JSX.Element;
|
|
10
11
|
export {};
|
|
@@ -58,7 +58,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
58
58
|
var children = _ref.children,
|
|
59
59
|
content = _ref.content,
|
|
60
60
|
_ref$preferredPositio = _ref.preferredPosition,
|
|
61
|
-
preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio
|
|
61
|
+
preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio,
|
|
62
|
+
zIndex = _ref.zIndex;
|
|
62
63
|
var tooltipRef = (0, _react.useRef)(null);
|
|
63
64
|
var elRef = (0, _react.useRef)(null);
|
|
64
65
|
var tooltipPositionsHandlerRef = (0, _react.useRef)(null);
|
|
@@ -128,6 +129,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
128
129
|
}, children), isActive && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltip, {
|
|
129
130
|
"data-position": position,
|
|
130
131
|
ref: tooltipRef,
|
|
132
|
+
zIndex: zIndex,
|
|
131
133
|
style: {
|
|
132
134
|
top: (toolTipCoord == null ? void 0 : toolTipCoord.top) + 'px',
|
|
133
135
|
left: (toolTipCoord == null ? void 0 : toolTipCoord.left) + 'px',
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export declare const StyledTooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
export declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
zIndex?: number;
|
|
4
|
+
}, never>;
|
|
3
5
|
export declare const StyledTooltipArrow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -18,12 +18,14 @@ var background = _colors.Neutral.B18;
|
|
|
18
18
|
var StyledTooltipContainer = _styledComponents["default"].div.withConfig({
|
|
19
19
|
displayName: "TooltipStyle__StyledTooltipContainer",
|
|
20
20
|
componentId: "sc-37e5z7-0"
|
|
21
|
-
})(["display:inline-block;position:relative
|
|
21
|
+
})(["display:inline-block;position:relative;> svg{display:block;}"]);
|
|
22
22
|
exports.StyledTooltipContainer = StyledTooltipContainer;
|
|
23
23
|
var StyledTooltip = _styledComponents["default"].div.withConfig({
|
|
24
24
|
displayName: "TooltipStyle__StyledTooltip",
|
|
25
25
|
componentId: "sc-37e5z7-1"
|
|
26
|
-
})(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";
|
|
26
|
+
})(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";overflow-wrap:break-word;line-height:1;z-index:", ";&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}@media (max-width:", "){min-width:69px;}"], _borderRadius.borderRadius2, _spacing.space8, _spacing.space12, _colors.Neutral.B100, background, function (props) {
|
|
27
|
+
return props.zIndex ? props.zIndex : 100;
|
|
28
|
+
}, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, verticalMargin, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, background, nonCentralArrowMargin, background, arrowSize, background, nonCentralArrowMargin, Breakpoints.large);
|
|
27
29
|
exports.StyledTooltip = StyledTooltip;
|
|
28
30
|
var StyledTooltipArrow = _styledComponents["default"].div.withConfig({
|
|
29
31
|
displayName: "TooltipStyle__StyledTooltipArrow",
|