@atlaskit/react-select 2.1.0 → 2.2.1

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 (109) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/emotion/components/containers.js +111 -0
  3. package/dist/cjs/emotion/components/control.js +110 -0
  4. package/dist/cjs/emotion/components/group.js +71 -0
  5. package/dist/cjs/emotion/components/index.js +52 -0
  6. package/dist/cjs/emotion/components/indicators.js +137 -0
  7. package/dist/cjs/emotion/components/input.js +94 -0
  8. package/dist/cjs/emotion/components/internal/a11y-text.js +36 -0
  9. package/dist/cjs/emotion/components/internal/dummy-input.js +44 -0
  10. package/dist/cjs/emotion/components/internal/index.js +34 -0
  11. package/dist/cjs/emotion/components/internal/notify-open-layer-observer.js +21 -0
  12. package/dist/cjs/emotion/components/internal/required-input.js +43 -0
  13. package/dist/cjs/emotion/components/internal/scroll-manager.js +57 -0
  14. package/dist/cjs/emotion/components/internal/use-scroll-capture.js +132 -0
  15. package/dist/cjs/emotion/components/internal/use-scroll-lock.js +149 -0
  16. package/dist/cjs/emotion/components/live-region.js +182 -0
  17. package/dist/cjs/emotion/components/menu.js +456 -0
  18. package/dist/cjs/emotion/components/multi-value.js +224 -0
  19. package/dist/cjs/emotion/components/option.js +82 -0
  20. package/dist/cjs/emotion/components/placeholder.js +34 -0
  21. package/dist/cjs/emotion/components/single-value.js +40 -0
  22. package/dist/cjs/select.js +11 -8
  23. package/dist/es2019/emotion/components/containers.js +109 -0
  24. package/dist/es2019/emotion/components/control.js +107 -0
  25. package/dist/es2019/emotion/components/group.js +59 -0
  26. package/dist/es2019/emotion/components/index.js +41 -0
  27. package/dist/es2019/emotion/components/indicators.js +128 -0
  28. package/dist/es2019/emotion/components/input.js +86 -0
  29. package/dist/es2019/emotion/components/internal/a11y-text.js +27 -0
  30. package/dist/es2019/emotion/components/internal/dummy-input.js +37 -0
  31. package/dist/es2019/emotion/components/internal/index.js +4 -0
  32. package/dist/es2019/emotion/components/internal/notify-open-layer-observer.js +16 -0
  33. package/dist/es2019/emotion/components/internal/required-input.js +35 -0
  34. package/dist/es2019/emotion/components/internal/scroll-manager.js +49 -0
  35. package/dist/es2019/emotion/components/internal/use-scroll-capture.js +128 -0
  36. package/dist/es2019/emotion/components/internal/use-scroll-lock.js +143 -0
  37. package/dist/es2019/emotion/components/live-region.js +178 -0
  38. package/dist/es2019/emotion/components/menu.js +450 -0
  39. package/dist/es2019/emotion/components/multi-value.js +227 -0
  40. package/dist/es2019/emotion/components/option.js +78 -0
  41. package/dist/es2019/emotion/components/placeholder.js +28 -0
  42. package/dist/es2019/emotion/components/single-value.js +34 -0
  43. package/dist/es2019/select.js +11 -8
  44. package/dist/esm/emotion/components/containers.js +105 -0
  45. package/dist/esm/emotion/components/control.js +103 -0
  46. package/dist/esm/emotion/components/group.js +65 -0
  47. package/dist/esm/emotion/components/index.js +43 -0
  48. package/dist/esm/emotion/components/indicators.js +132 -0
  49. package/dist/esm/emotion/components/input.js +89 -0
  50. package/dist/esm/emotion/components/internal/a11y-text.js +29 -0
  51. package/dist/esm/emotion/components/internal/dummy-input.js +38 -0
  52. package/dist/esm/emotion/components/internal/index.js +4 -0
  53. package/dist/esm/emotion/components/internal/notify-open-layer-observer.js +15 -0
  54. package/dist/esm/emotion/components/internal/required-input.js +36 -0
  55. package/dist/esm/emotion/components/internal/scroll-manager.js +49 -0
  56. package/dist/esm/emotion/components/internal/use-scroll-capture.js +126 -0
  57. package/dist/esm/emotion/components/internal/use-scroll-lock.js +143 -0
  58. package/dist/esm/emotion/components/live-region.js +175 -0
  59. package/dist/esm/emotion/components/menu.js +454 -0
  60. package/dist/esm/emotion/components/multi-value.js +217 -0
  61. package/dist/esm/emotion/components/option.js +75 -0
  62. package/dist/esm/emotion/components/placeholder.js +27 -0
  63. package/dist/esm/emotion/components/single-value.js +33 -0
  64. package/dist/esm/select.js +11 -8
  65. package/dist/types/components/internal/notify-open-layer-observer.d.ts +4 -2
  66. package/dist/types/emotion/components/containers.d.ts +54 -0
  67. package/dist/types/emotion/components/control.d.ts +42 -0
  68. package/dist/types/emotion/components/group.d.ts +52 -0
  69. package/dist/types/emotion/components/index.d.ts +67 -0
  70. package/dist/types/emotion/components/indicators.d.ts +73 -0
  71. package/dist/types/emotion/components/input.d.ts +37 -0
  72. package/dist/types/emotion/components/internal/a11y-text.d.ts +8 -0
  73. package/dist/types/emotion/components/internal/dummy-input.d.ts +9 -0
  74. package/dist/types/emotion/components/internal/index.d.ts +4 -0
  75. package/dist/types/emotion/components/internal/notify-open-layer-observer.d.ts +11 -0
  76. package/dist/types/emotion/components/internal/required-input.d.ts +10 -0
  77. package/dist/types/emotion/components/internal/scroll-manager.d.ts +17 -0
  78. package/dist/types/emotion/components/internal/use-scroll-capture.d.ts +12 -0
  79. package/dist/types/emotion/components/internal/use-scroll-lock.d.ts +9 -0
  80. package/dist/types/emotion/components/live-region.d.ts +25 -0
  81. package/dist/types/emotion/components/menu.d.ts +116 -0
  82. package/dist/types/emotion/components/multi-value.d.ts +47 -0
  83. package/dist/types/emotion/components/option.d.ts +49 -0
  84. package/dist/types/emotion/components/placeholder.d.ts +22 -0
  85. package/dist/types/emotion/components/single-value.d.ts +28 -0
  86. package/dist/types/select.d.ts +7 -4
  87. package/dist/types-ts4.5/components/internal/notify-open-layer-observer.d.ts +4 -2
  88. package/dist/types-ts4.5/emotion/components/containers.d.ts +54 -0
  89. package/dist/types-ts4.5/emotion/components/control.d.ts +42 -0
  90. package/dist/types-ts4.5/emotion/components/group.d.ts +52 -0
  91. package/dist/types-ts4.5/emotion/components/index.d.ts +67 -0
  92. package/dist/types-ts4.5/emotion/components/indicators.d.ts +73 -0
  93. package/dist/types-ts4.5/emotion/components/input.d.ts +37 -0
  94. package/dist/types-ts4.5/emotion/components/internal/a11y-text.d.ts +8 -0
  95. package/dist/types-ts4.5/emotion/components/internal/dummy-input.d.ts +9 -0
  96. package/dist/types-ts4.5/emotion/components/internal/index.d.ts +4 -0
  97. package/dist/types-ts4.5/emotion/components/internal/notify-open-layer-observer.d.ts +11 -0
  98. package/dist/types-ts4.5/emotion/components/internal/required-input.d.ts +10 -0
  99. package/dist/types-ts4.5/emotion/components/internal/scroll-manager.d.ts +17 -0
  100. package/dist/types-ts4.5/emotion/components/internal/use-scroll-capture.d.ts +12 -0
  101. package/dist/types-ts4.5/emotion/components/internal/use-scroll-lock.d.ts +9 -0
  102. package/dist/types-ts4.5/emotion/components/live-region.d.ts +25 -0
  103. package/dist/types-ts4.5/emotion/components/menu.d.ts +116 -0
  104. package/dist/types-ts4.5/emotion/components/multi-value.d.ts +47 -0
  105. package/dist/types-ts4.5/emotion/components/option.d.ts +49 -0
  106. package/dist/types-ts4.5/emotion/components/placeholder.d.ts +22 -0
  107. package/dist/types-ts4.5/emotion/components/single-value.d.ts +28 -0
  108. package/dist/types-ts4.5/select.d.ts +7 -4
  109. package/package.json +3 -3
