orcs-design-system 3.2.35 → 3.2.37
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.
|
@@ -14,7 +14,7 @@ const crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:
|
|
|
14
14
|
const StyledActionsMenuContainer = styled.div.withConfig({
|
|
15
15
|
displayName: "ActionsMenu__StyledActionsMenuContainer",
|
|
16
16
|
componentId: "sc-yvbni2-0"
|
|
17
|
-
})(["pointer-events:none;opacity:0;visibility:hidden;&.visible{visibility:visible;opacity:1;pointer-events:auto;}"]);
|
|
17
|
+
})(["pointer-events:none;opacity:0;visibility:hidden;&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;}&.visible{visibility:visible;opacity:1;pointer-events:auto;}"]);
|
|
18
18
|
const Wrapper = styled.div.withConfig({
|
|
19
19
|
displayName: "ActionsMenu__Wrapper",
|
|
20
20
|
componentId: "sc-yvbni2-1"
|
|
@@ -134,7 +134,7 @@ export const ActionsMenuBody = _ref => {
|
|
|
134
134
|
const childrenRef = children.ref;
|
|
135
135
|
const triggerRef = useMergeRefs([actionMenu.refs.setReference, childrenRef]);
|
|
136
136
|
const ref = useMergeRefs([actionMenu.refs.setFloating]);
|
|
137
|
-
const triggerProps = {
|
|
137
|
+
const triggerProps = useMemo(() => ({
|
|
138
138
|
ariaLabel,
|
|
139
139
|
"aria-label": ariaLabel,
|
|
140
140
|
onFocus: onTriggerFocus,
|
|
@@ -146,7 +146,7 @@ export const ActionsMenuBody = _ref => {
|
|
|
146
146
|
"data-state": actionMenu.open ? "open" : "closed",
|
|
147
147
|
"data-testid": dataTestId
|
|
148
148
|
})
|
|
149
|
-
};
|
|
149
|
+
}), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId]);
|
|
150
150
|
let triggerComponent = /*#__PURE__*/_jsx(Control, {
|
|
151
151
|
...triggerProps,
|
|
152
152
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
@@ -168,24 +168,15 @@ export const ActionsMenuBody = _ref => {
|
|
|
168
168
|
},
|
|
169
169
|
actionMenu
|
|
170
170
|
}), [closeOnClick, closeMenu, id, actionMenu]);
|
|
171
|
-
const
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
className: "actionMenu-content ".concat(visible ? "visible" : ""),
|
|
181
|
-
"aria-hidden": visible ? "false" : "true",
|
|
182
|
-
"data-testid": "".concat(dataTestId, "__menu"),
|
|
183
|
-
children: /*#__PURE__*/_jsx(Menu, {
|
|
184
|
-
menuWidth: menuWidth,
|
|
185
|
-
isOpen: toggleState,
|
|
186
|
-
children: children
|
|
187
|
-
})
|
|
188
|
-
});
|
|
171
|
+
const style = useMemo(() => ({
|
|
172
|
+
...actionMenu.floatingStyles,
|
|
173
|
+
zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
|
|
174
|
+
}), [actionMenu.floatingStyles, actionMenu.refs.reference]);
|
|
175
|
+
const menuDataTestId = useMemo(() => "".concat(dataTestId, "__menu"), [dataTestId]);
|
|
176
|
+
const {
|
|
177
|
+
getFloatingProps
|
|
178
|
+
} = actionMenu;
|
|
179
|
+
const floatingProps = useMemo(() => getFloatingProps(props), [getFloatingProps, props]);
|
|
189
180
|
const component = /*#__PURE__*/_jsx(ActionMenuContext.Provider, {
|
|
190
181
|
value: value,
|
|
191
182
|
children: /*#__PURE__*/_jsxs(Wrapper, {
|
|
@@ -195,16 +186,39 @@ export const ActionsMenuBody = _ref => {
|
|
|
195
186
|
children: /*#__PURE__*/_jsx(FloatingFocusManager, {
|
|
196
187
|
context: actionMenu.context,
|
|
197
188
|
modal: true,
|
|
198
|
-
children:
|
|
189
|
+
children: /*#__PURE__*/_jsx(StyledActionsMenuContainer, {
|
|
190
|
+
"aria-labelledby": actionMenu.labelId,
|
|
191
|
+
"data-testid": menuDataTestId,
|
|
192
|
+
...floatingProps,
|
|
193
|
+
style: style,
|
|
194
|
+
className: "actionMenu-content visible",
|
|
195
|
+
"aria-hidden": "false",
|
|
196
|
+
ref: ref,
|
|
197
|
+
children: /*#__PURE__*/_jsx(Menu, {
|
|
198
|
+
menuWidth: menuWidth,
|
|
199
|
+
isOpen: toggleState,
|
|
200
|
+
children: children
|
|
201
|
+
})
|
|
202
|
+
})
|
|
199
203
|
})
|
|
200
|
-
}) :
|
|
204
|
+
}) :
|
|
205
|
+
/*#__PURE__*/
|
|
201
206
|
/* * HACK: Fixing all the broken tests in teamform-app-ui is too
|
|
202
207
|
time consuming * right this moment with a lot of the tests asserting
|
|
203
208
|
against ActionsMenu items. * Rendering the markup even when closed
|
|
204
209
|
but in a hidden state ensures that tests pass. * Ideally, we would
|
|
205
210
|
update all the tests in teamform-app-ui to open the ActionsMenu *
|
|
206
211
|
before assertion. **/
|
|
207
|
-
|
|
212
|
+
_jsx(StyledActionsMenuContainer, {
|
|
213
|
+
"aria-labelledby": actionMenu.labelId,
|
|
214
|
+
"data-testid": menuDataTestId,
|
|
215
|
+
className: "actionMenu-content hack-for-legacy-tests",
|
|
216
|
+
children: /*#__PURE__*/_jsx(Menu, {
|
|
217
|
+
menuWidth: menuWidth,
|
|
218
|
+
isOpen: toggleState,
|
|
219
|
+
children: children
|
|
220
|
+
})
|
|
221
|
+
})]
|
|
208
222
|
})
|
|
209
223
|
});
|
|
210
224
|
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
1
|
+
import React, { useState, useMemo } from "react";
|
|
2
2
|
import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal, safePolygon, FloatingFocusManager } from "@floating-ui/react";
|
|
3
3
|
import themeGet from "@styled-system/theme-get";
|
|
4
4
|
import styled from "styled-components";
|
|
@@ -28,9 +28,9 @@ const TooltipControl = styled.div.withConfig({
|
|
|
28
28
|
const StyledPopover = styled.div.withConfig({
|
|
29
29
|
displayName: "Popover__StyledPopover",
|
|
30
30
|
componentId: "sc-1bwoak-2"
|
|
31
|
-
})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";pointer-events:none;opacity:0;visibility:hidden
|
|
31
|
+
})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;}&.visible{opacity:1;pointer-events:auto;visibility:visible;}& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.greyMid"));
|
|
32
32
|
export default function Popover(_ref) {
|
|
33
|
-
var _refs$floating
|
|
33
|
+
var _refs$floating;
|
|
34
34
|
let {
|
|
35
35
|
children,
|
|
36
36
|
direction = "right",
|
|
@@ -82,37 +82,26 @@ export default function Popover(_ref) {
|
|
|
82
82
|
getReferenceProps,
|
|
83
83
|
getFloatingProps
|
|
84
84
|
} = useInteractions([hover, focus, dismiss, role]);
|
|
85
|
-
const triggerProps = {
|
|
85
|
+
const triggerProps = useMemo(() => ({
|
|
86
86
|
...getReferenceProps({
|
|
87
|
-
ref: refs.setReference
|
|
88
|
-
...((children === null || children === void 0 ? void 0 : children.props) || {})
|
|
87
|
+
ref: refs.setReference
|
|
89
88
|
}),
|
|
90
89
|
tabIndex: "0"
|
|
91
|
-
};
|
|
92
|
-
const directionClass = context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement;
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
className: "Tooltip popover ".concat(visible ? "visible" : "", " ").concat(directionClass),
|
|
98
|
-
ref: refs.setFloating,
|
|
99
|
-
style: {
|
|
100
|
-
...floatingStyles,
|
|
101
|
-
zIndex: getFloatingUiZIndex(context.refs.reference)
|
|
102
|
-
},
|
|
103
|
-
...getFloatingProps(),
|
|
104
|
-
ariaLabel: ariaLabel,
|
|
105
|
-
children: text
|
|
106
|
-
});
|
|
90
|
+
}), [getReferenceProps, refs.setReference]);
|
|
91
|
+
const directionClass = useMemo(() => context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement, [context.placement, direction]);
|
|
92
|
+
const style = useMemo(() => ({
|
|
93
|
+
...floatingStyles,
|
|
94
|
+
zIndex: getFloatingUiZIndex(context.refs.reference)
|
|
95
|
+
}), [floatingStyles, context.refs.reference]);
|
|
107
96
|
const containsLinks = (_refs$floating = refs.floating) === null || _refs$floating === void 0 || (_refs$floating = _refs$floating.current) === null || _refs$floating === void 0 ? void 0 : _refs$floating.querySelectorAll("a").length;
|
|
97
|
+
const visiblePopoverClassName = useMemo(() => "Tooltip popover visible ".concat(directionClass), [directionClass]);
|
|
98
|
+
const floatingProps = useMemo(() => getFloatingProps(props), [getFloatingProps, props]);
|
|
108
99
|
return /*#__PURE__*/_jsxs(Container, {
|
|
109
100
|
inlineBlock: inlineBlock,
|
|
110
|
-
"data-testid": "".concat((children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props["data-testid"]) || "popover", "-trigger"),
|
|
111
101
|
...props,
|
|
112
102
|
...triggerProps,
|
|
113
103
|
"aria-describedby": context.floatingId,
|
|
114
104
|
children: [variant === "tooltip" && /*#__PURE__*/_jsx(TooltipControl, {
|
|
115
|
-
...triggerProps,
|
|
116
105
|
active: visible,
|
|
117
106
|
tabIndex: "0",
|
|
118
107
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
@@ -127,16 +116,42 @@ export default function Popover(_ref) {
|
|
|
127
116
|
context: context,
|
|
128
117
|
modal: false,
|
|
129
118
|
initialFocus: isRenderedInReactSelectMenu(context.refs.reference) && -1,
|
|
130
|
-
children:
|
|
131
|
-
|
|
132
|
-
|
|
119
|
+
children: /*#__PURE__*/_jsx(StyledPopover, {
|
|
120
|
+
className: visiblePopoverClassName,
|
|
121
|
+
ref: refs.setFloating,
|
|
122
|
+
textAlign: textAlign,
|
|
123
|
+
width: width,
|
|
124
|
+
enableSelectAll: enableSelectAll,
|
|
125
|
+
ariaLabel: ariaLabel,
|
|
126
|
+
style: style,
|
|
127
|
+
...floatingProps,
|
|
128
|
+
children: text
|
|
129
|
+
})
|
|
130
|
+
}) : /*#__PURE__*/_jsx(StyledPopover, {
|
|
131
|
+
className: visiblePopoverClassName,
|
|
132
|
+
ref: refs.setFloating,
|
|
133
|
+
textAlign: textAlign,
|
|
134
|
+
width: width,
|
|
135
|
+
enableSelectAll: enableSelectAll,
|
|
136
|
+
ariaLabel: ariaLabel,
|
|
137
|
+
style: style,
|
|
138
|
+
...floatingProps,
|
|
139
|
+
children: text
|
|
140
|
+
})
|
|
141
|
+
}) :
|
|
142
|
+
/*#__PURE__*/
|
|
133
143
|
/*
|
|
134
144
|
* HACK: Fixing all the broken tests in teamform-app-ui is too time consuming
|
|
135
145
|
* right this moment with a lot of the tests asserting against Popover items.
|
|
136
146
|
* Rendering the markup even when closed but in a hidden state ensures that tests pass.
|
|
137
147
|
* Ideally, we would update all the tests in teamform-app-ui to open the Popover
|
|
138
148
|
* before assertion.
|
|
139
|
-
**/
|
|
149
|
+
**/
|
|
150
|
+
_jsx(StyledPopover, {
|
|
151
|
+
ariaLabel: ariaLabel,
|
|
152
|
+
className: "Tooltip popover hack-for-legacy-tests",
|
|
153
|
+
children: text
|
|
154
|
+
})), children]
|
|
140
155
|
});
|
|
141
156
|
}
|
|
142
157
|
Popover.propTypes = {
|