orcs-design-system 3.2.21 → 3.2.22
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.
|
@@ -63,7 +63,7 @@ export const ActionsMenuHeading = styled(props => {
|
|
|
63
63
|
componentId: "sc-yvbni2-5"
|
|
64
64
|
})(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontWeights.1")(props), props => themeGet("colors.greyDarkest")(props), props => props.canClick ? "pointer" : "default");
|
|
65
65
|
export const ActionsMenuItem = styled(props => {
|
|
66
|
-
var _actionMenu$getItemPr;
|
|
66
|
+
var _actionMenu$context$o, _actionMenu$context, _actionMenu$getItemPr;
|
|
67
67
|
const {
|
|
68
68
|
id,
|
|
69
69
|
onItemClick,
|
|
@@ -74,9 +74,11 @@ export const ActionsMenuItem = styled(props => {
|
|
|
74
74
|
...others
|
|
75
75
|
} = props;
|
|
76
76
|
const Component = as ? as : others.href ? "a" : "button";
|
|
77
|
+
const disabled = (_actionMenu$context$o = !(actionMenu !== null && actionMenu !== void 0 && (_actionMenu$context = actionMenu.context) !== null && _actionMenu$context !== void 0 && _actionMenu$context.open)) !== null && _actionMenu$context$o !== void 0 ? _actionMenu$context$o : false;
|
|
77
78
|
let newProps = {
|
|
78
79
|
...others,
|
|
79
|
-
...((actionMenu === null || actionMenu === void 0 || (_actionMenu$getItemPr = actionMenu.getItemProps) === null || _actionMenu$getItemPr === void 0 ? void 0 : _actionMenu$getItemPr.call(actionMenu)) || {})
|
|
80
|
+
...((actionMenu === null || actionMenu === void 0 || (_actionMenu$getItemPr = actionMenu.getItemProps) === null || _actionMenu$getItemPr === void 0 ? void 0 : _actionMenu$getItemPr.call(actionMenu)) || {}),
|
|
81
|
+
disabled
|
|
80
82
|
};
|
|
81
83
|
const {
|
|
82
84
|
onClick: originalOnClick
|
|
@@ -89,7 +91,8 @@ export const ActionsMenuItem = styled(props => {
|
|
|
89
91
|
newProps = {
|
|
90
92
|
...others,
|
|
91
93
|
type: "button",
|
|
92
|
-
["data-action-menu-id"]: id
|
|
94
|
+
["data-action-menu-id"]: id,
|
|
95
|
+
disabled
|
|
93
96
|
};
|
|
94
97
|
}
|
|
95
98
|
return /*#__PURE__*/_jsx(Component, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { cloneElement, useState } from "react";
|
|
1
|
+
import React, { cloneElement, useEffect, useState } 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";
|
|
@@ -26,7 +26,7 @@ const StyledPopover = styled.div.withConfig({
|
|
|
26
26
|
componentId: "sc-1bwoak-1"
|
|
27
27
|
})(["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;&.visible{opacity:1;pointer-events:auto;}& 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:-5px;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:-6px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-8px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-4px;margin-left:-5px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-4px;margin-left:-5px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-8px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-4px;margin-right:-5px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-5px;transform:rotate(180deg);}&:after{left:auto;right:-6px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-4px;margin-right:-5px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;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.grey"));
|
|
28
28
|
export default function Popover(_ref) {
|
|
29
|
-
var _children$type, _context$
|
|
29
|
+
var _children$type, _context$refs2;
|
|
30
30
|
let {
|
|
31
31
|
children,
|
|
32
32
|
direction = "right",
|
|
@@ -106,6 +106,23 @@ export default function Popover(_ref) {
|
|
|
106
106
|
});
|
|
107
107
|
}
|
|
108
108
|
const directionClass = context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement;
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
var _context$refs, _floatingEl$getElemen;
|
|
111
|
+
// Following code disables the tabbing of elements for popovers when it is not open.
|
|
112
|
+
const floatingEl = context === null || context === void 0 || (_context$refs = context.refs) === null || _context$refs === void 0 || (_context$refs = _context$refs.floating) === null || _context$refs === void 0 ? void 0 : _context$refs.current;
|
|
113
|
+
if (!floatingEl) return;
|
|
114
|
+
const childrenAnchors = Array.from((_floatingEl$getElemen = floatingEl.getElementsByTagName) === null || _floatingEl$getElemen === void 0 ? void 0 : _floatingEl$getElemen.call(floatingEl, "a"));
|
|
115
|
+
if (!childrenAnchors.length) return;
|
|
116
|
+
if (visible) {
|
|
117
|
+
childrenAnchors.forEach(anchor => {
|
|
118
|
+
anchor.tabIndex = "";
|
|
119
|
+
});
|
|
120
|
+
} else {
|
|
121
|
+
childrenAnchors.forEach(anchor => {
|
|
122
|
+
anchor.tabIndex = "-1";
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
}, [visible, context]);
|
|
109
126
|
const Popover = /*#__PURE__*/_jsx(StyledPopover, {
|
|
110
127
|
textAlign: textAlign,
|
|
111
128
|
width: width,
|
|
@@ -127,7 +144,7 @@ export default function Popover(_ref) {
|
|
|
127
144
|
root: getFloatingUiRootElement(context.refs.reference),
|
|
128
145
|
preserveTabOrder: true,
|
|
129
146
|
children: text && (visible ? /*#__PURE__*/_jsx(FloatingFocusManager, {
|
|
130
|
-
initialFocus: (_context$
|
|
147
|
+
initialFocus: (_context$refs2 = context.refs) === null || _context$refs2 === void 0 ? void 0 : _context$refs2.reference,
|
|
131
148
|
context: context,
|
|
132
149
|
modal: false,
|
|
133
150
|
children: Popover
|