@@ -0,0 +1,75 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
+
7
+ import { jsx } from '@emotion/react';
8
+ import { getStyleProps } from '../../utils';
9
+ export var optionCSS = function optionCSS(_ref) {
10
+ var isDisabled = _ref.isDisabled,
11
+ isFocused = _ref.isFocused,
12
+ isSelected = _ref.isSelected;
13
+ var color = "var(--ds-text, #172B4D)";
14
+ if (isDisabled) {
15
+ color = "var(--ds-text-disabled, #091E424F)";
16
+ } else if (isSelected) {
17
+ color = "var(--ds-text-selected, #0C66E4)";
18
+ }
19
+ var boxShadow;
20
+ var backgroundColor;
21
+ if (isDisabled) {
22
+ backgroundColor = undefined;
23
+ } else if (isSelected && isFocused) {
24
+ backgroundColor = "var(--ds-background-selected-hovered, #CCE0FF)";
25
+ } else if (isSelected) {
26
+ backgroundColor = "var(--ds-background-selected, #E9F2FF)";
27
+ } else if (isFocused) {
28
+ backgroundColor = "var(--ds-background-neutral-subtle-hovered, #091E420F)";
29
+ }
30
+ if (!isDisabled && (isFocused || isSelected)) {
31
+ boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, #0C66E4)");
32
+ }
33
+ var cursor = isDisabled ? 'not-allowed' : 'default';
34
+ return {
35
+ label: 'option',
36
+ display: 'block',
37
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
38
+ fontSize: 'inherit',
39
+ width: '100%',
40
+ userSelect: 'none',
41
+ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
42
+ padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
43
+ backgroundColor: backgroundColor,
44
+ color: color,
45
+ cursor: cursor,
46
+ boxShadow: boxShadow,
47
+ ':active': {
48
+ backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, #85B8FF)" : "var(--ds-background-neutral-subtle-pressed, #091E4224)" : undefined
49
+ },
50
+ '@media screen and (-ms-high-contrast: active)': {
51
+ borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
52
+ }
53
+ };
54
+ };
55
+ var Option = function Option(props) {
56
+ var children = props.children,
57
+ isDisabled = props.isDisabled,
58
+ isFocused = props.isFocused,
59
+ isSelected = props.isSelected,
60
+ innerRef = props.innerRef,
61
+ innerProps = props.innerProps;
62
+ return jsx("div", _extends({}, getStyleProps(props, 'option', {
63
+ option: true,
64
+ 'option--is-disabled': isDisabled,
65
+ 'option--is-focused': isFocused,
66
+ 'option--is-selected': isSelected
67
+ }), {
68
+ ref: innerRef
69
+ }, innerProps, {
70
+ tabIndex: -1
71
+ }), children);
72
+ };
73
+
74
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
75
+ export default Option;
@@ -0,0 +1,27 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
+
7
+ import { jsx } from '@emotion/react';
8
+ import { getStyleProps } from '../../utils';
9
+ export var placeholderCSS = function placeholderCSS(_ref) {
10
+ var isDisabled = _ref.isDisabled;
11
+ return {
12
+ label: 'placeholder',
13
+ gridArea: '1 / 1 / 2 / 3',
14
+ margin: "0 ".concat("var(--ds-space-025, 2px)"),
15
+ color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtlest, #626F86)"
16
+ };
17
+ };
18
+ var Placeholder = function Placeholder(props) {
19
+ var children = props.children,
20
+ innerProps = props.innerProps;
21
+ return jsx("div", _extends({}, getStyleProps(props, 'placeholder', {
22
+ placeholder: true
23
+ }), innerProps), children);
24
+ };
25
+
26
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
27
+ export default Placeholder;
@@ -0,0 +1,33 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
+
7
+ import { jsx } from '@emotion/react';
8
+ import { getStyleProps } from '../../utils';
9
+ export var css = function css(_ref) {
10
+ var isDisabled = _ref.isDisabled;
11
+ return {
12
+ label: 'singleValue',
13
+ gridArea: '1 / 1 / 2 / 3',
14
+ maxWidth: '100%',
15
+ overflow: 'hidden',
16
+ textOverflow: 'ellipsis',
17
+ whiteSpace: 'nowrap',
18
+ margin: "0 ".concat("var(--ds-space-025, 2px)"),
19
+ color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text, #172B4D)"
20
+ };
21
+ };
22
+ var SingleValue = function SingleValue(props) {
23
+ var children = props.children,
24
+ isDisabled = props.isDisabled,
25
+ innerProps = props.innerProps;
26
+ return jsx("div", _extends({}, getStyleProps(props, 'singleValue', {
27
+ 'single-value': true,
28
+ 'single-value--is-disabled': isDisabled
29
+ }), innerProps), children);
30
+ };
31
+
32
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
33
+ export default SingleValue;
@@ -71,7 +71,8 @@ export var defaultProps = {
71
71
  },
