@atlaskit/react-select 1.5.2 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/components/group.js +2 -7
- package/dist/cjs/components/index.js +0 -3
- package/dist/cjs/components/indicators.js +54 -133
- package/dist/cjs/components/input.js +5 -8
- package/dist/cjs/components/menu.js +16 -18
- package/dist/cjs/components/multi-value.js +47 -10
- package/dist/cjs/components/single-value.js +1 -2
- package/dist/cjs/index.js +0 -7
- package/dist/cjs/select.js +88 -131
- package/dist/cjs/styles.js +0 -1
- package/dist/cjs/utils.js +1 -2
- package/dist/es2019/components/group.js +2 -7
- package/dist/es2019/components/index.js +1 -4
- package/dist/es2019/components/indicators.js +39 -113
- package/dist/es2019/components/input.js +5 -9
- package/dist/es2019/components/menu.js +16 -26
- package/dist/es2019/components/multi-value.js +48 -12
- package/dist/es2019/components/single-value.js +1 -4
- package/dist/es2019/index.js +0 -1
- package/dist/es2019/select.js +7 -52
- package/dist/es2019/styles.js +1 -2
- package/dist/es2019/utils.js +0 -2
- package/dist/esm/components/group.js +2 -7
- package/dist/esm/components/index.js +1 -4
- package/dist/esm/components/indicators.js +54 -133
- package/dist/esm/components/input.js +5 -8
- package/dist/esm/components/menu.js +16 -18
- package/dist/esm/components/multi-value.js +48 -11
- package/dist/esm/components/single-value.js +1 -2
- package/dist/esm/index.js +0 -1
- package/dist/esm/select.js +88 -131
- package/dist/esm/styles.js +1 -2
- package/dist/esm/utils.js +1 -2
- package/dist/types/components/group.d.ts +1 -2
- package/dist/types/components/index.d.ts +16 -22
- package/dist/types/components/indicators.d.ts +1 -16
- package/dist/types/components/input.d.ts +1 -1
- package/dist/types/components/menu.d.ts +3 -3
- package/dist/types/components/multi-value.d.ts +3 -2
- package/dist/types/components/single-value.d.ts +1 -1
- package/dist/types/index.d.ts +1 -3
- package/dist/types/select.d.ts +15 -28
- package/dist/types/styles.d.ts +1 -3
- package/dist/types/theme.d.ts +0 -1
- package/dist/types/types.d.ts +0 -1
- package/dist/types-ts4.5/components/group.d.ts +1 -2
- package/dist/types-ts4.5/components/index.d.ts +16 -22
- package/dist/types-ts4.5/components/indicators.d.ts +1 -16
- package/dist/types-ts4.5/components/input.d.ts +1 -1
- package/dist/types-ts4.5/components/menu.d.ts +3 -3
- package/dist/types-ts4.5/components/multi-value.d.ts +3 -2
- package/dist/types-ts4.5/components/single-value.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +1 -3
- package/dist/types-ts4.5/select.d.ts +15 -28
- package/dist/types-ts4.5/styles.d.ts +1 -3
- package/dist/types-ts4.5/theme.d.ts +0 -1
- package/dist/types-ts4.5/types.d.ts +0 -1
- package/package.json +8 -2
- package/types/package.json +17 -0
package/dist/esm/select.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
4
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
5
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
8
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
10
9
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
10
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
-
function
|
|
11
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
13
12
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
14
13
|
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
15
14
|
import React, { Component } from 'react';
|
|
@@ -22,10 +21,10 @@ import LiveRegion from './components/live-region';
|
|
|
22
21
|
import { MenuPlacer } from './components/menu';
|
|
23
22
|
import { createFilter } from './filters';
|
|
24
23
|
import { defaultStyles } from './styles';
|
|
25
|
-
import { defaultTheme } from './theme';
|
|
26
24
|
import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
|
|
27
25
|
export var defaultProps = {
|
|
28
26
|
// aria-live is by default with the live region so we don't need it
|
|
27
|
+
// eslint-disable-next-line @atlaskit/platform/no-module-level-eval
|
|
29
28
|
'aria-live': fg('design_system_select-a11y-improvement') ? undefined : 'polite',
|
|
30
29
|
backspaceRemovesValue: true,
|
|
31
30
|
blurInputOnSelect: isTouchCapable(),
|
|
@@ -217,16 +216,14 @@ var instanceId = 1;
|
|
|
217
216
|
|
|
218
217
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
219
218
|
var Select = /*#__PURE__*/function (_Component) {
|
|
220
|
-
_inherits(Select, _Component);
|
|
221
|
-
var _super = _createSuper(Select);
|
|
222
219
|
// Lifecycle
|
|
223
220
|
// ------------------------------
|
|
224
221
|
|
|
225
222
|
function Select(_props) {
|
|
226
223
|
var _this;
|
|
227
224
|
_classCallCheck(this, Select);
|
|
228
|
-
_this =
|
|
229
|
-
_defineProperty(
|
|
225
|
+
_this = _callSuper(this, Select, [_props]);
|
|
226
|
+
_defineProperty(_this, "state", {
|
|
230
227
|
ariaSelection: null,
|
|
231
228
|
focusedOption: null,
|
|
232
229
|
focusedOptionId: null,
|
|
@@ -243,36 +240,36 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
243
240
|
});
|
|
244
241
|
// Misc. Instance Properties
|
|
245
242
|
// ------------------------------
|
|
246
|
-
_defineProperty(
|
|
247
|
-
_defineProperty(
|
|
243
|
+
_defineProperty(_this, "blockOptionHover", false);
|
|
244
|
+
_defineProperty(_this, "isComposing", false);
|
|
248
245
|
// TODO
|
|
249
|
-
_defineProperty(
|
|
250
|
-
_defineProperty(
|
|
251
|
-
_defineProperty(
|
|
252
|
-
_defineProperty(
|
|
253
|
-
_defineProperty(
|
|
246
|
+
_defineProperty(_this, "initialTouchX", 0);
|
|
247
|
+
_defineProperty(_this, "initialTouchY", 0);
|
|
248
|
+
_defineProperty(_this, "openAfterFocus", false);
|
|
249
|
+
_defineProperty(_this, "scrollToFocusedOptionOnUpdate", false);
|
|
250
|
+
_defineProperty(_this, "isVoiceOver", fg('design_system_select-a11y-improvement') && isAppleDevice());
|
|
254
251
|
// Refs
|
|
255
252
|
// ------------------------------
|
|
256
|
-
_defineProperty(
|
|
257
|
-
_defineProperty(
|
|
253
|
+
_defineProperty(_this, "controlRef", null);
|
|
254
|
+
_defineProperty(_this, "getControlRef", function (ref) {
|
|
258
255
|
_this.controlRef = ref;
|
|
259
256
|
});
|
|
260
|
-
_defineProperty(
|
|
261
|
-
_defineProperty(
|
|
257
|
+
_defineProperty(_this, "focusedOptionRef", null);
|
|
258
|
+
_defineProperty(_this, "getFocusedOptionRef", function (ref) {
|
|
262
259
|
_this.focusedOptionRef = ref;
|
|
263
260
|
});
|
|
264
|
-
_defineProperty(
|
|
265
|
-
_defineProperty(
|
|
261
|
+
_defineProperty(_this, "menuListRef", null);
|
|
262
|
+
_defineProperty(_this, "getMenuListRef", function (ref) {
|
|
266
263
|
_this.menuListRef = ref;
|
|
267
264
|
});
|
|
268
|
-
_defineProperty(
|
|
269
|
-
_defineProperty(
|
|
265
|
+
_defineProperty(_this, "inputRef", null);
|
|
266
|
+
_defineProperty(_this, "getInputRef", function (ref) {
|
|
270
267
|
_this.inputRef = ref;
|
|
271
268
|
});
|
|
272
269
|
// aliased for consumers
|
|
273
|
-
_defineProperty(
|
|
274
|
-
_defineProperty(
|
|
275
|
-
_defineProperty(
|
|
270
|
+
_defineProperty(_this, "focus", _this.focusInput);
|
|
271
|
+
_defineProperty(_this, "blur", _this.blurInput);
|
|
272
|
+
_defineProperty(_this, "onChange", function (newValue, actionMeta) {
|
|
276
273
|
var _this$props = _this.props,
|
|
277
274
|
onChange = _this$props.onChange,
|
|
278
275
|
name = _this$props.name;
|
|
@@ -280,7 +277,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
280
277
|
_this.ariaOnChange(newValue, actionMeta);
|
|
281
278
|
onChange(newValue, actionMeta);
|
|
282
279
|
});
|
|
283
|
-
_defineProperty(
|
|
280
|
+
_defineProperty(_this, "setValue", function (newValue, action, option) {
|
|
284
281
|
var _this$props2 = _this.props,
|
|
285
282
|
closeMenuOnSelect = _this$props2.closeMenuOnSelect,
|
|
286
283
|
isMulti = _this$props2.isMulti,
|
|
@@ -304,7 +301,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
304
301
|
option: option
|
|
305
302
|
});
|
|
306
303
|
});
|
|
307
|
-
_defineProperty(
|
|
304
|
+
_defineProperty(_this, "selectOption", function (newValue) {
|
|
308
305
|
var _this$props3 = _this.props,
|
|
309
306
|
blurInputOnSelect = _this$props3.blurInputOnSelect,
|
|
310
307
|
isMulti = _this$props3.isMulti,
|
|
@@ -336,7 +333,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
336
333
|
_this.blurInput();
|
|
337
334
|
}
|
|
338
335
|
});
|
|
339
|
-
_defineProperty(
|
|
336
|
+
_defineProperty(_this, "removeValue", function (removedValue) {
|
|
340
337
|
var isMulti = _this.props.isMulti;
|
|
341
338
|
var selectValue = _this.state.selectValue;
|
|
342
339
|
var candidate = _this.getOptionValue(removedValue);
|
|
@@ -350,14 +347,14 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
350
347
|
});
|
|
351
348
|
_this.focusInput();
|
|
352
349
|
});
|
|
353
|
-
_defineProperty(
|
|
350
|
+
_defineProperty(_this, "clearValue", function () {
|
|
354
351
|
var selectValue = _this.state.selectValue;
|
|
355
352
|
_this.onChange(valueTernary(_this.props.isMulti, [], null), {
|
|
356
353
|
action: 'clear',
|
|
357
354
|
removedValues: selectValue
|
|
358
355
|
});
|
|
359
356
|
});
|
|
360
|
-
_defineProperty(
|
|
357
|
+
_defineProperty(_this, "popValue", function () {
|
|
361
358
|
var isMulti = _this.props.isMulti;
|
|
362
359
|
var selectValue = _this.state.selectValue;
|
|
363
360
|
var lastSelectedValue = selectValue[selectValue.length - 1];
|
|
@@ -368,59 +365,62 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
368
365
|
removedValue: lastSelectedValue
|
|
369
366
|
});
|
|
370
367
|
});
|
|
371
|
-
|
|
368
|
+
// ==============================
|
|
369
|
+
// Getters
|
|
370
|
+
// ==============================
|
|
371
|
+
_defineProperty(_this, "getFocusedOptionId", function (focusedOption) {
|
|
372
372
|
return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
|
|
373
373
|
});
|
|
374
|
-
_defineProperty(
|
|
374
|
+
_defineProperty(_this, "getFocusableOptionsWithIds", function () {
|
|
375
375
|
return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
|
|
376
376
|
});
|
|
377
|
-
_defineProperty(
|
|
377
|
+
_defineProperty(_this, "getValue", function () {
|
|
378
378
|
return _this.state.selectValue;
|
|
379
379
|
});
|
|
380
|
-
_defineProperty(
|
|
380
|
+
_defineProperty(_this, "cx", function () {
|
|
381
381
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
382
382
|
args[_key] = arguments[_key];
|
|
383
383
|
}
|
|
384
384
|
return classNames.apply(void 0, [_this.props.classNamePrefix].concat(args));
|
|
385
385
|
});
|
|
386
|
-
_defineProperty(
|
|
386
|
+
_defineProperty(_this, "getOptionLabel", function (data) {
|
|
387
387
|
return getOptionLabel(_this.props, data);
|
|
388
388
|
});
|
|
389
|
-
_defineProperty(
|
|
389
|
+
_defineProperty(_this, "getOptionValue", function (data) {
|
|
390
390
|
return getOptionValue(_this.props, data);
|
|
391
391
|
});
|
|
392
|
-
_defineProperty(
|
|
392
|
+
_defineProperty(_this, "getStyles", function (key, props) {
|
|
393
393
|
var base = defaultStyles[key](props);
|
|
394
394
|
base.boxSizing = 'border-box';
|
|
395
395
|
var custom = _this.props.styles[key];
|
|
396
396
|
return custom ? custom(base, props) : base;
|
|
397
397
|
});
|
|
398
|
-
_defineProperty(
|
|
398
|
+
_defineProperty(_this, "getClassNames", function (key, props) {
|
|
399
399
|
var _this$props$className, _this$props$className2;
|
|
400
400
|
return (_this$props$className = (_this$props$className2 = _this.props.classNames)[key]) === null || _this$props$className === void 0 ? void 0 : _this$props$className.call(_this$props$className2, props);
|
|
401
401
|
});
|
|
402
|
-
_defineProperty(
|
|
402
|
+
_defineProperty(_this, "getElementId", function (element) {
|
|
403
403
|
return "".concat(_this.state.instancePrefix, "-").concat(element);
|
|
404
404
|
});
|
|
405
|
-
_defineProperty(
|
|
405
|
+
_defineProperty(_this, "getComponents", function () {
|
|
406
406
|
return defaultComponents(_this.props);
|
|
407
407
|
});
|
|
408
|
-
_defineProperty(
|
|
408
|
+
_defineProperty(_this, "buildCategorizedOptions", function () {
|
|
409
409
|
return buildCategorizedOptions(_this.props, _this.state.selectValue);
|
|
410
410
|
});
|
|
411
|
-
_defineProperty(
|
|
411
|
+
_defineProperty(_this, "getCategorizedOptions", function () {
|
|
412
412
|
return _this.props.menuIsOpen ? _this.buildCategorizedOptions() : [];
|
|
413
413
|
});
|
|
414
|
-
_defineProperty(
|
|
414
|
+
_defineProperty(_this, "buildFocusableOptions", function () {
|
|
415
415
|
return buildFocusableOptionsFromCategorizedOptions(_this.buildCategorizedOptions());
|
|
416
416
|
});
|
|
417
|
-
_defineProperty(
|
|
417
|
+
_defineProperty(_this, "getFocusableOptions", function () {
|
|
418
418
|
return _this.props.menuIsOpen ? _this.buildFocusableOptions() : [];
|
|
419
419
|
});
|
|
420
420
|
// ==============================
|
|
421
421
|
// Helpers
|
|
422
422
|
// ==============================
|
|
423
|
-
_defineProperty(
|
|
423
|
+
_defineProperty(_this, "ariaOnChange", function (value, actionMeta) {
|
|
424
424
|
_this.setState({
|
|
425
425
|
ariaSelection: _objectSpread({
|
|
426
426
|
value: value
|
|
@@ -430,7 +430,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
430
430
|
// ==============================
|
|
431
431
|
// Mouse Handlers
|
|
432
432
|
// ==============================
|
|
433
|
-
_defineProperty(
|
|
433
|
+
_defineProperty(_this, "onMenuMouseDown", function (event) {
|
|
434
434
|
if (event.button !== 0) {
|
|
435
435
|
return;
|
|
436
436
|
}
|
|
@@ -438,10 +438,10 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
438
438
|
event.preventDefault();
|
|
439
439
|
_this.focusInput();
|
|
440
440
|
});
|
|
441
|
-
_defineProperty(
|
|
441
|
+
_defineProperty(_this, "onMenuMouseMove", function (event) {
|
|
442
442
|
_this.blockOptionHover = false;
|
|
443
443
|
});
|
|
444
|
-
_defineProperty(
|
|
444
|
+
_defineProperty(_this, "onControlMouseDown", function (event) {
|
|
445
445
|
// Event captured by dropdown indicator
|
|
446
446
|
if (event.defaultPrevented) {
|
|
447
447
|
var _this$controlRef;
|
|
@@ -470,7 +470,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
470
470
|
event.preventDefault();
|
|
471
471
|
}
|
|
472
472
|
});
|
|
473
|
-
_defineProperty(
|
|
473
|
+
_defineProperty(_this, "onDropdownIndicatorMouseDown", function (event) {
|
|
474
474
|
// ignore mouse events that weren't triggered by the primary button
|
|
475
475
|
if (event && event.type === 'mousedown' && event.button !== 0) {
|
|
476
476
|
return;
|
|
@@ -492,7 +492,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
492
492
|
}
|
|
493
493
|
event.preventDefault();
|
|
494
494
|
});
|
|
495
|
-
_defineProperty(
|
|
495
|
+
_defineProperty(_this, "onClearIndicatorMouseDown", function (event) {
|
|
496
496
|
// ignore mouse events that weren't triggered by the primary button
|
|
497
497
|
if (event && event.type === 'mousedown' && event.button !== 0) {
|
|
498
498
|
return;
|
|
@@ -508,7 +508,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
508
508
|
});
|
|
509
509
|
}
|
|
510
510
|
});
|
|
511
|
-
_defineProperty(
|
|
511
|
+
_defineProperty(_this, "onScroll", function (event) {
|
|
512
512
|
if (typeof _this.props.closeMenuOnScroll === 'boolean') {
|
|
513
513
|
if (event.target instanceof HTMLElement && isDocumentElement(event.target)) {
|
|
514
514
|
_this.props.onMenuClose();
|
|
@@ -519,13 +519,13 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
519
519
|
}
|
|
520
520
|
}
|
|
521
521
|
});
|
|
522
|
-
_defineProperty(
|
|
522
|
+
_defineProperty(_this, "onCompositionStart", function () {
|
|
523
523
|
_this.isComposing = true;
|
|
524
524
|
});
|
|
525
|
-
_defineProperty(
|
|
525
|
+
_defineProperty(_this, "onCompositionEnd", function () {
|
|
526
526
|
_this.isComposing = false;
|
|
527
527
|
});
|
|
528
|
-
_defineProperty(
|
|
528
|
+
_defineProperty(_this, "onTouchStart", function (_ref2) {
|
|
529
529
|
var touches = _ref2.touches;
|
|
530
530
|
var touch = touches && touches.item(0);
|
|
531
531
|
if (!touch) {
|
|
@@ -535,7 +535,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
535
535
|
_this.initialTouchY = touch.clientY;
|
|
536
536
|
_this.userIsDragging = false;
|
|
537
537
|
});
|
|
538
|
-
_defineProperty(
|
|
538
|
+
_defineProperty(_this, "onTouchMove", function (_ref3) {
|
|
539
539
|
var touches = _ref3.touches;
|
|
540
540
|
var touch = touches && touches.item(0);
|
|
541
541
|
if (!touch) {
|
|
@@ -546,7 +546,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
546
546
|
var moveThreshold = 5;
|
|
547
547
|
_this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold;
|
|
548
548
|
});
|
|
549
|
-
_defineProperty(
|
|
549
|
+
_defineProperty(_this, "onTouchEnd", function (event) {
|
|
550
550
|
if (_this.userIsDragging) {
|
|
551
551
|
return;
|
|
552
552
|
}
|
|
@@ -562,19 +562,19 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
562
562
|
_this.initialTouchX = 0;
|
|
563
563
|
_this.initialTouchY = 0;
|
|
564
564
|
});
|
|
565
|
-
_defineProperty(
|
|
565
|
+
_defineProperty(_this, "onControlTouchEnd", function (event) {
|
|
566
566
|
if (_this.userIsDragging) {
|
|
567
567
|
return;
|
|
568
568
|
}
|
|
569
569
|
_this.onControlMouseDown(event);
|
|
570
570
|
});
|
|
571
|
-
_defineProperty(
|
|
571
|
+
_defineProperty(_this, "onClearIndicatorTouchEnd", function (event) {
|
|
572
572
|
if (_this.userIsDragging) {
|
|
573
573
|
return;
|
|
574
574
|
}
|
|
575
575
|
_this.onClearIndicatorMouseDown(event);
|
|
576
576
|
});
|
|
577
|
-
_defineProperty(
|
|
577
|
+
_defineProperty(_this, "onDropdownIndicatorTouchEnd", function (event) {
|
|
578
578
|
if (_this.userIsDragging) {
|
|
579
579
|
return;
|
|
580
580
|
}
|
|
@@ -583,7 +583,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
583
583
|
// ==============================
|
|
584
584
|
// Focus Handlers
|
|
585
585
|
// ==============================
|
|
586
|
-
_defineProperty(
|
|
586
|
+
_defineProperty(_this, "handleInputChange", function (event) {
|
|
587
587
|
var prevInputValue = _this.props.inputValue;
|
|
588
588
|
var inputValue = event.currentTarget.value;
|
|
589
589
|
_this.setState({
|
|
@@ -597,7 +597,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
597
597
|
_this.onMenuOpen();
|
|
598
598
|
}
|
|
599
599
|
});
|
|
600
|
-
_defineProperty(
|
|
600
|
+
_defineProperty(_this, "onInputFocus", function (event) {
|
|
601
601
|
if (_this.props.onFocus) {
|
|
602
602
|
_this.props.onFocus(event);
|
|
603
603
|
}
|
|
@@ -610,7 +610,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
610
610
|
}
|
|
611
611
|
_this.openAfterFocus = false;
|
|
612
612
|
});
|
|
613
|
-
_defineProperty(
|
|
613
|
+
_defineProperty(_this, "onInputBlur", function (event) {
|
|
614
614
|
var prevInputValue = _this.props.inputValue;
|
|
615
615
|
if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) {
|
|
616
616
|
_this.inputRef.focus();
|
|
@@ -629,7 +629,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
629
629
|
isFocused: false
|
|
630
630
|
});
|
|
631
631
|
});
|
|
632
|
-
_defineProperty(
|
|
632
|
+
_defineProperty(_this, "onOptionHover", function (focusedOption) {
|
|
633
633
|
if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
|
|
634
634
|
return;
|
|
635
635
|
}
|
|
@@ -640,12 +640,12 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
640
640
|
focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
|
|
641
641
|
});
|
|
642
642
|
});
|
|
643
|
-
_defineProperty(
|
|
643
|
+
_defineProperty(_this, "shouldHideSelectedOptions", function () {
|
|
644
644
|
return shouldHideSelectedOptions(_this.props);
|
|
645
645
|
});
|
|
646
646
|
// If the hidden input gets focus through form submit,
|
|
647
647
|
// redirect focus to focusable input.
|
|
648
|
-
_defineProperty(
|
|
648
|
+
_defineProperty(_this, "onValueInputFocus", function (e) {
|
|
649
649
|
e.preventDefault();
|
|
650
650
|
e.stopPropagation();
|
|
651
651
|
_this.focus();
|
|
@@ -653,7 +653,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
653
653
|
// ==============================
|
|
654
654
|
// Keyboard Handlers
|
|
655
655
|
// ==============================
|
|
656
|
-
_defineProperty(
|
|
656
|
+
_defineProperty(_this, "onKeyDown", function (event) {
|
|
657
657
|
var _this$props5 = _this.props,
|
|
658
658
|
isMulti = _this$props5.isMulti,
|
|
659
659
|
backspaceRemovesValue = _this$props5.backspaceRemovesValue,
|
|
@@ -826,7 +826,8 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
826
826
|
}
|
|
827
827
|
return _this;
|
|
828
828
|
}
|
|
829
|
-
|
|
829
|
+
_inherits(Select, _Component);
|
|
830
|
+
return _createClass(Select, [{
|
|
830
831
|
key: "componentDidMount",
|
|
831
832
|
value: function componentDidMount() {
|
|
832
833
|
this.startListeningComposition();
|
|
@@ -1042,28 +1043,6 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1042
1043
|
focusedOptionId: this.getFocusedOptionId(options[nextFocus])
|
|
1043
1044
|
});
|
|
1044
1045
|
}
|
|
1045
|
-
}, {
|
|
1046
|
-
key: "getTheme",
|
|
1047
|
-
value:
|
|
1048
|
-
// ==============================
|
|
1049
|
-
// Getters
|
|
1050
|
-
// ==============================
|
|
1051
|
-
|
|
1052
|
-
function getTheme() {
|
|
1053
|
-
// Use the default theme if there are no customisations.
|
|
1054
|
-
if (!this.props.theme) {
|
|
1055
|
-
return defaultTheme;
|
|
1056
|
-
}
|
|
1057
|
-
// If the theme prop is a function, assume the function
|
|
1058
|
-
// knows how to merge the passed-in default theme with
|
|
1059
|
-
// its own modifications.
|
|
1060
|
-
if (typeof this.props.theme === 'function') {
|
|
1061
|
-
return this.props.theme(defaultTheme);
|
|
1062
|
-
}
|
|
1063
|
-
// Otherwise, if a plain theme object was passed in,
|
|
1064
|
-
// overlay it with the default theme.
|
|
1065
|
-
return _objectSpread(_objectSpread({}, defaultTheme), this.props.theme);
|
|
1066
|
-
}
|
|
1067
1046
|
}, {
|
|
1068
1047
|
key: "getCommonProps",
|
|
1069
1048
|
value: function getCommonProps() {
|
|
@@ -1091,8 +1070,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1091
1070
|
options: options,
|
|
1092
1071
|
selectOption: selectOption,
|
|
1093
1072
|
selectProps: props,
|
|
1094
|
-
setValue: setValue
|
|
1095
|
-
theme: this.getTheme()
|
|
1073
|
+
setValue: setValue
|
|
1096
1074
|
};
|
|
1097
1075
|
}
|
|
1098
1076
|
}, {
|
|
@@ -1401,8 +1379,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1401
1379
|
}
|
|
1402
1380
|
var innerProps = {
|
|
1403
1381
|
onMouseDown: this.onClearIndicatorMouseDown,
|
|
1404
|
-
onTouchEnd: this.onClearIndicatorTouchEnd
|
|
1405
|
-
'aria-hidden': 'true'
|
|
1382
|
+
onTouchEnd: this.onClearIndicatorTouchEnd
|
|
1406
1383
|
};
|
|
1407
1384
|
var isCompact = spacing === 'compact';
|
|
1408
1385
|
return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
|
|
@@ -1438,30 +1415,11 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1438
1415
|
isCompact: isCompact
|
|
1439
1416
|
}));
|
|
1440
1417
|
}
|
|
1441
|
-
}, {
|
|
1442
|
-
key: "renderIndicatorSeparator",
|
|
1443
|
-
value: function renderIndicatorSeparator() {
|
|
1444
|
-
var _this$getComponents5 = this.getComponents(),
|
|
1445
|
-
DropdownIndicator = _this$getComponents5.DropdownIndicator,
|
|
1446
|
-
IndicatorSeparator = _this$getComponents5.IndicatorSeparator;
|
|
1447
|
-
|
|
1448
|
-
// separator doesn't make sense without the dropdown indicator
|
|
1449
|
-
if (!DropdownIndicator || !IndicatorSeparator) {
|
|
1450
|
-
return null;
|
|
1451
|
-
}
|
|
1452
|
-
var commonProps = this.commonProps;
|
|
1453
|
-
var isDisabled = this.props.isDisabled;
|
|
1454
|
-
var isFocused = this.state.isFocused;
|
|
1455
|
-
return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends({}, commonProps, {
|
|
1456
|
-
isDisabled: isDisabled,
|
|
1457
|
-
isFocused: isFocused
|
|
1458
|
-
}));
|
|
1459
|
-
}
|
|
1460
1418
|
}, {
|
|
1461
1419
|
key: "renderDropdownIndicator",
|
|
1462
1420
|
value: function renderDropdownIndicator() {
|
|
1463
|
-
var _this$
|
|
1464
|
-
DropdownIndicator = _this$
|
|
1421
|
+
var _this$getComponents5 = this.getComponents(),
|
|
1422
|
+
DropdownIndicator = _this$getComponents5.DropdownIndicator;
|
|
1465
1423
|
if (!DropdownIndicator) {
|
|
1466
1424
|
return null;
|
|
1467
1425
|
}
|
|
@@ -1487,15 +1445,15 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1487
1445
|
key: "renderMenu",
|
|
1488
1446
|
value: function renderMenu() {
|
|
1489
1447
|
var _this4 = this;
|
|
1490
|
-
var _this$
|
|
1491
|
-
Group = _this$
|
|
1492
|
-
GroupHeading = _this$
|
|
1493
|
-
Menu = _this$
|
|
1494
|
-
MenuList = _this$
|
|
1495
|
-
MenuPortal = _this$
|
|
1496
|
-
LoadingMessage = _this$
|
|
1497
|
-
NoOptionsMessage = _this$
|
|
1498
|
-
Option = _this$
|
|
1448
|
+
var _this$getComponents6 = this.getComponents(),
|
|
1449
|
+
Group = _this$getComponents6.Group,
|
|
1450
|
+
GroupHeading = _this$getComponents6.GroupHeading,
|
|
1451
|
+
Menu = _this$getComponents6.Menu,
|
|
1452
|
+
MenuList = _this$getComponents6.MenuList,
|
|
1453
|
+
MenuPortal = _this$getComponents6.MenuPortal,
|
|
1454
|
+
LoadingMessage = _this$getComponents6.LoadingMessage,
|
|
1455
|
+
NoOptionsMessage = _this$getComponents6.NoOptionsMessage,
|
|
1456
|
+
Option = _this$getComponents6.Option;
|
|
1499
1457
|
var commonProps = this.commonProps;
|
|
1500
1458
|
var focusedOption = this.state.focusedOption;
|
|
1501
1459
|
var _this$props13 = this.props,
|
|
@@ -1750,11 +1708,11 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1750
1708
|
}, {
|
|
1751
1709
|
key: "render",
|
|
1752
1710
|
value: function render() {
|
|
1753
|
-
var _this$
|
|
1754
|
-
Control = _this$
|
|
1755
|
-
IndicatorsContainer = _this$
|
|
1756
|
-
SelectContainer = _this$
|
|
1757
|
-
ValueContainer = _this$
|
|
1711
|
+
var _this$getComponents7 = this.getComponents(),
|
|
1712
|
+
Control = _this$getComponents7.Control,
|
|
1713
|
+
IndicatorsContainer = _this$getComponents7.IndicatorsContainer,
|
|
1714
|
+
SelectContainer = _this$getComponents7.SelectContainer,
|
|
1715
|
+
ValueContainer = _this$getComponents7.ValueContainer;
|
|
1758
1716
|
var _this$props15 = this.props,
|
|
1759
1717
|
className = _this$props15.className,
|
|
1760
1718
|
id = _this$props15.id,
|
|
@@ -1794,7 +1752,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1794
1752
|
isCompact: isCompact
|
|
1795
1753
|
}), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
|
|
1796
1754
|
isDisabled: isDisabled
|
|
1797
|
-
}), this.renderClearIndicator(), this.renderLoadingIndicator(), this.
|
|
1755
|
+
}), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
|
|
1798
1756
|
}
|
|
1799
1757
|
}], [{
|
|
1800
1758
|
key: "getDerivedStateFromProps",
|
|
@@ -1858,7 +1816,6 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1858
1816
|
});
|
|
1859
1817
|
}
|
|
1860
1818
|
}]);
|
|
1861
|
-
return Select;
|
|
1862
1819
|
}(Component);
|
|
1863
1820
|
_defineProperty(Select, "defaultProps", defaultProps);
|
|
1864
1821
|
export { Select as default };
|
package/dist/esm/styles.js
CHANGED
|
@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
import { containerCSS, indicatorsContainerCSS, valueContainerCSS } from './components/containers';
|
|
5
5
|
import { css as controlCSS } from './components/control';
|
|
6
6
|
import { groupCSS, groupHeadingCSS } from './components/group';
|
|
7
|
-
import { clearIndicatorCSS, dropdownIndicatorCSS,
|
|
7
|
+
import { clearIndicatorCSS, dropdownIndicatorCSS, loadingIndicatorCSS } from './components/indicators';
|
|
8
8
|
import { inputCSS } from './components/input';
|
|
9
9
|
import { loadingMessageCSS, menuCSS, menuListCSS, menuPortalCSS, noOptionsMessageCSS } from './components/menu';
|
|
10
10
|
import { multiValueCSS, multiValueLabelCSS, multiValueRemoveCSS } from './components/multi-value';
|
|
@@ -19,7 +19,6 @@ export var defaultStyles = {
|
|
|
19
19
|
group: groupCSS,
|
|
20
20
|
groupHeading: groupHeadingCSS,
|
|
21
21
|
indicatorsContainer: indicatorsContainerCSS,
|
|
22
|
-
indicatorSeparator: indicatorSeparatorCSS,
|
|
23
22
|
input: inputCSS,
|
|
24
23
|
loadingIndicator: loadingIndicatorCSS,
|
|
25
24
|
loadingMessage: loadingMessageCSS,
|
package/dist/esm/utils.js
CHANGED
|
@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
5
|
-
var _excluded = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue"
|
|
5
|
+
var _excluded = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue"];
|
|
6
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
7
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
8
8
|
// ==============================
|
|
@@ -87,7 +87,6 @@ export var cleanCommonProps = function cleanCommonProps(props) {
|
|
|
87
87
|
selectOption = props.selectOption,
|
|
88
88
|
selectProps = props.selectProps,
|
|
89
89
|
setValue = props.setValue,
|
|
90
|
-
theme = props.theme,
|
|
91
90
|
innerProps = _objectWithoutProperties(props, _excluded);
|
|
92
91
|
return _objectSpread({}, innerProps);
|
|
93
92
|
};
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { type ComponentType, type ReactNode } from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import { type SelectProps } from '../select';
|
|
8
|
-
import { type CommonProps, type CommonPropsAndClassName, type CSSObjectWithLabel, type CX, type GetStyles, type GroupBase, type Options
|
|
8
|
+
import { type CommonProps, type CommonPropsAndClassName, type CSSObjectWithLabel, type CX, type GetStyles, type GroupBase, type Options } from '../types';
|
|
9
9
|
export interface ForwardedHeadingProps<Option, Group extends GroupBase<Option>> {
|
|
10
10
|
id: string;
|
|
11
11
|
data: Group;
|
|
@@ -42,7 +42,6 @@ declare const Group: <Option, IsMulti extends boolean, Group extends GroupBase<O
|
|
|
42
42
|
interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends ForwardedHeadingProps<Option, Group> {
|
|
43
43
|
className?: string | undefined;
|
|
44
44
|
selectProps: SelectProps<Option, IsMulti, Group>;
|
|
45
|
-
theme: Theme;
|
|
46
45
|
getStyles: GetStyles<Option, IsMulti, Group>;
|
|
47
46
|
getClassNames: CommonProps<Option, IsMulti, Group>['getClassNames'];
|
|
48
47
|
cx: CX;
|