@primer/components 0.0.0-2021913174146 → 0.0.0-2021913222914

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 (118) hide show
  1. package/CHANGELOG.md +1 -9
  2. package/dist/browser.esm.js +764 -869
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +770 -875
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.js +3 -3
  7. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  8. package/lib/AnchoredOverlay/AnchoredOverlay.js +3 -11
  9. package/lib/Button/Button.js +1 -1
  10. package/lib/Button/ButtonInvisible.js +1 -1
  11. package/lib/FilteredActionList/FilteredActionList.js +31 -5
  12. package/lib/Overlay.d.ts +0 -1
  13. package/lib/Overlay.js +1 -3
  14. package/lib/TextInput.d.ts +12 -4
  15. package/lib/TextInput.js +46 -4
  16. package/lib/hooks/useOpenAndCloseFocus.d.ts +1 -2
  17. package/lib/hooks/useOpenAndCloseFocus.js +2 -7
  18. package/lib/hooks/useOverlay.d.ts +1 -2
  19. package/lib/hooks/useOverlay.js +2 -4
  20. package/lib/index.d.ts +0 -5
  21. package/lib/index.js +0 -36
  22. package/lib/theme-preval.js +370 -3100
  23. package/lib/utils/testing.d.ts +50 -493
  24. package/lib/utils/types/index.d.ts +0 -1
  25. package/lib/utils/types/index.js +0 -13
  26. package/lib-esm/ActionList/Item.js +3 -3
  27. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  28. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
  29. package/lib-esm/Button/Button.js +1 -1
  30. package/lib-esm/Button/ButtonInvisible.js +1 -1
  31. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  32. package/lib-esm/Overlay.d.ts +0 -1
  33. package/lib-esm/Overlay.js +1 -3
  34. package/lib-esm/TextInput.d.ts +12 -4
  35. package/lib-esm/TextInput.js +37 -4
  36. package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +1 -2
  37. package/lib-esm/hooks/useOpenAndCloseFocus.js +2 -7
  38. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  39. package/lib-esm/hooks/useOverlay.js +2 -4
  40. package/lib-esm/index.d.ts +0 -5
  41. package/lib-esm/index.js +0 -3
  42. package/lib-esm/theme-preval.js +370 -3100
  43. package/lib-esm/utils/testing.d.ts +50 -493
  44. package/lib-esm/utils/types/index.d.ts +0 -1
  45. package/lib-esm/utils/types/index.js +1 -2
  46. package/package.json +3 -4
  47. package/lib/Autocomplete/Autocomplete.d.ts +0 -304
  48. package/lib/Autocomplete/Autocomplete.js +0 -145
  49. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
  50. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  51. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -292
  52. package/lib/Autocomplete/AutocompleteInput.js +0 -157
  53. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -72
  54. package/lib/Autocomplete/AutocompleteMenu.js +0 -224
  55. package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -20
  56. package/lib/Autocomplete/AutocompleteOverlay.js +0 -80
  57. package/lib/Autocomplete/index.d.ts +0 -2
  58. package/lib/Autocomplete/index.js +0 -15
  59. package/lib/TextInputWithTokens.d.ts +0 -323
  60. package/lib/TextInputWithTokens.js +0 -245
  61. package/lib/Token/AvatarToken.d.ts +0 -7
  62. package/lib/Token/AvatarToken.js +0 -64
  63. package/lib/Token/IssueLabelToken.d.ts +0 -14
  64. package/lib/Token/IssueLabelToken.js +0 -144
  65. package/lib/Token/Token.d.ts +0 -15
  66. package/lib/Token/Token.js +0 -94
  67. package/lib/Token/TokenBase.d.ts +0 -31
  68. package/lib/Token/TokenBase.js +0 -108
  69. package/lib/Token/_RemoveTokenButton.d.ts +0 -12
  70. package/lib/Token/_RemoveTokenButton.js +0 -77
  71. package/lib/Token/_TokenTextContainer.d.ts +0 -3
  72. package/lib/Token/_TokenTextContainer.js +0 -17
  73. package/lib/Token/index.d.ts +0 -3
  74. package/lib/Token/index.js +0 -31
  75. package/lib/_TextInputWrapper.d.ts +0 -10
  76. package/lib/_TextInputWrapper.js +0 -51
  77. package/lib/_UnstyledTextInput.d.ts +0 -2
  78. package/lib/_UnstyledTextInput.js +0 -20
  79. package/lib/behaviors/scrollIntoViewingArea.d.ts +0 -1
  80. package/lib/behaviors/scrollIntoViewingArea.js +0 -39
  81. package/lib/utils/types/MandateProps.d.ts +0 -3
  82. package/lib/utils/types/MandateProps.js +0 -1
  83. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -304
  84. package/lib-esm/Autocomplete/Autocomplete.js +0 -123
  85. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
  86. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  87. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -292
  88. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -138
  89. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -72
  90. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -205
  91. package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -20
  92. package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -62
  93. package/lib-esm/Autocomplete/index.d.ts +0 -2
  94. package/lib-esm/Autocomplete/index.js +0 -1
  95. package/lib-esm/TextInputWithTokens.d.ts +0 -323
  96. package/lib-esm/TextInputWithTokens.js +0 -220
  97. package/lib-esm/Token/AvatarToken.d.ts +0 -7
  98. package/lib-esm/Token/AvatarToken.js +0 -43
  99. package/lib-esm/Token/IssueLabelToken.d.ts +0 -14
  100. package/lib-esm/Token/IssueLabelToken.js +0 -124
  101. package/lib-esm/Token/Token.d.ts +0 -15
  102. package/lib-esm/Token/Token.js +0 -73
  103. package/lib-esm/Token/TokenBase.d.ts +0 -31
  104. package/lib-esm/Token/TokenBase.js +0 -87
  105. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -12
  106. package/lib-esm/Token/_RemoveTokenButton.js +0 -60
  107. package/lib-esm/Token/_TokenTextContainer.d.ts +0 -3
  108. package/lib-esm/Token/_TokenTextContainer.js +0 -6
  109. package/lib-esm/Token/index.d.ts +0 -3
  110. package/lib-esm/Token/index.js +0 -3
  111. package/lib-esm/_TextInputWrapper.d.ts +0 -10
  112. package/lib-esm/_TextInputWrapper.js +0 -31
  113. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  114. package/lib-esm/_UnstyledTextInput.js +0 -7
  115. package/lib-esm/behaviors/scrollIntoViewingArea.d.ts +0 -1
  116. package/lib-esm/behaviors/scrollIntoViewingArea.js +0 -30
  117. package/lib-esm/utils/types/MandateProps.d.ts +0 -3
  118. package/lib-esm/utils/types/MandateProps.js +0 -1