72
72
  styles: {},
73
73
  tabIndex: 0,
74
- tabSelectsValue: true
74
+ tabSelectsValue: true,
75
+ UNSAFE_is_experimental_generic: false
75
76
  };
76
77
  function toCategorizedOption(props, option, selectValue, index) {
77
78
  var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -1260,14 +1261,14 @@ var Select = /*#__PURE__*/function (_Component) {
1260
1261
  'aria-errormessage': this.props['aria-errormessage'],
1261
1262
  'aria-expanded': menuIsOpen,
1262
1263
  // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
1263
- 'aria-haspopup': 'listbox',
1264
+ 'aria-haspopup': this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
1264
1265
  'aria-describedby': this.props['aria-describedby'] || descriptionId,
1265
1266
  'aria-invalid': this.props['aria-invalid'] || isInvalid,
1266
1267
  'aria-label': this.props['aria-label'] || label,
1267
1268
  'aria-labelledby': this.props['aria-labelledby'] || labelId,
1268
1269
  'aria-required': required || isRequired,
1269
1270
  role: 'combobox',
1270
- 'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
1271
+ 'aria-activedescendant': this.props['UNSAFE_is_experimental_generic'] ? undefined : this.state.focusedOptionId || this.state.focusedValueId || undefined
1271
1272
  }, menuIsOpen && {
1272
1273
  'aria-controls': this.getElementId('listbox')
1273
1274
  }), !isSearchable && {
@@ -1534,8 +1535,8 @@ var Select = /*#__PURE__*/function (_Component) {
1534
1535
  onClick: onSelect,
1535
1536
  onMouseMove: onHover,
1536
1537
  onMouseOver: onHover,
1537
- role: 'option',
1538
- 'aria-selected': isSelected,
1538
+ role: _this4.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
1539
+ 'aria-selected': _this4.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
1539
1540
  // We don't want aria-disabled if it's false. It's just noisy.
1540
1541
  'aria-disabled': !isDisabled && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
1541
1542
  'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
@@ -1660,8 +1661,8 @@ var Select = /*#__PURE__*/function (_Component) {
1660
1661
  scrollTargetRef(instance);
1661
1662
  },
1662
1663
  innerProps: _objectSpread(_objectSpread({
1663
- role: 'listbox',
1664
- 'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
1664
+ role: _this4.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
1665
+ 'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') || _this4.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
1665
1666
  id: _this4.getElementId('listbox')
1666
1667
  }, testId && {
1667
1668
  'data-testid': "".concat(testId, "-select--listbox")
@@ -1669,7 +1670,9 @@ var Select = /*#__PURE__*/function (_Component) {
1669
1670
  isLoading: isLoading,
1670
1671
  maxHeight: maxHeight,
1671
1672
  focusedOption: focusedOption
1672
- }), menuUI);
1673
+ }), _this4.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/React.createElement("div", {
1674
+ role: "list"
1675
+ }, menuUI) : menuUI);
1673
1676
  }));
