orcs-design-system 3.2.26 → 3.2.27
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { cloneElement,
|
|
1
|
+
import React, { cloneElement, 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;visibility:hidden;&.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:-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
|
|
29
|
+
var _children$type;
|
|
30
30
|
let {
|
|
31
31
|
children,
|
|
32
32
|
direction = "right",
|
|
@@ -105,23 +105,6 @@ export default function Popover(_ref) {
|
|
|
105
105
|
});
|
|
106
106
|
}
|
|
107
107
|
const directionClass = context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement;
|
|
108
|
-
useEffect(() => {
|
|
109
|
-
var _context$refs, _floatingEl$getElemen;
|
|
110
|
-
// Following code disables the tabbing of elements for popovers when it is not open.
|
|
111
|
-
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;
|
|
112
|
-
if (!floatingEl) return;
|
|
113
|
-
const childrenAnchors = Array.from((_floatingEl$getElemen = floatingEl.getElementsByTagName) === null || _floatingEl$getElemen === void 0 ? void 0 : _floatingEl$getElemen.call(floatingEl, "a"));
|
|
114
|
-
if (!childrenAnchors.length) return;
|
|
115
|
-
if (visible) {
|
|
116
|
-
childrenAnchors.forEach(anchor => {
|
|
117
|
-
anchor.tabIndex = "";
|
|
118
|
-
});
|
|
119
|
-
} else {
|
|
120
|
-
childrenAnchors.forEach(anchor => {
|
|
121
|
-
anchor.tabIndex = "-1";
|
|
122
|
-
});
|
|
123
|
-
}
|
|
124
|
-
}, [visible, context]);
|
|
125
108
|
const Popover = /*#__PURE__*/_jsx(StyledPopover, {
|
|
126
109
|
textAlign: textAlign,
|
|
127
110
|
width: width,
|
|
@@ -143,7 +126,6 @@ export default function Popover(_ref) {
|
|
|
143
126
|
root: getFloatingUiRootElement(context.refs.reference),
|
|
144
127
|
preserveTabOrder: true,
|
|
145
128
|
children: /*#__PURE__*/_jsx(FloatingFocusManager, {
|
|
146
|
-
initialFocus: (_context$refs2 = context.refs) === null || _context$refs2 === void 0 ? void 0 : _context$refs2.reference,
|
|
147
129
|
context: context,
|
|
148
130
|
modal: false,
|
|
149
131
|
children: Popover
|