@atlaskit/react-select 2.7.6 → 3.0.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.
- package/CHANGELOG.md +33 -0
- package/dist/cjs/components/containers.compiled.css +26 -0
- package/dist/cjs/components/containers.js +80 -13
- package/dist/cjs/components/control.js +50 -9
- package/dist/cjs/components/group.js +60 -12
- package/dist/cjs/components/indicators.js +128 -15
- package/dist/cjs/components/input.js +50 -9
- package/dist/cjs/components/internal/a11y-text.js +14 -7
- package/dist/cjs/components/internal/dummy-input.js +21 -7
- package/dist/cjs/components/internal/required-input.js +24 -8
- package/dist/cjs/components/live-region.js +101 -7
- package/dist/cjs/components/menu.js +436 -27
- package/dist/cjs/components/multi-value.js +148 -22
- package/dist/cjs/components/option.js +41 -9
- package/dist/cjs/components/placeholder.js +29 -9
- package/dist/cjs/components/single-value.js +30 -9
- package/dist/cjs/select.js +1 -1
- package/dist/es2019/components/containers.compiled.css +26 -0
- package/dist/es2019/components/containers.js +93 -10
- package/dist/es2019/components/control.js +54 -8
- package/dist/es2019/components/group.js +67 -9
- package/dist/es2019/components/indicators.js +131 -11
- package/dist/es2019/components/input.js +53 -7
- package/dist/es2019/components/internal/a11y-text.js +12 -6
- package/dist/es2019/components/internal/dummy-input.js +19 -7
- package/dist/es2019/components/internal/required-input.js +22 -6
- package/dist/es2019/components/live-region.js +104 -6
- package/dist/es2019/components/menu.js +444 -19
- package/dist/es2019/components/multi-value.js +157 -15
- package/dist/es2019/components/option.js +45 -7
- package/dist/es2019/components/placeholder.js +33 -7
- package/dist/es2019/components/single-value.js +34 -7
- package/dist/es2019/select.js +1 -1
- package/dist/esm/components/containers.compiled.css +26 -0
- package/dist/esm/components/containers.js +78 -12
- package/dist/esm/components/control.js +51 -8
- package/dist/esm/components/group.js +60 -11
- package/dist/esm/components/indicators.js +127 -15
- package/dist/esm/components/input.js +50 -8
- package/dist/esm/components/internal/a11y-text.js +12 -6
- package/dist/esm/components/internal/dummy-input.js +20 -7
- package/dist/esm/components/internal/required-input.js +22 -7
- package/dist/esm/components/live-region.js +99 -6
- package/dist/esm/components/menu.js +437 -27
- package/dist/esm/components/multi-value.js +148 -21
- package/dist/esm/components/option.js +41 -8
- package/dist/esm/components/placeholder.js +29 -8
- package/dist/esm/components/single-value.js +30 -8
- package/dist/esm/select.js +1 -1
- package/dist/types/components/containers.d.ts +12 -8
- package/dist/types/components/control.d.ts +7 -3
- package/dist/types/components/group.d.ts +10 -6
- package/dist/types/components/index.d.ts +21 -21
- package/dist/types/components/indicators.d.ts +12 -8
- package/dist/types/components/input.d.ts +8 -4
- package/dist/types/components/internal/a11y-text.d.ts +2 -2
- package/dist/types/components/internal/dummy-input.d.ts +7 -3
- package/dist/types/components/internal/required-input.d.ts +4 -0
- package/dist/types/components/live-region.d.ts +0 -2
- package/dist/types/components/menu.d.ts +17 -13
- package/dist/types/components/multi-value.d.ts +13 -9
- package/dist/types/components/option.d.ts +8 -4
- package/dist/types/components/placeholder.d.ts +8 -4
- package/dist/types/components/single-value.d.ts +8 -4
- package/dist/types/select.d.ts +23 -25
- package/dist/types-ts4.5/components/containers.d.ts +12 -8
- package/dist/types-ts4.5/components/control.d.ts +7 -3
- package/dist/types-ts4.5/components/group.d.ts +10 -6
- package/dist/types-ts4.5/components/index.d.ts +21 -21
- package/dist/types-ts4.5/components/indicators.d.ts +12 -8
- package/dist/types-ts4.5/components/input.d.ts +8 -4
- package/dist/types-ts4.5/components/internal/a11y-text.d.ts +2 -2
- package/dist/types-ts4.5/components/internal/dummy-input.d.ts +7 -3
- package/dist/types-ts4.5/components/internal/required-input.d.ts +4 -0
- package/dist/types-ts4.5/components/live-region.d.ts +0 -2
- package/dist/types-ts4.5/components/menu.d.ts +17 -13
- package/dist/types-ts4.5/components/multi-value.d.ts +13 -9
- package/dist/types-ts4.5/components/option.d.ts +8 -4
- package/dist/types-ts4.5/components/placeholder.d.ts +8 -4
- package/dist/types-ts4.5/components/single-value.d.ts +8 -4
- package/dist/types-ts4.5/select.d.ts +23 -25
- package/package.json +3 -3
- package/dist/cjs/compiled/components/control.js +0 -65
- package/dist/cjs/compiled/components/group.js +0 -80
- package/dist/cjs/compiled/components/indicators.js +0 -158
- package/dist/cjs/compiled/components/input.js +0 -65
- package/dist/cjs/compiled/components/internal/a11y-text.js +0 -24
- package/dist/cjs/compiled/components/internal/dummy-input.js +0 -30
- package/dist/cjs/compiled/components/internal/required-input.js +0 -35
- package/dist/cjs/compiled/components/live-region.js +0 -117
- package/dist/cjs/compiled/components/menu.js +0 -489
- package/dist/cjs/compiled/components/multi-value.js +0 -173
- package/dist/cjs/compiled/components/option.js +0 -56
- package/dist/cjs/compiled/components/placeholder.js +0 -44
- package/dist/cjs/compiled/components/single-value.js +0 -45
- package/dist/cjs/emotion/components/containers.js +0 -117
- package/dist/cjs/emotion/components/control.js +0 -112
- package/dist/cjs/emotion/components/group.js +0 -72
- package/dist/cjs/emotion/components/indicators.js +0 -140
- package/dist/cjs/emotion/components/input.js +0 -94
- package/dist/cjs/emotion/components/internal/a11y-text.js +0 -37
- package/dist/cjs/emotion/components/internal/dummy-input.js +0 -45
- package/dist/cjs/emotion/components/internal/index.js +0 -34
- package/dist/cjs/emotion/components/internal/required-input.js +0 -45
- package/dist/cjs/emotion/components/internal/scroll-manager.js +0 -59
- package/dist/cjs/emotion/components/internal/use-scroll-capture.js +0 -132
- package/dist/cjs/emotion/components/internal/use-scroll-lock.js +0 -149
- package/dist/cjs/emotion/components/live-region.js +0 -120
- package/dist/cjs/emotion/components/menu.js +0 -456
- package/dist/cjs/emotion/components/multi-value.js +0 -199
- package/dist/cjs/emotion/components/option.js +0 -84
- package/dist/cjs/emotion/components/placeholder.js +0 -36
- package/dist/cjs/emotion/components/single-value.js +0 -42
- package/dist/es2019/compiled/components/control.js +0 -58
- package/dist/es2019/compiled/components/group.js +0 -72
- package/dist/es2019/compiled/components/indicators.js +0 -146
- package/dist/es2019/compiled/components/input.js +0 -56
- package/dist/es2019/compiled/components/internal/a11y-text.js +0 -13
- package/dist/es2019/compiled/components/internal/dummy-input.js +0 -20
- package/dist/es2019/compiled/components/internal/required-input.js +0 -25
- package/dist/es2019/compiled/components/live-region.js +0 -112
- package/dist/es2019/compiled/components/menu.js +0 -477
- package/dist/es2019/compiled/components/multi-value.js +0 -165
- package/dist/es2019/compiled/components/option.js +0 -48
- package/dist/es2019/compiled/components/placeholder.js +0 -36
- package/dist/es2019/compiled/components/single-value.js +0 -37
- package/dist/es2019/emotion/components/containers.js +0 -114
- package/dist/es2019/emotion/components/control.js +0 -108
- package/dist/es2019/emotion/components/group.js +0 -60
- package/dist/es2019/emotion/components/indicators.js +0 -131
- package/dist/es2019/emotion/components/input.js +0 -87
- package/dist/es2019/emotion/components/internal/a11y-text.js +0 -28
- package/dist/es2019/emotion/components/internal/dummy-input.js +0 -38
- package/dist/es2019/emotion/components/internal/index.js +0 -4
- package/dist/es2019/emotion/components/internal/required-input.js +0 -36
- package/dist/es2019/emotion/components/internal/scroll-manager.js +0 -51
- package/dist/es2019/emotion/components/internal/use-scroll-capture.js +0 -128
- package/dist/es2019/emotion/components/internal/use-scroll-lock.js +0 -143
- package/dist/es2019/emotion/components/live-region.js +0 -120
- package/dist/es2019/emotion/components/menu.js +0 -452
- package/dist/es2019/emotion/components/multi-value.js +0 -203
- package/dist/es2019/emotion/components/option.js +0 -79
- package/dist/es2019/emotion/components/placeholder.js +0 -29
- package/dist/es2019/emotion/components/single-value.js +0 -35
- package/dist/esm/compiled/components/control.js +0 -57
- package/dist/esm/compiled/components/group.js +0 -71
- package/dist/esm/compiled/components/indicators.js +0 -150
- package/dist/esm/compiled/components/input.js +0 -56
- package/dist/esm/compiled/components/internal/a11y-text.js +0 -15
- package/dist/esm/compiled/components/internal/dummy-input.js +0 -21
- package/dist/esm/compiled/components/internal/required-input.js +0 -26
- package/dist/esm/compiled/components/live-region.js +0 -109
- package/dist/esm/compiled/components/menu.js +0 -484
- package/dist/esm/compiled/components/multi-value.js +0 -162
- package/dist/esm/compiled/components/option.js +0 -47
- package/dist/esm/compiled/components/placeholder.js +0 -35
- package/dist/esm/compiled/components/single-value.js +0 -36
- package/dist/esm/emotion/components/containers.js +0 -110
- package/dist/esm/emotion/components/control.js +0 -104
- package/dist/esm/emotion/components/group.js +0 -66
- package/dist/esm/emotion/components/indicators.js +0 -135
- package/dist/esm/emotion/components/input.js +0 -90
- package/dist/esm/emotion/components/internal/a11y-text.js +0 -30
- package/dist/esm/emotion/components/internal/dummy-input.js +0 -39
- package/dist/esm/emotion/components/internal/index.js +0 -4
- package/dist/esm/emotion/components/internal/required-input.js +0 -37
- package/dist/esm/emotion/components/internal/scroll-manager.js +0 -51
- package/dist/esm/emotion/components/internal/use-scroll-capture.js +0 -126
- package/dist/esm/emotion/components/internal/use-scroll-lock.js +0 -143
- package/dist/esm/emotion/components/live-region.js +0 -117
- package/dist/esm/emotion/components/menu.js +0 -456
- package/dist/esm/emotion/components/multi-value.js +0 -193
- package/dist/esm/emotion/components/option.js +0 -76
- package/dist/esm/emotion/components/placeholder.js +0 -28
- package/dist/esm/emotion/components/single-value.js +0 -34
- package/dist/types/compiled/components/control.d.ts +0 -41
- package/dist/types/compiled/components/group.d.ts +0 -54
- package/dist/types/compiled/components/indicators.d.ts +0 -72
- package/dist/types/compiled/components/input.d.ts +0 -36
- package/dist/types/compiled/components/internal/a11y-text.d.ts +0 -3
- package/dist/types/compiled/components/internal/dummy-input.d.ts +0 -8
- package/dist/types/compiled/components/internal/required-input.d.ts +0 -10
- package/dist/types/compiled/components/live-region.d.ts +0 -17
- package/dist/types/compiled/components/menu.d.ts +0 -115
- package/dist/types/compiled/components/multi-value.d.ts +0 -57
- package/dist/types/compiled/components/option.d.ts +0 -48
- package/dist/types/compiled/components/placeholder.d.ts +0 -21
- package/dist/types/compiled/components/single-value.d.ts +0 -27
- package/dist/types/emotion/components/containers.d.ts +0 -54
- package/dist/types/emotion/components/control.d.ts +0 -42
- package/dist/types/emotion/components/group.d.ts +0 -52
- package/dist/types/emotion/components/indicators.d.ts +0 -73
- package/dist/types/emotion/components/input.d.ts +0 -37
- package/dist/types/emotion/components/internal/a11y-text.d.ts +0 -8
- package/dist/types/emotion/components/internal/dummy-input.d.ts +0 -9
- package/dist/types/emotion/components/internal/index.d.ts +0 -4
- package/dist/types/emotion/components/internal/required-input.d.ts +0 -10
- package/dist/types/emotion/components/internal/scroll-manager.d.ts +0 -17
- package/dist/types/emotion/components/internal/use-scroll-capture.d.ts +0 -12
- package/dist/types/emotion/components/internal/use-scroll-lock.d.ts +0 -9
- package/dist/types/emotion/components/live-region.d.ts +0 -23
- package/dist/types/emotion/components/menu.d.ts +0 -116
- package/dist/types/emotion/components/multi-value.d.ts +0 -47
- package/dist/types/emotion/components/option.d.ts +0 -49
- package/dist/types/emotion/components/placeholder.d.ts +0 -22
- package/dist/types/emotion/components/single-value.d.ts +0 -28
- package/dist/types-ts4.5/compiled/components/control.d.ts +0 -41
- package/dist/types-ts4.5/compiled/components/group.d.ts +0 -54
- package/dist/types-ts4.5/compiled/components/indicators.d.ts +0 -72
- package/dist/types-ts4.5/compiled/components/input.d.ts +0 -36
- package/dist/types-ts4.5/compiled/components/internal/a11y-text.d.ts +0 -3
- package/dist/types-ts4.5/compiled/components/internal/dummy-input.d.ts +0 -8
- package/dist/types-ts4.5/compiled/components/internal/required-input.d.ts +0 -10
- package/dist/types-ts4.5/compiled/components/live-region.d.ts +0 -17
- package/dist/types-ts4.5/compiled/components/menu.d.ts +0 -115
- package/dist/types-ts4.5/compiled/components/multi-value.d.ts +0 -57
- package/dist/types-ts4.5/compiled/components/option.d.ts +0 -48
- package/dist/types-ts4.5/compiled/components/placeholder.d.ts +0 -21
- package/dist/types-ts4.5/compiled/components/single-value.d.ts +0 -27
- package/dist/types-ts4.5/emotion/components/containers.d.ts +0 -54
- package/dist/types-ts4.5/emotion/components/control.d.ts +0 -42
- package/dist/types-ts4.5/emotion/components/group.d.ts +0 -52
- package/dist/types-ts4.5/emotion/components/indicators.d.ts +0 -73
- package/dist/types-ts4.5/emotion/components/input.d.ts +0 -37
- package/dist/types-ts4.5/emotion/components/internal/a11y-text.d.ts +0 -8
- package/dist/types-ts4.5/emotion/components/internal/dummy-input.d.ts +0 -9
- package/dist/types-ts4.5/emotion/components/internal/index.d.ts +0 -4
- package/dist/types-ts4.5/emotion/components/internal/required-input.d.ts +0 -10
- package/dist/types-ts4.5/emotion/components/internal/scroll-manager.d.ts +0 -17
- package/dist/types-ts4.5/emotion/components/internal/use-scroll-capture.d.ts +0 -12
- package/dist/types-ts4.5/emotion/components/internal/use-scroll-lock.d.ts +0 -9
- package/dist/types-ts4.5/emotion/components/live-region.d.ts +0 -23
- package/dist/types-ts4.5/emotion/components/menu.d.ts +0 -116
- package/dist/types-ts4.5/emotion/components/multi-value.d.ts +0 -47
- package/dist/types-ts4.5/emotion/components/option.d.ts +0 -49
- package/dist/types-ts4.5/emotion/components/placeholder.d.ts +0 -22
- package/dist/types-ts4.5/emotion/components/single-value.d.ts +0 -28
- /package/dist/cjs/{compiled/components → components}/control.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/group.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/indicators.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/input.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/internal/required-input.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/menu.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/multi-value.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/option.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/placeholder.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/single-value.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/control.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/group.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/indicators.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/input.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/internal/required-input.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/menu.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/multi-value.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/option.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/placeholder.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/single-value.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/control.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/group.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/indicators.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/input.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/internal/required-input.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/menu.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/multi-value.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/option.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/placeholder.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/single-value.compiled.css +0 -0
|
@@ -1,484 +0,0 @@
|
|
|
1
|
-
/* menu.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
4
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
5
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
6
|
-
var _excluded = ["children", "innerProps", "xcss"],
|
|
7
|
-
_excluded2 = ["children", "innerProps", "xcss"];
|
|
8
|
-
import "./menu.compiled.css";
|
|
9
|
-
import * as React from 'react';
|
|
10
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
11
|
-
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; }
|
|
12
|
-
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; }
|
|
13
|
-
import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
|
|
14
|
-
import { cx } from '@compiled/react';
|
|
15
|
-
import { autoUpdate } from '@floating-ui/dom';
|
|
16
|
-
import { createPortal } from 'react-dom';
|
|
17
|
-
import useLayoutEffect from 'use-isomorphic-layout-effect';
|
|
18
|
-
import { Text } from '@atlaskit/primitives/compiled';
|
|
19
|
-
import { animatedScrollTo, getBoundingClientObj, getScrollParent, getScrollTop, getStyleProps, normalizedHeight, scrollTo } from '../../utils';
|
|
20
|
-
|
|
21
|
-
// ==============================
|
|
22
|
-
// Menu
|
|
23
|
-
// ==============================
|
|
24
|
-
|
|
25
|
-
// Get Menu Placement
|
|
26
|
-
// ------------------------------
|
|
27
|
-
|
|
28
|
-
function getMenuPlacement(_ref) {
|
|
29
|
-
var preferredMaxHeight = _ref.maxHeight,
|
|
30
|
-
menuEl = _ref.menuEl,
|
|
31
|
-
minHeight = _ref.minHeight,
|
|
32
|
-
preferredPlacement = _ref.placement,
|
|
33
|
-
shouldScroll = _ref.shouldScroll,
|
|
34
|
-
isFixedPosition = _ref.isFixedPosition,
|
|
35
|
-
controlHeight = _ref.controlHeight;
|
|
36
|
-
var scrollParent = getScrollParent(menuEl);
|
|
37
|
-
var defaultState = {
|
|
38
|
-
placement: 'bottom',
|
|
39
|
-
maxHeight: preferredMaxHeight
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
// something went wrong, return default state
|
|
43
|
-
if (!menuEl || !menuEl.offsetParent) {
|
|
44
|
-
return defaultState;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// we can't trust `scrollParent.scrollHeight` --> it may increase when
|
|
48
|
-
// the menu is rendered
|
|
49
|
-
var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
|
|
50
|
-
scrollHeight = _scrollParent$getBoun.height;
|
|
51
|
-
var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
|
|
52
|
-
menuBottom = _menuEl$getBoundingCl.bottom,
|
|
53
|
-
menuHeight = _menuEl$getBoundingCl.height,
|
|
54
|
-
menuTop = _menuEl$getBoundingCl.top;
|
|
55
|
-
var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(),
|
|
56
|
-
containerTop = _menuEl$offsetParent$.top;
|
|
57
|
-
var viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
|
|
58
|
-
var scrollTop = getScrollTop(scrollParent);
|
|
59
|
-
var menuTopFromParent = menuTop;
|
|
60
|
-
var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
|
|
61
|
-
var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
|
|
62
|
-
var viewSpaceAbove = containerTop - marginTop;
|
|
63
|
-
var viewSpaceBelow = viewHeight - menuTopFromParent;
|
|
64
|
-
var scrollSpaceAbove = viewSpaceAbove + scrollTop;
|
|
65
|
-
var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
|
|
66
|
-
var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
|
|
67
|
-
var scrollUp = scrollTop + menuTop - marginTop;
|
|
68
|
-
var scrollDuration = 160;
|
|
69
|
-
switch (preferredPlacement) {
|
|
70
|
-
case 'auto':
|
|
71
|
-
case 'bottom':
|
|
72
|
-
// 1: the menu will fit, do nothing
|
|
73
|
-
if (viewSpaceBelow >= menuHeight) {
|
|
74
|
-
return {
|
|
75
|
-
placement: 'bottom',
|
|
76
|
-
maxHeight: preferredMaxHeight
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// 2: the menu will fit, if scrolled
|
|
81
|
-
if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
|
|
82
|
-
if (shouldScroll) {
|
|
83
|
-
animatedScrollTo(scrollParent, scrollDown, scrollDuration);
|
|
84
|
-
}
|
|
85
|
-
return {
|
|
86
|
-
placement: 'bottom',
|
|
87
|
-
maxHeight: preferredMaxHeight
|
|
88
|
-
};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// 3: the menu will fit, if constrained
|
|
92
|
-
if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) {
|
|
93
|
-
if (shouldScroll) {
|
|
94
|
-
animatedScrollTo(scrollParent, scrollDown, scrollDuration);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// we want to provide as much of the menu as possible to the user,
|
|
98
|
-
// so give them whatever is available below rather than the minHeight.
|
|
99
|
-
var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom;
|
|
100
|
-
return {
|
|
101
|
-
placement: 'bottom',
|
|
102
|
-
maxHeight: constrainedHeight
|
|
103
|
-
};
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// 4. Forked beviour when there isn't enough space below
|
|
107
|
-
|
|
108
|
-
// AUTO: flip the menu, render above
|
|
109
|
-
if (preferredPlacement === 'auto' || isFixedPosition) {
|
|
110
|
-
// may need to be constrained after flipping
|
|
111
|
-
var _constrainedHeight = preferredMaxHeight;
|
|
112
|
-
var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
|
|
113
|
-
if (spaceAbove >= minHeight) {
|
|
114
|
-
_constrainedHeight = Math.min(spaceAbove - marginBottom - controlHeight, preferredMaxHeight);
|
|
115
|
-
}
|
|
116
|
-
return {
|
|
117
|
-
placement: 'top',
|
|
118
|
-
maxHeight: _constrainedHeight
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
// BOTTOM: allow browser to increase scrollable area and immediately set scroll
|
|
123
|
-
if (preferredPlacement === 'bottom') {
|
|
124
|
-
if (shouldScroll) {
|
|
125
|
-
scrollTo(scrollParent, scrollDown);
|
|
126
|
-
}
|
|
127
|
-
return {
|
|
128
|
-
placement: 'bottom',
|
|
129
|
-
maxHeight: preferredMaxHeight
|
|
130
|
-
};
|
|
131
|
-
}
|
|
132
|
-
break;
|
|
133
|
-
case 'top':
|
|
134
|
-
// 1: the menu will fit, do nothing
|
|
135
|
-
if (viewSpaceAbove >= menuHeight) {
|
|
136
|
-
return {
|
|
137
|
-
placement: 'top',
|
|
138
|
-
maxHeight: preferredMaxHeight
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
// 2: the menu will fit, if scrolled
|
|
143
|
-
if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
|
|
144
|
-
if (shouldScroll) {
|
|
145
|
-
animatedScrollTo(scrollParent, scrollUp, scrollDuration);
|
|
146
|
-
}
|
|
147
|
-
return {
|
|
148
|
-
placement: 'top',
|
|
149
|
-
maxHeight: preferredMaxHeight
|
|
150
|
-
};
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
// 3: the menu will fit, if constrained
|
|
154
|
-
if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
|
|
155
|
-
var _constrainedHeight2 = preferredMaxHeight;
|
|
156
|
-
|
|
157
|
-
// we want to provide as much of the menu as possible to the user,
|
|
158
|
-
// so give them whatever is available below rather than the minHeight.
|
|
159
|
-
if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
|
|
160
|
-
_constrainedHeight2 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;
|
|
161
|
-
}
|
|
162
|
-
if (shouldScroll) {
|
|
163
|
-
animatedScrollTo(scrollParent, scrollUp, scrollDuration);
|
|
164
|
-
}
|
|
165
|
-
return {
|
|
166
|
-
placement: 'top',
|
|
167
|
-
maxHeight: _constrainedHeight2
|
|
168
|
-
};
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
// 4. not enough space, the browser WILL NOT increase scrollable area when
|
|
172
|
-
// absolutely positioned element rendered above the viewport (only below).
|
|
173
|
-
// Flip the menu, render below
|
|
174
|
-
return {
|
|
175
|
-
placement: 'bottom',
|
|
176
|
-
maxHeight: preferredMaxHeight
|
|
177
|
-
};
|
|
178
|
-
default:
|
|
179
|
-
throw new Error("Invalid placement provided \"".concat(preferredPlacement, "\"."));
|
|
180
|
-
}
|
|
181
|
-
return defaultState;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
// Menu Component
|
|
185
|
-
// ------------------------------
|
|
186
|
-
|
|
187
|
-
var coercePlacement = function coercePlacement(p) {
|
|
188
|
-
return p === 'auto' ? 'bottom' : p;
|
|
189
|
-
};
|
|
190
|
-
var menuStyles = {
|
|
191
|
-
root: "_2rkoglpi _kqswstnw _1bsb1osq _1pbykb7n _otyru2gc _19pku2gc _bfhk1bhr _16qsd0yg",
|
|
192
|
-
bottom: "_154i1osq",
|
|
193
|
-
top: "_94n51osq"
|
|
194
|
-
};
|
|
195
|
-
export var menuCSS = function menuCSS() {
|
|
196
|
-
return {};
|
|
197
|
-
};
|
|
198
|
-
var PortalPlacementContext = /*#__PURE__*/createContext(null);
|
|
199
|
-
|
|
200
|
-
// NOTE: internal only
|
|
201
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
202
|
-
export var MenuPlacer = function MenuPlacer(props) {
|
|
203
|
-
var children = props.children,
|
|
204
|
-
minMenuHeight = props.minMenuHeight,
|
|
205
|
-
maxMenuHeight = props.maxMenuHeight,
|
|
206
|
-
menuPlacement = props.menuPlacement,
|
|
207
|
-
menuPosition = props.menuPosition,
|
|
208
|
-
menuShouldScrollIntoView = props.menuShouldScrollIntoView;
|
|
209
|
-
var _ref2 = useContext(PortalPlacementContext) || {},
|
|
210
|
-
setPortalPlacement = _ref2.setPortalPlacement;
|
|
211
|
-
var ref = useRef(null);
|
|
212
|
-
var _useState = useState(maxMenuHeight),
|
|
213
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
214
|
-
maxHeight = _useState2[0],
|
|
215
|
-
setMaxHeight = _useState2[1];
|
|
216
|
-
var _useState3 = useState(null),
|
|
217
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
218
|
-
placement = _useState4[0],
|
|
219
|
-
setPlacement = _useState4[1];
|
|
220
|
-
// The minimum height of the control
|
|
221
|
-
var controlHeight = 38;
|
|
222
|
-
useLayoutEffect(function () {
|
|
223
|
-
var menuEl = ref.current;
|
|
224
|
-
if (!menuEl) {
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
// DO NOT scroll if position is fixed
|
|
229
|
-
var isFixedPosition = menuPosition === 'fixed';
|
|
230
|
-
var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
|
|
231
|
-
var state = getMenuPlacement({
|
|
232
|
-
maxHeight: maxMenuHeight,
|
|
233
|
-
menuEl: menuEl,
|
|
234
|
-
minHeight: minMenuHeight,
|
|
235
|
-
placement: menuPlacement,
|
|
236
|
-
shouldScroll: shouldScroll,
|
|
237
|
-
isFixedPosition: isFixedPosition,
|
|
238
|
-
controlHeight: controlHeight
|
|
239
|
-
});
|
|
240
|
-
setMaxHeight(state.maxHeight);
|
|
241
|
-
setPlacement(state.placement);
|
|
242
|
-
setPortalPlacement === null || setPortalPlacement === void 0 || setPortalPlacement(state.placement);
|
|
243
|
-
}, [maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, setPortalPlacement, controlHeight]);
|
|
244
|
-
return children({
|
|
245
|
-
ref: ref,
|
|
246
|
-
placerProps: _objectSpread(_objectSpread({}, props), {}, {
|
|
247
|
-
placement: placement || coercePlacement(menuPlacement),
|
|
248
|
-
maxHeight: maxHeight
|
|
249
|
-
})
|
|
250
|
-
});
|
|
251
|
-
};
|
|
252
|
-
var Menu = function Menu(props) {
|
|
253
|
-
var children = props.children,
|
|
254
|
-
innerRef = props.innerRef,
|
|
255
|
-
innerProps = props.innerProps,
|
|
256
|
-
_props$placement = props.placement,
|
|
257
|
-
placement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
|
258
|
-
xcss = props.xcss;
|
|
259
|
-
var _getStyleProps = getStyleProps(props, 'menu', {
|
|
260
|
-
menu: true
|
|
261
|
-
}),
|
|
262
|
-
css = _getStyleProps.css,
|
|
263
|
-
className = _getStyleProps.className;
|
|
264
|
-
return /*#__PURE__*/React.createElement("div", _extends({
|
|
265
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
266
|
-
className: ax([menuStyles.root, menuStyles[placement], cx(xcss, className, '-menu')])
|
|
267
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
268
|
-
,
|
|
269
|
-
style: css,
|
|
270
|
-
ref: innerRef
|
|
271
|
-
}, innerProps), children);
|
|
272
|
-
};
|
|
273
|
-
|
|
274
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
275
|
-
export default Menu;
|
|
276
|
-
|
|
277
|
-
// ==============================
|
|
278
|
-
// Menu List
|
|
279
|
-
// ==============================
|
|
280
|
-
|
|
281
|
-
export var menuListCSS = function menuListCSS() {
|
|
282
|
-
return {};
|
|
283
|
-
};
|
|
284
|
-
var menuListStyles = null;
|
|
285
|
-
|
|
286
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
287
|
-
export var MenuList = function MenuList(props) {
|
|
288
|
-
var children = props.children,
|
|
289
|
-
innerProps = props.innerProps,
|
|
290
|
-
innerRef = props.innerRef,
|
|
291
|
-
isMulti = props.isMulti,
|
|
292
|
-
maxHeight = props.maxHeight,
|
|
293
|
-
xcss = props.xcss;
|
|
294
|
-
var _getStyleProps2 = getStyleProps(props, 'menuList', {
|
|
295
|
-
'menu-list': true,
|
|
296
|
-
'menu-list--is-multi': isMulti
|
|
297
|
-
}),
|
|
298
|
-
css = _getStyleProps2.css,
|
|
299
|
-
className = _getStyleProps2.className;
|
|
300
|
-
return /*#__PURE__*/React.createElement("div", _extends({
|
|
301
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
302
|
-
className: ax(["_kqswh2mm _18m91wug _85i5u2gc _1q51u2gc _8am5i4x0", cx(className, xcss, '-MenuList')])
|
|
303
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
304
|
-
,
|
|
305
|
-
style: _objectSpread(_objectSpread({}, css), {}, {
|
|
306
|
-
maxHeight: maxHeight
|
|
307
|
-
}),
|
|
308
|
-
ref: innerRef
|
|
309
|
-
}, innerProps, {
|
|
310
|
-
tabIndex: -1
|
|
311
|
-
}), children);
|
|
312
|
-
};
|
|
313
|
-
|
|
314
|
-
// ==============================
|
|
315
|
-
// Menu Notices
|
|
316
|
-
// ==============================
|
|
317
|
-
|
|
318
|
-
var noticeCSS = function noticeCSS() {
|
|
319
|
-
return {};
|
|
320
|
-
};
|
|
321
|
-
var noticeStyles = null;
|
|
322
|
-
export var noOptionsMessageCSS = noticeCSS;
|
|
323
|
-
export var loadingMessageCSS = noticeCSS;
|
|
324
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
325
|
-
export var NoOptionsMessage = function NoOptionsMessage(_ref3) {
|
|
326
|
-
var _ref3$children = _ref3.children,
|
|
327
|
-
children = _ref3$children === void 0 ? 'No options' : _ref3$children,
|
|
328
|
-
innerProps = _ref3.innerProps,
|
|
329
|
-
xcss = _ref3.xcss,
|
|
330
|
-
restProps = _objectWithoutProperties(_ref3, _excluded);
|
|
331
|
-
var _getStyleProps3 = getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
332
|
-
children: children,
|
|
333
|
-
innerProps: innerProps
|
|
334
|
-
}), 'noOptionsMessage', {
|
|
335
|
-
'menu-notice': true,
|
|
336
|
-
'menu-notice--no-options': true
|
|
337
|
-
}),
|
|
338
|
-
css = _getStyleProps3.css,
|
|
339
|
-
className = _getStyleProps3.className;
|
|
340
|
-
return /*#__PURE__*/React.createElement("div", _extends({
|
|
341
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
342
|
-
className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss, '-NoOptionsMessage')])
|
|
343
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
344
|
-
,
|
|
345
|
-
style: css
|
|
346
|
-
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
347
|
-
,
|
|
348
|
-
role: "option"
|
|
349
|
-
}, innerProps), /*#__PURE__*/React.createElement(Text, {
|
|
350
|
-
color: "color.text.subtle"
|
|
351
|
-
}, children));
|
|
352
|
-
};
|
|
353
|
-
|
|
354
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
355
|
-
export var LoadingMessage = function LoadingMessage(_ref4) {
|
|
356
|
-
var _ref4$children = _ref4.children,
|
|
357
|
-
children = _ref4$children === void 0 ? 'Loading...' : _ref4$children,
|
|
358
|
-
innerProps = _ref4.innerProps,
|
|
359
|
-
xcss = _ref4.xcss,
|
|
360
|
-
restProps = _objectWithoutProperties(_ref4, _excluded2);
|
|
361
|
-
var _getStyleProps4 = getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
362
|
-
children: children,
|
|
363
|
-
innerProps: innerProps
|
|
364
|
-
}), 'loadingMessage', {
|
|
365
|
-
'menu-notice': true,
|
|
366
|
-
'menu-notice--loading': true
|
|
367
|
-
}),
|
|
368
|
-
css = _getStyleProps4.css,
|
|
369
|
-
className = _getStyleProps4.className;
|
|
370
|
-
return /*#__PURE__*/React.createElement("div", _extends({
|
|
371
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
372
|
-
className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss, '-LoadingMessage')])
|
|
373
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
374
|
-
,
|
|
375
|
-
style: css
|
|
376
|
-
}, innerProps, {
|
|
377
|
-
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
378
|
-
role: "option"
|
|
379
|
-
}), /*#__PURE__*/React.createElement(Text, {
|
|
380
|
-
color: "color.text.subtle"
|
|
381
|
-
}, children));
|
|
382
|
-
};
|
|
383
|
-
|
|
384
|
-
// ==============================
|
|
385
|
-
// Menu Portal
|
|
386
|
-
// ==============================
|
|
387
|
-
|
|
388
|
-
export var menuPortalCSS = function menuPortalCSS() {
|
|
389
|
-
return {};
|
|
390
|
-
};
|
|
391
|
-
var menuPortalStyles = {
|
|
392
|
-
root: "_1pbykb7n _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
|
|
393
|
-
};
|
|
394
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
395
|
-
export var MenuPortal = function MenuPortal(props) {
|
|
396
|
-
var appendTo = props.appendTo,
|
|
397
|
-
children = props.children,
|
|
398
|
-
controlElement = props.controlElement,
|
|
399
|
-
innerProps = props.innerProps,
|
|
400
|
-
menuPlacement = props.menuPlacement,
|
|
401
|
-
menuPosition = props.menuPosition,
|
|
402
|
-
xcss = props.xcss;
|
|
403
|
-
var menuPortalRef = useRef(null);
|
|
404
|
-
var cleanupRef = useRef(null);
|
|
405
|
-
var _useState5 = useState(coercePlacement(menuPlacement)),
|
|
406
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
407
|
-
placement = _useState6[0],
|
|
408
|
-
setPortalPlacement = _useState6[1];
|
|
409
|
-
var portalPlacementContext = useMemo(function () {
|
|
410
|
-
return {
|
|
411
|
-
setPortalPlacement: setPortalPlacement
|
|
412
|
-
};
|
|
413
|
-
}, []);
|
|
414
|
-
var _useState7 = useState(null),
|
|
415
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
416
|
-
computedPosition = _useState8[0],
|
|
417
|
-
setComputedPosition = _useState8[1];
|
|
418
|
-
var updateComputedPosition = useCallback(function () {
|
|
419
|
-
if (!controlElement) {
|
|
420
|
-
return;
|
|
421
|
-
}
|
|
422
|
-
var rect = getBoundingClientObj(controlElement);
|
|
423
|
-
var scrollDistance = menuPosition === 'fixed' ? 0 : window.pageYOffset;
|
|
424
|
-
var offset = rect[placement] + scrollDistance;
|
|
425
|
-
if (offset !== (computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset) || rect.left !== (computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.left) || rect.width !== (computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.width)) {
|
|
426
|
-
setComputedPosition({
|
|
427
|
-
offset: offset,
|
|
428
|
-
rect: rect
|
|
429
|
-
});
|
|
430
|
-
}
|
|
431
|
-
}, [controlElement, menuPosition, placement, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.left, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.width]);
|
|
432
|
-
useLayoutEffect(function () {
|
|
433
|
-
updateComputedPosition();
|
|
434
|
-
}, [updateComputedPosition]);
|
|
435
|
-
var runAutoUpdate = useCallback(function () {
|
|
436
|
-
if (typeof cleanupRef.current === 'function') {
|
|
437
|
-
cleanupRef.current();
|
|
438
|
-
cleanupRef.current = null;
|
|
439
|
-
}
|
|
440
|
-
if (controlElement && menuPortalRef.current) {
|
|
441
|
-
cleanupRef.current = autoUpdate(controlElement, menuPortalRef.current, updateComputedPosition, {
|
|
442
|
-
elementResize: 'ResizeObserver' in window
|
|
443
|
-
});
|
|
444
|
-
}
|
|
445
|
-
}, [controlElement, updateComputedPosition]);
|
|
446
|
-
useLayoutEffect(function () {
|
|
447
|
-
runAutoUpdate();
|
|
448
|
-
}, [runAutoUpdate]);
|
|
449
|
-
var setMenuPortalElement = useCallback(function (menuPortalElement) {
|
|
450
|
-
menuPortalRef.current = menuPortalElement;
|
|
451
|
-
runAutoUpdate();
|
|
452
|
-
}, [runAutoUpdate]);
|
|
453
|
-
|
|
454
|
-
// bail early if required elements aren't present
|
|
455
|
-
if (!appendTo && menuPosition !== 'fixed' || !computedPosition) {
|
|
456
|
-
return null;
|
|
457
|
-
}
|
|
458
|
-
var _getStyleProps5 = getStyleProps(_objectSpread(_objectSpread({}, props), {}, {
|
|
459
|
-
offset: computedPosition.offset,
|
|
460
|
-
position: menuPosition,
|
|
461
|
-
rect: computedPosition.rect
|
|
462
|
-
}), 'menuPortal', {
|
|
463
|
-
'menu-portal': true
|
|
464
|
-
}),
|
|
465
|
-
css = _getStyleProps5.css,
|
|
466
|
-
className = _getStyleProps5.className;
|
|
467
|
-
|
|
468
|
-
// same wrapper element whether fixed or portalled
|
|
469
|
-
var menuWrapper = /*#__PURE__*/React.createElement("div", _extends({
|
|
470
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
471
|
-
className: ax([menuPortalStyles.root, cx(className, xcss, '-MenuPortal')]),
|
|
472
|
-
ref: setMenuPortalElement,
|
|
473
|
-
style: _objectSpread({
|
|
474
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
475
|
-
'--menu-left': "".concat(computedPosition.rect.left, "px"),
|
|
476
|
-
'--menu-position': menuPosition,
|
|
477
|
-
'--menu-top': "".concat(computedPosition.offset, "px"),
|
|
478
|
-
'--menu-width': "".concat(computedPosition.rect.width, "px")
|
|
479
|
-
}, css)
|
|
480
|
-
}, innerProps), children);
|
|
481
|
-
return /*#__PURE__*/React.createElement(PortalPlacementContext.Provider, {
|
|
482
|
-
value: portalPlacementContext
|
|
483
|
-
}, appendTo ? /*#__PURE__*/createPortal(menuWrapper, appendTo) : menuWrapper);
|
|
484
|
-
};
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
/* multi-value.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
4
|
-
import "./multi-value.compiled.css";
|
|
5
|
-
import * as React from 'react';
|
|
6
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
7
|
-
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; }
|
|
8
|
-
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; }
|
|
9
|
-
import { cx } from '@compiled/react';
|
|
10
|
-
import CrossIcon from '@atlaskit/icon/core/close';
|
|
11
|
-
import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
12
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
|
-
import { getStyleProps } from '../../utils';
|
|
14
|
-
var multiValueStyles = {
|
|
15
|
-
root: "_2rkogqwt _1e0c1txw _1ul9ze3t _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _bfhkm7j4 _p12f1osq _syazjpor _3yq3glyw",
|
|
16
|
-
disabled: "_syaz1lh4 _bfhkm7j4",
|
|
17
|
-
focused: "_syaz1wum _bfhkfg4m _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1",
|
|
18
|
-
refresh: "_2rkoiti9 _1h6d14je _1dqonqa1 _189ee4h9 _bfhk1j9a"
|
|
19
|
-
};
|
|
20
|
-
export var multiValueCSS = function multiValueCSS() {
|
|
21
|
-
return {};
|
|
22
|
-
};
|
|
23
|
-
export var multiValueLabelCSS = function multiValueLabelCSS() {
|
|
24
|
-
return {};
|
|
25
|
-
};
|
|
26
|
-
var multiValueLabelStyles = {
|
|
27
|
-
root: "_1reo15vq _18m915vq _2rkogqwt _11c8dcr7 _o5721q9c _ca0qv77o _u5f3v77o _n3tdv77o _19bv12x7 _syaz1kw7",
|
|
28
|
-
disabled: "_syaz1lh4",
|
|
29
|
-
ellipsis: "_1bto1l2s",
|
|
30
|
-
refresh: "_11c82smr _ca0qidpf _n3tdidpf _19bv1b66"
|
|
31
|
-
};
|
|
32
|
-
export var multiValueRemoveCSS = function multiValueRemoveCSS() {
|
|
33
|
-
return {};
|
|
34
|
-
};
|
|
35
|
-
var multiValueRemoveStyles = {
|
|
36
|
-
focused: "_bfhkb1q9 _lswu1rrc",
|
|
37
|
-
root: "_2rkovtp2 _4cvr1h6o _1e0c1txw _lswu1dx5 _19bvv77o _u5f3v77o _irr31yvi _13br1jjn _1di61io2 _i5f81jjn",
|
|
38
|
-
refresh: "_19itglyw _2rkoglpi _bfhksm61 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _syaz1fxt _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _2hwxv77o _1ah312gs _irr3166n _1di61dty"
|
|
39
|
-
};
|
|
40
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
41
|
-
export var MultiValueContainer = function MultiValueContainer(_ref) {
|
|
42
|
-
var children = _ref.children,
|
|
43
|
-
innerProps = _ref.innerProps,
|
|
44
|
-
isFocused = _ref.isFocused,
|
|
45
|
-
isDisabled = _ref.isDisabled,
|
|
46
|
-
className = _ref.className,
|
|
47
|
-
xcss = _ref.xcss;
|
|
48
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
49
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
50
|
-
className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, fg('platform-component-visual-refresh') && multiValueStyles.refresh, cx(className, xcss, '-multiValue')])
|
|
51
|
-
}), children);
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
55
|
-
export var MultiValueLabel = function MultiValueLabel(_ref2) {
|
|
56
|
-
var children = _ref2.children,
|
|
57
|
-
innerProps = _ref2.innerProps,
|
|
58
|
-
isDisabled = _ref2.isDisabled,
|
|
59
|
-
hasEllipsis = _ref2.hasEllipsis,
|
|
60
|
-
className = _ref2.className,
|
|
61
|
-
xcss = _ref2.xcss;
|
|
62
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
63
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
64
|
-
className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, fg('platform-component-visual-refresh') && multiValueLabelStyles.refresh, cx(className, xcss, '-MultiValueLabel')])
|
|
65
|
-
}), children);
|
|
66
|
-
};
|
|
67
|
-
var disabledStyles = null;
|
|
68
|
-
var enabledStyles = null;
|
|
69
|
-
export function MultiValueRemove(_ref3) {
|
|
70
|
-
var isDisabled = _ref3.isDisabled,
|
|
71
|
-
isFocused = _ref3.isFocused,
|
|
72
|
-
innerProps = _ref3.innerProps,
|
|
73
|
-
className = _ref3.className,
|
|
74
|
-
xcss = _ref3.xcss;
|
|
75
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
76
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
77
|
-
className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, fg('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, cx(className, xcss, '-MultiValueRemove')])
|
|
78
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
79
|
-
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
|
|
80
|
-
className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
|
|
81
|
-
}, /*#__PURE__*/React.createElement(CrossIcon, {
|
|
82
|
-
label: "",
|
|
83
|
-
color: "currentColor",
|
|
84
|
-
LEGACY_fallbackIcon: LegacySelectClearIcon,
|
|
85
|
-
LEGACY_primaryColor: "transparent",
|
|
86
|
-
LEGACY_secondaryColor: "inherit",
|
|
87
|
-
LEGACY_size: "small",
|
|
88
|
-
size: "small"
|
|
89
|
-
})));
|
|
90
|
-
}
|
|
91
|
-
var MultiValue = function MultiValue(props) {
|
|
92
|
-
var children = props.children,
|
|
93
|
-
components = props.components,
|
|
94
|
-
data = props.data,
|
|
95
|
-
innerProps = props.innerProps,
|
|
96
|
-
isDisabled = props.isDisabled,
|
|
97
|
-
isFocused = props.isFocused,
|
|
98
|
-
removeProps = props.removeProps,
|
|
99
|
-
selectProps = props.selectProps,
|
|
100
|
-
cropWithEllipsis = props.cropWithEllipsis;
|
|
101
|
-
var Container = components.Container,
|
|
102
|
-
Label = components.Label,
|
|
103
|
-
Remove = components.Remove;
|
|
104
|
-
var ariaLabel = typeof children === 'string' ? children : data.label;
|
|
105
|
-
var _getStyleProps = getStyleProps(props, 'multiValue', {
|
|
106
|
-
'multi-value': true,
|
|
107
|
-
'multi-value--is-disabled': isDisabled
|
|
108
|
-
}),
|
|
109
|
-
containerCss = _getStyleProps.css,
|
|
110
|
-
containerClassName = _getStyleProps.className;
|
|
111
|
-
var _getStyleProps2 = getStyleProps(props, 'multiValueLabel', {
|
|
112
|
-
'multi-value__label': true
|
|
113
|
-
}),
|
|
114
|
-
labelCss = _getStyleProps2.css,
|
|
115
|
-
labelClassName = _getStyleProps2.className;
|
|
116
|
-
var _getStyleProps3 = getStyleProps(props, 'multiValueRemove', {
|
|
117
|
-
'multi-value__remove': true
|
|
118
|
-
}),
|
|
119
|
-
removeCss = _getStyleProps3.css,
|
|
120
|
-
removeClassName = _getStyleProps3.className;
|
|
121
|
-
return /*#__PURE__*/React.createElement(Container, {
|
|
122
|
-
data: data,
|
|
123
|
-
innerProps: _objectSpread({
|
|
124
|
-
style: containerCss,
|
|
125
|
-
className: containerClassName
|
|
126
|
-
}, innerProps)
|
|
127
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
128
|
-
,
|
|
129
|
-
className: containerClassName,
|
|
130
|
-
isFocused: isFocused,
|
|
131
|
-
isDisabled: isDisabled,
|
|
132
|
-
selectProps: selectProps
|
|
133
|
-
}, /*#__PURE__*/React.createElement(Label, {
|
|
134
|
-
data: data,
|
|
135
|
-
innerProps: {
|
|
136
|
-
style: labelCss,
|
|
137
|
-
className: labelClassName
|
|
138
|
-
}
|
|
139
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
140
|
-
,
|
|
141
|
-
className: labelClassName,
|
|
142
|
-
hasEllipsis: cropWithEllipsis || cropWithEllipsis === undefined,
|
|
143
|
-
selectProps: selectProps
|
|
144
|
-
}, children), /*#__PURE__*/React.createElement(Remove, {
|
|
145
|
-
data: data,
|
|
146
|
-
innerProps: _objectSpread({
|
|
147
|
-
style: removeCss,
|
|
148
|
-
className: removeClassName,
|
|
149
|
-
role: 'button',
|
|
150
|
-
tabIndex: -1,
|
|
151
|
-
'aria-label': "".concat(ariaLabel || 'option', ", remove")
|
|
152
|
-
}, removeProps)
|
|
153
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
154
|
-
,
|
|
155
|
-
className: removeClassName,
|
|
156
|
-
isDisabled: isDisabled,
|
|
157
|
-
selectProps: selectProps
|
|
158
|
-
}));
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
162
|
-
export default MultiValue;
|