1674
1677
  });
1675
1678
 
@@ -1,5 +1,7 @@
1
- import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
2
- type NotifyOpenLayerObserverProps = Parameters<typeof useNotifyOpenLayerObserver>[0];
1
+ type NotifyOpenLayerObserverProps = {
2
+ isOpen: boolean;
3
+ onClose: () => void;
4
+ };
3
5
  /**
4
6
  * Functional component wrapper around `useNotifyOpenLayerObserver`.
5
7
  *
@@ -0,0 +1,54 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactNode } from 'react';
6
+ import { jsx } from '@emotion/react';
7
+ import { type CommonPropsAndClassName, type CSSObjectWithLabel, type GroupBase } from '../../types';
8
+ export interface ContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
9
+ /**
10
+ * Whether the select is disabled.
11
+ */
12
+ isDisabled: boolean;
13
+ isFocused: boolean;
14
+ /**
15
+ * The children to be rendered.
16
+ */
17
+ children: ReactNode;
18
+ /**
19
+ * Inner props to be passed down to the container.
20
+ */
21
+ innerProps: {};
22
+ }
23
+ export declare const containerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isRtl, }: ContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
24
+ export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
25
+ export interface ValueContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
26
+ /**
27
+ * Props to be passed to the value container element.
28
+ */
29
+ innerProps?: {};
30
+ /**
31
+ * The children to be rendered.
32
+ */
33
+ children: ReactNode;
34
+ isDisabled: boolean;
35
+ /**
36
+ * Whether the select is compact.
37
+ */
38
+ isCompact?: boolean;
39
+ }
40
+ export declare const valueContainerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isMulti, hasValue, isCompact, selectProps: { controlShouldRenderValue }, }: ValueContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
41
+ export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
42
+ export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
43
+ isDisabled: boolean;
44
+ /**
45
+ * The children to be rendered.
46
+ */
47
+ children: ReactNode;
48
+ /**
49
+ * Props to be passed to the indicators container element.
50
+ */
51
+ innerProps?: {};
52
+ }
53
+ export declare const indicatorsContainerCSS: () => CSSObjectWithLabel;
54
+ export declare const IndicatorsContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorsContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
@@ -0,0 +1,42 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactNode, type Ref } from 'react';
6
+ import { jsx } from '@emotion/react';
7
+ import { type CommonPropsAndClassName, type CSSObjectWithLabel, type GroupBase } from '../../types';
8
+ export interface ControlProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
9
+ /**
10
+ * Children to render.
11
+ */
12
+ children: ReactNode;
13
+ innerRef: Ref<HTMLDivElement>;
14
+ /**
15
+ * The mouse down event and the innerRef to pass down to the controller element.
16
+ */
17
+ innerProps: {};
18
+ /**
19
+ * Whether the select is disabled.
20
+ */
21
+ isDisabled: boolean;
22
+ /**
23
+ * Whether the select is focused.
24
+ */
25
+ isFocused: boolean;
26
+ /**
27
+ * Whether the select is invalid.
28
+ */
29
+ isInvalid: boolean | undefined;
30
+ /**
31
+ * Whether the select is compact.
32
+ */
33
+ isCompact?: boolean;
34
+ appearance?: 'default' | 'subtle' | 'none';
35
+ /**
36
+ * Whether the select is expanded.
37
+ */
38
+ menuIsOpen: boolean;
39
+ }
40
+ export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isInvalid, isCompact, appearance, }: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
41
+ declare const Control: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => jsx.JSX.Element;
42
+ export default Control;
@@ -0,0 +1,52 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ComponentType, type ReactNode } from 'react';
6
+ import { jsx } from '@emotion/react';
7
+ import { type SelectProps } from '../../select';
8
+ import { type CommonProps, type CommonPropsAndClassName, type CSSObjectWithLabel, type CX, type GetStyles, type GroupBase, type Options } from '../../types';
9
+ interface ForwardedHeadingProps<Option, Group extends GroupBase<Option>> {
10
+ id: string;
11
+ data: Group;
12
+ }
13
+ export interface GroupProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
14
+ /**
15
+ * The children to be rendered.
16
+ */
17
+ children: ReactNode;
18
+ /**
19
+ * Component to wrap the label, receives headingProps.
20
+ */
21
+ Heading: ComponentType<GroupHeadingProps<Option, IsMulti, Group>>;
22
+ /**
23
+ * Props to pass to Heading.
24
+ */
25
+ headingProps: ForwardedHeadingProps<Option, Group>;
26
+ /**
27
+ * Props to be passed to the group element.
28
+ */
29
+ innerProps: JSX.IntrinsicElements['div'];
30
+ /**
31
+ * Label to be displayed in the heading component.
32
+ */
33
+ label: ReactNode;
34
+ /**
35
+ * The data of the group.
36
+ */
37
+ data: Group;
38
+ options: Options<Option>;
39
+ }
40
+ export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
41
+ declare const Group: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupProps<Option, IsMulti, Group>) => jsx.JSX.Element;
42
+ interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends ForwardedHeadingProps<Option, Group> {
43
+ className?: string | undefined;
44
+ selectProps: SelectProps<Option, IsMulti, Group>;
45
+ getStyles: GetStyles<Option, IsMulti, Group>;
46
+ getClassNames: CommonProps<Option, IsMulti, Group>['getClassNames'];
47
+ cx: CX;
48
+ }
49
+ export type GroupHeadingProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = GroupHeadingPropsDefinedProps<Option, IsMulti, Group> & JSX.IntrinsicElements['div'];
50
+ export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
51
+ export declare const GroupHeading: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupHeadingProps<Option, IsMulti, Group>) => jsx.JSX.Element;
52
+ export default Group;
@@ -0,0 +1,67 @@
1
+ import { type ComponentType } from 'react';
2
+ import { type GroupBase } from '../../types';
3
+ import { type ContainerProps, type IndicatorsContainerProps, type ValueContainerProps } from './containers';
4
+ import { type ControlProps } from './control';
5
+ import { type GroupHeadingProps, type GroupProps } from './group';
6
+ import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from './indicators';
7
+ import { type InputProps } from './input';
8
+ import { type MenuListProps, type MenuPortalProps, type MenuProps, type NoticeProps } from './menu';
9
+ import { type MultiValueGenericProps, type MultiValueProps, MultiValueRemove, type MultiValueRemoveProps } from './multi-value';
10
+ import { type OptionProps } from './option';
11
+ import { type PlaceholderProps } from './placeholder';
12
+ import { type SingleValueProps } from './single-value';
13
+ export interface SelectComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
14
+ ClearIndicator: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
15
+ Control: ComponentType<ControlProps<Option, IsMulti, Group>>;
16
+ DropdownIndicator: ComponentType<DropdownIndicatorProps<Option, IsMulti, Group>> | null;
17
+ Group: ComponentType<GroupProps<Option, IsMulti, Group>>;
18
+ GroupHeading: ComponentType<GroupHeadingProps<Option, IsMulti, Group>>;
19
+ IndicatorsContainer: ComponentType<IndicatorsContainerProps<Option, IsMulti, Group>>;
20
+ Input: ComponentType<InputProps<Option, IsMulti, Group>>;
21
+ LoadingIndicator: ComponentType<LoadingIndicatorProps<Option, IsMulti, Group>>;
22
+ Menu: ComponentType<MenuProps<Option, IsMulti, Group>>;
23
+ MenuList: ComponentType<MenuListProps<Option, IsMulti, Group>>;
24
+ MenuPortal: ComponentType<MenuPortalProps<Option, IsMulti, Group>>;
25
+ LoadingMessage: ComponentType<NoticeProps<Option, IsMulti, Group>>;
26
+ NoOptionsMessage: ComponentType<NoticeProps<Option, IsMulti, Group>>;
27
+ MultiValue: ComponentType<MultiValueProps<Option, IsMulti, Group>>;
28
+ MultiValueContainer: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
29
+ MultiValueLabel: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
30
+ MultiValueRemove: ComponentType<MultiValueRemoveProps<Option, IsMulti, Group>>;
31
+ Option: ComponentType<OptionProps<Option, IsMulti, Group>>;
32
+ Placeholder: ComponentType<PlaceholderProps<Option, IsMulti, Group>>;
33
+ SelectContainer: ComponentType<ContainerProps<Option, IsMulti, Group>>;
34
+ SingleValue: ComponentType<SingleValueProps<Option, IsMulti, Group>>;
35
+ ValueContainer: ComponentType<ValueContainerProps<Option, IsMulti, Group>>;
36
+ }
37
+ export type SelectComponentsConfig<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Partial<SelectComponents<Option, IsMulti, Group>>;
38
+ export declare const components: {
39
+ ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
40
+ Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
41
+ DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
42
+ Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
43
+ GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
44
+ IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
45
+ Input: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: InputProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
46
+ LoadingIndicator: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>({ innerProps, isRtl, size, ...restProps }: LoadingIndicatorProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
47
+ Menu: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>(props: MenuProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
48
+ MenuList: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: MenuListProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
49
+ MenuPortal: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: MenuPortalProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element | null;
50
+ LoadingMessage: <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>({ children, innerProps, ...restProps }: NoticeProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element;
51
+ NoOptionsMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>({ children, innerProps, ...restProps }: NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
52
+ MultiValue: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>(props: MultiValueProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
53
+ MultiValueContainer: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>({ children, innerProps, }: MultiValueGenericProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
54
+ MultiValueLabel: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>({ children, innerProps, }: MultiValueGenericProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
55
+ MultiValueRemove: typeof MultiValueRemove;
56
+ Option: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>(props: OptionProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
57
+ Placeholder: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: PlaceholderProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
58
+ SelectContainer: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: ContainerProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
59
+ SingleValue: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: SingleValueProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
60
+ ValueContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: ValueContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
61
+ };
62
+ type SelectComponentsGeneric = typeof components;
63
+ interface ComponentsProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
64
+ components: SelectComponentsConfig<Option, IsMulti, Group>;
65
+ }
66
+ export declare const defaultComponents: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ComponentsProps<Option, IsMulti, Group>) => SelectComponentsGeneric;
67
+ export {};
@@ -0,0 +1,73 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactNode } from 'react';
6
+ import { jsx } from '@emotion/react';
7
+ import { type CommonPropsAndClassName, type CSSObjectWithLabel, type GroupBase } from '../../types';
8
+ export interface DropdownIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
9
+ /**
10
+ * The children to be rendered inside the indicator.
11
+ */
12
+ children?: ReactNode;
13
+ /**
14
+ * Props that will be passed on to the children.
15
+ */
16
+ innerProps: JSX.IntrinsicElements['div'];
17
+ /**
18
+ * The focused state of the select.
19
+ */
20
+ isFocused: boolean;
21
+ isDisabled: boolean;
22
+ /**
23
+ * Whether the select is compact.
24
+ */
25
+ isCompact?: boolean;
26
+ }
27
+ export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, isDisabled, }: DropdownIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
28
+ export declare const DropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
29
+ export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
30
+ /**
31
+ * The children to be rendered inside the indicator.
32
+ */
33
+ children?: ReactNode;
34
+ /**
35
+ * Sets the `aria-label` for the clear icon button
36
+ */
37
+ clearControlLabel?: string;
38
+ /**
39
+ * Props that will be passed on to the children.
40
+ */
41
+ innerProps: JSX.IntrinsicElements['div'];
42
+ /**
43
+ * The focused state of the select.
44
+ */
45
+ isFocused: boolean;
46
+ /**
47
+ * Whether the select is compact.
48
+ */
49
+ isCompact?: boolean;
50
+ }
51
+ export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, }: ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
52
+ export declare const ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
53
+ export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, }: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
54
+ export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
55
+ /**
56
+ * Props that will be passed on to the children.
57
+ */
58
+ innerProps: JSX.IntrinsicElements['div'];
59
+ /**
60
+ * The focused state of the select.
61
+ */
62
+ isFocused: boolean;
63
+ isDisabled: boolean;
64
+ /**
65
+ * Set size of the container.
66
+ */
67
+ size: number;
68
+ /**
69
+ * Whether the select is compact.
70
+ */
71
+ isCompact?: boolean;
72
+ }
73
+ export declare const LoadingIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ innerProps, isRtl, size, ...restProps }: LoadingIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
@@ -0,0 +1,37 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type InputHTMLAttributes } from 'react';
6
+ import { jsx } from '@emotion/react';
7
+ import { type CommonPropsAndClassName, type CSSObjectWithLabel, type GroupBase } from '../../types';
8
+ interface InputSpecificProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends InputHTMLAttributes<HTMLInputElement>, CommonPropsAndClassName<Option, IsMulti, Group> {
9
+ /**
10
+ * Reference to the internal element
11
+ */
12
+ innerRef?: (instance: HTMLInputElement | null) => void;
13
+ /**
14
+ * Set whether the input should be visible. Does not affect input size.
15
+ */
16
+ isHidden: boolean;
17
+ /**
18
+ * Whether the input is disabled
19
+ */
20
+ isDisabled?: boolean;
21
+ /**
22
+ * The ID of the form that the input belongs to
23
+ */
24
+ form?: string;
25
+ /**
26
+ * Set className for the input element
27
+ */
28
+ inputClassName?: string;
29
+ /**
30
+ * A testId prop is provided for specific elements. This is a unique string that appears as a data attribute data-testid in the rendered code and serves as a hook for automated tests.
31
+ */
32
+ testId?: string;
33
+ }
34
+ export type InputProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = InputSpecificProps<Option, IsMulti, Group>;
35
+ export declare const inputCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, value, }: InputProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
36
+ declare const Input: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => jsx.JSX.Element;
37
+ export default Input;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
+ import { jsx } from '@emotion/react';
7
+ declare const A11yText: (props: JSX.IntrinsicElements['span']) => jsx.JSX.Element;
8
+ export default A11yText;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type Ref } from 'react';
6
+ import { jsx } from '@emotion/react';
7
+ export default function DummyInput({ innerRef, ...props }: JSX.IntrinsicElements['input'] & {
8
+ readonly innerRef: Ref<HTMLInputElement>;
9
+ }): jsx.JSX.Element;
@@ -0,0 +1,4 @@
1
+ export { default as A11yText } from './a11y-text';
2
+ export { default as DummyInput } from './dummy-input';
3
+ export { default as ScrollManager } from './scroll-manager';
4
+ export { default as RequiredInput } from './required-input';
@@ -0,0 +1,11 @@
1
+ type NotifyOpenLayerObserverProps = {
2
+ isOpen: boolean;
3
+ onClose: () => void;
4
+ };
5
+ /**
6
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
7
+ *
8
+ * This is needed as Select is a class component, which cannot use hooks directly.
9
+ */
10
+ export declare function NotifyOpenLayerObserver({ isOpen, onClose }: NotifyOpenLayerObserverProps): null;
11
+ export {};
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type FocusEventHandler, type FunctionComponent } from 'react';
6
+ declare const RequiredInput: FunctionComponent<{
7
+ readonly name?: string;
8
+ readonly onFocus: FocusEventHandler<HTMLInputElement>;
9
+ }>;
10
+ export default RequiredInput;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactElement, type RefCallback } from 'react';
6
+ import { jsx } from '@emotion/react';
7
+ interface ScrollManagerProps {
8
+ readonly children: (ref: RefCallback<HTMLElement>) => ReactElement;
9
+ readonly lockEnabled: boolean;
10
+ readonly captureEnabled: boolean;
11
+ readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
12
+ readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
13
+ readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
14
+ readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
15
+ }
16
+ export default function ScrollManager({ children, lockEnabled, captureEnabled, onBottomArrive, onBottomLeave, onTopArrive, onTopLeave, }: ScrollManagerProps): jsx.JSX.Element;
17
+ export {};
@@ -0,0 +1,12 @@
1
+ interface Options {
2
+ readonly isEnabled: boolean;
3
+ readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
4
+ readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
5
+ readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
6
+ readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
7
+ }
8
+ /**
9
+ * {description}.
10
+ */
11
+ export default function useScrollCapture({ isEnabled, onBottomArrive, onBottomLeave, onTopArrive, onTopLeave, }: Options): (element: HTMLElement | null) => void;
12
+ export {};
@@ -0,0 +1,9 @@
1
+ interface Options {
2
+ readonly isEnabled: boolean;
3
+ readonly accountForScrollbars?: boolean;
4
+ }
5
+ /**
6
+ * {description}.
7
+ */
8
+ export default function useScrollLock({ isEnabled, accountForScrollbars }: Options): (element: HTMLElement | null) => void;
9
+ export {};