@atlaskit/select 21.1.1 → 21.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 (10) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/PopupSelect/PopupSelect.js +42 -2
  3. package/dist/cjs/Select.js +1 -1
  4. package/dist/es2019/PopupSelect/PopupSelect.js +42 -2
  5. package/dist/es2019/Select.js +1 -1
  6. package/dist/esm/PopupSelect/PopupSelect.js +42 -2
  7. package/dist/esm/Select.js +1 -1
  8. package/dist/types/PopupSelect/PopupSelect.d.ts +1 -1
  9. package/dist/types-ts4.5/PopupSelect/PopupSelect.d.ts +1 -1
  10. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 21.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 21.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#179366](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179366)
14
+ [`675f6b4bd17c3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/675f6b4bd17c3) -
15
+ Adds experimental changes to default popper behavior in `PopupSelect` behind the
16
+ `platform_dst_nav4_layering_in_main_slot_fixes` feature gate. When enabled, `PopupSelect` popups
17
+ will no longer slide across the trigger. Instead they will behave like other popups and stay
18
+ anchored next to the trigger.
19
+
3
20
  ## 21.1.1
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/PopupSelect/PopupSelect.js CHANGED
@@ -21,6 +21,7 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
21
21
  var _reactPopper = require("react-popper");
22
22
  var _shallowEqual = require("shallow-equal");
23
23
  var _useId = require("@atlaskit/ds-lib/use-id");
24
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
25
  var _reactSelect = require("@atlaskit/react-select");
25
26
  var _colors = require("@atlaskit/theme/colors");
26
27
  var _Select = _interopRequireDefault(require("../Select"));
@@ -62,10 +63,49 @@ var modifiers = [{
62
63
  altBoundary: true
63
64
  }
64
65
  }];
66
+
67
+ /**
68
+ * The new defaults match the default modifiers of `@atlaskit/popper`.
69
+ *
70
+ * In the future we should investigate using `@atlaskit/popper` instead of
71
+ * consuming `react-popper` directly.
72
+ *
73
+ * Previously the select popup would slide over the trigger to try to stay visible.
74
+ * This behavior could actually cause it to go offscreen.
75
+ *
76
+ * Now it will stay anchored above / below the trigger and cause the
77
+ * clipping parent to scroll if necessary. This aligns with other popups.
78
+ */
79
+ var newDefaultModifiers = [{
80
+ name: 'offset',
81
+ options: {
82
+ offset: [0, 8]
83
+ }
84
+ }, {
85
+ name: 'preventOverflow',
86
+ enabled: true,
87
+ options: {
88
+ padding: 5,
89
+ boundary: 'clippingParents',
90
+ rootBoundary: 'document'
91
+ }
92
+ }, {
93
+ name: 'flip',
94
+ options: {
95
+ flipVariations: false,
96
+ padding: 5,
97
+ boundary: 'clippingParents',
98
+ rootBoundary: 'viewport'
99
+ }
100
+ }];
65
101
  var defaultPopperProps = {
66
102
  modifiers: modifiers,
67
103
  placement: 'bottom-start'
68
104
  };
105
+ var newDefaultPopperProps = {
106
+ modifiers: newDefaultModifiers,
107
+ placement: 'bottom-start'
108
+ };
69
109
  var isEmpty = function isEmpty(obj) {
70
110
  return Object.keys(obj).length === 0;
71
111
  };
@@ -98,7 +138,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
98
138
  focusLockEnabled: false,
99
139
  isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
100
140
  mergedComponents: _components.defaultComponents,
101
- mergedPopperProps: defaultPopperProps
141
+ mergedPopperProps: (0, _platformFeatureFlags.fg)('platform_dst_nav4_layering_in_main_slot_fixes') ? newDefaultPopperProps : defaultPopperProps
102
142
  });
103
143
  // Event Handlers
104
144
  // ==============================
@@ -475,7 +515,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
475
515
  var newState = {};
476
516
 
477
517
  // Merge consumer and default popper props
478
- var mergedPopperProps = _objectSpread(_objectSpread({}, defaultPopperProps), props.popperProps);
518
+ var mergedPopperProps = _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform_dst_nav4_layering_in_main_slot_fixes') ? newDefaultPopperProps : defaultPopperProps), props.popperProps);
479
519
  if (!(0, _shallowEqual.shallowEqualObjects)(mergedPopperProps, state.mergedPopperProps)) {
480
520
  newState.mergedPopperProps = mergedPopperProps;
481
521
  }
package/dist/cjs/Select.js CHANGED
@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
11
11
  /* eslint-disable @repo/internal/react/require-jsdoc */
12
12
 
13
13
  var packageName = "@atlaskit/select";
14
- var packageVersion = "21.1.0";
14
+ var packageVersion = "21.2.0";
15
15
  var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
16
16
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
17
17
  var Select = (0, _analyticsNext.withAnalyticsContext)({
package/dist/es2019/PopupSelect/PopupSelect.js CHANGED
@@ -9,6 +9,7 @@ import FocusLock from 'react-focus-lock';
9
9
  import { Manager, Popper, Reference } from 'react-popper';
10
10
  import { shallowEqualObjects } from 'shallow-equal';
11
11
  import { IdProvider } from '@atlaskit/ds-lib/use-id';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
12
13
  import { mergeStyles } from '@atlaskit/react-select';
13
14
  import { N80 } from '@atlaskit/theme/colors';
14
15
  import Select from '../Select';
@@ -42,10 +43,49 @@ const modifiers = [{
42
43
  altBoundary: true
43
44
  }
44
45
  }];
46
+
47
+ /**
48
+ * The new defaults match the default modifiers of `@atlaskit/popper`.
49
+ *
50
+ * In the future we should investigate using `@atlaskit/popper` instead of
51
+ * consuming `react-popper` directly.
52
+ *
53
+ * Previously the select popup would slide over the trigger to try to stay visible.
54
+ * This behavior could actually cause it to go offscreen.
55
+ *
56
+ * Now it will stay anchored above / below the trigger and cause the
57
+ * clipping parent to scroll if necessary. This aligns with other popups.
58
+ */
59
+ const newDefaultModifiers = [{
60
+ name: 'offset',
61
+ options: {
62
+ offset: [0, 8]
63
+ }
64
+ }, {
65
+ name: 'preventOverflow',
66
+ enabled: true,
67
+ options: {
68
+ padding: 5,
69
+ boundary: 'clippingParents',
70
+ rootBoundary: 'document'
71
+ }
72
+ }, {
73
+ name: 'flip',
74
+ options: {
75
+ flipVariations: false,
76
+ padding: 5,
77
+ boundary: 'clippingParents',
78
+ rootBoundary: 'viewport'
79
+ }
80
+ }];
45
81
  const defaultPopperProps = {
46
82
  modifiers,
47
83
  placement: 'bottom-start'
48
84
  };
85
+ const newDefaultPopperProps = {
86
+ modifiers: newDefaultModifiers,
87
+ placement: 'bottom-start'
88
+ };
49
89
  const isEmpty = obj => Object.keys(obj).length === 0;
50
90
 
51
91
  // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -70,7 +110,7 @@ export default class PopupSelect extends PureComponent {
70
110
  focusLockEnabled: false,
71
111
  isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
72
112
  mergedComponents: defaultComponents,
73
- mergedPopperProps: defaultPopperProps
113
+ mergedPopperProps: fg('platform_dst_nav4_layering_in_main_slot_fixes') ? newDefaultPopperProps : defaultPopperProps
74
114
  });
75
115
  // Event Handlers
76
116
  // ==============================
@@ -382,7 +422,7 @@ export default class PopupSelect extends PureComponent {
382
422
 
383
423
  // Merge consumer and default popper props
384
424
  const mergedPopperProps = {
385
- ...defaultPopperProps,
425
+ ...(fg('platform_dst_nav4_layering_in_main_slot_fixes') ? newDefaultPopperProps : defaultPopperProps),
386
426
  ...props.popperProps
387
427
  };
388
428
  if (!shallowEqualObjects(mergedPopperProps, state.mergedPopperProps)) {
package/dist/es2019/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  const packageName = "@atlaskit/select";
6
- const packageVersion = "21.1.0";
6
+ const packageVersion = "21.2.0";
7
7
  export const SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  const Select = withAnalyticsContext({
package/dist/esm/PopupSelect/PopupSelect.js CHANGED
@@ -20,6 +20,7 @@ import FocusLock from 'react-focus-lock';
20
20
  import { Manager, Popper, Reference } from 'react-popper';
21
21
  import { shallowEqualObjects } from 'shallow-equal';
22
22
  import { IdProvider } from '@atlaskit/ds-lib/use-id';
23
+ import { fg } from '@atlaskit/platform-feature-flags';
23
24
  import { mergeStyles } from '@atlaskit/react-select';
24
25
  import { N80 } from '@atlaskit/theme/colors';
25
26
  import Select from '../Select';
@@ -55,10 +56,49 @@ var modifiers = [{
55
56
  altBoundary: true
56
57
  }
57
58
  }];
59
+
60
+ /**
61
+ * The new defaults match the default modifiers of `@atlaskit/popper`.
62
+ *
63
+ * In the future we should investigate using `@atlaskit/popper` instead of
64
+ * consuming `react-popper` directly.
65
+ *
66
+ * Previously the select popup would slide over the trigger to try to stay visible.
67
+ * This behavior could actually cause it to go offscreen.
68
+ *
69
+ * Now it will stay anchored above / below the trigger and cause the
70
+ * clipping parent to scroll if necessary. This aligns with other popups.
71
+ */
72
+ var newDefaultModifiers = [{
73
+ name: 'offset',
74
+ options: {
75
+ offset: [0, 8]
76
+ }
77
+ }, {
78
+ name: 'preventOverflow',
79
+ enabled: true,
80
+ options: {
81
+ padding: 5,
82
+ boundary: 'clippingParents',
83
+ rootBoundary: 'document'
84
+ }
85
+ }, {
86
+ name: 'flip',
87
+ options: {
88
+ flipVariations: false,
89
+ padding: 5,
90
+ boundary: 'clippingParents',
91
+ rootBoundary: 'viewport'
92
+ }
93
+ }];
58
94
  var defaultPopperProps = {
59
95
  modifiers: modifiers,
60
96
  placement: 'bottom-start'
61
97
  };
98
+ var newDefaultPopperProps = {
99
+ modifiers: newDefaultModifiers,
100
+ placement: 'bottom-start'
101
+ };
62
102
  var isEmpty = function isEmpty(obj) {
63
103
  return Object.keys(obj).length === 0;
64
104
  };
@@ -91,7 +131,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
91
131
  focusLockEnabled: false,
92
132
  isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
93
133
  mergedComponents: defaultComponents,
94
- mergedPopperProps: defaultPopperProps
134
+ mergedPopperProps: fg('platform_dst_nav4_layering_in_main_slot_fixes') ? newDefaultPopperProps : defaultPopperProps
95
135
  });
96
136
  // Event Handlers
97
137
  // ==============================
@@ -468,7 +508,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
468
508
  var newState = {};
469
509
 
470
510
  // Merge consumer and default popper props
471
- var mergedPopperProps = _objectSpread(_objectSpread({}, defaultPopperProps), props.popperProps);
511
+ var mergedPopperProps = _objectSpread(_objectSpread({}, fg('platform_dst_nav4_layering_in_main_slot_fixes') ? newDefaultPopperProps : defaultPopperProps), props.popperProps);
472
512
  if (!shallowEqualObjects(mergedPopperProps, state.mergedPopperProps)) {
473
513
  newState.mergedPopperProps = mergedPopperProps;
474
514
  }
package/dist/esm/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  var packageName = "@atlaskit/select";
6
- var packageVersion = "21.1.0";
6
+ var packageVersion = "21.2.0";
7
7
  export var SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  var Select = withAnalyticsContext({
package/dist/types/PopupSelect/PopupSelect.d.ts CHANGED
@@ -3,7 +3,7 @@ import { type UnbindFn } from 'bind-event-listener';
3
3
  import { type PopperProps } from 'react-popper';
4
4
  import { type GroupBase } from '@atlaskit/react-select';
5
5
  import { type ActionMeta, type AtlaskitSelectRefType, type OptionType, type ReactSelectProps, type StylesConfig, type ValidationState, type ValueType } from '../types';
6
- type defaultModifiers = 'offset' | 'preventOverflow';
6
+ type defaultModifiers = 'offset' | 'preventOverflow' | 'flip';
7
7
  type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
8
8
  interface PopupSelectTriggerProps {
9
9
  ref: any;
package/dist/types-ts4.5/PopupSelect/PopupSelect.d.ts CHANGED
@@ -3,7 +3,7 @@ import { type UnbindFn } from 'bind-event-listener';
3
3
  import { type PopperProps } from 'react-popper';
4
4
  import { type GroupBase } from '@atlaskit/react-select';
5
5
  import { type ActionMeta, type AtlaskitSelectRefType, type OptionType, type ReactSelectProps, type StylesConfig, type ValidationState, type ValueType } from '../types';
6
- type defaultModifiers = 'offset' | 'preventOverflow';
6
+ type defaultModifiers = 'offset' | 'preventOverflow' | 'flip';
7
7
  type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
8
8
  interface PopupSelectTriggerProps {
9
9
  ref: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "21.1.1",
3
+ "version": "21.2.1",
4
4
  "description": "Select allows users to make a single selection or multiple selections from a list of options.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -41,14 +41,14 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@atlaskit/analytics-next": "^11.1.0",
44
- "@atlaskit/ds-lib": "^4.0.0",
45
- "@atlaskit/icon": "^27.3.0",
44
+ "@atlaskit/ds-lib": "^5.0.0",
45
+ "@atlaskit/icon": "^27.6.0",
46
46
  "@atlaskit/platform-feature-flags": "^1.1.0",
47
47
  "@atlaskit/primitives": "^14.10.0",
48
48
  "@atlaskit/react-select": "^3.2.0",
49
49
  "@atlaskit/spinner": "^18.0.0",
50
50
  "@atlaskit/theme": "^19.0.0",
51
- "@atlaskit/tokens": "^5.4.0",
51
+ "@atlaskit/tokens": "^5.6.0",
52
52
  "@atlaskit/visually-hidden": "^3.0.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@compiled/react": "^0.18.3",
@@ -73,9 +73,9 @@
73
73
  "@atlaskit/form": "^12.0.0",
74
74
  "@atlaskit/link": "^3.2.0",
75
75
  "@atlaskit/logo": "^19.5.0",
76
- "@atlaskit/modal-dialog": "^14.2.0",
76
+ "@atlaskit/modal-dialog": "^14.3.0",
77
77
  "@atlaskit/radio": "^8.1.0",
78
- "@atlaskit/section-message": "^8.2.0",
78
+ "@atlaskit/section-message": "^8.3.0",
79
79
  "@atlassian/ssr-tests": "^0.2.0",
80
80
  "@testing-library/react": "^13.4.0",
81
81
  "@testing-library/user-event": "^14.4.3",
@@ -112,6 +112,9 @@
112
112
  },
113
113
  "platform_design_system_team_safari_input_fix": {
114
114
  "type": "boolean"
115
+ },
116
+ "platform_dst_nav4_layering_in_main_slot_fixes": {
117
+ "type": "boolean"
115
118
  }
116
119
  },
117
120
  "homepage": "https://atlassian.design/components/select/"