@@ -1,51 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
-
10
- var _styledSystem = require("styled-system");
11
-
12
- var _constants = require("./constants");
13
-
14
- var _sx = _interopRequireDefault(require("./sx"));
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
-
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
-
22
- const sizeVariants = (0, _styledSystem.variant)({
23
- variants: {
24
- small: {
25
- minHeight: '28px',
26
- px: 2,
27
- py: '3px',
28
- fontSize: 0,
29
- lineHeight: '20px'
30
- },
31
- large: {
32
- px: 2,
33
- py: '10px',
34
- fontSize: 3
35
- }
36
- }
37
- });
38
-
39
- const TextInputWrapper = _styledComponents.default.span.withConfig({
40
- displayName: "_TextInputWrapper__TextInputWrapper",
41
- componentId: "sc-5vfcis-0"
42
- })(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
43
- if (props.hasIcon) {
44
- return (0, _styledComponents.css)(["padding:0;"]);
45
- } else {
46
- return (0, _styledComponents.css)(["padding:6px 12px;"]);
47
- }
48
- }, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
49
-
50
- var _default = TextInputWrapper;
51
- exports.default = _default;
@@ -1,2 +0,0 @@
1
- declare const UnstyledTextInput: import("styled-components").StyledComponent<"input", any, import("./sx").SxProp, never>;
2
- export default UnstyledTextInput;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
- var _sx = _interopRequireDefault(require("./sx"));
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const UnstyledTextInput = _styledComponents.default.input.withConfig({
15
- displayName: "_UnstyledTextInput__UnstyledTextInput",
16
- componentId: "sc-1jgl33s-0"
17
- })(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], _sx.default);
18
-
19
- var _default = UnstyledTextInput;
20
- exports.default = _default;
@@ -1 +0,0 @@
1
- export declare const scrollIntoViewingArea: (child: HTMLElement, viewingArea: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;
@@ -1,39 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.scrollIntoViewingArea = void 0;
7
-
8
- const scrollIntoViewingArea = (child, viewingArea, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
9
- const startSide = direction === 'vertical' ? 'top' : 'left';
10
- const endSide = direction === 'vertical' ? 'bottom' : 'right';
11
- const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
12
- const {
13
- [startSide]: childStart,
14
- [endSide]: childEnd
15
- } = child.getBoundingClientRect();
16
- const {
17
- [startSide]: viewingAreaStart,
18
- [endSide]: viewingAreaEnd
19
- } = viewingArea.getBoundingClientRect();
20
- const isChildStartAboveViewingArea = childStart < viewingAreaStart + endMargin;
21
- const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - startMargin;
22
-
23
- if (isChildStartAboveViewingArea) {
24
- const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
25
- viewingArea.scrollTo({
26
- behavior,
27
- [startSide]: scrollHeightToChildStart - endMargin
28
- });
29
- } else if (isChildBottomBelowViewingArea) {
30
- const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
31
- viewingArea.scrollTo({
32
- behavior,
33
- [startSide]: scrollHeightToChildBottom + startMargin
34
- });
35
- } // either completely in view or outside viewing area on both ends, don't scroll
36
-
37
- };
38
-
39
- exports.scrollIntoViewingArea = scrollIntoViewingArea;
@@ -1,3 +0,0 @@
1
- export declare type MandateProps<T extends unknown, K extends keyof T> = Omit<T, K> & {
2
- [MK in K]-?: NonNullable<T[MK]>;
3
- };
@@ -1 +0,0 @@
1
- "use strict";
@@ -1,304 +0,0 @@
1
- import React from 'react';
2
- import { ComponentProps } from '../utils/types';
3
- import AutocompleteMenu from './AutocompleteMenu';
4
- import AutocompleteOverlay from './AutocompleteOverlay';
5
- declare const Autocomplete: React.FC<{
6
- id?: string;
7
- }>;
8
- export declare type AutocompleteProps = ComponentProps<typeof Autocomplete>;
9
- export type { AutocompleteInputProps } from './AutocompleteInput';
10
- export type { AutocompleteMenuProps } from './AutocompleteMenu';
11
- export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
12
- declare const _default: React.FC<{
13
- id?: string | undefined;
14
- }> & {
15
- Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
16
- [x: string]: any;
17
- [x: number]: any;
18
- } & {
19
- theme?: any;
20
- } & {
21
- as?: string | React.ComponentType<any> | undefined;
22
- forwardedAs?: string | React.ComponentType<any> | undefined;
23
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
24
- className?: string | undefined;
25
- icon?: React.ComponentType<{
26
- className?: string | undefined;
27
- }> | undefined;
28
- } & Pick<{
29
- color?: string | undefined;
30
- maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
31
- minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
32
- translate?: "yes" | "no" | undefined;
33
- width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
34
- hidden?: boolean | undefined;
35
- children?: React.ReactNode;
36
- ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
37
- slot?: string | undefined;
38
- style?: React.CSSProperties | undefined;
39
- title?: string | undefined;
40
- key?: React.Key | null | undefined;
41
- defaultChecked?: boolean | undefined;
42
- defaultValue?: string | number | readonly string[] | undefined;
43
- suppressContentEditableWarning?: boolean | undefined;
44
- suppressHydrationWarning?: boolean | undefined;
45
- accessKey?: string | undefined;
46
- className?: string | undefined;
47
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
48
- contextMenu?: string | undefined;
49
- dir?: string | undefined;
50
- draggable?: (boolean | "true" | "false") | undefined;
51
- id?: string | undefined;
52
- lang?: string | undefined;
53
- placeholder?: string | undefined;
54
- spellCheck?: (boolean | "true" | "false") | undefined;
55
- tabIndex?: number | undefined;
56
- radioGroup?: string | undefined;
57
- role?: React.AriaRole | undefined;
58
- about?: string | undefined;
59
- datatype?: string | undefined;
60
- inlist?: any;
61
- prefix?: string | undefined;
62
- property?: string | undefined;
63
- resource?: string | undefined;
64
- typeof?: string | undefined;
65
- vocab?: string | undefined;
66
- autoCapitalize?: string | undefined;
67
- autoCorrect?: string | undefined;
68
- autoSave?: string | undefined;
69
- itemProp?: string | undefined;
70
- itemScope?: boolean | undefined;
71
- itemType?: string | undefined;
72
- itemID?: string | undefined;
73
- itemRef?: string | undefined;
74
- results?: number | undefined;
75
- security?: string | undefined;
76
- unselectable?: "on" | "off" | undefined;
77
- inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
78
- is?: string | undefined;
79
- 'aria-activedescendant'?: string | undefined;
80
- 'aria-atomic'?: boolean | "true" | "false" | undefined;
81
- 'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
82
- 'aria-busy'?: boolean | "true" | "false" | undefined;
83
- 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
84
- 'aria-colcount'?: number | undefined;
85
- 'aria-colindex'?: number | undefined;
86
- 'aria-colspan'?: number | undefined;
87
- 'aria-controls'?: string | undefined;
88
- 'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
89
- 'aria-describedby'?: string | undefined;
90
- 'aria-details'?: string | undefined;
91
- 'aria-disabled'?: boolean | "true" | "false" | undefined;
92
- 'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
93
- 'aria-errormessage'?: string | undefined;
94
- 'aria-expanded'?: boolean | "true" | "false" | undefined;
95
- 'aria-flowto'?: string | undefined;
96
- 'aria-grabbed'?: boolean | "true" | "false" | undefined;
97
- 'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
98
- 'aria-hidden'?: boolean | "true" | "false" | undefined;
99
- 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
100
- 'aria-keyshortcuts'?: string | undefined;
101
- 'aria-label'?: string | undefined;
102
- 'aria-labelledby'?: string | undefined;
103
- 'aria-level'?: number | undefined;
104
- 'aria-live'?: "off" | "assertive" | "polite" | undefined;
105
- 'aria-modal'?: boolean | "true" | "false" | undefined;
106
- 'aria-multiline'?: boolean | "true" | "false" | undefined;
107
- 'aria-multiselectable'?: boolean | "true" | "false" | undefined;
108
- 'aria-orientation'?: "horizontal" | "vertical" | undefined;
109
- 'aria-owns'?: string | undefined;
110
- 'aria-placeholder'?: string | undefined;
111
- 'aria-posinset'?: number | undefined;
112
- 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
113
- 'aria-readonly'?: boolean | "true" | "false" | undefined;
114
- 'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
115
- 'aria-required'?: boolean | "true" | "false" | undefined;
116
- 'aria-roledescription'?: string | undefined;
117
- 'aria-rowcount'?: number | undefined;
118
- 'aria-rowindex'?: number | undefined;
119
- 'aria-rowspan'?: number | undefined;
120
- 'aria-selected'?: boolean | "true" | "false" | undefined;
121
- 'aria-setsize'?: number | undefined;
122
- 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
123
- 'aria-valuemax'?: number | undefined;
124
- 'aria-valuemin'?: number | undefined;
125
- 'aria-valuenow'?: number | undefined;
126
- 'aria-valuetext'?: string | undefined;
127
- dangerouslySetInnerHTML?: {
128
- __html: string;
129
- } | undefined;
130
- onCopy?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
131
- onCopyCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
132
- onCut?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
133
- onCutCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
134
- onPaste?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
135
- onPasteCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
136
- onCompositionEnd?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
137
- onCompositionEndCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
138
- onCompositionStart?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
139
- onCompositionStartCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
140
- onCompositionUpdate?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
141
- onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
142
- onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
143
- onFocusCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
144
- onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
145
- onBlurCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
146
- onChange?: React.FormEventHandler<HTMLSpanElement> | undefined;
147
- onChangeCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
148
- onBeforeInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
149
- onBeforeInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
150
- onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
151
- onInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
152
- onReset?: React.FormEventHandler<HTMLSpanElement> | undefined;
153
- onResetCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
154
- onSubmit?: React.FormEventHandler<HTMLSpanElement> | undefined;
155
- onSubmitCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
156
- onInvalid?: React.FormEventHandler<HTMLSpanElement> | undefined;
157
- onInvalidCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
158
- onLoad?: React.ReactEventHandler<HTMLSpanElement> | undefined;
159
- onLoadCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
160
- onError?: React.ReactEventHandler<HTMLSpanElement> | undefined;
161
- onErrorCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
162
- onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
163
- onKeyDownCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
164
- onKeyPress?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
165
- onKeyPressCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
166
- onKeyUp?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
167
- onKeyUpCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
168
- onAbort?: React.ReactEventHandler<HTMLSpanElement> | undefined;
169
- onAbortCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
170
- onCanPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
171
- onCanPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
172
- onCanPlayThrough?: React.ReactEventHandler<HTMLSpanElement> | undefined;
173
- onCanPlayThroughCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
174
- onDurationChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
175
- onDurationChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
176
- onEmptied?: React.ReactEventHandler<HTMLSpanElement> | undefined;
177
- onEmptiedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
178
- onEncrypted?: React.ReactEventHandler<HTMLSpanElement> | undefined;
179
- onEncryptedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
180
- onEnded?: React.ReactEventHandler<HTMLSpanElement> | undefined;
181
- onEndedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
182
- onLoadedData?: React.ReactEventHandler<HTMLSpanElement> | undefined;
183
- onLoadedDataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
184
- onLoadedMetadata?: React.ReactEventHandler<HTMLSpanElement> | undefined;
185
- onLoadedMetadataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
186
- onLoadStart?: React.ReactEventHandler<HTMLSpanElement> | undefined;
187
- onLoadStartCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
188
- onPause?: React.ReactEventHandler<HTMLSpanElement> | undefined;
189
- onPauseCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
190
- onPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
191
- onPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
192
- onPlaying?: React.ReactEventHandler<HTMLSpanElement> | undefined;
193
- onPlayingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
194
- onProgress?: React.ReactEventHandler<HTMLSpanElement> | undefined;
195
- onProgressCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
196
- onRateChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
197
- onRateChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
198
- onSeeked?: React.ReactEventHandler<HTMLSpanElement> | undefined;
199
- onSeekedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
200
- onSeeking?: React.ReactEventHandler<HTMLSpanElement> | undefined;
201
- onSeekingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
202
- onStalled?: React.ReactEventHandler<HTMLSpanElement> | undefined;
203
- onStalledCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
204
- onSuspend?: React.ReactEventHandler<HTMLSpanElement> | undefined;
205
- onSuspendCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
206
- onTimeUpdate?: React.ReactEventHandler<HTMLSpanElement> | undefined;
207
- onTimeUpdateCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
208
- onVolumeChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
209
- onVolumeChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
210
- onWaiting?: React.ReactEventHandler<HTMLSpanElement> | undefined;
211
- onWaitingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
212
- onAuxClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
213
- onAuxClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
214
- onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
215
- onClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
216
- onContextMenu?: React.MouseEventHandler<HTMLSpanElement> | undefined;
217
- onContextMenuCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
218
- onDoubleClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
219
- onDoubleClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
220
- onDrag?: React.DragEventHandler<HTMLSpanElement> | undefined;
221
- onDragCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
222
- onDragEnd?: React.DragEventHandler<HTMLSpanElement> | undefined;
223
- onDragEndCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
224
- onDragEnter?: React.DragEventHandler<HTMLSpanElement> | undefined;
225
- onDragEnterCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
226
- onDragExit?: React.DragEventHandler<HTMLSpanElement> | undefined;
227
- onDragExitCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
228
- onDragLeave?: React.DragEventHandler<HTMLSpanElement> | undefined;
229
- onDragLeaveCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
230
- onDragOver?: React.DragEventHandler<HTMLSpanElement> | undefined;
231
- onDragOverCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
232
- onDragStart?: React.DragEventHandler<HTMLSpanElement> | undefined;
233
- onDragStartCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
234
- onDrop?: React.DragEventHandler<HTMLSpanElement> | undefined;
235
- onDropCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
236
- onMouseDown?: React.MouseEventHandler<HTMLSpanElement> | undefined;
237
- onMouseDownCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
238
- onMouseEnter?: React.MouseEventHandler<HTMLSpanElement> | undefined;
239
- onMouseLeave?: React.MouseEventHandler<HTMLSpanElement> | undefined;
240
- onMouseMove?: React.MouseEventHandler<HTMLSpanElement> | undefined;
241
- onMouseMoveCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
242
- onMouseOut?: React.MouseEventHandler<HTMLSpanElement> | undefined;
243
- onMouseOutCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
244
- onMouseOver?: React.MouseEventHandler<HTMLSpanElement> | undefined;
245
- onMouseOverCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
246
- onMouseUp?: React.MouseEventHandler<HTMLSpanElement> | undefined;
247
- onMouseUpCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
248
- onSelect?: React.ReactEventHandler<HTMLSpanElement> | undefined;
249
- onSelectCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
250
- onTouchCancel?: React.TouchEventHandler<HTMLSpanElement> | undefined;
251
- onTouchCancelCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
252
- onTouchEnd?: React.TouchEventHandler<HTMLSpanElement> | undefined;
253
- onTouchEndCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
254
- onTouchMove?: React.TouchEventHandler<HTMLSpanElement> | undefined;
255
- onTouchMoveCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
256
- onTouchStart?: React.TouchEventHandler<HTMLSpanElement> | undefined;
257
- onTouchStartCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
258
- onPointerDown?: React.PointerEventHandler<HTMLSpanElement> | undefined;
259
- onPointerDownCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
260
- onPointerMove?: React.PointerEventHandler<HTMLSpanElement> | undefined;
261
- onPointerMoveCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
262
- onPointerUp?: React.PointerEventHandler<HTMLSpanElement> | undefined;
263
- onPointerUpCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
264
- onPointerCancel?: React.PointerEventHandler<HTMLSpanElement> | undefined;
265
- onPointerCancelCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
266
- onPointerEnter?: React.PointerEventHandler<HTMLSpanElement> | undefined;
267
- onPointerEnterCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
268
- onPointerLeave?: React.PointerEventHandler<HTMLSpanElement> | undefined;
269
- onPointerLeaveCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
270
- onPointerOver?: React.PointerEventHandler<HTMLSpanElement> | undefined;
271
- onPointerOverCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
272
- onPointerOut?: React.PointerEventHandler<HTMLSpanElement> | undefined;
273
- onPointerOutCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
274
- onGotPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
275
- onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
276
- onLostPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
277
- onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
278
- onScroll?: React.UIEventHandler<HTMLSpanElement> | undefined;
279
- onScrollCapture?: React.UIEventHandler<HTMLSpanElement> | undefined;
280
- onWheel?: React.WheelEventHandler<HTMLSpanElement> | undefined;
281
- onWheelCapture?: React.WheelEventHandler<HTMLSpanElement> | undefined;
282
- onAnimationStart?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
283
- onAnimationStartCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
284
- onAnimationEnd?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
285
- onAnimationEndCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
286
- onAnimationIteration?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
287
- onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
288
- onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
289
- onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
290
- block?: boolean | undefined;
291
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
292
- disabled?: boolean | undefined;
293
- variant?: "large" | "small" | undefined;
294
- hasIcon?: boolean | undefined;
295
- contrast?: boolean | undefined;
296
- } & {
297
- theme?: any;
298
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
299
- as?: React.ComponentType<any> | undefined;
300
- }>;
301
- Menu: typeof AutocompleteMenu;
302
- Overlay: typeof AutocompleteOverlay;
303
- };
304
- export default _default;
@@ -1,123 +0,0 @@
1
- import React, { useCallback, useReducer, useRef } from 'react';
2
- import { useSSRSafeId } from '@react-aria/ssr';
3
- import { AutocompleteContext } from './AutocompleteContext';
4
- import AutocompleteInput from './AutocompleteInput';
5
- import AutocompleteMenu from './AutocompleteMenu';
6
- import AutocompleteOverlay from './AutocompleteOverlay';
7
- const initialState = {
8
- inputValue: '',
9
- showMenu: false,
10
- isMenuDirectlyActivated: false,
11
- autocompleteSuggestion: '',
12
- selectedItemLength: 0
13
- };
14
-
15
- const reducer = (state, action) => {
16
- const {
17
- type,
18
- payload
19
- } = action;
20
-
21
- switch (type) {
22
- case 'inputValue':
23
- return { ...state,
24
- inputValue: payload
25
- };
26
-
27
- case 'showMenu':
28
- return { ...state,
29
- showMenu: payload
30
- };
31
-
32
- case 'isMenuDirectlyActivated':
33
- return { ...state,
34
- isMenuDirectlyActivated: payload
35
- };
36
-
37
- case 'autocompleteSuggestion':
38
- return { ...state,
39
- autocompleteSuggestion: payload
40
- };
41
-
42
- case 'selectedItemLength':
43
- return { ...state,
44
- selectedItemLength: payload
45
- };
46
-
47
- default:
48
- return state;
49
- }
50
- };
51
-
52
- const Autocomplete = ({
53
- children,
54
- id: idProp
55
- }) => {
56
- const activeDescendantRef = useRef(null);
57
- const scrollContainerRef = useRef(null);
58
- const inputRef = useRef(null);
59
- const [state, dispatch] = useReducer(reducer, initialState);
60
- const {
61
- inputValue,
62
- showMenu,
63
- autocompleteSuggestion,
64
- isMenuDirectlyActivated,
65
- selectedItemLength
66
- } = state;
67
- const setInputValue = useCallback(value => {
68
- dispatch({
69
- type: 'inputValue',
70
- payload: value
71
- });
72
- }, []);
73
- const setShowMenu = useCallback(value => {
74
- dispatch({
75
- type: 'showMenu',
76
- payload: value
77
- });
78
- }, []);
79
- const setAutocompleteSuggestion = useCallback(value => {
80
- dispatch({
81
- type: 'autocompleteSuggestion',
82
- payload: value
83
- });
84
- }, []);
85
- const setIsMenuDirectlyActivated = useCallback(value => {
86
- dispatch({
87
- type: 'isMenuDirectlyActivated',
88
- payload: value
89
- });
90
- }, []);
91
- const setSelectedItemLength = useCallback(value => {
92
- dispatch({
93
- type: 'selectedItemLength',
94
- payload: value
95
- });
96
- }, []);
97
- const id = useSSRSafeId(idProp);
98
- return /*#__PURE__*/React.createElement(AutocompleteContext.Provider, {
99
- value: {
100
- activeDescendantRef,
101
- autocompleteSuggestion,
102
- id,
103
- inputRef,
104
- inputValue,
105
- isMenuDirectlyActivated,
106
- scrollContainerRef,
107
- selectedItemLength,
108
- setAutocompleteSuggestion,
109
- setInputValue,
110
- setIsMenuDirectlyActivated,
111
- setShowMenu,
112
- setSelectedItemLength,
113
- showMenu
114
- }
115
- }, children);
116
- };
117
-
118
- Autocomplete.displayName = "Autocomplete";
119
- export default Object.assign(Autocomplete, {
120
- Input: AutocompleteInput,
121
- Menu: AutocompleteMenu,
122
- Overlay: AutocompleteOverlay
123
- });
@@ -1,17 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const AutocompleteContext: import("react").Context<{
3
- activeDescendantRef: React.MutableRefObject<HTMLElement | null>;
4
- autocompleteSuggestion: string;
5
- id: string;
6
- inputRef: React.MutableRefObject<HTMLInputElement | null>;
7
- inputValue: string;
8
- isMenuDirectlyActivated: boolean;
9
- scrollContainerRef: React.MutableRefObject<HTMLElement | null>;
10
- selectedItemLength: number;
11
- setAutocompleteSuggestion: (value: string) => void;
12
- setInputValue: (value: string) => void;
13
- setIsMenuDirectlyActivated: (value: boolean) => void;
14
- setSelectedItemLength: (value: number) => void;
15
- setShowMenu: (value: boolean) => void;
16
- showMenu: boolean;
17
- } | null>;
@@ -1,2 +0,0 @@
1
- import { createContext } from 'react';
2
- export const AutocompleteContext = /*#__PURE__*/createContext(null);