@primer/components 0.0.0-20219819465 → 0.0.0-202198201647
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/CHANGELOG.md +1 -1
- package/dist/browser.esm.js +254 -253
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +332 -331
- package/dist/browser.umd.js.map +1 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
- package/lib/AnchoredOverlay/AnchoredOverlay.js +3 -11
- package/lib/FilteredActionList/FilteredActionList.js +31 -5
- package/lib/Overlay.d.ts +1 -2
- package/lib/Overlay.js +5 -10
- package/lib/Token/TokenBase.d.ts +15 -1
- package/lib/hooks/useOpenAndCloseFocus.d.ts +1 -2
- package/lib/hooks/useOpenAndCloseFocus.js +2 -7
- package/lib/hooks/useOverlay.d.ts +1 -2
- package/lib/hooks/useOverlay.js +2 -4
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -8
- package/lib/utils/types/index.d.ts +0 -1
- package/lib/utils/types/index.js +0 -13
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
- package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
- package/lib-esm/Overlay.d.ts +1 -2
- package/lib-esm/Overlay.js +5 -8
- package/lib-esm/Token/TokenBase.d.ts +15 -1
- package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +1 -2
- package/lib-esm/hooks/useOpenAndCloseFocus.js +2 -7
- package/lib-esm/hooks/useOverlay.d.ts +1 -2
- package/lib-esm/hooks/useOverlay.js +2 -4
- package/lib-esm/index.d.ts +0 -1
- package/lib-esm/index.js +0 -1
- package/lib-esm/utils/types/index.d.ts +0 -1
- package/lib-esm/utils/types/index.js +1 -2
- package/package.json +1 -1
- package/lib/Autocomplete/Autocomplete.d.ts +0 -40
- package/lib/Autocomplete/Autocomplete.js +0 -68
- package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
- package/lib/Autocomplete/AutocompleteContext.js +0 -11
- package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib/Autocomplete/AutocompleteInput.js +0 -150
- package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
- package/lib/Autocomplete/AutocompleteMenu.js +0 -223
- package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
- package/lib/Autocomplete/AutocompleteOverlay.js +0 -74
- package/lib/Autocomplete/index.d.ts +0 -2
- package/lib/Autocomplete/index.js +0 -15
- package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib/utils/scrollIntoViewingArea.js +0 -39
- package/lib/utils/types/MandateProps.d.ts +0 -3
- package/lib/utils/types/MandateProps.js +0 -1
- package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
- package/lib-esm/Autocomplete/Autocomplete.js +0 -47
- package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
- package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib-esm/Autocomplete/AutocompleteInput.js +0 -131
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
- package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -204
- package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
- package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -56
- package/lib-esm/Autocomplete/index.d.ts +0 -2
- package/lib-esm/Autocomplete/index.js +0 -1
- package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
- package/lib-esm/utils/types/MandateProps.d.ts +0 -3
- package/lib-esm/utils/types/MandateProps.js +0 -1
@@ -2,7 +2,6 @@ import React from 'react';
|
|
2
2
|
import { OverlayProps } from '../Overlay';
|
3
3
|
import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
|
4
4
|
import { FocusZoneHookSettings } from '../hooks/useFocusZone';
|
5
|
-
import { PositionSettings } from '../behaviors/anchoredPosition';
|
6
5
|
interface AnchoredOverlayPropsWithAnchor {
|
7
6
|
/**
|
8
7
|
* A custom function component used to render the anchor element.
|
@@ -53,7 +52,7 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
|
|
53
52
|
*/
|
54
53
|
focusZoneSettings?: Partial<FocusZoneHookSettings>;
|
55
54
|
}
|
56
|
-
export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor)
|
55
|
+
export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor);
|
57
56
|
/**
|
58
57
|
* An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
|
59
58
|
* The overlay can be opened and navigated using keyboard or mouse.
|
@@ -40,9 +40,7 @@ const AnchoredOverlay = ({
|
|
40
40
|
width,
|
41
41
|
overlayProps,
|
42
42
|
focusTrapSettings,
|
43
|
-
focusZoneSettings
|
44
|
-
side,
|
45
|
-
align
|
43
|
+
focusZoneSettings
|
46
44
|
}) => {
|
47
45
|
const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
|
48
46
|
const [overlayRef, updateOverlayRef] = (0, _hooks.useRenderForcingRef)();
|
@@ -72,9 +70,7 @@ const AnchoredOverlay = ({
|
|
72
70
|
position
|
73
71
|
} = (0, _hooks.useAnchoredPosition)({
|
74
72
|
anchorElementRef: anchorRef,
|
75
|
-
floatingElementRef: overlayRef
|
76
|
-
side,
|
77
|
-
align
|
73
|
+
floatingElementRef: overlayRef
|
78
74
|
}, [overlayRef.current]);
|
79
75
|
(0, _react.useEffect)(() => {
|
80
76
|
// ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
|
@@ -117,8 +113,4 @@ const AnchoredOverlay = ({
|
|
117
113
|
};
|
118
114
|
|
119
115
|
exports.AnchoredOverlay = AnchoredOverlay;
|
120
|
-
AnchoredOverlay.displayName = 'AnchoredOverlay';
|
121
|
-
AnchoredOverlay.defaultProps = {
|
122
|
-
side: 'outside-bottom',
|
123
|
-
align: 'start'
|
124
|
-
};
|
116
|
+
AnchoredOverlay.displayName = 'AnchoredOverlay';
|
@@ -7,8 +7,6 @@ exports.FilteredActionList = FilteredActionList;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
9
9
|
|
10
|
-
var _ssr = require("@react-aria/ssr");
|
11
|
-
|
12
10
|
var _TextInput = _interopRequireDefault(require("../TextInput"));
|
13
11
|
|
14
12
|
var _Box = _interopRequireDefault(require("../Box"));
|
@@ -29,7 +27,7 @@ var _useProvidedRefOrCreate = require("../hooks/useProvidedRefOrCreate");
|
|
29
27
|
|
30
28
|
var _useScrollFlash = _interopRequireDefault(require("../hooks/useScrollFlash"));
|
31
29
|
|
32
|
-
var
|
30
|
+
var _ssr = require("@react-aria/ssr");
|
33
31
|
|
34
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
35
33
|
|
@@ -39,6 +37,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
39
37
|
|
40
38
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
41
39
|
|
40
|
+
function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth') {
|
41
|
+
const {
|
42
|
+
top: childTop,
|
43
|
+
bottom: childBottom
|
44
|
+
} = child.getBoundingClientRect();
|
45
|
+
const {
|
46
|
+
top: containerTop,
|
47
|
+
bottom: containerBottom
|
48
|
+
} = container.getBoundingClientRect();
|
49
|
+
const isChildTopAboveViewingArea = childTop < containerTop + margin;
|
50
|
+
const isChildBottomBelowViewingArea = childBottom > containerBottom - margin;
|
51
|
+
|
52
|
+
if (isChildTopAboveViewingArea) {
|
53
|
+
const scrollHeightToChildTop = childTop - containerTop + container.scrollTop;
|
54
|
+
container.scrollTo({
|
55
|
+
behavior,
|
56
|
+
top: scrollHeightToChildTop - margin
|
57
|
+
});
|
58
|
+
} else if (isChildBottomBelowViewingArea) {
|
59
|
+
const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop;
|
60
|
+
container.scrollTo({
|
61
|
+
behavior,
|
62
|
+
top: scrollHeightToChildBottom + margin
|
63
|
+
});
|
64
|
+
} // either completely in view or outside viewing area on both ends, don't scroll
|
65
|
+
|
66
|
+
}
|
67
|
+
|
42
68
|
const StyledHeader = _styledComponents.default.div.withConfig({
|
43
69
|
displayName: "FilteredActionList__StyledHeader",
|
44
70
|
componentId: "yg3jkv-0"
|
@@ -86,7 +112,7 @@ function FilteredActionList({
|
|
86
112
|
activeDescendantRef.current = current;
|
87
113
|
|
88
114
|
if (current && scrollContainerRef.current && directlyActivated) {
|
89
|
-
|
115
|
+
scrollIntoViewingArea(current, scrollContainerRef.current);
|
90
116
|
}
|
91
117
|
}
|
92
118
|
}, [// List ref isn't set while loading. Need to re-bind focus zone when it changes
|
@@ -94,7 +120,7 @@ function FilteredActionList({
|
|
94
120
|
(0, _react.useEffect)(() => {
|
95
121
|
// if items changed, we want to instantly move active descendant into view
|
96
122
|
if (activeDescendantRef.current && scrollContainerRef.current) {
|
97
|
-
|
123
|
+
scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, undefined, 'auto');
|
98
124
|
}
|
99
125
|
}, [items]);
|
100
126
|
(0, _useScrollFlash.default)(scrollContainerRef);
|
package/lib/Overlay.d.ts
CHANGED
@@ -4,7 +4,7 @@ import { ComponentProps } from './utils/types';
|
|
4
4
|
import { TouchOrMouseEvent } from './hooks';
|
5
5
|
import { SxProp } from './sx';
|
6
6
|
import { AnchorSide } from './behaviors/anchoredPosition';
|
7
|
-
|
7
|
+
declare type StyledOverlayProps = {
|
8
8
|
width?: keyof typeof widthMap;
|
9
9
|
height?: keyof typeof heightMap;
|
10
10
|
maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>;
|
@@ -40,7 +40,6 @@ export declare type OverlayProps = {
|
|
40
40
|
top: number;
|
41
41
|
left: number;
|
42
42
|
portalContainerName?: string;
|
43
|
-
preventFocusOnOpen?: boolean;
|
44
43
|
} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>;
|
45
44
|
/**
|
46
45
|
* An `Overlay` is a flexible floating surface, used to display transient content such as menus,
|
package/lib/Overlay.js
CHANGED
@@ -113,7 +113,6 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
113
113
|
left,
|
114
114
|
anchorSide,
|
115
115
|
portalContainerName,
|
116
|
-
preventFocusOnOpen,
|
117
116
|
...rest
|
118
117
|
}, forwardedRef) => {
|
119
118
|
const overlayRef = (0, _react.useRef)(null);
|
@@ -129,8 +128,7 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
129
128
|
onEscape,
|
130
129
|
ignoreClickRefs,
|
131
130
|
onClickOutside,
|
132
|
-
initialFocusRef
|
133
|
-
preventFocusOnOpen
|
131
|
+
initialFocusRef
|
134
132
|
});
|
135
133
|
(0, _react.useEffect)(() => {
|
136
134
|
var _combinedRef$current;
|
@@ -159,8 +157,9 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
159
157
|
easing: slideAnimationEasing
|
160
158
|
});
|
161
159
|
}, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility]);
|
162
|
-
|
163
|
-
|
160
|
+
return /*#__PURE__*/_react.default.createElement(_Portal.default, {
|
161
|
+
containerName: portalContainerName
|
162
|
+
}, /*#__PURE__*/_react.default.createElement(StyledOverlay, _extends({
|
164
163
|
height: height,
|
165
164
|
role: role
|
166
165
|
}, rest, {
|
@@ -171,11 +170,7 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
171
170
|
...rest.style,
|
172
171
|
'--styled-overlay-visibility': visibility
|
173
172
|
}
|
174
|
-
}));
|
175
|
-
|
176
|
-
return /*#__PURE__*/_react.default.createElement(_Portal.default, {
|
177
|
-
containerName: portalContainerName
|
178
|
-
}, styledOverlay);
|
173
|
+
})));
|
179
174
|
});
|
180
175
|
|
181
176
|
Overlay.defaultProps = {
|
package/lib/Token/TokenBase.d.ts
CHANGED
@@ -5,11 +5,25 @@ export declare const tokenSizes: Record<TokenSizeKeys, string>;
|
|
5
5
|
export declare const defaultTokenSize: TokenSizeKeys;
|
6
6
|
export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
|
7
7
|
as?: 'button' | 'a' | 'span';
|
8
|
+
/**
|
9
|
+
* The function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
|
10
|
+
*/
|
8
11
|
onRemove?: () => void;
|
12
|
+
/**
|
13
|
+
* Whether the token is selected
|
14
|
+
*/
|
9
15
|
isSelected?: boolean;
|
10
|
-
|
16
|
+
/**
|
17
|
+
* The text label inside the token
|
18
|
+
*/
|
11
19
|
text: string;
|
20
|
+
/**
|
21
|
+
* A unique identifier that can be associated with the token
|
22
|
+
*/
|
12
23
|
id?: number | string;
|
24
|
+
/**
|
25
|
+
* Which size the token will be rendered at
|
26
|
+
*/
|
13
27
|
size?: TokenSizeKeys;
|
14
28
|
}
|
15
29
|
export declare const isTokenInteractive: ({ as, onClick, onFocus, tabIndex }: TokenBaseProps) => boolean;
|
@@ -3,6 +3,5 @@ export declare type UseOpenAndCloseFocusSettings = {
|
|
3
3
|
initialFocusRef?: React.RefObject<HTMLElement>;
|
4
4
|
containerRef: React.RefObject<HTMLElement>;
|
5
5
|
returnFocusRef: React.RefObject<HTMLElement>;
|
6
|
-
preventFocusOnOpen?: boolean;
|
7
6
|
};
|
8
|
-
export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef
|
7
|
+
export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef }: UseOpenAndCloseFocusSettings): void;
|
@@ -12,14 +12,9 @@ var _iterateFocusableElements = require("../utils/iterateFocusableElements");
|
|
12
12
|
function useOpenAndCloseFocus({
|
13
13
|
initialFocusRef,
|
14
14
|
returnFocusRef,
|
15
|
-
containerRef
|
16
|
-
preventFocusOnOpen
|
15
|
+
containerRef
|
17
16
|
}) {
|
18
17
|
(0, _react.useEffect)(() => {
|
19
|
-
if (preventFocusOnOpen) {
|
20
|
-
return;
|
21
|
-
}
|
22
|
-
|
23
18
|
const returnRef = returnFocusRef.current;
|
24
19
|
|
25
20
|
if (initialFocusRef && initialFocusRef.current) {
|
@@ -32,5 +27,5 @@ function useOpenAndCloseFocus({
|
|
32
27
|
return function () {
|
33
28
|
returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
|
34
29
|
};
|
35
|
-
}, [initialFocusRef, returnFocusRef, containerRef
|
30
|
+
}, [initialFocusRef, returnFocusRef, containerRef]);
|
36
31
|
}
|
@@ -7,9 +7,8 @@ export declare type UseOverlaySettings = {
|
|
7
7
|
onEscape: (e: KeyboardEvent) => void;
|
8
8
|
onClickOutside: (e: TouchOrMouseEvent) => void;
|
9
9
|
overlayRef?: React.RefObject<HTMLDivElement>;
|
10
|
-
preventFocusOnOpen?: boolean;
|
11
10
|
};
|
12
11
|
export declare type OverlayReturnProps = {
|
13
12
|
ref: React.RefObject<HTMLDivElement>;
|
14
13
|
};
|
15
|
-
export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside
|
14
|
+
export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;
|
package/lib/hooks/useOverlay.js
CHANGED
@@ -19,15 +19,13 @@ const useOverlay = ({
|
|
19
19
|
initialFocusRef,
|
20
20
|
onEscape,
|
21
21
|
ignoreClickRefs,
|
22
|
-
onClickOutside
|
23
|
-
preventFocusOnOpen
|
22
|
+
onClickOutside
|
24
23
|
}) => {
|
25
24
|
const overlayRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(_overlayRef);
|
26
25
|
(0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
|
27
26
|
containerRef: overlayRef,
|
28
27
|
returnFocusRef,
|
29
|
-
initialFocusRef
|
30
|
-
preventFocusOnOpen
|
28
|
+
initialFocusRef
|
31
29
|
});
|
32
30
|
(0, _useOnOutsideClick.useOnOutsideClick)({
|
33
31
|
containerRef: overlayRef,
|
package/lib/index.d.ts
CHANGED
@@ -24,7 +24,6 @@ export { useConfirm } from './Dialog/ConfirmationDialog';
|
|
24
24
|
export { ActionList } from './ActionList';
|
25
25
|
export { ActionMenu } from './ActionMenu';
|
26
26
|
export type { ActionMenuProps } from './ActionMenu';
|
27
|
-
export { default as Autocomplete } from './Autocomplete';
|
28
27
|
export { default as Avatar } from './Avatar';
|
29
28
|
export type { AvatarProps } from './Avatar';
|
30
29
|
export { default as AvatarPair } from './AvatarPair';
|
package/lib/index.js
CHANGED
@@ -153,12 +153,6 @@ Object.defineProperty(exports, "ActionMenu", {
|
|
153
153
|
return _ActionMenu.ActionMenu;
|
154
154
|
}
|
155
155
|
});
|
156
|
-
Object.defineProperty(exports, "Autocomplete", {
|
157
|
-
enumerable: true,
|
158
|
-
get: function () {
|
159
|
-
return _Autocomplete.default;
|
160
|
-
}
|
161
|
-
});
|
162
156
|
Object.defineProperty(exports, "Avatar", {
|
163
157
|
enumerable: true,
|
164
158
|
get: function () {
|
@@ -538,8 +532,6 @@ var _ActionList = require("./ActionList");
|
|
538
532
|
|
539
533
|
var _ActionMenu = require("./ActionMenu");
|
540
534
|
|
541
|
-
var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
|
542
|
-
|
543
535
|
var _Avatar = _interopRequireDefault(require("./Avatar"));
|
544
536
|
|
545
537
|
var _AvatarPair = _interopRequireDefault(require("./AvatarPair"));
|
package/lib/utils/types/index.js
CHANGED
@@ -54,17 +54,4 @@ Object.keys(_Merge).forEach(function (key) {
|
|
54
54
|
return _Merge[key];
|
55
55
|
}
|
56
56
|
});
|
57
|
-
});
|
58
|
-
|
59
|
-
var _MandateProps = require("./MandateProps");
|
60
|
-
|
61
|
-
Object.keys(_MandateProps).forEach(function (key) {
|
62
|
-
if (key === "default" || key === "__esModule") return;
|
63
|
-
if (key in exports && exports[key] === _MandateProps[key]) return;
|
64
|
-
Object.defineProperty(exports, key, {
|
65
|
-
enumerable: true,
|
66
|
-
get: function () {
|
67
|
-
return _MandateProps[key];
|
68
|
-
}
|
69
|
-
});
|
70
57
|
});
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
2
2
|
import { OverlayProps } from '../Overlay';
|
3
3
|
import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
|
4
4
|
import { FocusZoneHookSettings } from '../hooks/useFocusZone';
|
5
|
-
import { PositionSettings } from '../behaviors/anchoredPosition';
|
6
5
|
interface AnchoredOverlayPropsWithAnchor {
|
7
6
|
/**
|
8
7
|
* A custom function component used to render the anchor element.
|
@@ -53,7 +52,7 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
|
|
53
52
|
*/
|
54
53
|
focusZoneSettings?: Partial<FocusZoneHookSettings>;
|
55
54
|
}
|
56
|
-
export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor)
|
55
|
+
export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor);
|
57
56
|
/**
|
58
57
|
* An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
|
59
58
|
* The overlay can be opened and navigated using keyboard or mouse.
|
@@ -22,9 +22,7 @@ export const AnchoredOverlay = ({
|
|
22
22
|
width,
|
23
23
|
overlayProps,
|
24
24
|
focusTrapSettings,
|
25
|
-
focusZoneSettings
|
26
|
-
side,
|
27
|
-
align
|
25
|
+
focusZoneSettings
|
28
26
|
}) => {
|
29
27
|
const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
|
30
28
|
const [overlayRef, updateOverlayRef] = useRenderForcingRef();
|
@@ -54,9 +52,7 @@ export const AnchoredOverlay = ({
|
|
54
52
|
position
|
55
53
|
} = useAnchoredPosition({
|
56
54
|
anchorElementRef: anchorRef,
|
57
|
-
floatingElementRef: overlayRef
|
58
|
-
side,
|
59
|
-
align
|
55
|
+
floatingElementRef: overlayRef
|
60
56
|
}, [overlayRef.current]);
|
61
57
|
useEffect(() => {
|
62
58
|
// ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
|
@@ -97,8 +93,4 @@ export const AnchoredOverlay = ({
|
|
97
93
|
anchorSide: position === null || position === void 0 ? void 0 : position.anchorSide
|
98
94
|
}, overlayProps), children) : null);
|
99
95
|
};
|
100
|
-
AnchoredOverlay.displayName = 'AnchoredOverlay';
|
101
|
-
AnchoredOverlay.defaultProps = {
|
102
|
-
side: 'outside-bottom',
|
103
|
-
align: 'start'
|
104
|
-
};
|
96
|
+
AnchoredOverlay.displayName = 'AnchoredOverlay';
|
@@ -1,7 +1,6 @@
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
2
|
|
3
3
|
import React, { useCallback, useEffect, useRef } from 'react';
|
4
|
-
import { useSSRSafeId } from '@react-aria/ssr';
|
5
4
|
import TextInput from '../TextInput';
|
6
5
|
import Box from '../Box';
|
7
6
|
import { ActionList } from '../ActionList';
|
@@ -12,7 +11,36 @@ import styled from 'styled-components';
|
|
12
11
|
import { get } from '../constants';
|
13
12
|
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate';
|
14
13
|
import useScrollFlash from '../hooks/useScrollFlash';
|
15
|
-
import {
|
14
|
+
import { useSSRSafeId } from '@react-aria/ssr';
|
15
|
+
|
16
|
+
function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth') {
|
17
|
+
const {
|
18
|
+
top: childTop,
|
19
|
+
bottom: childBottom
|
20
|
+
} = child.getBoundingClientRect();
|
21
|
+
const {
|
22
|
+
top: containerTop,
|
23
|
+
bottom: containerBottom
|
24
|
+
} = container.getBoundingClientRect();
|
25
|
+
const isChildTopAboveViewingArea = childTop < containerTop + margin;
|
26
|
+
const isChildBottomBelowViewingArea = childBottom > containerBottom - margin;
|
27
|
+
|
28
|
+
if (isChildTopAboveViewingArea) {
|
29
|
+
const scrollHeightToChildTop = childTop - containerTop + container.scrollTop;
|
30
|
+
container.scrollTo({
|
31
|
+
behavior,
|
32
|
+
top: scrollHeightToChildTop - margin
|
33
|
+
});
|
34
|
+
} else if (isChildBottomBelowViewingArea) {
|
35
|
+
const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop;
|
36
|
+
container.scrollTo({
|
37
|
+
behavior,
|
38
|
+
top: scrollHeightToChildBottom + margin
|
39
|
+
});
|
40
|
+
} // either completely in view or outside viewing area on both ends, don't scroll
|
41
|
+
|
42
|
+
}
|
43
|
+
|
16
44
|
const StyledHeader = styled.div.withConfig({
|
17
45
|
displayName: "FilteredActionList__StyledHeader",
|
18
46
|
componentId: "yg3jkv-0"
|
@@ -67,7 +95,7 @@ export function FilteredActionList({
|
|
67
95
|
useEffect(() => {
|
68
96
|
// if items changed, we want to instantly move active descendant into view
|
69
97
|
if (activeDescendantRef.current && scrollContainerRef.current) {
|
70
|
-
scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current,
|
98
|
+
scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, undefined, 'auto');
|
71
99
|
}
|
72
100
|
}, [items]);
|
73
101
|
useScrollFlash(scrollContainerRef);
|
package/lib-esm/Overlay.d.ts
CHANGED
@@ -4,7 +4,7 @@ import { ComponentProps } from './utils/types';
|
|
4
4
|
import { TouchOrMouseEvent } from './hooks';
|
5
5
|
import { SxProp } from './sx';
|
6
6
|
import { AnchorSide } from './behaviors/anchoredPosition';
|
7
|
-
|
7
|
+
declare type StyledOverlayProps = {
|
8
8
|
width?: keyof typeof widthMap;
|
9
9
|
height?: keyof typeof heightMap;
|
10
10
|
maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>;
|
@@ -40,7 +40,6 @@ export declare type OverlayProps = {
|
|
40
40
|
top: number;
|
41
41
|
left: number;
|
42
42
|
portalContainerName?: string;
|
43
|
-
preventFocusOnOpen?: boolean;
|
44
43
|
} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>;
|
45
44
|
/**
|
46
45
|
* An `Overlay` is a flexible floating surface, used to display transient content such as menus,
|
package/lib-esm/Overlay.js
CHANGED
@@ -92,7 +92,6 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
92
92
|
left,
|
93
93
|
anchorSide,
|
94
94
|
portalContainerName,
|
95
|
-
preventFocusOnOpen,
|
96
95
|
...rest
|
97
96
|
}, forwardedRef) => {
|
98
97
|
const overlayRef = useRef(null);
|
@@ -108,8 +107,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
108
107
|
onEscape,
|
109
108
|
ignoreClickRefs,
|
110
109
|
onClickOutside,
|
111
|
-
initialFocusRef
|
112
|
-
preventFocusOnOpen
|
110
|
+
initialFocusRef
|
113
111
|
});
|
114
112
|
useEffect(() => {
|
115
113
|
var _combinedRef$current;
|
@@ -138,7 +136,9 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
138
136
|
easing: slideAnimationEasing
|
139
137
|
});
|
140
138
|
}, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility]);
|
141
|
-
|
139
|
+
return /*#__PURE__*/React.createElement(Portal, {
|
140
|
+
containerName: portalContainerName
|
141
|
+
}, /*#__PURE__*/React.createElement(StyledOverlay, _extends({
|
142
142
|
height: height,
|
143
143
|
role: role
|
144
144
|
}, rest, {
|
@@ -149,10 +149,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
149
149
|
...rest.style,
|
150
150
|
'--styled-overlay-visibility': visibility
|
151
151
|
}
|
152
|
-
}));
|
153
|
-
return /*#__PURE__*/React.createElement(Portal, {
|
154
|
-
containerName: portalContainerName
|
155
|
-
}, styledOverlay);
|
152
|
+
})));
|
156
153
|
});
|
157
154
|
Overlay.defaultProps = {
|
158
155
|
height: 'auto',
|
@@ -5,11 +5,25 @@ export declare const tokenSizes: Record<TokenSizeKeys, string>;
|
|
5
5
|
export declare const defaultTokenSize: TokenSizeKeys;
|
6
6
|
export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
|
7
7
|
as?: 'button' | 'a' | 'span';
|
8
|
+
/**
|
9
|
+
* The function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
|
10
|
+
*/
|
8
11
|
onRemove?: () => void;
|
12
|
+
/**
|
13
|
+
* Whether the token is selected
|
14
|
+
*/
|
9
15
|
isSelected?: boolean;
|
10
|
-
|
16
|
+
/**
|
17
|
+
* The text label inside the token
|
18
|
+
*/
|
11
19
|
text: string;
|
20
|
+
/**
|
21
|
+
* A unique identifier that can be associated with the token
|
22
|
+
*/
|
12
23
|
id?: number | string;
|
24
|
+
/**
|
25
|
+
* Which size the token will be rendered at
|
26
|
+
*/
|
13
27
|
size?: TokenSizeKeys;
|
14
28
|
}
|
15
29
|
export declare const isTokenInteractive: ({ as, onClick, onFocus, tabIndex }: TokenBaseProps) => boolean;
|
@@ -3,6 +3,5 @@ export declare type UseOpenAndCloseFocusSettings = {
|
|
3
3
|
initialFocusRef?: React.RefObject<HTMLElement>;
|
4
4
|
containerRef: React.RefObject<HTMLElement>;
|
5
5
|
returnFocusRef: React.RefObject<HTMLElement>;
|
6
|
-
preventFocusOnOpen?: boolean;
|
7
6
|
};
|
8
|
-
export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef
|
7
|
+
export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef }: UseOpenAndCloseFocusSettings): void;
|
@@ -3,14 +3,9 @@ import { iterateFocusableElements } from '../utils/iterateFocusableElements';
|
|
3
3
|
export function useOpenAndCloseFocus({
|
4
4
|
initialFocusRef,
|
5
5
|
returnFocusRef,
|
6
|
-
containerRef
|
7
|
-
preventFocusOnOpen
|
6
|
+
containerRef
|
8
7
|
}) {
|
9
8
|
useEffect(() => {
|
10
|
-
if (preventFocusOnOpen) {
|
11
|
-
return;
|
12
|
-
}
|
13
|
-
|
14
9
|
const returnRef = returnFocusRef.current;
|
15
10
|
|
16
11
|
if (initialFocusRef && initialFocusRef.current) {
|
@@ -23,5 +18,5 @@ export function useOpenAndCloseFocus({
|
|
23
18
|
return function () {
|
24
19
|
returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
|
25
20
|
};
|
26
|
-
}, [initialFocusRef, returnFocusRef, containerRef
|
21
|
+
}, [initialFocusRef, returnFocusRef, containerRef]);
|
27
22
|
}
|
@@ -7,9 +7,8 @@ export declare type UseOverlaySettings = {
|
|
7
7
|
onEscape: (e: KeyboardEvent) => void;
|
8
8
|
onClickOutside: (e: TouchOrMouseEvent) => void;
|
9
9
|
overlayRef?: React.RefObject<HTMLDivElement>;
|
10
|
-
preventFocusOnOpen?: boolean;
|
11
10
|
};
|
12
11
|
export declare type OverlayReturnProps = {
|
13
12
|
ref: React.RefObject<HTMLDivElement>;
|
14
13
|
};
|
15
|
-
export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside
|
14
|
+
export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;
|
@@ -8,15 +8,13 @@ export const useOverlay = ({
|
|
8
8
|
initialFocusRef,
|
9
9
|
onEscape,
|
10
10
|
ignoreClickRefs,
|
11
|
-
onClickOutside
|
12
|
-
preventFocusOnOpen
|
11
|
+
onClickOutside
|
13
12
|
}) => {
|
14
13
|
const overlayRef = useProvidedRefOrCreate(_overlayRef);
|
15
14
|
useOpenAndCloseFocus({
|
16
15
|
containerRef: overlayRef,
|
17
16
|
returnFocusRef,
|
18
|
-
initialFocusRef
|
19
|
-
preventFocusOnOpen
|
17
|
+
initialFocusRef
|
20
18
|
});
|
21
19
|
useOnOutsideClick({
|
22
20
|
containerRef: overlayRef,
|
package/lib-esm/index.d.ts
CHANGED
@@ -24,7 +24,6 @@ export { useConfirm } from './Dialog/ConfirmationDialog';
|
|
24
24
|
export { ActionList } from './ActionList';
|
25
25
|
export { ActionMenu } from './ActionMenu';
|
26
26
|
export type { ActionMenuProps } from './ActionMenu';
|
27
|
-
export { default as Autocomplete } from './Autocomplete';
|
28
27
|
export { default as Avatar } from './Avatar';
|
29
28
|
export type { AvatarProps } from './Avatar';
|
30
29
|
export { default as AvatarPair } from './AvatarPair';
|
package/lib-esm/index.js
CHANGED
@@ -19,7 +19,6 @@ export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
|
|
19
19
|
|
20
20
|
export { ActionList } from './ActionList';
|
21
21
|
export { ActionMenu } from './ActionMenu';
|
22
|
-
export { default as Autocomplete } from './Autocomplete';
|
23
22
|
export { default as Avatar } from './Avatar';
|
24
23
|
export { default as AvatarPair } from './AvatarPair';
|
25
24
|
export { default as AvatarStack } from './AvatarStack';
|