@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.
Files changed (66) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/browser.esm.js +254 -253
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +332 -331
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  7. package/lib/AnchoredOverlay/AnchoredOverlay.js +3 -11
  8. package/lib/FilteredActionList/FilteredActionList.js +31 -5
  9. package/lib/Overlay.d.ts +1 -2
  10. package/lib/Overlay.js +5 -10
  11. package/lib/Token/TokenBase.d.ts +15 -1
  12. package/lib/hooks/useOpenAndCloseFocus.d.ts +1 -2
  13. package/lib/hooks/useOpenAndCloseFocus.js +2 -7
  14. package/lib/hooks/useOverlay.d.ts +1 -2
  15. package/lib/hooks/useOverlay.js +2 -4
  16. package/lib/index.d.ts +0 -1
  17. package/lib/index.js +0 -8
  18. package/lib/utils/types/index.d.ts +0 -1
  19. package/lib/utils/types/index.js +0 -13
  20. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  21. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
  22. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  23. package/lib-esm/Overlay.d.ts +1 -2
  24. package/lib-esm/Overlay.js +5 -8
  25. package/lib-esm/Token/TokenBase.d.ts +15 -1
  26. package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +1 -2
  27. package/lib-esm/hooks/useOpenAndCloseFocus.js +2 -7
  28. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  29. package/lib-esm/hooks/useOverlay.js +2 -4
  30. package/lib-esm/index.d.ts +0 -1
  31. package/lib-esm/index.js +0 -1
  32. package/lib-esm/utils/types/index.d.ts +0 -1
  33. package/lib-esm/utils/types/index.js +1 -2
  34. package/package.json +1 -1
  35. package/lib/Autocomplete/Autocomplete.d.ts +0 -40
  36. package/lib/Autocomplete/Autocomplete.js +0 -68
  37. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
  38. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  39. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  40. package/lib/Autocomplete/AutocompleteInput.js +0 -150
  41. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
  42. package/lib/Autocomplete/AutocompleteMenu.js +0 -223
  43. package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  44. package/lib/Autocomplete/AutocompleteOverlay.js +0 -74
  45. package/lib/Autocomplete/index.d.ts +0 -2
  46. package/lib/Autocomplete/index.js +0 -15
  47. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  48. package/lib/utils/scrollIntoViewingArea.js +0 -39
  49. package/lib/utils/types/MandateProps.d.ts +0 -3
  50. package/lib/utils/types/MandateProps.js +0 -1
  51. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
  52. package/lib-esm/Autocomplete/Autocomplete.js +0 -47
  53. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
  54. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  55. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  56. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -131
  57. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
  58. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -204
  59. package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  60. package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -56
  61. package/lib-esm/Autocomplete/index.d.ts +0 -2
  62. package/lib-esm/Autocomplete/index.js +0 -1
  63. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  64. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
  65. package/lib-esm/utils/types/MandateProps.d.ts +0 -3
  66. 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) & Partial<Pick<PositionSettings, 'align' | 'side'>>;
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 _scrollIntoViewingArea = require("../utils/scrollIntoViewingArea");
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
- (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
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
- (0, _scrollIntoViewingArea.scrollIntoViewingArea)(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
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
- export declare type StyledOverlayProps = {
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
- const styledOverlay = /*#__PURE__*/_react.default.createElement(StyledOverlay, _extends({
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 = {
@@ -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
- tabIndex?: number;
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, preventFocusOnOpen }: UseOpenAndCloseFocusSettings): void;
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, preventFocusOnOpen]);
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, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;
14
+ export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;
@@ -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"));
@@ -2,4 +2,3 @@ export * from './AriaRole';
2
2
  export * from './ComponentProps';
3
3
  export * from './Flatten';
4
4
  export * from './Merge';
5
- export * from './MandateProps';
@@ -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) & Partial<Pick<PositionSettings, 'align' | 'side'>>;
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 { scrollIntoViewingArea } from '../utils/scrollIntoViewingArea';
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, 'vertical', undefined, undefined, 'auto');
98
+ scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, undefined, 'auto');
71
99
  }
72
100
  }, [items]);
73
101
  useScrollFlash(scrollContainerRef);
@@ -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
- export declare type StyledOverlayProps = {
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,
@@ -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
- const styledOverlay = /*#__PURE__*/React.createElement(StyledOverlay, _extends({
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
- tabIndex?: number;
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, preventFocusOnOpen }: UseOpenAndCloseFocusSettings): void;
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, preventFocusOnOpen]);
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, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;
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,
@@ -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';
@@ -2,4 +2,3 @@ export * from './AriaRole';
2
2
  export * from './ComponentProps';
3
3
  export * from './Flatten';
4
4
  export * from './Merge';
5
- export * from './MandateProps';
@@ -1,5 +1,4 @@
1
1
  export * from './AriaRole';
2
2
  export * from './ComponentProps';
3
3
  export * from './Flatten';
4
- export * from './Merge';
5
- export * from './MandateProps';
4
+ export * from './Merge';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-20219819465",
3
+ "version": "0.0.0-202198201647",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",